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

React component library

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