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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DrawerModalLayout = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _components = require("../../components");
var _DrawerModal = require("../DrawerModal");
var _layouts = require("../../layouts");
var _jsxRuntime = require("react/jsx-runtime");
/* eslint-disable react/jsx-no-useless-fragment */
/* eslint-disable no-unused-vars */

var DrawerModalLayout = exports.DrawerModalLayout = function DrawerModalLayout(_ref) {
  var _ModalProps$boxProps;
  var body = _ref.body,
    handleClose = _ref.handleClose,
    open = _ref.open,
    footer = _ref.footer,
    header = _ref.header,
    ModalProps = _ref.ModalProps;
  var theme = (0, _material.useTheme)();
  var isMqMd = (0, _material.useMediaQuery)(theme.breakpoints.down('md'));
  if (isMqMd) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DrawerV2, {
        open: open,
        onClose: handleClose,
        variant: "temporary",
        direction: "top",
        width: "100%",
        boxShadow: "none",
        padding: "0px",
        animation: true,
        contentProps: {
          sx: {
            overflow: 'unset'
          }
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layouts.LayoutForm, {
          as: "form",
          componentsProps: {
            HeaderProps: {
              sx: {
                zIndex: 9,
                position: {
                  xs: 'fixed',
                  md: 'static'
                },
                top: {
                  xs: '0px',
                  md: 'unset'
                }
              }
            },
            BodyProps: {
              sx: {
                pt: '75px',
                pb: '75px',
                height: {
                  xs: 'auto',
                  md: '100%'
                }
              }
            },
            FooterProps: {
              sx: {
                backgroundColor: 'background.default',
                position: {
                  xs: 'fixed',
                  md: 'static'
                },
                bottom: {
                  xs: '0px',
                  md: 'unset'
                }
              }
            }
          },
          padding: "0px",
          header: header,
          body: body,
          footer: footer
        })
      }) : null
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerModal.DrawerModal, Object.assign({
    open: open,
    onClose: handleClose
  }, ModalProps, {
    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'), {
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        transform: 'unset',
        minHeight: '100%',
        minWidth: '100%',
        maxWidth: '100%',
        height: 'auto',
        overflow: 'unset',
        display: 'block',
        p: 0
      }), ModalProps == null || (_ModalProps$boxProps = ModalProps.boxProps) == null ? void 0 : _ModalProps$boxProps.sx)
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layouts.LayoutDrawer, {
      padding: "0px",
      header: header,
      body: body,
      footer: footer
    })
  }));
};