💄 GC-1464 Allow users to resize the sidebar in the Content Hub

lib/Resizeable/index.tsx

@@ -0,0 +1,104 @@
+import type { PropsWithChildren } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
+import { keepValueWithinRange, normaliseUnitsToPixelValue } from "../helpers";
+
+export interface ResizeableProps {
+  defaultWidth?: string;
+  minWidth?: string;
+  maxWidth?: string;
+}
+
+export function Resizeable({
+  children,
+  defaultWidth = "50%",
+  maxWidth,
+  minWidth,
+}: PropsWithChildren<ResizeableProps>) {
+  const handleRef = useRef<HTMLSpanElement>(null);
+  const min = normaliseUnitsToPixelValue(minWidth ?? 0);
+  const max = normaliseUnitsToPixelValue(maxWidth ?? "100%");
+  const gutterSize = 16;
+
+  const [state, setState] = React.useState({
+    startX: 0,
+    startWidth: 0,
+    width: keepValueWithinRange(
+      normaliseUnitsToPixelValue(defaultWidth),
+      min,
+      max
+    ),
+  });
+
+  const doDrag = (evt: MouseEvent) => {
+    const newWidth = state.startWidth + evt.clientX - state.startX;
+
+    setState((prev) => ({
+      ...prev,
+      width: keepValueWithinRange(newWidth, min, max),
+    }));
+  };
+
+  const stopDrag = () => {
+    document.removeEventListener("mousemove", doDrag, false);
+    document.removeEventListener("mouseup", stopDrag, false);
+  };
+
+  const initDrag = useCallback(
+    (evt: React.DragEvent<HTMLDivElement>) => {
+      const { clientX } = evt;
+
+      const newState = {
+        ...state,
+        startX: clientX,
+        startWidth: state.width,
+      };
+
+      setState(newState);
+
+      document.addEventListener("mousemove", doDrag, false);
+      document.addEventListener("mouseup", stopDrag, false);
+    },
+    [setState]
+  );
+
+  const setGutterHandlePosition = (evt: React.MouseEvent<HTMLSpanElement>) => {
+    const handle = handleRef.current;
+    if (handle === null) return;
+
+    const rect = evt.currentTarget.getBoundingClientRect();
+    const gutter = handle.parentElement as HTMLSpanElement;
+    const handleOffset = handle.offsetHeight / 2;
+
+    const y = keepValueWithinRange(
+      evt.clientY - rect.top,
+      handleOffset,
+      gutter.offsetHeight - handleOffset
+    );
+
+    handle.style.top = `${y - handleOffset}px`;
+  };
+
+  // remember to remove global listeners on dismount
+  useEffect(() => () => stopDrag(), []);
+
+  return (
+    <div className="resizeable">
+      <div
+        className="resizeable__wrapper"
+        style={{
+          width: state.width - gutterSize,
+        }}
+      >
+        {children}
+        <span
+          role="none"
+          className="resizable__gutter"
+          onMouseDown={initDrag}
+          onMouseMove={setGutterHandlePosition}
+        >
+          <span ref={handleRef} className="resizable__gutter-handle" />
+        </span>
+      </div>
+    </div>
+  );
+}

lib/Resizeable/styles.scss

@@ -0,0 +1,54 @@
+$gutterSize: 16px;
+$gutterColour: #006aff;
+
+.resizeable {
+  position: relative;
+  display: flex;
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+  }
+
+  &__wrapper > *:first-child {
+    width: 100% !important;
+  }
+}
+
+.resizable__gutter {
+  position: absolute;
+  user-select: none;
+  height: 100%;
+  width: $gutterSize;
+  top: 0;
+  right: -(calc($gutterSize / 2));
+  cursor: ew-resize;
+
+  &::before {
+    content: "";
+    width: 2px;
+    margin: auto;
+    background-color: $gutterColour;
+    display: block;
+    height: 100%;
+  }
+}
+
+.resizable__gutter-handle {
+  background-color: $gutterColour;
+  border-radius: 4px;
+  height: 30px;
+  margin: auto;
+  width: 8px;
+  display: flex;
+  position: absolute;
+  transform: translateX(-50%);
+  left: 50%;
+  opacity: 0;
+  transition: opacity 0.1s;
+
+  .resizable__gutter:hover & {
+    opacity: 1;
+  }
+}

lib/helpers.ts

@@ -1,16 +1,54 @@
-export const pluralisePerson = (count: any) => count === 1 ? `${count} person` : `${count} people`;
+export const pluralisePerson = (count: any) =>
+  count === 1 ? `${count} person` : `${count} people`;
 
