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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DrawerModalSwipe = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _DrawerModal = require("../DrawerModal");
var _components = require("../../components");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "isFullHeightOrSwipe", "SwipeableLargeDrawerProps", "onCloseDrawer", "sx"],
  _excluded2 = ["open", "onClose", "onOpen", "height", "boxProps"],
  _excluded3 = ["onOpen", "onClose", "open", "height"];
/* eslint-disable react/jsx-no-useless-fragment */
var DrawerModalSwipe = exports.DrawerModalSwipe = function DrawerModalSwipe(_ref) {
  var children = _ref.children,
    _ref$isFullHeightOrSw = _ref.isFullHeightOrSwipe,
    isFullHeightOrSwipe = _ref$isFullHeightOrSw === void 0 ? 'swipe' : _ref$isFullHeightOrSw,
    SwipeableLargeDrawerProps = _ref.SwipeableLargeDrawerProps,
    onCloseDrawer = _ref.onCloseDrawer,
    sx = _ref.sx,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var theme = (0, _material.useTheme)();
  var isMqMd = (0, _material.useMediaQuery)(theme.breakpoints.down('md'));
  var open = props.open,
    onClose = props.onClose,
    onOpen = props.onOpen,
    height = props.height,
    boxProps = props.boxProps,
    rest = (0, _objectWithoutProperties2["default"])(props, _excluded2);
  var _ref2 = SwipeableLargeDrawerProps || {},
    _ref2$onOpen = _ref2.onOpen,
    onOpenSwipe = _ref2$onOpen === void 0 ? onOpen : _ref2$onOpen,
    _ref2$onClose = _ref2.onClose,
    onCloseSwipe = _ref2$onClose === void 0 ? onClose : _ref2$onClose,
    _ref2$open = _ref2.open,
    openSwipe = _ref2$open === void 0 ? open : _ref2$open,
    _ref2$height = _ref2.height,
    heightSwipe = _ref2$height === void 0 ? height : _ref2$height,
    restSwipeProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
  if (isFullHeightOrSwipe === 'fullHeight') {
    return isMqMd ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DrawerV2, {
        open: open,
        variant: "temporary",
        onClose: function onClose() {
          return onCloseDrawer && onCloseDrawer();
        },
        direction: "bottom",
        padding: "0px",
        width: "100%",
        mainContainerProps: {
          sx: Object.assign({
            backgroundColor: 'background.default',
            overflow: 'unset',
            display: 'block'
          }, sx)
        },
        contentProps: {
          sx: {
            borderRadius: 0
          }
        },
        children: children
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerModal.DrawerModal, Object.assign({
      open: open,
      onClose: onClose,
      boxProps: Object.assign({}, boxProps, {
        sx: Object.assign((0, _defineProperty2["default"])({
          backgroundColor: 'background.default',
          display: 'flex',
          flexDirection: 'column',
          rowGap: 4,
          overflow: 'auto',
          maxWidth: 600,
          height: '100%',
          minHeight: 600,
          minWidth: 600,
          maxHeight: 600,
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          borderRadius: '1rem'
        }, theme.breakpoints.down('md'), {
          inset: 0,
          transform: 'unset',
          minHeight: '100%',
          minWidth: '100%',
          maxWidth: '100%',
          height: 'auto',
          overflow: 'unset',
          display: 'block',
          p: 0,
          borderRadius: 0
        }), boxProps == null ? void 0 : boxProps.sx)
      })
    }, rest, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
        children: children
      })
    }));
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: isFullHeightOrSwipe === 'swipe' && open && isMqMd ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SwipeableLargeDrawer, Object.assign({
      open: openSwipe,
      onClose: onCloseSwipe,
      onOpen: onOpenSwipe,
      height: heightSwipe
    }, restSwipeProps, {
      children: children
    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerModal.DrawerModal, Object.assign({
      open: open,
      onClose: onClose,
      boxProps: Object.assign({}, boxProps, {
        sx: Object.assign((0, _defineProperty2["default"])({
          backgroundColor: 'background.default',
          display: 'flex',
          flexDirection: 'column',
          rowGap: 4,
          overflow: 'auto',
          maxWidth: 600,
          height: '100%',
          minHeight: 600,
          minWidth: 600,
          maxHeight: 600,
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          borderRadius: '1rem'
        }, theme.breakpoints.down('md'), {
          inset: 0,
          transform: 'unset',
          minHeight: '100%',
          minWidth: '100%',
          maxWidth: '100%',
          height: 'auto',
          overflow: 'unset',
          display: 'block',
          p: 0,
          borderRadius: 0
        }), boxProps == null ? void 0 : boxProps.sx)
      })
    }, rest, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
        children: children
      })
    }))
  });
};