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

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
/* eslint-disable react/jsx-no-useless-fragment */
/* eslint-disable no-unused-vars */
import React from 'react';
import { useMediaQuery, useTheme } from '@mui/material';
import { DrawerV2 } from '../../components';
import { DrawerModal } from '../DrawerModal';
import { LayoutDrawer, LayoutForm } from '../../layouts';
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
export var 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 = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  if (isMqMd) {
    return /*#__PURE__*/_jsx(_Fragment, {
      children: open ? /*#__PURE__*/_jsx(DrawerV2, {
        open: open,
        onClose: handleClose,
        variant: "temporary",
        direction: "top",
        width: "100%",
        boxShadow: "none",
        padding: "0px",
        animation: true,
        contentProps: {
          sx: {
            overflow: 'unset'
          }
        },
        children: /*#__PURE__*/_jsx(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__*/_jsx(DrawerModal, _extends({
    open: open,
    onClose: handleClose
  }, ModalProps, {
    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'), {
        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__*/_jsx(LayoutDrawer, {
      padding: "0px",
      header: header,
      body: body,
      footer: footer
    })
  }));
};