react-resizable-panels 0.0.1

package/src/PanelResizeHandle.tsx

@@ -0,0 +1,81 @@
+import { ReactNode, useContext, useEffect, useState } from "react";
+
+import { PanelGroupContext } from "./PanelContexts";
+import { PanelId, ResizeHandler } from "./types";
+
+export default function PanelResizeHandle({
+  children = null,
+  className = "",
+  disabled = false,
+  panelAfter,
+  panelBefore,
+}: {
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  panelAfter: PanelId;
+  panelBefore: PanelId;
+}) {
+  const context = useContext(PanelGroupContext);
+  if (context === null) {
+    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+  }
+
+  const { direction, registerResizeHandle } = context;
+
+  const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    if (disabled) {
+      setResizeHandler(null);
+    } else {
+      setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));
+    }
+  }, [disabled, panelAfter, panelBefore, registerResizeHandle]);
+
+  useEffect(() => {
+    if (disabled || resizeHandler == null || !isDragging) {
+      return;
+    }
+
+    document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
+
+    const onMouseLeave = (_: MouseEvent) => {
+      setIsDragging(false);
+    };
+
+    const onMouseMove = (event: MouseEvent) => {
+      resizeHandler(event);
+    };
+
+    const onMouseUp = (_: MouseEvent) => {
+      setIsDragging(false);
+    };
+
+    document.body.addEventListener("mouseleave", onMouseLeave);
+    document.body.addEventListener("mousemove", onMouseMove);
+    document.body.addEventListener("mouseup", onMouseUp);
+
+    return () => {
+      document.body.style.cursor = "";
+
+      document.body.removeEventListener("mouseleave", onMouseLeave);
+      document.body.removeEventListener("mousemove", onMouseMove);
+      document.body.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [direction, disabled, isDragging, resizeHandler]);
+
+  return (
+    <div
+      className={className}
+      onMouseDown={() => setIsDragging(true)}
+      onMouseUp={() => setIsDragging(false)}
+      style={{
+        cursor: direction === 'horizontal' ? 'ew-resize' : 'ns-resize'
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import Panel from "./Panel";
+import PanelGroup from "./PanelGroup";
+import PanelResizeHandle from "./PanelResizeHandle";
+
+export { Panel, PanelGroup, PanelResizeHandle };

package/src/types.ts

@@ -0,0 +1,11 @@
+export type Direction = "horizontal" | "vertical";
+
+export type PanelId = string;
+
+export type Panel = {
+  defaultSize: number;
+  id: PanelId;
+  minSize: number;
+};
+
+export type ResizeHandler = (event: MouseEvent) => void;

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "lib": ["ES2015", "DOM"],
+    "jsx": "react-jsx"
+  }
+}

package/website/demo.tsx

@@ -0,0 +1,140 @@
+import AutoSizer from "react-virtualized-auto-sizer";
+
+import { Panel, PanelGroup, PanelResizeHandle } from "../src";
+
+import styles from "./styles.module.css";
+
+function clearSavedSizes() {
+  localStorage.removeItem("PanelGroup:sizes:inner-horizontal");
+  localStorage.removeItem("PanelGroup:sizes:outer-horizontal");
+  localStorage.removeItem("PanelGroup:sizes:vertical");
+
+  window.location.reload();
+}
+
+export default function App() {
+  return (
+    <div className={styles.FullHeightAndWidth}>
+      <AutoSizer>
+        {({ height, width }) => (
+          <PanelGroup
+            height={height}
+            width={width}
+            autoSaveId="outer-horizontal"
+            direction="horizontal"
+          >
+            <Panel className={styles.PanelRow} defaultSize={0.2} id="left">
+              <div className={styles.HorizontalFiller}>
+                left [1]
+                <br />
+                <br />
+                <button
+                  className={styles.ResetButton}
+                  onClick={clearSavedSizes}
+                >
+                  reset sizes
+                </button>
+              </div>
+            </Panel>
+            <Panel className={styles.PanelRow} defaultSize={0.4} id="middle">
+              <PanelResizeHandle
+                className={styles.HorizontalResizeHandle}
+                panelBefore="left"
+                panelAfter="middle"
+              />
+              <div className={styles.HorizontalFiller}>middle [3]</div>
+              <PanelResizeHandle
+                className={styles.HorizontalResizeHandle}
+                panelBefore="middle"
+                panelAfter="stacked"
+              />
+            </Panel>
+            <Panel className={styles.PanelRow} defaultSize={0.3} id="stacked">
+              <div className={styles.Grower}>
+                <AutoSizer>
+                  {({ height, width }) => (
+                    <PanelGroup
+                      height={height}
+                      width={width}
+                      autoSaveId="vertical"
+                      direction="vertical"
+                    >
+                      <Panel
+                        className={styles.PanelRow}
+                        defaultSize={0.4}
+                        id="top"
+                      >
+                        <div className={styles.VerticalFillerTop}>
+                          top [2, 1]
+                        </div>
+                      </Panel>
+                      <Panel
+                        className={styles.PanelColumn}
+                        defaultSize={0.6}
+                        id="bottom"
+                      >
+                        <PanelResizeHandle
+                          panelBefore="top"
+                          panelAfter="bottom"
+                        >
+                          <div className={styles.VerticalResizeBar} />
+                        </PanelResizeHandle>
+                        <div className={styles.VerticalFillerBottom}>
+                          <AutoSizer>
+                            {({ height, width }) => (
+                              <PanelGroup
+                                height={height}
+                                width={width}
+                                autoSaveId="inner-horizontal"
+                                direction="horizontal"
+                              >
+                                <Panel
+                                  className={styles.PanelRow}
+                                  defaultSize={0.5}
+                                  id="bottom-left"
+                                >
+                                  <div className={styles.HorizontalFillerLeft}>
+                                    bottom-left [2, 2, 1]
+                                  </div>
+                                </Panel>
+                                <Panel
+                                  className={styles.PanelRow}
+                                  defaultSize={0.5}
+                                  id="bottom-right"
+                                >
+                                  <PanelResizeHandle
+                                    panelBefore="bottom-left"
+                                    panelAfter="bottom-right"
+                                  >
+                                    <div
+                                      className={styles.HorizontalResizeBar}
+                                    />
+                                  </PanelResizeHandle>
+                                  <div className={styles.HorizontalFillerRight}>
+                                    bottom-right [2, 2, 1]
+                                  </div>
+                                </Panel>
+                              </PanelGroup>
+                            )}
+                          </AutoSizer>
+                        </div>
+                      </Panel>
+                    </PanelGroup>
+                  )}
+                </AutoSizer>
+              </div>
+            </Panel>
+            <Panel className={styles.PanelRow} defaultSize={0.2} id="right">
+              <PanelResizeHandle
+                className={styles.HorizontalResizeHandle}
+                panelBefore="stacked"
+                panelAfter="right"
+              />
+              <div className={styles.HorizontalFiller}>right [1]</div>
+            </Panel>
+          </PanelGroup>
+        )}
+      </AutoSizer>
+    </div>
+  );
+}

package/website/index.html

@@ -0,0 +1,9 @@
+<html>
+<html>
+  <link rel="stylesheet" href="./root.css" />
+</html>
+<body>
+  <div id="root"></div>
+  <script type="module" src="index.tsx"></script>
+</body>
+</html>

package/website/index.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import Demo from "./demo";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+root.render(
+  <StrictMode>
+    <Demo />
+  </StrictMode>
+);

package/website/root.css

@@ -0,0 +1,15 @@
+:root, html, body {
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+
+  background-color: #081120;
+  color: #ffffff;
+}
+
+#root {
+  width: calc(100vw - 1rem);
+  height: calc(100vh - 1rem);
+}

package/website/styles.module.css

@@ -0,0 +1,77 @@
+.FullHeightAndWidth {
+  width: calc(100vw - 1rem);
+  height: calc(100vh - 1rem);
+  margin: 0.5rem;
+}
+
+.Grower {
+  width: 100%;
+  height: 100%;
+}
+
+.HorizontalFiller,
+.HorizontalFillerLeft,
+.HorizontalFillerRight,
+.VerticalFillerBottom,
+.VerticalFillerTop {
+  height: 100%;
+  width: 100%;
+  background-color: #192230;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.HorizontalFiller {
+  border-radius: 0.5rem;
+}
+.VerticalFillerTop {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+.VerticalFillerBottom {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.PanelRow {
+  display: flex;
+  flex-direction: row;
+}
+.PanelColumn {
+  display: flex;
+  flex-direction: column;
+}
+
+.HorizontalResizeHandle {
+  padding: 0 0.25rem;
+}
+
+.VerticalResizeBar {
+  height: 4px;
+  width: 100%;
+  background-color: #2a3343;
+  border-bottom: 1px solid #454950;
+  border-top: 1px solid #454950;
+}
+
+.HorizontalResizeBar {
+  height: 100%;
+  width: 4px;
+  background-color: #2a3343;
+  border-left: 1px solid #454950;
+  border-right: 1px solid #454950;
+}
+
+.ResetButton {
+  color: #ffffff;
+  background: #2a3343;
+  border: 1px solid #18181a;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+}
+.ResetButton:hover {
+  background: #454950;
+}