@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDDrawer.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
var drawerStyles = {
  position: "fixed",
  display: "flex",
  justifyContent: "center",
  alignItems: "flex-end",
  height: "100%",
  width: "100%",
  zIndex: 1000,
  left: 0,
  top: 0
};
var overlayStyles = {
  position: "absolute",
  backgroundColor: "rgba(0, 0, 0, 0.5)",
  height: "100%",
  width: "100%",
  left: 0,
  top: 0
};
var contentStyles = {
  boxShadow: "0 -5px 15px rgba(0, 0, 0, 0.3)",
  borderRadius: "10px 10px 0 0",
  backgroundColor: "#fff",
  height: "27.69rem",
  width: "100%",
  zIndex: 1001,
  paddingBottom: "2.69rem",
  paddingRight: "20px",
  paddingLeft: "20px",
  paddingTop: "20px"
};
function HUDDrawer(hudDrawerConfigurationSettings) {
  var _hudDrawerConfigurati = hudDrawerConfigurationSettings.drawerContentContainerConfigurationSettings,
    drawerContentContainerConfigurationSettings = _hudDrawerConfigurati === void 0 ? {} : _hudDrawerConfigurati,
    _hudDrawerConfigurati2 = hudDrawerConfigurationSettings.drawerContainerConfigurationSettings,
    drawerContainerConfigurationSettings = _hudDrawerConfigurati2 === void 0 ? {} : _hudDrawerConfigurati2,
    _hudDrawerConfigurati3 = hudDrawerConfigurationSettings.drawerBackdropConfigurationSettings,
    drawerBackdropConfigurationSettings = _hudDrawerConfigurati3 === void 0 ? {} : _hudDrawerConfigurati3,
    _hudDrawerConfigurati4 = hudDrawerConfigurationSettings.drawerContentConfigurationSettings,
    drawerContentConfigurationSettings = _hudDrawerConfigurati4 === void 0 ? {} : _hudDrawerConfigurati4,
    _hudDrawerConfigurati5 = hudDrawerConfigurationSettings.drawerHeaderConfigurationSettings,
    drawerHeaderConfigurationSettings = _hudDrawerConfigurati5 === void 0 ? {} : _hudDrawerConfigurati5,
    _hudDrawerConfigurati6 = hudDrawerConfigurationSettings.drawerBarConfigurationSettings,
    drawerBarConfigurationSettings = _hudDrawerConfigurati6 === void 0 ? {} : _hudDrawerConfigurati6,
    _hudDrawerConfigurati7 = hudDrawerConfigurationSettings.contentStylerID,
    contentStylerID = _hudDrawerConfigurati7 === void 0 ? "invisa-scroller" : _hudDrawerConfigurati7,
    children = hudDrawerConfigurationSettings.children,
    onClose = hudDrawerConfigurationSettings.onClose,
    open = hudDrawerConfigurationSettings.open;
  var _useState = useState({
      bottom: 0,
      top: 27
    }),
    _useState2 = _slicedToArray(_useState, 2),
    constraints = _useState2[0],
    setConstraints = _useState2[1];
  var _useState3 = useState(-1),
    _useState4 = _slicedToArray(_useState3, 2),
    drawerYPos = _useState4[0],
    setDrawerYPos = _useState4[1];
  var drawerRef = useRef(null);
  var mergedConfigurationSettings = {
    backDrop: _objectSpread(_objectSpread({}, overlayStyles), drawerBackdropConfigurationSettings),
    drawer: _objectSpread(_objectSpread({}, drawerStyles), drawerContainerConfigurationSettings),
    content: _objectSpread(_objectSpread({}, contentStyles), drawerContentConfigurationSettings)
  };
  var checkDrawerPosition = function checkDrawerPosition() {
    if (drawerRef.current) {
      var _drawerRef$current$ge = drawerRef.current.getBoundingClientRect(),
        top = _drawerRef$current$ge.top;
      checkCloseDrawer(top);
    }
  };
  var checkCloseDrawer = function checkCloseDrawer() {
    var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : drawerYPos;
    if (n > window.innerHeight * 0.69) {
      onClose();
      return;
    }
    return;
  };
  var handleDrag = function handleDrag(event, info) {
    setDrawerYPos(info.point.y);
    return;
  };
  var handleCloseDrag = function handleCloseDrag(event, info) {
    drawerRef.current.style.bottom = 0;
    checkCloseDrawer(drawerYPos);
    return;
  };
  useEffect(function () {
    if (drawerRef.current) {
      var nHeight = drawerRef.current.clientHeight;
      setConstraints({
        bottom: nHeight,
        top: 27
      });
    }
  }, [open]);
  useEffect(function () {
    if (drawerYPos !== -1 && open) {
      var intervalId = setInterval(function () {
        checkDrawerPosition();
      }, 100);
      return function () {
        return clearInterval(intervalId);
      };
    }
    return;
  }, [open, drawerYPos, drawerRef.current]);
  return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement("div", {
    style: mergedConfigurationSettings.drawer
  }, /*#__PURE__*/React.createElement(motion.div, {
    style: mergedConfigurationSettings.backDrop,
    initial: {
      opacity: 0
    },
    animate: {
      opacity: 1
    },
    exit: {
      opacity: 0
    },
    onClick: onClose
  }), /*#__PURE__*/React.createElement(motion.div, {
    ref: drawerRef,
    style: mergedConfigurationSettings.content,
    initial: {
      y: "100%"
    },
    animate: {
      y: 0
    },
    exit: {
      y: "100%"
    },
    transition: {
      type: "spring",
      stiffness: 369,
      damping: 30
    },
    dragConstraints: constraints,
    dragElastic: 0.0269,
    drag: "y",
    onDragEnd: handleCloseDrag,
    onDrag: handleDrag
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      justifyContent: "center",
      background: "transparent",
      height: "auto",
      width: "calc(100%)",
      marginBottom: "0.69rem"
    }, drawerHeaderConfigurationSettings)
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      cursor: "grab",
      background: "rgba(169, 169, 169, 1)",
      borderRadius: "1rem",
      height: "0.569rem",
      width: "calc(15.69%)"
    }, drawerBarConfigurationSettings)
  })), /*#__PURE__*/React.createElement("div", {
    className: contentStylerID,
    style: _objectSpread({
      overflowY: "auto",
      background: "transparent",
      height: "calc(100%)",
      width: "calc(100%)",
      marginBottom: "0.69rem"
    }, drawerContentContainerConfigurationSettings)
  }, children))));
}
;
export default HUDDrawer;