-export const pluraliseHas = (count: any) => count === 1 ? 'has' : 'have';
+export const pluraliseHas = (count: any) => (count === 1 ? "has" : "have");
 
 export const filterUsers = (users: any, term: any, searchByEmail = false) => {
   const safeTerm = term.toLowerCase();
   return users.filter(
-    (user: any) => user.name
-      .toLowerCase()
-      .split(' ')
-      .filter((subStr: any) => subStr.lastIndexOf(safeTerm, 0) === 0).length > 0 ||
-    user.name.toLowerCase().lastIndexOf(safeTerm, 0) === 0 ||
-    user.display.toLowerCase().lastIndexOf(safeTerm, 0) === 0 ||
-    (searchByEmail && user.email.toLowerCase().lastIndexOf(safeTerm, 0) === 0)
+    (user: any) =>
+      user.name
+        .toLowerCase()
+        .split(" ")
+        .filter((subStr: any) => subStr.lastIndexOf(safeTerm, 0) === 0).length >
+        0 ||
+      user.name.toLowerCase().lastIndexOf(safeTerm, 0) === 0 ||
+      user.display.toLowerCase().lastIndexOf(safeTerm, 0) === 0 ||
+      (searchByEmail && user.email.toLowerCase().lastIndexOf(safeTerm, 0) === 0)
   );
 };
+
+export const normaliseUnitsToPixelValue = (
+  value: string | number,
+  container: HTMLElement = document.body
+) => {
+  if (typeof value === "number") {
+    // assume value is already in pixels
+    return value;
+  }
+
+  if (value.endsWith("px")) {
+    return parseInt(value, 10);
+  }
+
+  if (value.endsWith("%")) {
+    const containerWidthAsPercent = container.offsetWidth / 100;
+    return containerWidthAsPercent * parseInt(value, 10);
+  }
+
+  console.warn(
+    `Could not interpret a normalised value for "${value}. Parsing directly to integer.`
+  );
+  return parseInt(value, 10);
+};
+
+export const keepValueWithinRange = (
+  start: number,
+  min?: number,
+  max?: number
+) => {
+  let value = start;
+  if (typeof max === "number") value = Math.min(value, max);
+  if (typeof min === "number") value = Math.max(value, min);
+  return value;
+};

lib/index.ts

@@ -23,6 +23,7 @@ export { NotificationInlineWarning } from "./Notification/inline/NotificationInl
 export { Dropdown } from "./Dropdown";
 export { DropdownMenu } from "./DropdownMenu";
 export { ProgressButton } from "./ProgressButton";
+export { Resizeable } from "./Resizeable";
 export { Progress } from "./Progress";
 export { SearchInput } from "./SearchInput";
 export { Modal } from "./Modal";

stories/components/Resizable.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Resizeable as ResizableComponent } from "../../lib/Resizeable";
+
+import StoryItem from "../styleguide/StoryItem";
+
+export default {
+  title: "GUI/Resizeable",
+  component: ResizableComponent,
+};
+
+export function Resizeable() {
+  return (
+    <>
+      <StoryItem
+        title="Vertically split resizeable element"
+        description="So you could have a split-pane or resizeable horizontal menu"
+      >
+        <div
+          style={{
+            display: "flex",
+            flex: "1",
+            minHeight: "0",
+            border: "1px solid red",
+            height: 600,
+          }}
+        >
+          <ResizableComponent
+            defaultWidth="240px"
+            maxWidth="33.33%"
+            minWidth="240px"
+          >
+            <div
+              style={{
+                width: "400px",
+                flexShrink: "0",
+              }}
+            >
+              Hello
+            </div>
+          </ResizableComponent>
+          <div
+            style={{
+              padding: "20px",
+              width: "100%",
+              minWidth: "0",
+              flexDirection: "column",
+              display: " flex !important",
+            }}
+          >
+            How are you?
+          </div>
+        </div>
+      </StoryItem>
+
+      <StoryItem
+        title="Single resizeable element"
+        description="Could be used to reveal a before and after of two images"
+      >
+        <div style={{ border: "1px solid red", width: "50%" }}>
+          Not resizeable
+        </div>
+        <ResizableComponent defaultWidth="50%" maxWidth="75%" minWidth="200px">
+          <div style={{ border: "1px solid green", width: "50%" }}>Hello</div>
+        </ResizableComponent>
+        <div style={{ border: "1px solid red", width: "50%" }}>
+          Not resizeable
+        </div>
+      </StoryItem>
+    </>
+  );
+}

styles/components/_ui.scss

@@ -11,6 +11,7 @@
 @import "../../lib/DropdownMenu/styles";
 @import "../../lib/Progress/styles";
 @import "../../lib/ProgressButton/styles";
+@import "../../lib/Resizeable/styles";
 @import "../../lib/Modal/styles";
 @import "../../lib/FigurePlaceholder/styles";
 @import "../../lib/Conversation/styles";