From eaddd5c67f419ca29a2e0f02034dbeacb2004bbc Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 15 Sep 2022 16:12:53 -0400 Subject: [PATCH 1/7] RangeControl: add missing deps to tooltip useCallback --- packages/components/src/range-control/tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/range-control/tooltip.tsx b/packages/components/src/range-control/tooltip.tsx index 81aeb5489976f3..3c8403d1275c66 100644 --- a/packages/components/src/range-control/tooltip.tsx +++ b/packages/components/src/range-control/tooltip.tsx @@ -59,7 +59,7 @@ function useTooltipPosition( { inputRef, tooltipPosition }: TooltipProps ) { if ( inputRef && inputRef.current ) { setPosition( tooltipPosition ); } - }, [ tooltipPosition ] ); + }, [ tooltipPosition, inputRef ] ); useEffect( () => { setTooltipPosition(); From 4d18ff514a832311b94407d711c84550ace7ddc6 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 19 Sep 2022 11:42:19 -0400 Subject: [PATCH 2/7] RangeControl: add missing dep to useControlledRangeValue useCallback --- packages/components/src/range-control/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/range-control/utils.ts b/packages/components/src/range-control/utils.ts index 39cdc7b9f6f120..07d4a692a7020f 100644 --- a/packages/components/src/range-control/utils.ts +++ b/packages/components/src/range-control/utils.ts @@ -64,7 +64,7 @@ export function useControlledRangeValue( setInternalState( floatClamp( nextValue, min, max ) ); } }, - [ min, max ] + [ min, max, setInternalState ] ); // `state` can't be an empty string because we specified a fallback value of From 3c197bb41181603fa1ac978a2c5c544869d69bf5 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 19 Sep 2022 13:41:52 -0400 Subject: [PATCH 3/7] RangeControl: add missing deps to useDebouncedHoverInteraction useCallbacks --- .../components/src/range-control/utils.ts | 40 +++++++++++-------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/components/src/range-control/utils.ts b/packages/components/src/range-control/utils.ts index 07d4a692a7020f..7d7fcf00fea22b 100644 --- a/packages/components/src/range-control/utils.ts +++ b/packages/components/src/range-control/utils.ts @@ -102,25 +102,31 @@ export function useDebouncedHoverInteraction( [ timeout ] ); - const handleOnMouseMove = useCallback( ( event ) => { - onMouseMove( event ); - - setDebouncedTimeout( () => { - if ( ! show ) { - setShow( true ); - onShow(); - } - } ); - }, [] ); + const handleOnMouseMove = useCallback( + ( event ) => { + onMouseMove( event ); + + setDebouncedTimeout( () => { + if ( ! show ) { + setShow( true ); + onShow(); + } + } ); + }, + [ onMouseMove, onShow, setDebouncedTimeout, show ] + ); - const handleOnMouseLeave = useCallback( ( event ) => { - onMouseLeave( event ); + const handleOnMouseLeave = useCallback( + ( event ) => { + onMouseLeave( event ); - setDebouncedTimeout( () => { - setShow( false ); - onHide(); - } ); - }, [] ); + setDebouncedTimeout( () => { + setShow( false ); + onHide(); + } ); + }, + [ onHide, onMouseLeave, setDebouncedTimeout ] + ); useEffect( () => { return () => { From a4903580a3d60757b8fc1870d59b9ed39f616971 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 19 Sep 2022 13:48:13 -0400 Subject: [PATCH 4/7] Components: update CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7ac88b7cab5124..a0fdd185934920 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,6 +13,7 @@ ### Internal - `NavigationMenu` updated to ignore `react/exhaustive-deps` eslint rule ([#44090](https://github.com/WordPress/gutenberg/pull/44090)). +- `RangeControl`: updated to pass `react/exhaustive-deps` eslint rule ([#44271](https://github.com/WordPress/gutenberg/pull/44271)). ## 21.0.0 (2022-09-13) From 9b8158f3560aaa05e92f25d91aea50c4cf9d993b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 20 Sep 2022 18:06:24 +0200 Subject: [PATCH 5/7] Remove unused show/hide tooltip logic and the whole `useDebouncedHoverInteraction` hook --- .../src/range-control/input-range.tsx | 22 +----- .../components/src/range-control/types.ts | 2 - .../components/src/range-control/utils.ts | 68 ------------------- 3 files changed, 1 insertion(+), 91 deletions(-) diff --git a/packages/components/src/range-control/input-range.tsx b/packages/components/src/range-control/input-range.tsx index d7aaa028e6eb8f..3b663309918ae1 100644 --- a/packages/components/src/range-control/input-range.tsx +++ b/packages/components/src/range-control/input-range.tsx @@ -7,39 +7,19 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import { InputRange as BaseInputRange } from './styles/range-control-styles'; -import { useDebouncedHoverInteraction } from './utils'; import type { InputRangeProps } from './types'; import type { WordPressComponentProps } from '../ui/context'; -const noop = () => {}; - function InputRange( props: WordPressComponentProps< InputRangeProps, 'input' >, ref: React.ForwardedRef< HTMLInputElement > ) { - const { - describedBy, - label, - onHideTooltip = noop, - onMouseLeave = noop, - onMouseMove = noop, - onShowTooltip = noop, - value, - ...otherProps - } = props; - - const hoverInteractions = useDebouncedHoverInteraction( { - onHide: onHideTooltip, - onMouseLeave, - onMouseMove, - onShow: onShowTooltip, - } ); + const { describedBy, label, value, ...otherProps } = props; return ( void; onMouseLeave?: MouseEventHandler< HTMLInputElement >; onMouseMove?: MouseEventHandler< HTMLInputElement >; - onShowTooltip?: () => void; value?: number | ''; }; diff --git a/packages/components/src/range-control/utils.ts b/packages/components/src/range-control/utils.ts index 7d7fcf00fea22b..b8c32d8b61f717 100644 --- a/packages/components/src/range-control/utils.ts +++ b/packages/components/src/range-control/utils.ts @@ -71,71 +71,3 @@ export function useControlledRangeValue( // `null` in `useControlledState` return [ state as Exclude< typeof state, '' >, setState ] as const; } - -/** - * Hook to encapsulate the debouncing "hover" to better handle the showing - * and hiding of the Tooltip. - * - * @param settings - * @return Bound properties for use on a React.Node. - */ -export function useDebouncedHoverInteraction( - settings: UseDebouncedHoverInteractionArgs -) { - const { - onHide = noop, - onMouseLeave = noop as MouseEventHandler, - onMouseMove = noop as MouseEventHandler, - onShow = noop, - timeout = 300, - } = settings; - - const [ show, setShow ] = useState( false ); - const timeoutRef = useRef< number | undefined >(); - - const setDebouncedTimeout = useCallback( - ( callback ) => { - window.clearTimeout( timeoutRef.current ); - - timeoutRef.current = window.setTimeout( callback, timeout ); - }, - [ timeout ] - ); - - const handleOnMouseMove = useCallback( - ( event ) => { - onMouseMove( event ); - - setDebouncedTimeout( () => { - if ( ! show ) { - setShow( true ); - onShow(); - } - } ); - }, - [ onMouseMove, onShow, setDebouncedTimeout, show ] - ); - - const handleOnMouseLeave = useCallback( - ( event ) => { - onMouseLeave( event ); - - setDebouncedTimeout( () => { - setShow( false ); - onHide(); - } ); - }, - [ onHide, onMouseLeave, setDebouncedTimeout ] - ); - - useEffect( () => { - return () => { - window.clearTimeout( timeoutRef.current ); - }; - } ); - - return { - onMouseMove: handleOnMouseMove, - onMouseLeave: handleOnMouseLeave, - }; -} From f5d32a28790317e5dd5b43f529917f395aa693e6 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 20 Sep 2022 18:06:56 +0200 Subject: [PATCH 6/7] Use Storybook actions for all `on.*` props on RangeControl --- packages/components/src/range-control/stories/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/range-control/stories/index.tsx b/packages/components/src/range-control/stories/index.tsx index 729b156e381649..587231c03f3d25 100644 --- a/packages/components/src/range-control/stories/index.tsx +++ b/packages/components/src/range-control/stories/index.tsx @@ -35,7 +35,7 @@ const meta: ComponentMeta< typeof RangeControl > = { icon: { control: { type: null } }, marks: { control: { type: 'object' } }, onBlur: { control: { type: null } }, - onChange: { action: 'onChange' }, + onChange: { control: { type: null } }, onFocus: { control: { type: null } }, onMouseLeave: { control: { type: null } }, onMouseMove: { control: { type: null } }, @@ -46,6 +46,7 @@ const meta: ComponentMeta< typeof RangeControl > = { value: { control: { type: null } }, }, parameters: { + actions: { argTypesRegex: '^on.*' }, controls: { expanded: true }, docs: { source: { state: 'open' } }, }, From 274eddf124e08d4c791e9ad51b4f031ac9e5ad78 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 20 Sep 2022 18:12:16 +0200 Subject: [PATCH 7/7] Cleanup unused imports --- packages/components/src/range-control/utils.ts | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/components/src/range-control/utils.ts b/packages/components/src/range-control/utils.ts index b8c32d8b61f717..a80c8dffdffa1c 100644 --- a/packages/components/src/range-control/utils.ts +++ b/packages/components/src/range-control/utils.ts @@ -1,12 +1,7 @@ -/** - * External dependencies - */ -import type { MouseEventHandler } from 'react'; - /** * WordPress dependencies */ -import { useCallback, useRef, useEffect, useState } from '@wordpress/element'; +import { useCallback } from '@wordpress/element'; /** * Internal dependencies @@ -14,12 +9,7 @@ import { useCallback, useRef, useEffect, useState } from '@wordpress/element'; import { useControlledState } from '../utils/hooks'; import { clamp } from '../utils/math'; -import type { - UseControlledRangeValueArgs, - UseDebouncedHoverInteractionArgs, -} from './types'; - -const noop = () => {}; +import type { UseControlledRangeValueArgs } from './types'; /** * A float supported clamp function for a specific value.