@lanaco/lnc-react-ui/dist/Drawer.js

React component library

import { jsx as N } from "react/jsx-runtime";
import p, { useRef as j, useEffect as B, useMemo as P, forwardRef as M, useState as T, useImperativeHandle as q } from "react";
import { C as F } from "./emotion-react.browser.esm-DUVZ5oEL.js";
import { c as $, d as H } from "./utils-BUdHa0nB.js";
import { u as V } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
function k() {
  return k = Object.assign || function(o) {
    for (var e = 1; e < arguments.length; e++) {
      var r = arguments[e];
      for (var a in r)
        Object.prototype.hasOwnProperty.call(r, a) && (o[a] = r[a]);
    }
    return o;
  }, k.apply(this, arguments);
}
var A = function(e, r) {
  var a = {
    left: {
      top: 0,
      left: 0,
      transform: "translate3d(-100%, 0, 0)",
      width: r,
      height: "100vh"
    },
    right: {
      top: 0,
      right: 0,
      transform: "translate3d(100%, 0, 0)",
      width: r,
      height: "100vh"
    },
    bottom: {
      left: 0,
      right: 0,
      bottom: 0,
      transform: "translate3d(0, 100%, 0)",
      width: "100%",
      height: r
    },
    top: {
      left: 0,
      right: 0,
      top: 0,
      transform: "translate3d(0, -100%, 0)",
      width: "100%",
      height: r
    }
  };
  return a[e];
}, G = function(e) {
  var r = e.open, a = e.onClose, w = a === void 0 ? function() {
  } : a, _ = e.children, b = e.style, n = e.enableOverlay, C = n === void 0 ? !0 : n, d = e.overlayColor, D = d === void 0 ? "#000" : d, l = e.overlayOpacity, x = l === void 0 ? 0.4 : l, u = e.zIndex, m = u === void 0 ? 100 : u, v = e.duration, E = v === void 0 ? 500 : v, i = e.direction, f = e.size, s = f === void 0 ? 250 : f, S = e.className, y = e.customIdSuffix, h = e.lockBackgroundScroll, t = h === void 0 ? !1 : h, g = e.overlayClassName, Z = g === void 0 ? "" : g, O = j(null);
  B(function() {
    var R = function() {
      O.current = window.document.querySelector("body"), O.current && t && (O.current.style.overflow = r ? "hidden" : "");
    };
    R();
  }, [r]);
  var c = P(function() {
    return y || (Math.random() + 1).toString(36).substring(7);
  }, [y]), I = {
    backgroundColor: D.toString(),
    opacity: x,
    zIndex: m
  }, z = k({
    zIndex: m + 1,
    transitionDuration: E + "ms"
  }, A(i, s), b);
  return p.createElement("div", {
    id: "EZDrawer" + c,
    className: "EZDrawer"
  }, p.createElement("input", {
    type: "checkbox",
    id: "EZDrawer__checkbox" + c,
    className: "EZDrawer__checkbox",
    onChange: w,
    checked: r
  }), p.createElement("nav", {
    role: "navigation",
    id: "EZDrawer__container" + c,
    style: z,
    className: "EZDrawer__container " + S
  }, _), C && p.createElement("label", {
    htmlFor: "EZDrawer__checkbox" + c,
    id: "EZDrawer__overlay" + c,
    className: "EZDrawer__overlay " + Z,
    style: I
  }));
};
const X = M((o, e) => {
  const {
    direction: r = "right",
    duration: a = 300,
    overlayOpacity: w = 0.4,
    enableOverlay: _ = !0,
    zIndex: b = 100,
    //----------------
    onClose: n = () => {
    },
    onOpen: C = () => {
    },
    //----------------
    className: d = "",
    style: D = {},
    color: l = "neutral",
    size: x = "small",
    overlayColor: u,
    width: m = "unset",
    children: v,
    ...E
  } = o, i = V(), [f, s] = T(!1);
  q(e, () => ({
    open() {
      S();
    },
    close() {
      y();
    }
  }));
  const S = (t) => {
    s(!0), C(t);
  }, y = (t) => {
    s(!1), n(t);
  }, h = () => {
    s(!1), n();
  };
  return /* @__PURE__ */ N(F, { children: ({ css: t, cx: g }) => /* @__PURE__ */ N(
    G,
    {
      open: f,
      onClose: h,
      direction: r,
      zIndex: b,
      duration: a,
      overlayOpacity: w,
      enableOverlay: _,
      size: m,
      className: g(
        "drawer-lnc " + d,
        t`
              padding: 20px;
              background-color: ${$(
          i,
          "Drawer",
          l,
          "enabled",
          "background"
        )} !important;
              color: ${$(
          i,
          "Drawer",
          l,
          "enabled",
          "text"
        )};
              ${H(i, "Drawer", x, "enabled")};
            `
      ),
      style: D,
      overlayColor: u,
      ...E,
      children: v
    }
  ) });
});
export {
  X as default
};