drag the divider across the board

example/src/index.js

@@ -22,6 +22,7 @@ render(app, document.getElementById('app'));
       <Playground
         initialSnippet={snippet}
         defaultEditorTab="javascript"
+        defaultResultTab="console"
         transformJs
         presets={["react"]}
       />

playground/src/Draggable/index.tsx

@@ -0,0 +1,83 @@
+import React, {
+  FC,
+  ReactNode,
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+`;
+
+const DIVIDER_WIDTH = 4;
+
+const Divider = styled.div`
+  width: ${DIVIDER_WIDTH}px;
+  height: 20rem;
+  cursor: col-resize;
+`;
+
+interface IProps {
+  className?: string;
+  leftChild: (width: number) => ReactNode;
+  rightChild: (width: number) => ReactNode;
+}
+
+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;
+      console.log("keep dragging", clientX);
+      if (containerRect) {
+        setWidth(clientX - containerRect.left);
+      }
+    },
+    [containerRect]
+  );
+  const stopDrag = useCallback(() => {
+    console.log("stop dragging");
+    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 (
+    <Container className={className} ref={containerRef}>
+      {leftChild(width)}
+      <Divider ref={dividerRef} />
+      {containerRect && rightChild(containerRect.width - width - DIVIDER_WIDTH)}
+    </Container>
+  );
+};
+
+export default Draggable;

playground/src/Playground.tsx

@@ -7,20 +7,16 @@ import Result from "./Result";
 import { ISnippet, IEditorTabs, IResultTabs } from "./types";
 import ourTheme from "./utils/theme";
 import media from "./utils/media";
+import Draggable from "./Draggable";
 
-const Container = styled.div`
+const StyledDraggable = styled(Draggable)`
   border: ${props => props.theme.container.border};
   display: flex;
   min-height: ${props => props.theme.container.minHeight};
 
   ${media.phone`
     flex-direction: column;
   `}
-
-  .divider {
-    border: 1px solid transparent;
-    cursor: col-resize;
-  }
 `;
 
 interface IProps {
@@ -43,10 +39,7 @@ const Playground: FC<IProps> = ({
   theme = ourTheme,
 }) => {
   const [snippet, setSnippet] = useState<ISnippet>(initialSnippet);
-  const [width, setWidth] = useState<number>(0);
-  const [containerWidth, setContainerWidth] = useState(0);
   const id = useId(userId);
-  const ref = useRef<HTMLDivElement>(null);
 
   const onSnippetChange = (changed: string, type: IEditorTabs) => {
     setSnippet(snippet => ({
@@ -55,56 +48,28 @@ const Playground: FC<IProps> = ({
     }));
   };
 
-  useEffect(() => {
-    if (ref.current) {
-      setContainerWidth(ref.current.clientWidth);
-      setWidth(ref.current.clientWidth / 2);
-    }
-  }, []);
-
-  const resize = useCallback(
-    (e: any) => {
-      const movedInPx = e.clientX - 10;
-      setWidth(movedInPx);
-    },
-    [setWidth]
-  );
-
-  const handleAddListener = useCallback(() => {
-    document.addEventListener("mousemove", resize, false);
-  }, []);
-
-  const handleRemoveListener = useCallback(() => {
-    document.removeEventListener("mousemove", resize, false);
-  }, []);
-
   return (
     <ThemeProvider theme={theme}>
-      <Container ref={ref}>
-        <Editor
-          width={width}
-          code={snippet}
-          defaultTab={defaultEditorTab}
-          onChange={onSnippetChange}
-        />
-        {id && (
-          <>
-            <div
-              onMouseDown={handleAddListener}
-              onMouseUp={handleRemoveListener}
-              className="divider"
-            ></div>
-            <Result
-              width={containerWidth - width}
-              id={id}
-              snippet={snippet}
-              defaultTab={defaultResultTab}
-              transformJs={transformJs}
-              presets={presets}
-            />
-          </>
+      <StyledDraggable
+        leftChild={width => (
+          <Editor
+            width={width}
+            code={snippet}
+            defaultTab={defaultEditorTab}
+            onChange={onSnippetChange}
+          />
+        )}
+        rightChild={width => (
+          <Result
+            width={width}
+            id={id}
+            snippet={snippet}
+            defaultTab={defaultResultTab}
+            transformJs={transformJs}
+            presets={presets}
+          />
         )}
-      </Container>
+      />
     </ThemeProvider>
   );
 };