Added delay on hover (vtex-apps#6)

AuchanRomania · Aug 8, 2022 · 3a9909a · 3a9909a
1 parent cf32fb8
commit 3a9909a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 34 deletions.
diff --git a/react/MegaMenu/components/HorizontalMenu.tsx b/react/MegaMenu/components/HorizontalMenu.tsx
@@ -7,7 +7,9 @@ import { injectIntl } from 'react-intl'
 import Skeleton from 'react-loading-skeleton'
 import { useCssHandles } from 'vtex.css-handles'
 import { formatIOMessage } from 'vtex.native-types'
+import _debounce from 'lodash/debounce'
 
+import type { MenuItem } from '../../shared'
 import { megaMenuState } from '../State'
 import styles from '../styles.css'
 import Item from './Item'
@@ -37,6 +39,17 @@ const HorizontalMenu: FC<InjectedIntlProps> = observer(({ intl }) => {
   // const departmentActiveHasCategories = !!departmentActive?.menu?.length
   const navRef = useRef<HTMLDivElement>(null)
 
+  const debouncedHandleMouseEnter = useCallback(
+    _debounce((department: MenuItem | null) => {
+      setDepartmentActive(department)
+    }, 400),
+    []
+  )
+
+  const handleOnMouseLeave = () => {
+    debouncedHandleMouseEnter.cancel()
+  }
+
   const handleClickOutside = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (event: any) => {
@@ -79,39 +92,45 @@ const HorizontalMenu: FC<InjectedIntlProps> = observer(({ intl }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultDepartmentActive])
 
-  const departmentItems = departments
-    .filter((j) => j.display)
-    .map((d) => {
-      const hasCategories = !!d.menu?.length
-
-      return (
-        <li
-          className={classNames(
-            handles.menuItem,
-            d.id === departmentActive?.id &&
-            `bg-black-05 ${handles.departmentActive}`
-          )}
-          key={d.id}
-          onMouseEnter={() => {
-            setDepartmentActive(d)
-          }}
-        >
-          <Item
-            id={d.id}
-            to={d.slug}
-            iconId={d.icon}
-            accordion={hasCategories}
-            className={classNames('pv3 mh5')}
-            style={d.styles}
-            enableStyle={d.enableSty}
-            closeMenu={openMenu}
-            uploadedIcon={d.uploadedIcon}
-          >
-            {d.name}
-          </Item>
-        </li>
-      )
-    })
+  const departmentItems = useMemo(
+    () =>
+      departments
+        .filter((j) => j.display)
+        .map((d) => {
+          const hasCategories = !!d.menu?.length
+
+          return (
+            <li
+              className={classNames(
+                handles.menuItem,
+                d.id === departmentActive?.id &&
+                `bg-black-05 ${handles.departmentActive}`
+              )}
+              key={d.id}
+              onMouseEnter={() => {
+                debouncedHandleMouseEnter(d)
+              }}
+              onMouseLeave={handleOnMouseLeave}
+            >
+              <Item
+                id={d.id}
+                to={d.slug}
+                iconId={d.icon}
+                accordion={hasCategories}
+                className={classNames('pv3 mh5')}
+                style={d.styles}
+                enableStyle={d.enableSty}
+                closeMenu={openMenu}
+                uploadedIcon={d.uploadedIcon}
+              >
+                {d.name}
+              </Item>
+            </li>
+          )
+        }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [departments, departmentActive]
+  )
 
   const loaderBlocks = useMemo(() => {
     const blocks: JSX.Element[] = []

diff --git a/react/package.json b/react/package.json
@@ -12,12 +12,14 @@
     "mobx-react-lite": "^3.2.0",
     "react-apollo": "^3.1.5",
     "react-csv-reader": "^3.4.0",
+    "lodash": "^4.17.20",
     "react-intl": "^5.20.6",
     "react-loading-skeleton": "^2.2.0"
   },
   "devDependencies": {
     "@types/node": "^11.12.1",
     "@types/react": "^16.8.10",
+    "@types/lodash": "^4.14.157",
     "@types/react-intl": "^2.3.17",
     "@vtex/test-tools": "^3.3.2",
     "@vtex/tsconfig": "^0.5.6",

diff --git a/react/yarn.lock b/react/yarn.lock
@@ -1563,6 +1563,11 @@
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
 
+"@types/lodash@^4.14.157":
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
+
 "@types/node@*", "@types/node@>=6":
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-15.6.1.tgz#32d43390d5c62c5b6ec486a9bc9c59544de39a08"
@@ -3873,7 +3878,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.15, lodash@^4.17.19:
+lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==