@abgov/react-components/experimental.js

Government of Alberta - UI components for React

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const icon = require("./icon-CK55b563.js");
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 = react.useRef(null);
  const sectionRef = react.useRef(null);
  const widthRef = react.useRef(null);
  const handleRef = react.useRef(null);
  const maxWidth = react.useRef(0);
  const resizeBarState = react.useRef("static");
  const [width2, setWidth] = react.useState();
  react.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__ */ jsxRuntime.jsxs(
    "div",
    {
      ref: bgRef,
      className: Css.panelBackground,
      onMouseDown,
      onMouseMove,
      onMouseUp,
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: sectionRef, className: Css.panel, children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: Css.children, children: props.children }),
          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: handleRef, className: Css.handle, children: /* @__PURE__ */ jsxRuntime.jsx(icon.GoabIcon, { type: "reorder-two" }) })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: widthRef, className: Css.width, children: width2 })
      ]
    }
  );
}
exports.GoabDrawer = icon.GoabDrawer;
exports.ResizablePanel = ResizablePanel;
//# sourceMappingURL=experimental.js.map