abstract logic into a custom hook

agneym · Dec 16, 2019 · 303b0e8 · 303b0e8
1 parent d7cf1e0
commit 303b0e8
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 49 deletions.
diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx
@@ -1,12 +1,6 @@
-import React, {
-  FC,
-  ReactNode,
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-} from "react";
+import React, { FC, ReactNode, useRef } from "react";
 import styled from "styled-components";
+import useDrag from "./useDrag";
 
 const Container = styled.div`
   display: flex;
@@ -29,51 +23,18 @@ interface IProps {
 const Draggable: FC<IProps> = ({ className = "", leftChild, rightChild }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const dividerRef = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState(0);
-  const [containerRect, setContainerRect] = useState<DOMRect | null>(null);
 
-  useEffect(() => {
-    const containerEl = containerRef.current;
-    if (containerEl) {
-      const fullWidth = containerEl.clientWidth;
-      const containerRect = containerEl.getBoundingClientRect();
-      setContainerRect(containerRect);
-      setWidth(fullWidth / 2);
-    }
-  }, []);
-  const keepDragging = useCallback(
-    (event: MouseEvent) => {
-      const { clientX } = event;
-      if (containerRect) {
-        setWidth(clientX - containerRect.left);
-      }
-    },
-    [containerRect]
-  );
-  const stopDrag = useCallback(() => {
-    document.removeEventListener("mousemove", keepDragging);
-    document.removeEventListener("mouseup", stopDrag);
-  }, [keepDragging]);
-  const startDrag = useCallback(() => {
-    document.addEventListener("mousemove", keepDragging);
-    document.addEventListener("mouseup", stopDrag);
-  }, [keepDragging, stopDrag]);
-  useEffect(() => {
-    const dividerEl = dividerRef.current;
-    if (dividerEl) {
-      dividerEl.addEventListener("mousedown", startDrag);
-    }
-    return () => {
-      if (dividerEl) {
-        dividerEl.removeEventListener("mousedown", startDrag);
-      }
-    };
-  }, [startDrag]);
+  const { leftWidth, rightWidth } = useDrag({
+    containerRef,
+    dividerRef,
+    dividerWidth: DIVIDER_WIDTH,
+  });
+
   return (
     <Container className={className} ref={containerRef}>
-      {leftChild(width)}
+      {leftChild(leftWidth)}
       <Divider ref={dividerRef} />
-      {containerRect && rightChild(containerRect.width - width - DIVIDER_WIDTH)}
+      {rightChild(rightWidth)}
     </Container>
   );
 };

diff --git a/playground/src/Draggable/useDrag.ts b/playground/src/Draggable/useDrag.ts
@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback, RefObject } from "react";
+
+interface IProps {
+  containerRef: RefObject<HTMLDivElement | null>;
+  dividerRef: RefObject<HTMLDivElement | null>;
+  dividerWidth: number;
+}
+
+function useDrag({ containerRef, dividerRef, dividerWidth }: IProps) {
+  const [width, setWidth] = useState(0);
+  const [containerRect, setContainerRect] = useState<DOMRect | null>(null);
+
+  useEffect(() => {
+    const containerEl = containerRef.current;
+    if (containerEl) {
+      const fullWidth = containerEl.clientWidth;
+      const containerRect = containerEl.getBoundingClientRect();
+      setContainerRect(containerRect);
+      setWidth(fullWidth / 2);
+    }
+  }, []);
+  const keepDragging = useCallback(
+    (event: MouseEvent) => {
+      const { clientX } = event;
+      if (containerRect) {
+        setWidth(clientX - containerRect.left);
+      }
+    },
+    [containerRect]
+  );
+  const stopDrag = useCallback(() => {
+    document.removeEventListener("mousemove", keepDragging);
+    document.removeEventListener("mouseup", stopDrag);
+  }, [keepDragging]);
+  const startDrag = useCallback(() => {
+    document.addEventListener("mousemove", keepDragging);
+    document.addEventListener("mouseup", stopDrag);
+  }, [keepDragging, stopDrag]);
+  useEffect(() => {
+    const dividerEl = dividerRef.current;
+    if (dividerEl) {
+      dividerEl.addEventListener("mousedown", startDrag);
+    }
+    return () => {
+      if (dividerEl) {
+        dividerEl.removeEventListener("mousedown", startDrag);
+      }
+    };
+  }, [startDrag]);
+
+  return {
+    leftWidth: width,
+    rightWidth: containerRect ? containerRect.width - width : 0,
+  };
+}
+
+export default useDrag;