@wulperstudio/cms/node/components/SwipeableLargeDrawer/SwipeableLargeDrawer.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _material = require("@mui/material");
var _styled = require("./styled");
var _jsxRuntime = require("react/jsx-runtime");
var _Puller;
var _excluded = ["children", "height", "contentSwipeProps"],
  _excluded2 = ["open", "onOpen", "onClose", "anchor", "swipeAreaWidth", "disableSwipeToOpen", "ModalProps"],
  _excluded3 = ["sx"];
/* eslint-disable react/react-in-jsx-scope */
var SwipeableLargeDrawer = function SwipeableLargeDrawer(_ref) {
  var children = _ref.children,
    height = _ref.height,
    contentSwipeProps = _ref.contentSwipeProps,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var theme = (0, _material.useTheme)();
  var _React$useState = _react["default"].useState(false),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    isFullScreen = _React$useState2[0],
    setIsFullScreen = _React$useState2[1];
  var open = props.open,
    onOpen = props.onOpen,
    onClose = props.onClose,
    _props$anchor = props.anchor,
    anchor = _props$anchor === void 0 ? 'bottom' : _props$anchor,
    _props$swipeAreaWidth = props.swipeAreaWidth,
    swipeAreaWidth = _props$swipeAreaWidth === void 0 ? 31 : _props$swipeAreaWidth,
    _props$disableSwipeTo = props.disableSwipeToOpen,
    disableSwipeToOpen = _props$disableSwipeTo === void 0 ? false : _props$disableSwipeTo,
    ModalProps = props.ModalProps,
    rest = (0, _objectWithoutProperties2["default"])(props, _excluded2);
  var _ref2 = contentSwipeProps || {},
    sx = _ref2.sx,
    restContentSwipeProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
  var handleSwipeUp = function handleSwipeUp() {
    setIsFullScreen(true);
  };
  var handleSwipeDown = function handleSwipeDown() {
    setIsFullScreen(false);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Root, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
      styles: {
        '.MuiDrawer-root > .MuiPaper-root': Object.assign({
          height: isFullScreen ? '100%' : height != null ? height : '40%',
          overflow: 'auto',
          borderTopLeftRadius: '20px',
          borderTopRightRadius: '20px',
          backgroundColor: theme.palette.background["default"]
        }, isFullScreen && {
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0
        })
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SwipeableDrawer, Object.assign({
      anchor: anchor,
      open: open,
      onClose: onClose,
      onOpen: onOpen,
      swipeAreaWidth: swipeAreaWidth,
      disableSwipeToOpen: disableSwipeToOpen,
      ModalProps: Object.assign({}, ModalProps, {
        keepMounted: true
      })
    }, rest, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, Object.assign({
        sx: Object.assign({
          // height: '100%',
          overflowY: 'auto',
          position: 'relative',
          backgroundColor: 'background.default',
          borderTopLeftRadius: '20px',
          borderTopRightRadius: '20px',
          display: 'grid',
          gridTemplateRows: 'auto 1fr',
          gridTemplateColumns: '1fr',
          gap: '.625rem',
          height: isFullScreen ? '100%' : height != null ? height : '40%',
          p: '1rem'
        }, isFullScreen && {
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0
        }, sx)
      }, restContentSwipeProps, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
          sx: {
            display: 'flex',
            justifyContent: 'center',
            marginBottom: 2,
            cursor: 'pointer'
          },
          onClick: isFullScreen ? handleSwipeDown : handleSwipeUp,
          children: _Puller || (_Puller = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.Puller, {}))
        }), children]
      }))
    }))]
  });
};
var _default = exports["default"] = SwipeableLargeDrawer;