@abgov/react-components/experimental.mjs

Government of Alberta - UI components for React

import { jsxs, jsx } from "react/jsx-runtime";
import { useRef, useState, useEffect } from "react";
import { a as GoabIcon } from "./icon-CoYGOp1V.mjs";
import { G } from "./icon-CoYGOp1V.mjs";
const panel = "_panel_m3z4m_1";
const panelBackground = "_panelBackground_m3z4m_8";
const children = "_children_m3z4m_12";
const handle = "_handle_m3z4m_17";
const width = "_width_m3z4m_42";
const Css = {
  panel,
  panelBackground,
  children,
  handle,
  width
};
function ResizablePanel(props) {
  const bgRef = useRef(null);
  const sectionRef = useRef(null);
  const widthRef = useRef(null);
  const handleRef = useRef(null);
  const maxWidth = useRef(0);
  const resizeBarState = useRef("static");
  const [width2, setWidth] = useState();
  useEffect(() => {
    var _a;
    maxWidth.current = ((_a = bgRef.current) == null ? void 0 : _a.getBoundingClientRect().width) ?? 0;
  }, []);
  function resetMouseState() {
    resizeBarState.current = "static";
  }
  function onMouseDown(_) {
    resizeBarState.current = "active";
    window.addEventListener("mouseup", resetMouseState);
  }
  function onMouseUp(_) {
    resizeBarState.current = "static";
    window.removeEventListener("mouseup", resetMouseState);
  }
  function onMouseMove(e) {
    var _a, _b;
    if (resizeBarState.current === "static") {
      return;
    }
    const sectionEl = sectionRef.current;
    const xOffset = (sectionEl == null ? void 0 : sectionEl.getBoundingClientRect().x) || 0;
    const mouseX = e.clientX;
    const minWidth = props.minWidth || 0;
    if (mouseX <= 0) {
      return;
    }
    const newXPos = ((_a = handleRef.current) == null ? void 0 : _a.getBoundingClientRect().x) ?? 0;
    const calcWidth = Math.max(
      newXPos - xOffset,
      Math.min(mouseX - xOffset, maxWidth.current)
    );
    const elementWidth = Math.max(minWidth, calcWidth - 64);
    if (elementWidth <= minWidth) {
      return;
    }
    sectionEl == null ? void 0 : sectionEl.setAttribute("style", `width: ${calcWidth}px;`);
    (_b = widthRef.current) == null ? void 0 : _b.setAttribute(
      "style",
      `right: ${maxWidth.current - calcWidth + 32}px`
    );
    setWidth(`${Math.round(elementWidth)}px`);
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: bgRef,
      className: Css.panelBackground,
      onMouseDown,
      onMouseMove,
      onMouseUp,
      children: [
        /* @__PURE__ */ jsxs("section", { ref: sectionRef, className: Css.panel, children: [
          /* @__PURE__ */ jsx("div", { className: Css.children, children: props.children }),
          /* @__PURE__ */ jsx("div", { ref: handleRef, className: Css.handle, children: /* @__PURE__ */ jsx(GoabIcon, { type: "reorder-two" }) })
        ] }),
        /* @__PURE__ */ jsx("div", { ref: widthRef, className: Css.width, children: width2 })
      ]
    }
  );
}
export {
  G as GoabDrawer,
  ResizablePanel
};
//# sourceMappingURL=experimental.mjs.map