datocms-react-ui 2.0.12 → 2.0.14

package/src/SplitView/index.tsx

@@ -0,0 +1,256 @@
+import classNames from 'classnames';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { SplitViewPane, type SplitViewPaneProps } from './SplitViewPane';
+import { SashAction, SplitViewSash } from './SplitViewSash';
+import s from './styles.module.css.json';
+import { IAxis, ICacheSizes } from './types';
+
+type SplitViewProps = {
+  children: JSX.Element[];
+  allowResize?: boolean;
+  split?: 'vertical' | 'horizontal';
+  sizes: (string | number)[];
+  onChange: (sizes: number[]) => void;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
+  performanceMode?: boolean;
+  resizerSize?: number;
+  sashAction?: SashAction;
+};
+
+export const SplitView = ({
+  children,
+  sizes: propSizes,
+  allowResize = true,
+  split = 'vertical',
+  resizerSize = 10,
+  performanceMode = false,
+  onChange = () => null,
+  onDragStart = () => null,
+  onDragEnd = () => null,
+  sashAction,
+}: SplitViewProps) => {
+  const axis = useRef<IAxis>({ x: 0, y: 0 });
+  const wrapper = useRef<HTMLDivElement>(null);
+  const cacheSizes = useRef<ICacheSizes>({ sizes: [], sashPosSizes: [] });
+  const [wrapperRect, setWrapperRect] = useState<DOMRect | undefined>(
+    undefined,
+  );
+  const [isDragging, setDragging] = useState<boolean>(false);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (wrapper?.current) {
+        setWrapperRect(wrapper.current.getBoundingClientRect());
+      }
+    });
+    resizeObserver.observe(wrapper.current!);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  const { sizeName, splitPos, splitAxis } = useMemo<{
+    sizeName: 'width' | 'height';
+    splitPos: 'left' | 'top';
+    splitAxis: 'x' | 'y';
+  }>(
+    () => ({
+      sizeName: split === 'vertical' ? 'width' : 'height',
+      splitPos: split === 'vertical' ? 'left' : 'top',
+      splitAxis: split === 'vertical' ? 'x' : 'y',
+    }),
+    [split],
+  );
+
+  const wrapSize: number = wrapperRect ? wrapperRect[sizeName] : 0;
+
+  // Get limit sizes via children
+  const paneLimitSizes = useMemo(
+    () =>
+      children.map((childNode) => {
+        const limits = [0, Infinity];
+        if (childNode.type === SplitViewPane) {
+          const { minSize, maxSize } = childNode.props as SplitViewPaneProps;
+          limits[0] = assertSize(minSize, wrapSize, 0);
+          limits[1] = assertSize(maxSize, wrapSize);
+        }
+        return limits as [number, number];
+      }),
+    [children, wrapSize],
+  );
+
+  const sizes = useMemo(() => {
+    let count = 0;
+    let curSum = 0;
+
+    const res = children.map((_child, index) => {
+      const size = clampSize(
+        assertSize(propSizes[index], wrapSize),
+        paneLimitSizes[index],
+      );
+      if (size === Infinity) {
+        count = count + 1;
+      } else {
+        curSum = curSum + size;
+      }
+      return size;
+    });
+
+    // resize or illegal size input,recalculate pane sizes
+    if (curSum > wrapSize || (!count && curSum < wrapSize)) {
+      const cacheNum = (curSum - wrapSize) / curSum;
+      return res.map((size) => {
+        return size === Infinity ? 0 : size - size * cacheNum;
+      });
+    }
+
+    if (count > 0) {
+      const average = (wrapSize - curSum) / count;
+      return res.map((size) => {
+        return size === Infinity ? average : size;
+      });
+    }
+
+    return res;
+  }, [
+    JSON.stringify(propSizes),
+    JSON.stringify(paneLimitSizes),
+    children.length,
+    wrapSize,
+  ]);
+
+  const sashPosSizes = useMemo(
+    () => sizes.reduce((a, b) => [...a, a[a.length - 1] + b], [0]),
+    [JSON.stringify(sizes)],
+  );
+
+  const handleMouseDown = useCallback(
+    (x: number, y: number) => {
+      document?.body?.classList?.add(s['SplitView--disable-select']);
+      axis.current = { x, y };
+      cacheSizes.current = { sizes, sashPosSizes };
+      setDragging(true);
+      onDragStart();
+    },
+    [onDragStart, sizes, sashPosSizes],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    document?.body?.classList?.remove(s['SplitView--disable-select']);
+    setDragging(false);
+    onDragEnd();
+  }, [onDragEnd]);
+
+  const handleMouseMove = useCallback(
+    (x: number, y: number, i: number) => {
+      const curAxis = { x, y };
+      let distanceX = curAxis[splitAxis] - axis.current[splitAxis];
+
+      const leftBorder = -Math.min(
+        sizes[i] - paneLimitSizes[i][0],
+        paneLimitSizes[i + 1][1] - sizes[i + 1],
+      );
+      const rightBorder = Math.min(
+        sizes[i + 1] - paneLimitSizes[i + 1][0],
+        paneLimitSizes[i][1] - sizes[i],
+      );
+
+      if (distanceX < leftBorder) {
+        distanceX = leftBorder;
+      }
+      if (distanceX > rightBorder) {
+        distanceX = rightBorder;
+      }
+
+      const nextSizes = [...sizes];
+      nextSizes[i] += distanceX;
+      nextSizes[i + 1] -= distanceX;
+
+      onChange(nextSizes);
+    },
+    [paneLimitSizes, onChange],
+  );
+
+  const paneFollow = !(performanceMode && isDragging);
+  const paneSizes = paneFollow ? sizes : cacheSizes.current.sizes;
+  const panePoses = paneFollow ? sashPosSizes : cacheSizes.current.sashPosSizes;
+
+  return (
+    <div
+      className={classNames(
+        s.SplitView,
+        split === 'vertical' && s['SplitView--vertical'],
+        split === 'horizontal' && s['SplitView--horizontal'],
+        isDragging && s['SplitView--dragging'],
+      )}
+      ref={wrapper}
+    >
+      {children.map((childNode, childIndex) => {
+        const isPane = childNode.type === SplitViewPane;
+        const paneProps = isPane ? childNode.props : {};
+
+        return (
+          <SplitViewPane
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            key={childIndex}
+            style={{
+              ...paneProps.style,
+              [sizeName]: paneSizes[childIndex],
+              [splitPos]: panePoses[childIndex],
+            }}
+          >
+            {isPane ? paneProps.children : childNode}
+          </SplitViewPane>
+        );
+      })}
+      {sashPosSizes.slice(1, -1).map((posSize, index) => (
+        <SplitViewSash
+          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+          key={index}
+          allowResize={allowResize}
+          split={split}
+          style={{
+            [sizeName]: resizerSize,
+            [splitPos]: posSize - resizerSize / 2,
+          }}
+          onMouseDown={handleMouseDown}
+          onMouseMove={(x, y) => handleMouseMove(x, y, index)}
+          onMouseUp={handleMouseUp}
+          action={sashAction}
+        />
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Convert size to absolute number or Infinity
+ * SplitPane allows sizes in string and number, but the state sizes only support number,
+ * so convert string and number to number in here
+ * 'auto' -> divide the remaining space equally
+ * 'xxxpx' -> xxx
+ * 'xxx%' -> wrapper.size * xxx/100
+ *  xxx -> xxx
+ */
+function assertSize(
+  size: string | number | undefined,
+  sum: number,
+  defaultValue = Infinity,
+) {
+  if (typeof size === 'undefined') return defaultValue;
+  if (typeof size === 'number') return size;
+  if (size.endsWith('%')) return sum * (+size.replace('%', '') / 100);
+  if (size.endsWith('px')) return +size.replace('px', '');
+  return defaultValue;
+}
+
+function clampSize(size: number, minMax: [number, number]) {
+  return Math.max(minMax[0], Math.min(minMax[1], size));
+}

package/src/SplitView/styles.module.css

@@ -0,0 +1,22 @@
+.SplitView {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.SplitView--dragging.SplitView--vertical {
+  cursor: col-resize;
+}
+
+.SplitView--dragging.SplitView--horizontal {
+  cursor: row-resize;
+}
+
+.SplitView--disable-select {
+  user-select: none;
+}
+
+.SplitView--disable-select .SplitViewPane {
+  pointer-events: none;
+}

package/src/SplitView/styles.module.css.json

@@ -0,0 +1 @@
+{"SplitView":"_SplitView_1oi17_1","SplitView--dragging":"_SplitView--dragging_1oi17_8","SplitView--vertical":"_SplitView--vertical_1oi17_8","SplitView--horizontal":"_SplitView--horizontal_1oi17_12","SplitView--disable-select":"_SplitView--disable-select_1oi17_16","SplitViewPane":"_SplitViewPane_1oi17_20"}

package/src/SplitView/types.ts

@@ -0,0 +1,9 @@
+export type IAxis = {
+  x: number;
+  y: number;
+};
+
+export type ICacheSizes = {
+  sizes: (string | number)[];
+  sashPosSizes: (string | number)[];
+};

package/src/VerticalSplit/index.tsx

@@ -0,0 +1,402 @@
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+import { SplitView } from '../SplitView';
+import { SplitViewPane } from '../SplitView/SplitViewPane';
+import sashS from '../SplitView/SplitViewSash/styles.module.css.json';
+import { ChevronsLeftIcon, ChevronsRightIcon, SidebarFlipIcon } from '../icons';
+import s from './styles.module.css.json';
+
+const initialSidebarWidth = 220;
+
+export type VerticalSplitProps = {
+  mode?: 'overlay' | 'split';
+  minSize?: number | string;
+  maxSize?: number | string;
+  size?: number | string;
+  primaryPane: 'left' | 'right';
+  isSecondaryCollapsed?: boolean;
+  allowResize?: boolean;
+  children: [React.ReactNode, React.ReactNode];
+  onDragFinished?: (newSize: number) => void;
+  onSecondaryToggle?: (secondaryExpanded: boolean) => void;
+};
+
+type Size = string | number;
+
+function calculateSizes({
+  size,
+  primaryPane,
+  isSecondaryCollapsed,
+}: {
+  size: number | string;
+  primaryPane: 'left' | 'right';
+  isSecondaryCollapsed?: boolean;
+}): Size[] {
+  const realSize = isSecondaryCollapsed ? 20 : size;
+  return primaryPane === 'right' ? [realSize] : ['auto', realSize];
+}
+
+
+/**
+ * @example Resizable, left primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="left" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Resizable, right primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="right" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Collapsible
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ *
+ * @example Overlay mode
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            mode="overlay"
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ */
+export function VerticalSplit({
+  mode = 'split',
+  minSize = 200,
+  maxSize,
+  size = initialSidebarWidth,
+  primaryPane,
+  children,
+  allowResize = true,
+  onDragFinished,
+  onSecondaryToggle,
+  isSecondaryCollapsed,
+}: VerticalSplitProps) {
+  const [sizes, setSizes] = useState<Size[]>(
+    calculateSizes({ size, primaryPane, isSecondaryCollapsed }),
+  );
+  const currentSizes = useRef<Size[]>(sizes);
+
+  const SashActionIcon = onSecondaryToggle
+    ? primaryPane === 'left'
+      ? isSecondaryCollapsed
+        ? SidebarFlipIcon
+        : ChevronsRightIcon
+      : isSecondaryCollapsed
+        ? ChevronsRightIcon
+        : ChevronsLeftIcon
+    : undefined;
+
+  useEffect(() => {
+    setSizes(calculateSizes({ size, primaryPane, isSecondaryCollapsed }));
+  }, [size, primaryPane, isSecondaryCollapsed]);
+
+  function handleChange(newSizes: Size[]) {
+    setSizes(newSizes);
+    currentSizes.current = newSizes;
+  }
+
+  function handleDragEnd() {
+    onDragFinished?.(currentSizes.current[0] as number);
+  }
+
+  function handleSecondaryClick() {
+    onSecondaryToggle?.(!isSecondaryCollapsed);
+  }
+
+  function renderPane(pane: 'left' | 'right') {
+    const isSecondaryPane = primaryPane !== pane;
+
+    return (
+      <SplitViewPane
+        {...(isSecondaryPane && !isSecondaryCollapsed
+          ? { minSize, maxSize }
+          : {})}
+      >
+        {isSecondaryPane && isSecondaryCollapsed ? (
+          <div
+            className={classNames(
+              s.VerticalSplitPane__expand,
+              s[`VerticalSplitPane__expand--${pane}`],
+            )}
+            onClick={handleSecondaryClick}
+          />
+        ) : (
+          children[pane === 'left' ? 0 : 1]
+        )}
+      </SplitViewPane>
+    );
+  }
+
+  if (mode === 'overlay' && !isSecondaryCollapsed && SashActionIcon) {
+    const primaryPaneChild = children[primaryPane === 'left' ? 0 : 1];
+    const secondaryPaneChild = children[primaryPane === 'left' ? 1 : 0];
+
+    return (
+      <>
+        <div
+          className={s.VerticalSplitPaneOverlay}
+          onClick={handleSecondaryClick}
+        >
+          <div
+            className={classNames(
+              s.VerticalSplitPaneOverlay__secondary,
+              s[
+                `VerticalSplitPaneOverlay__secondary--${
+                  primaryPane === 'left' ? 'right' : 'left'
+                }`
+              ],
+            )}
+            style={{
+              width: size,
+              maxWidth: maxSize,
+              minWidth: minSize,
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {secondaryPaneChild}
+            <div className={s.VerticalSplitPaneOverlay__sash}>
+              <div
+                className={sashS.SplitViewSash__content}
+                onClick={handleSecondaryClick}
+              >
+                <div className={sashS.SplitViewSash__content__button}>
+                  <SashActionIcon />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={classNames(
+            s.VerticalSplitPaneOverlay__primary,
+            s[`VerticalSplitPaneOverlay__primary--${primaryPane}`],
+          )}
+        >
+          {primaryPaneChild}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <SplitView
+      allowResize={!isSecondaryCollapsed && allowResize}
+      sizes={sizes}
+      onChange={handleChange}
+      onDragEnd={handleDragEnd}
+      sashAction={
+        SashActionIcon && {
+          icon: <SashActionIcon />,
+          onClick: handleSecondaryClick,
+        }
+      }
+    >
+      {renderPane('left')}
+      {renderPane('right')}
+    </SplitView>
+  );
+}