chore(web): move doubleClick with debounce to utils (#811)

reearth · Nov 14, 2023 · 80b65fa · 80b65fa
1 parent 770edb9
commit 80b65fa
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 49 deletions.
diff --git a/web/src/beta/features/Editor/tabs/map/BottomPanel/LayerStyleCard.tsx b/web/src/beta/features/Editor/tabs/map/BottomPanel/LayerStyleCard.tsx
@@ -1,10 +1,11 @@
-import { ReactNode, useCallback, useRef, useState } from "react";
+import { ReactNode, useCallback, useState } from "react";
 
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import Text from "@reearth/beta/components/Text";
 import type { LayerStyleNameUpdateProps } from "@reearth/beta/features/Editor/useLayerStyles";
+import useDoubleClick from "@reearth/beta/utils/use-double-click";
 import { styled } from "@reearth/services/theme";
 
 type Props = {
@@ -32,31 +33,11 @@ const LayerStyleCard: React.FC<Props> = ({
   const [isHovered, setIsHovered] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [newName, setNewName] = useState(name);
-  const clickTimeoutRef = useRef<NodeJS.Timeout>();
-  const clickedNameCount = useRef(0);
-
-  const handleClick = useCallback(() => {
-    console.log(clickedNameCount.current);
-    if (clickTimeoutRef.current) {
-      clearTimeout(clickTimeoutRef.current);
-    }
-    clickTimeoutRef.current = setTimeout(() => {
-      clickedNameCount.current = 0;
-      onSelect?.(!selected);
-    }, 100);
-  }, [onSelect, selected]);
-
-  const handleNameClick = useCallback(() => {
-    const newClickCount = clickedNameCount.current + 1;
-    console.log(newClickCount);
-    clickedNameCount.current = newClickCount;
-    // if (clickTimeoutRef.current) {
-    //   clearTimeout(clickTimeoutRef.current);
-    // }
-    if (clickedNameCount.current === 2) {
-      setIsEditing(true);
-    }
-  }, []);
+
+  const [handleSingleClick, handleDoubleClick] = useDoubleClick(
+    () => onSelect?.(!selected),
+    () => setIsEditing(true),
+  );
 
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);
@@ -100,7 +81,7 @@ const LayerStyleCard: React.FC<Props> = ({
     <Wrapper
       className={className}
       selected={selected}
-      onClick={handleClick}
+      onClick={handleSingleClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}>
       <MainWrapper>
@@ -129,7 +110,7 @@ const LayerStyleCard: React.FC<Props> = ({
             onExit={handleEditExit}
           />
         ) : (
-          <StyleName size="footnote" onDoubleClick={handleNameClick}>
+          <StyleName size="footnote" onDoubleClick={handleDoubleClick}>
             {name}
           </StyleName>
         )}

diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx
@@ -8,6 +8,7 @@ import type {
   LayerNameUpdateProps,
   LayerVisibilityUpdateProps,
 } from "@reearth/beta/features/Editor/useLayers";
+import useDoubleClick from "@reearth/beta/utils/use-double-click";
 import { styled } from "@reearth/services/theme";
 
 type LayerItemProps = {
@@ -36,28 +37,13 @@ const LayerItem = ({
   const [newValue, setNewValue] = useState(layerTitle);
   const [isVisible, setIsVisible] = useState(visible);
   const [value, setValue] = useState(isVisible ? "V" : "");
-  const [clickTimeoutId, setClickTimeoutId] = useState<any>(null);
 
   const handleActionMenuToggle = useCallback(() => setActionOpen(prev => !prev), []);
 
-  const handleClick = useCallback(() => {
-    if (clickTimeoutId) {
-      clearTimeout(clickTimeoutId);
-      setClickTimeoutId(null);
-    }
-    const timeoutId = setTimeout(() => {
-      onSelect();
-    }, 200);
-    setClickTimeoutId(timeoutId);
-  }, [onSelect, clickTimeoutId]);
-
-  const handleLayerTitleClick = useCallback(() => {
-    if (clickTimeoutId) {
-      clearTimeout(clickTimeoutId);
-      setClickTimeoutId(null);
-    }
-    setIsEditing(true);
-  }, [clickTimeoutId]);
+  const [handleSingleClick, handleDoubleClick] = useDoubleClick(
+    () => onSelect?.(),
+    () => setIsEditing(true),
+  );
 
   const handleChange = useCallback((newTitle: string) => setNewValue(newTitle), []);
 
@@ -96,7 +82,7 @@ const LayerItem = ({
       isSelected={isSelected}
       isOpenAction={isActionOpen}
       actionPlacement="bottom-end"
-      onItemClick={handleClick}
+      onItemClick={handleSingleClick}
       onActionClick={handleActionMenuToggle}
       onOpenChange={isOpen => setActionOpen(!!isOpen)}
       actionContent={
@@ -122,7 +108,7 @@ const LayerItem = ({
             onBlur={handleEditExit}
           />
         ) : (
-          <LayerTitle onDoubleClick={handleLayerTitleClick}>{layerTitle}</LayerTitle>
+          <LayerTitle onDoubleClick={handleDoubleClick}>{layerTitle}</LayerTitle>
         )}
         <HideLayer onClick={handleUpdateVisibility}>
           <Text size="footnote">{value}</Text>

diff --git a/web/src/beta/utils/use-double-click.ts b/web/src/beta/utils/use-double-click.ts
@@ -0,0 +1,33 @@
+import { useCallback, useRef } from "react";
+
+const useDoubleClick = (
+  onClick: (() => void) | undefined,
+  onDoubleClick: (() => void) | undefined,
+  delay = 200,
+): [() => void, () => void] => {
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const singleClickHandler = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    } else if (onClick) {
+      timerRef.current = setTimeout(() => {
+        onClick();
+        timerRef.current = null;
+      }, delay);
+    }
+  }, [onClick, delay]);
+
+  const doubleClickHandler = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    onDoubleClick?.();
+  }, [onDoubleClick]);
+
+  return [singleClickHandler, doubleClickHandler];
+};
+
+export default useDoubleClick;