@wulperstudio/cms/node/layouts/LayoutRightLeftCenter/index.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LayoutRightLeftCenter = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["headerCmp", "leftCmp", "rightCmp", "variant", "componentProps"],
  _excluded2 = ["sx"],
  _excluded3 = ["sx"],
  _excluded4 = ["sx"],
  _excluded5 = ["sx"];
var LayoutRightLeftCenter = exports.LayoutRightLeftCenter = function LayoutRightLeftCenter(_ref) {
  var headerCmp = _ref.headerCmp,
    leftCmp = _ref.leftCmp,
    rightCmp = _ref.rightCmp,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'columns' : _ref$variant,
    componentProps = _ref.componentProps,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var theme = (0, _material.useTheme)();
  var isMqMd = (0, _material.useMediaQuery)(theme.breakpoints.down('md'));
  var sx = props.sx,
    rest = (0, _objectWithoutProperties2["default"])(props, _excluded2);
  var _ref2 = (componentProps == null ? void 0 : componentProps.header) || {},
    sxHeader = _ref2.sx,
    restHeaderProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
  var _ref3 = (componentProps == null ? void 0 : componentProps.left) || {},
    sxLeft = _ref3.sx,
    restLeftProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded4);
  var _ref4 = (componentProps == null ? void 0 : componentProps.right) || {},
    sxRight = _ref4.sx,
    restRightProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded5);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, Object.assign({
    sx: Object.assign({
      minHeight: '100vh',
      display: 'grid',
      gridTemplateRows: 'auto 1fr',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gridTemplateAreas: "\n          'header header'\n          'left right'\n        "
    }, (variant === 'center' || isMqMd) && {
      gridTemplateColumns: '1fr',
      alignItems: 'center',
      justifyItems: 'center',
      gridTemplateAreas: "\n          'header header'\n          'left left'\n        "
    }, sx)
  }, rest, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
      sx: Object.assign({
        gridArea: 'header'
      }, variant === 'center' && {
        width: '100%'
      }, sxHeader)
    }, restHeaderProps, {
      children: headerCmp
    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
      sx: Object.assign({
        gridArea: 'left'
      }, isMqMd && {
        height: '100%',
        width: '100%'
      }, sxLeft)
    }, restLeftProps, {
      children: leftCmp
    })), rightCmp && !isMqMd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
      sx: Object.assign({
        gridArea: 'right'
      }, variant === 'center' && {
        display: 'none',
        gridArea: 'unset'
      }, sxRight)
    }, restRightProps, {
      children: rightCmp
    }))]
  }));
};