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

React component library

import { jsx as g, Fragment as Y } from "react/jsx-runtime";
import { forwardRef as V, useRef as q, useState as A, useImperativeHandle as B, useEffect as G } from "react";
import { P as t } from "./index-S5Cd7WrG.js";
import { n as y } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { b as $, c as J } from "./utils-DtRLzzTZ.js";
import { u as K } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const Q = (e, r, o, u, s) => {
  if (e === "right" || e === "left" || r && o) return "height: 100%;";
  if (!(r && s === !0))
    return r ? "height: " + u + ";" : "height: 0;";
}, R = (e, r, o, u, s) => {
  if (e === "top" || e === "bottom" || r && o) return "width: 100%;";
  if (!(r && s === !0))
    return r ? "width: " + u + ";" : "width: 0;";
}, Z = y.div`
  touch-action: none;
  overflow: auto;
  max-height: ${(e) => e.isOpen || e.unsetHeight === !1 ? "100dvh" : 0};
  ${(e) => Q(
  e.direction,
  e.isOpen,
  e.isFullPage,
  e.drawerSize,
  e.unsetHeight
)}
  max-width: ${(e) => e.isOpen || e.unsetWidth === !1 ? "100vw" : 0};
  ${(e) => R(
  e.direction,
  e.isOpen,
  e.isFullPage,
  e.drawerSize,
  e.unsetWidth
)}
  position: fixed;
  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) => $(
  e.theme,
  "Drawer",
  e.color,
  "enabled",
  "background"
)};
  color: ${(e) => $(e.theme, "Drawer", e.color, "enabled", "text")};
  ${(e) => J(e.theme, "Drawer", e.size, "enabled")};
`, _ = y.div`
  z-index: ${(e) => e.zIndex};
  position: fixed;
  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};
`, ee = V((e, r) => {
  const {
    direction: o = "right",
    open: u = !1,
    duration: s = 0.8,
    enableOverlay: O = !0,
    zIndex: m = 100,
    closeOnClickOutside: x = !0,
    closeOnSwipe: c = !0,
    isFullPage: p = !1,
    unsetHeight: z = !1,
    unsetWidth: S = !1,
    //----------------
    onClose: C = () => {
    },
    onOpen: D = () => {
    },
    //----------------
    className: T = "",
    style: k = {},
    color: H = "neutral",
    overlayColor: I = "rgba(123, 123, 123, 0.5)",
    size: P = "small",
    drawerSize: F = "12.5rem",
    children: W,
    ...E
  } = e, M = K(), i = q(), [f, b] = A(!1);
  var d = null, h = null;
  function j(n) {
    return n.touches || n.originalEvent.touches;
  }
  function L(n) {
    const a = j(n)[0];
    d = a.clientX, h = a.clientY;
  }
  function N(n) {
    if (!(!d || !h)) {
      var a = n.touches[0].clientX, X = n.touches[0].clientY, w = d - a, v = h - X;
      Math.abs(w) > Math.abs(v) ? w > 0 ? c == !0 && o == "left" && l() : c == !0 && o == "right" && l() : v > 0 ? c == !0 && o == "top" && l() : c == !0 && o == "bottom" && l(), d = null, h = null;
    }
  }
  B(r, () => ({
    open() {
      U();
    },
    close() {
      l();
    },
    isOpen() {
      return f;
    }
  }));
  const U = (n) => {
    b(!0), D(n);
  }, l = (n) => {
    b(!1), C(n);
  };
  return G(() => {
    const n = (a) => {
      i != null && i.current && !(i != null && i.current.contains(a.target)) && x == !0 && l();
    };
    return document.addEventListener("click", n, !0), () => {
      document.removeEventListener("click", n, !0);
    };
  }, []), /* @__PURE__ */ g(Y, { children: /* @__PURE__ */ g(
    _,
    {
      enableOverlay: O,
      overlayColor: I,
      isOpen: f,
      zIndex: m,
      children: /* @__PURE__ */ g(
        Z,
        {
          ref: i,
          zIndex: m,
          isOpen: f,
          direction: o,
          isFullPage: p,
          unsetHeight: z,
          unsetWidth: S,
          duration: s,
          color: H,
          theme: M,
          className: T,
          style: k,
          size: P,
          drawerSize: F,
          onTouchStart: L,
          onTouchMove: N,
          ...E,
          children: W
        }
      )
    }
  ) });
});
ee.propTypes = {
  direction: t.oneOf(["top", "right", "left", "bottom"]),
  open: t.bool,
  /**
   * Duration of opening the drawer in ms
   */
  duration: t.number,
  /**
   * Determines whether to show the overlay
   */
  enableOverlay: t.bool,
  /**
   * z-index of Drawer
   */
  zIndex: t.number,
  closeOnClickOutside: t.bool,
  closeOnSwipe: t.bool,
  /**
   * Determines whether drawer takes up the whole page
   */
  isFullPage: t.bool,
  unsetHeight: t.bool,
  unsetWidth: t.bool,
  //---------------------------------------------------------------
  onClose: t.func,
  onOpen: t.func,
  //---------------------------------------------------------------
  className: t.string,
  style: t.object,
  overlayColor: t.string,
  /**
   * Determines drawer's height or width depending on direction
   */
  drawerSize: t.string,
  /**
   * Determines font size
   */
  size: t.oneOf(["small", "medium", "large"]),
  color: t.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  ee as default
};