diff --git a/CHANGELOG.md b/CHANGELOG.md index 9560551333..b221b86c65 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix `toggle` changing width during animation in Teams theme @mnajdova ([#2189](https://github.com/microsoft/fluent-ui-react/pull/2189)) - Fix `Popup` positioning in multiple cases @layershifter ([#2187](https://github.com/microsoft/fluent-ui-react/pull/2187)) - Fix click outside in `Popup` when `trigger` is not defined @layershifter ([#2202](https://github.com/microsoft/fluent-ui-react/pull/2202)) +- Use `debounce` from `lodash` in `Dropdown` and `Carouel` @silviuavram ([#2203](https://github.com/microsoft/fluent-ui-react/pull/2203)) ## [v0.42.0](https://github.com/microsoft/fluent-ui-react/tree/v0.42.0) (2019-12-12) diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index 14d84d1d19..fbf6a85812 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -15,7 +15,6 @@ import { ChildrenComponentProps, getOrGenerateIdFromShorthand, AutoControlledComponent, - debounce, } from '../../utils' import { WithAsProp, @@ -171,6 +170,10 @@ class Carousel extends AutoControlledComponent, Carous } } + componentWillUnmount() { + this.focusItemAtIndex.cancel() + } + actionHandlers = { showNextSlideByKeyboardNavigation: e => { e.preventDefault() @@ -213,8 +216,7 @@ class Carousel extends AutoControlledComponent, Carous itemRefs = [] as React.RefObject[] paddleNextRef = React.createRef() paddlePreviousRef = React.createRef() - - focusItemAtIndex = debounce((index: number) => { + focusItemAtIndex = _.debounce((index: number) => { this.itemRefs[index].current.focus() }, 400) diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx index 4730bb9014..3f6afa4a74 100644 --- a/packages/react/src/components/Dropdown/Dropdown.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.tsx @@ -344,6 +344,11 @@ class Dropdown extends AutoControlledComponent, Dropdo static SearchInput = DropdownSearchInput static SelectedItem = DropdownSelectedItem + componentWillUnmount() { + this.clearStartingString.cancel() + this.clearA11ySelectionMessage.cancel() + } + getInitialAutoControlledState({ multiple, search }: DropdownProps): DropdownState { return { a11ySelectionStatus: '', @@ -361,15 +366,8 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - a11yStatusTimeout: any - charKeysPressedTimeout: any defaultTriggerButtonId = _.uniqueId('dropdown-trigger-button-') - componentWillUnmount() { - clearTimeout(this.a11yStatusTimeout) - clearTimeout(this.charKeysPressedTimeout) - } - /** * Used to compute the filtered items (by value and search query) and, if needed, * their string equivalents, in order to be used throughout the component. @@ -1348,20 +1346,22 @@ class Dropdown extends AutoControlledComponent, Dropdo * so it is not read anymore via virtual cursor. */ setA11ySelectionMessage = (a11ySelectionStatus: string): void => { - clearTimeout(this.a11yStatusTimeout) this.setState({ a11ySelectionStatus }) - this.a11yStatusTimeout = setTimeout(() => { - this.setState({ a11ySelectionStatus: '' }) - }, Dropdown.a11yStatusCleanupTime) + this.clearA11ySelectionMessage() } setStartingString = (startingString: string): void => { - clearTimeout(this.charKeysPressedTimeout) this.setState({ startingString }) - this.charKeysPressedTimeout = setTimeout(() => { - this.setState({ startingString: '' }) - }, Dropdown.charKeyPressedCleanupTime) + this.clearStartingString() } + + clearA11ySelectionMessage = _.debounce(() => { + this.setState({ a11ySelectionStatus: '' }) + }, Dropdown.a11yStatusCleanupTime) + + clearStartingString = _.debounce(() => { + this.setState({ startingString: '' }) + }, Dropdown.charKeyPressedCleanupTime) } Dropdown.slotClassNames = { diff --git a/packages/react/src/utils/index.ts b/packages/react/src/utils/index.ts index ed6747f5d9..67da602b32 100644 --- a/packages/react/src/utils/index.ts +++ b/packages/react/src/utils/index.ts @@ -49,4 +49,3 @@ export module commonPropTypes { export { default as withDebugId } from './withDebugId' export { default as Telemetry } from './Telemetry' -export { default as debounce } from './debounce' diff --git a/packages/react/src/utils/debounce.ts b/packages/react/test/__mocks__/lodash.ts similarity index 72% rename from packages/react/src/utils/debounce.ts rename to packages/react/test/__mocks__/lodash.ts index e7c0de387e..1a39df4060 100644 --- a/packages/react/src/utils/debounce.ts +++ b/packages/react/test/__mocks__/lodash.ts @@ -1,12 +1,12 @@ -const debounce = (fn: Function, time: number): Function => { +// @ts-ignore +export * from 'lodash' +export const debounce = (fn: Function, time: number): Function => { let timeoutId - function cancel() { if (timeoutId) { clearTimeout(timeoutId) } } - function wrapper(...args) { cancel() timeoutId = setTimeout(() => { @@ -14,10 +14,6 @@ const debounce = (fn: Function, time: number): Function => { fn(...args) }, time) } - wrapper.cancel = cancel - return wrapper } - -export default debounce diff --git a/packages/react/test/specs/components/Dropdown/Dropdown-test.tsx b/packages/react/test/specs/components/Dropdown/Dropdown-test.tsx index e2baae6399..5f4b50c058 100644 --- a/packages/react/test/specs/components/Dropdown/Dropdown-test.tsx +++ b/packages/react/test/specs/components/Dropdown/Dropdown-test.tsx @@ -13,6 +13,7 @@ import { ShorthandValue } from 'src/types' jest.dontMock('keyboard-key') jest.useFakeTimers() +// jest.mock('lodash') const getTriggerButtonWrapper = (wrapper: ReactWrapper): CommonWrapper => findIntrinsicElement(wrapper, `.${Dropdown.slotClassNames.triggerButton}`)