From 82b865767d3a463cf55f5c0a4691209b11c89850 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 23 Sep 2022 18:02:03 +1000 Subject: [PATCH] Remove debounced hover interactions This reflects the changes made in #44271 for the RangeControl. --- .../src/slider-control/slider/hook.ts | 13 ---- .../src/slider-control/stories/index.tsx | 11 +-- .../src/slider-control/tooltip/hook.ts | 2 +- .../components/src/slider-control/types.ts | 12 --- .../components/src/slider-control/utils.ts | 76 +------------------ 5 files changed, 9 insertions(+), 105 deletions(-) diff --git a/packages/components/src/slider-control/slider/hook.ts b/packages/components/src/slider-control/slider/hook.ts index a7ea069545c37d..f13acd176ae433 100644 --- a/packages/components/src/slider-control/slider/hook.ts +++ b/packages/components/src/slider-control/slider/hook.ts @@ -10,7 +10,6 @@ import * as styles from '../styles'; import { COLORS, CONFIG } from '../../utils'; import { useContextSystem, WordPressComponentProps } from '../../ui/context'; import { useControlledValue, useCx } from '../../utils/hooks'; -import { useDebouncedHoverInteraction } from '../utils'; import { interpolate } from '../../utils/interpolate'; import { isValueNumeric } from '../../utils/values'; @@ -29,10 +28,6 @@ export function useSlider( onBlur = noop, onChange: onChangeProp = noop, onFocus = noop, - onHideTooltip = noop, - onMouseLeave = noop, - onMouseMove = noop, - onShowTooltip = noop, isFocused: isFocusedProp = false, max = 100, min = 0, @@ -85,13 +80,6 @@ export function useSlider( [ onFocus ] ); - const hoverInteractions = useDebouncedHoverInteraction( { - onHide: onHideTooltip, - onMouseLeave, - onMouseMove, - onShow: onShowTooltip, - } ); - // Interpolate the current value between 0 and 100, so that it can be used // to position the slider's thumb correctly. const progressPercentage = interpolate( @@ -131,7 +119,6 @@ export function useSlider( return { ...otherProps, - ...hoverInteractions, className: classes, max, min, diff --git a/packages/components/src/slider-control/stories/index.tsx b/packages/components/src/slider-control/stories/index.tsx index 9e3c509bae800b..1178fec5c0f064 100644 --- a/packages/components/src/slider-control/stories/index.tsx +++ b/packages/components/src/slider-control/stories/index.tsx @@ -18,11 +18,11 @@ const meta: ComponentMeta< typeof SliderControl > = { component: SliderControl, argTypes: { errorColor: { control: { type: 'color' } }, - onBlur: { action: 'onBlur', control: { type: null } }, - onChange: { action: 'onChange' }, - onFocus: { action: 'onFocus', control: { type: null } }, - onMouseLeave: { action: 'onMouseLeave', control: { type: null } }, - onMouseMove: { action: 'onMouseMove', control: { type: null } }, + onBlur: { control: { type: null } }, + onChange: { control: { type: null } }, + onFocus: { control: { type: null } }, + onMouseLeave: { control: { type: null } }, + onMouseMove: { control: { type: null } }, size: { control: 'radio', options: [ 'default', '__unstable-large' ], @@ -34,6 +34,7 @@ const meta: ComponentMeta< typeof SliderControl > = { value: { control: { type: null } }, }, parameters: { + actions: { argTypesRegex: '^on.*' }, controls: { expanded: true }, docs: { source: { state: 'open' } }, }, diff --git a/packages/components/src/slider-control/tooltip/hook.ts b/packages/components/src/slider-control/tooltip/hook.ts index 21aa537237eb6d..24d95c9cbbfb5e 100644 --- a/packages/components/src/slider-control/tooltip/hook.ts +++ b/packages/components/src/slider-control/tooltip/hook.ts @@ -19,7 +19,7 @@ function useTooltipPosition( { inputRef, tooltipPosition }: TooltipProps ) { if ( inputRef && inputRef.current ) { setPosition( tooltipPosition ); } - }, [ tooltipPosition ] ); + }, [ tooltipPosition, inputRef ] ); useEffect( () => { setTooltipPosition(); diff --git a/packages/components/src/slider-control/types.ts b/packages/components/src/slider-control/types.ts index 6b2abbfe5011d8..0a48535cbab6c7 100644 --- a/packages/components/src/slider-control/types.ts +++ b/packages/components/src/slider-control/types.ts @@ -64,12 +64,6 @@ export type SliderProps = SliderColors & { * Callback function when the `value` is committed. */ onChange?: ( value: number ) => void; - /** - * Callback for when the element is hidden. - * - * @default () => void - */ - onHideTooltip?: () => void; /** * Callback for when mouse exits the `RangeControl`. * @@ -82,12 +76,6 @@ export type SliderProps = SliderColors & { * @default () => void */ onMouseMove?: MouseEventHandler< HTMLInputElement >; - /** - * Callback for when the element is shown. - * - * @default () => void - */ - onShowTooltip?: () => void; /** * Toggles which sized height the slider is rendered at. * diff --git a/packages/components/src/slider-control/utils.ts b/packages/components/src/slider-control/utils.ts index 78657f9e32e7a0..dcc438a84cfab6 100644 --- a/packages/components/src/slider-control/utils.ts +++ b/packages/components/src/slider-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. @@ -68,65 +58,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(); - } - } ); - }, [] ); - - const handleOnMouseLeave = useCallback( ( event ) => { - onMouseLeave( event ); - - setDebouncedTimeout( () => { - setShow( false ); - onHide(); - } ); - }, [] ); - - useEffect( () => { - return () => { - window.clearTimeout( timeoutRef.current ); - }; - } ); - - return { - onMouseMove: handleOnMouseMove, - onMouseLeave: handleOnMouseLeave, - }; -}