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

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _Puller;
var _excluded = ["children", "height", "contentSwipeProps"],
  _excluded2 = ["open", "onOpen", "onClose", "anchor", "swipeAreaWidth", "disableSwipeToOpen", "ModalProps"],
  _excluded3 = ["sx"];
/* eslint-disable react/react-in-jsx-scope */
import React from 'react';
import { Global } from '@emotion/react';
import { Box, SwipeableDrawer, useTheme } from '@mui/material';
import { Root, Puller } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var SwipeableLargeDrawer = function SwipeableLargeDrawer(_ref) {
  var children = _ref.children,
    height = _ref.height,
    contentSwipeProps = _ref.contentSwipeProps,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_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 = _objectWithoutProperties(props, _excluded2);
  var _ref2 = contentSwipeProps || {},
    sx = _ref2.sx,
    restContentSwipeProps = _objectWithoutProperties(_ref2, _excluded3);
  var handleSwipeUp = function handleSwipeUp() {
    setIsFullScreen(true);
  };
  var handleSwipeDown = function handleSwipeDown() {
    setIsFullScreen(false);
  };
  return /*#__PURE__*/_jsxs(Root, {
    children: [/*#__PURE__*/_jsx(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__*/_jsx(SwipeableDrawer, Object.assign({
      anchor: anchor,
      open: open,
      onClose: onClose,
      onOpen: onOpen,
      swipeAreaWidth: swipeAreaWidth,
      disableSwipeToOpen: disableSwipeToOpen,
      ModalProps: Object.assign({}, ModalProps, {
        keepMounted: true
      })
    }, rest, {
      children: /*#__PURE__*/_jsxs(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__*/_jsx(Box, {
          sx: {
            display: 'flex',
            justifyContent: 'center',
            marginBottom: 2,
            cursor: 'pointer'
          },
          onClick: isFullScreen ? handleSwipeDown : handleSwipeUp,
          children: _Puller || (_Puller = /*#__PURE__*/_jsx(Puller, {}))
        }), children]
      }))
    }))]
  });
};
export default SwipeableLargeDrawer;