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

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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 */
import React from 'react';
import { useMediaQuery, useTheme } from '@mui/material';
import { DrawerModal } from '../DrawerModal';
import { DrawerV2, SwipeableLargeDrawer } from '../../components';
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
export var 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 = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  var open = props.open,
    onClose = props.onClose,
    onOpen = props.onOpen,
    height = props.height,
    boxProps = props.boxProps,
    rest = _objectWithoutProperties(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 = _objectWithoutProperties(_ref2, _excluded3);
  if (isFullHeightOrSwipe === 'fullHeight') {
    return isMqMd ? /*#__PURE__*/_jsx(_Fragment, {
      children: open && /*#__PURE__*/_jsx(DrawerV2, {
        open: open,
        variant: "temporary",
        onClose: function onClose() {
          return onCloseDrawer && onCloseDrawer();
        },
        direction: "bottom",
        padding: "0px",
        width: "100%",
        mainContainerProps: {
          sx: _extends({
            backgroundColor: 'background.default',
            overflow: 'unset',
            display: 'block'
          }, sx)
        },
        contentProps: {
          sx: {
            borderRadius: 0
          }
        },
        children: children
      })
    }) : /*#__PURE__*/_jsx(DrawerModal, _extends({
      open: open,
      onClose: onClose,
      boxProps: _extends({}, boxProps, {
        sx: _extends(_defineProperty({
          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__*/_jsx(_Fragment, {
        children: children
      })
    }));
  }
  return /*#__PURE__*/_jsx(_Fragment, {
    children: isFullHeightOrSwipe === 'swipe' && open && isMqMd ? /*#__PURE__*/_jsx(SwipeableLargeDrawer, _extends({
      open: openSwipe,
      onClose: onCloseSwipe,
      onOpen: onOpenSwipe,
      height: heightSwipe
    }, restSwipeProps, {
      children: children
    })) : /*#__PURE__*/_jsx(DrawerModal, _extends({
      open: open,
      onClose: onClose,
      boxProps: _extends({}, boxProps, {
        sx: _extends(_defineProperty({
          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__*/_jsx(_Fragment, {
        children: children
      })
    }))
  });
};