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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SwipeableDrawer = void 0;
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 _CssBaseline, _Puller;
var drawerBleeding = 56;
var SwipeableDrawer = exports.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__*/(0, _jsxRuntime.jsxs)(_styled.Root, {
    children: [_CssBaseline || (_CssBaseline = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CssBaseline, {})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
      styles: {
        '.MuiDrawer-root > .MuiPaper-root': {
          height: "calc(50% - ".concat(drawerBleeding, "px)"),
          overflow: 'visible'
        }
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.SwipeableDrawer, {
      container: container,
      anchor: "bottom",
      open: open,
      onClose: toggleDrawer(false),
      onOpen: toggleDrawer(true),
      swipeAreaWidth: drawerBleeding,
      disableSwipeToOpen: false,
      ModalProps: {
        keepMounted: true
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.StyledBox, {
        sx: {
          position: 'absolute',
          top: -drawerBleeding,
          borderTopLeftRadius: 8,
          borderTopRightRadius: 8,
          visibility: 'visible',
          right: 0,
          left: 0
        },
        children: [_Puller || (_Puller = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.Puller, {})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
          sx: {
            p: 2,
            color: '#fff',
            textAlign: 'center'
          },
          children: "see more"
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.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
      })]
    })]
  });
};