alinea/dist/ui/Pane.js

Headless git-based CMS

import {
  dist_default
} from "../chunks/chunk-A5O3N2GS.js";
import "../chunks/chunk-NZLE2WMY.js";

// src/ui/Pane.tsx
import {
  useRef
} from "react";

// src/ui/Pane.module.scss
var Pane_module_default = {
  "root": "alinea-Pane",
  "root-inner": "alinea-Pane-inner",
  "rootInner": "alinea-Pane-inner",
  "divider": "alinea-Pane-divider",
  "divider-handle": "alinea-Pane-divider-handle",
  "dividerHandle": "alinea-Pane-divider-handle",
  "divider-handle-line": "alinea-Pane-divider-handle-line",
  "dividerHandleLine": "alinea-Pane-divider-handle-line",
  "is-left": "alinea-Pane-is-left",
  "isLeft": "alinea-Pane-is-left",
  "is-right": "alinea-Pane-is-right",
  "isRight": "alinea-Pane-is-right"
};

// src/ui/Pane.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(Pane_module_default);
function Divider({
  position,
  direction,
  container,
  defaultWidth,
  minWidth,
  maxWidth,
  width,
  setWidth
}) {
  function ignoreIframes() {
    const iframes = document.querySelectorAll("iframe");
    for (const iframe of iframes) iframe.style.pointerEvents = "none";
    return () => {
      for (const iframe of iframes) iframe.style.pointerEvents = "";
    };
  }
  const draggingClassName = "is-dragging";
  function handleMouseDown(mouseDownEvent) {
    container.current?.classList.add(draggingClassName);
    let prevX = mouseDownEvent.clientX;
    const restoreIframes = ignoreIframes();
    function move(moveEvent) {
      moveEvent.preventDefault();
      if (!container?.current) return;
      let newWidth = width + (moveEvent.clientX - prevX) * direction;
      if (newWidth < minWidth) newWidth = minWidth;
      else if (newWidth > maxWidth) newWidth = maxWidth;
      else prevX = moveEvent.clientX;
      width = newWidth;
      container.current.style.width = `${newWidth}px`;
      setWidth(newWidth);
    }
    window.addEventListener("mousemove", move);
    window.addEventListener(
      "mouseup",
      () => {
        container.current?.classList.remove(draggingClassName);
        window.removeEventListener("mousemove", move);
        restoreIframes();
      },
      { once: true }
    );
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: styles.divider(position),
      onDoubleClick: (e) => {
        e.preventDefault();
        width = defaultWidth;
        setWidth(defaultWidth);
        container.current.style.width = `${defaultWidth}px`;
      },
      children: /* @__PURE__ */ jsx("div", { className: styles.divider.handle(), onMouseDown: handleMouseDown, children: /* @__PURE__ */ jsx("div", { className: styles.divider.handle.line() }) })
    }
  );
}
function Pane({
  id,
  children,
  resizable,
  defaultWidth = 320,
  minWidth = 320,
  maxWidth = 1200,
  ...props
}) {
  const container = useRef(null);
  const persistenceId = `@alinea/ui/pane-${id}`;
  const width = Number(window?.localStorage?.getItem(persistenceId)) || defaultWidth;
  const divider = /* @__PURE__ */ jsx(
    Divider,
    {
      position: resizable,
      container,
      minWidth,
      maxWidth,
      defaultWidth,
      direction: resizable === "left" ? -1 : 1,
      width: Math.max(width, minWidth),
      setWidth: (width2) => {
        window?.localStorage?.setItem(persistenceId, String(width2));
      }
    }
  );
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...props,
      className: styles.root.mergeProps(props)(),
      ref: container,
      style: { width, minWidth },
      children: [
        resizable === "left" && divider,
        /* @__PURE__ */ jsx("div", { className: styles.root.inner(), children }),
        resizable === "right" && divider
      ]
    }
  );
}
export {
  Pane
};