@wulperstudio/cms/organisms/SwipeableDrawer/SwipeableDrawer.js

Wulper Studio Library Components CMS

var _CssBaseline, _Puller;
import React from 'react';
import { Global } from '@emotion/react';
import { SwipeableDrawer as SwipeableEdgeDrawer, CssBaseline, Typography } from '@mui/material';
import { Puller, Root, StyledBox } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var drawerBleeding = 56;
export var SwipeableDrawer = function SwipeableDrawer(props) {
  var window = props.window,
    setOpen = props.setOpen,
    open = props.open;
  var toggleDrawer = function toggleDrawer(newOpen) {
    return function () {
      setOpen(newOpen);
    };
  };
  var container = window !== undefined ? function () {
    return window().document.body;
  } : undefined;
  return /*#__PURE__*/_jsxs(Root, {
    children: [_CssBaseline || (_CssBaseline = /*#__PURE__*/_jsx(CssBaseline, {})), /*#__PURE__*/_jsx(Global, {
      styles: {
        '.MuiDrawer-root > .MuiPaper-root': {
          height: "calc(50% - ".concat(drawerBleeding, "px)"),
          overflow: 'visible'
        }
      }
    }), /*#__PURE__*/_jsxs(SwipeableEdgeDrawer, {
      container: container,
      anchor: "bottom",
      open: open,
      onClose: toggleDrawer(false),
      onOpen: toggleDrawer(true),
      swipeAreaWidth: drawerBleeding,
      disableSwipeToOpen: false,
      ModalProps: {
        keepMounted: true
      },
      children: [/*#__PURE__*/_jsxs(StyledBox, {
        sx: {
          position: 'absolute',
          top: -drawerBleeding,
          borderTopLeftRadius: 8,
          borderTopRightRadius: 8,
          visibility: 'visible',
          right: 0,
          left: 0
        },
        children: [_Puller || (_Puller = /*#__PURE__*/_jsx(Puller, {})), /*#__PURE__*/_jsx(Typography, {
          sx: {
            p: 2,
            color: '#fff',
            textAlign: 'center'
          },
          children: "see more"
        })]
      }), /*#__PURE__*/_jsx(StyledBox, {
        onTouchMove: function onTouchMove(e) {
          return e.stopPropagation();
        },
        onTouchEnd: function onTouchEnd(e) {
          return e.stopPropagation();
        },
        onTouchStart: function onTouchStart(e) {
          return e.stopPropagation();
        },
        sx: {
          px: 2,
          pb: 2,
          height: '100%',
          overflow: 'auto'
        },
        children: props.children
      })]
    })]
  });
};