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

React component library

import { jsx as f, Fragment as j } from "react/jsx-runtime";
import { forwardRef as N, useRef as V, useState as q, useImperativeHandle as A, useEffect as B } from "react";
import { s as b } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { c as w, d as G } from "./utils-BUdHa0nB.js";
import { u as J } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const K = (e, n, r, l, u) => {
  if (e === "right" || e === "left" || n && r) return "height: 100%;";
  if (!(n && u === !0))
    return n ? "height: " + l + ";" : "height: 0;";
}, Q = (e, n, r, l, u) => {
  if (e === "top" || e === "bottom" || n && r) return "width: 100%;";
  if (!(n && u === !0))
    return n ? "width: " + l + ";" : "width: 0;";
}, R = b.div`
  touch-action: none;
  overflow: auto;
  max-height: ${(e) => e.isOpen || e.unsetHeight === !1 ? "100dvh" : 0};
  ${(e) => K(
  e.direction,
  e.isOpen,
  e.isFullPage,
  e.drawerSize,
  e.unsetHeight
)}
  max-width: ${(e) => e.isOpen || e.unsetWidth === !1 ? "100vw" : 0};
  ${(e) => Q(
  e.direction,
  e.isOpen,
  e.isFullPage,
  e.drawerSize,
  e.unsetWidth
)}
  position: ${(e) => e.position};
  z-index: ${(e) => e.zIndex};
  ${(e) => e.direction === "bottom" ? "bottom: 0" : "top: 0"};
  ${(e) => e.direction === "right" ? "right: 0" : "left: 0"};
  -webkit-transition: ${(e) => `all ${e.duration}s`};
  -moz-transition: ${(e) => `all ${e.duration}s`};
  -ms-transition: ${(e) => `all ${e.duration}s`};
  -o-transition: ${(e) => `all ${e.duration}s`};
  transition: ${(e) => `all ${e.duration}s`};
  padding: ${(e) => e.isOpen === !0 ? "20px" : 0};

  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);

  background-color: ${(e) => w(
  e.theme,
  "Drawer",
  e.color,
  "enabled",
  "background"
)};
  color: ${(e) => w(e.theme, "Drawer", e.color, "enabled", "text")};
  ${(e) => G(e.theme, "Drawer", e.size, "enabled")};
`, Z = b.div`
  z-index: ${(e) => e.zIndex};
  position: ${(e) => e.position};
  top: 0;
  left: 0;

  height: ${(e) => e.isOpen === !0 && e.enableOverlay === !0 ? "100dvh" : 0};
  width: ${(e) => e.isOpen === !0 && e.enableOverlay === !0 ? "100vw" : 0};
  background-color: ${(e) => e.overlayColor};
`, ie = N((e, n) => {
  const {
    direction: r = "right",
    duration: l = 0.8,
    enableOverlay: u = !0,
    zIndex: g = 100,
    position: x = "fixed",
    closeOnClickOutside: y = !0,
    closeOnSwipe: s = !0,
    isFullPage: O = !1,
    unsetHeight: z = !1,
    unsetWidth: D = !1,
    //----------------
    onClose: S = () => {
    },
    onOpen: k = () => {
    },
    //----------------
    className: p = "",
    style: C = {},
    color: T = "neutral",
    overlayColor: H = "rgba(123, 123, 123, 0.5)",
    size: I = "small",
    drawerSize: E = "12.5rem",
    children: F,
    ...M
  } = e, W = J(), i = V(), [d, m] = q(!1);
  var c = null, h = null;
  function P(t) {
    return t.touches || t.originalEvent.touches;
  }
  function L(t) {
    const a = P(t)[0];
    c = a.clientX, h = a.clientY;
  }
  function U(t) {
    if (!(!c || !h)) {
      var a = t.touches[0].clientX, Y = t.touches[0].clientY, $ = c - a, v = h - Y;
      Math.abs($) > Math.abs(v) ? $ > 0 ? s == !0 && r == "left" && o() : s == !0 && r == "right" && o() : v > 0 ? s == !0 && r == "top" && o() : s == !0 && r == "bottom" && o(), c = null, h = null;
    }
  }
  A(n, () => ({
    open() {
      X();
    },
    close() {
      o();
    },
    isOpen() {
      return d;
    }
  }));
  const X = (t) => {
    m(!0), k(t);
  }, o = (t) => {
    m(!1), S(t);
  };
  return B(() => {
    const t = (a) => {
      i != null && i.current && !(i != null && i.current.contains(a.target)) && y == !0 && o();
    };
    return document.addEventListener("click", t, !0), () => {
      document.removeEventListener("click", t, !0);
    };
  }, []), /* @__PURE__ */ f(j, { children: /* @__PURE__ */ f(
    Z,
    {
      enableOverlay: u,
      overlayColor: H,
      isOpen: d,
      zIndex: g,
      position: x,
      children: /* @__PURE__ */ f(
        R,
        {
          ref: i,
          zIndex: g,
          isOpen: d,
          direction: r,
          isFullPage: O,
          unsetHeight: z,
          unsetWidth: D,
          duration: l,
          color: T,
          theme: W,
          className: p,
          style: C,
          size: I,
          drawerSize: E,
          onTouchStart: L,
          onTouchMove: U,
          ...M,
          children: F
        }
      )
    }
  ) });
});
export {
  ie as default
};