Merge pull request #5659 from matuzalemsteles/dropdown-beta-1

fix(@clayui/drop-down): adds throttle to handle contextual menu visibility
liferay · Aug 11, 2023 · 1702ee5 · 1702ee5
2 parents 30607d0 + 4ed8469
commit 1702ee5
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 26 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -81,9 +81,9 @@ module.exports = {
 		},
 		'./packages/clay-drop-down/src/': {
 			branches: 57,
-			functions: 52,
+			functions: 51,
 			lines: 70,
-			statements: 70,
+			statements: 69,
 		},
 		'./packages/clay-empty-state/src/': {
 			branches: 75,

diff --git a/packages/clay-drop-down/src/DropDownWithItems.tsx b/packages/clay-drop-down/src/DropDownWithItems.tsx
@@ -9,11 +9,12 @@ import {
 	InternalDispatch,
 	Keys,
 	MouseSafeArea,
+	throttle,
 	useControlledState,
 	useNavigation,
 } from '@clayui/shared';
 import classNames from 'classnames';
-import React, {useContext, useRef, useState} from 'react';
+import React, {useCallback, useContext, useRef, useState} from 'react';
 import warning from 'warning';
 
 import Caption from './Caption';
@@ -305,6 +306,13 @@ const OFFSET_MAP = {
 	trtl: LEFT_OFFSET,
 };
 
+function offsetFn(points: any) {
+	return OFFSET_MAP[points.join('') as keyof typeof OFFSET_MAP] as [
+		number,
+		number
+	];
+}
+
 const Contextual = ({
 	items,
 	label,
@@ -338,6 +346,11 @@ const Contextual = ({
 		visible,
 	});
 
+	const setThrottleVisible = useCallback(
+		throttle((value: boolean) => setVisible(value), 100),
+		[]
+	);
+
 	return (
 		<ClayDropDown.Item
 			{...otherProps}
@@ -370,14 +383,14 @@ const Contextual = ({
 				if (!visible) {
 					keyboardRef.current = false;
 					timeoutHandleRef.current = setTimeout(
-						() => setVisible(true),
-						500
+						() => setThrottleVisible(true),
+						400
 					);
 				}
 			}}
 			onMouseLeave={() => {
 				keyboardRef.current = false;
-				setVisible(false);
+				setThrottleVisible(false);
 
 				clearTimeout(timeoutHandleRef.current);
 				timeoutHandleRef.current = null;
@@ -395,11 +408,7 @@ const Contextual = ({
 					alignmentPosition={8}
 					hasLeftSymbols={hasLeftSymbols}
 					hasRightSymbols={hasRightSymbols}
-					offsetFn={(points) =>
-						OFFSET_MAP[
-							points.join('') as keyof typeof OFFSET_MAP
-						] as [number, number]
-					}
+					offsetFn={offsetFn}
 					onActiveChange={setVisible}
 					onKeyDown={navigationProps.onKeyDown}
 					ref={menuElementRef}

diff --git a/packages/clay-shared/src/index.tsx b/packages/clay-shared/src/index.tsx
@@ -28,6 +28,7 @@ export {useHover} from './useHover';
 export {useIsMobileDevice} from './useIsMobileDevice';
 export {useIsFirstRender} from './useIsFirstRender';
 export {isMac, isIPhone, isIPad, isIOS, isAppleDevice} from './platform';
+export {throttle} from './throttle';
 export type {AlignPoints} from './useOverlayPositon';
 export type {IBaseProps as IPortalBaseProps} from './Portal';
 export type {InternalDispatch} from './useControlledState';
diff --git a/packages/clay-shared/src/throttle.ts b/packages/clay-shared/src/throttle.ts
@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export function throttle<T>(callback: Function, limit: number) {
+	var waiting = false;
+
+	return (...args: Array<T>) => {
+		if (!waiting) {
+			callback(...args);
+			waiting = true;
+
+			setTimeout(() => {
+				waiting = false;
+			}, limit);
+		}
+	};
+}
diff --git a/packages/clay-shared/src/useMousePosition.ts b/packages/clay-shared/src/useMousePosition.ts
@@ -5,22 +5,9 @@
 
 import {useEffect, useState} from 'react';
 
-type MousePosition = [number, number];
-
-function throttle<T>(callback: Function, limit: number) {
-	var waiting = false;
+import {throttle} from './throttle';
 
-	return (...args: Array<T>) => {
-		if (!waiting) {
-			callback(...args);
-			waiting = true;
-
-			setTimeout(() => {
-				waiting = false;
-			}, limit);
-		}
-	};
-}
+type MousePosition = [number, number];
 
 /**
  * Hook to get the current mouse position