Remove debounced hover interactions

This reflects the changes made in #44271 for the RangeControl.
WordPress · Oct 3, 2022 · 65edf54 · 65edf54
1 parent 7ba4124
commit 65edf54
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 105 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,25 +1,15 @@
-/**
- * External dependencies
- */
-import type { MouseEventHandler } from 'react';
-
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 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,
-	};
-}