react-cm-ui/core/layout/containerDeprecated/containerDeprecated.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _containerDeprecatedActionBar = _interopRequireDefault(require("./containerDeprecatedActionBar"));

var _containerDeprecatedContent = _interopRequireDefault(require("./containerDeprecatedContent"));

var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var propTypes = {
  as: _propTypes["default"].oneOf(['div', 'header', 'main', 'section']),
  children: _propTypes["default"].node,
  className: _propTypes["default"].string,
  color: _propTypes["default"].oneOf(_utils["default"].colorEnums()),
  style: _propTypes["default"].shape({})
};
var defaultProps = {
  as: null,
  children: null,
  className: null,
  color: null,
  style: null
};
var useStyles = (0, _makeStyles["default"])(function (_ref) {
  var _root;

  var breakpoints = _ref.breakpoints,
      palette = _ref.palette,
      width = _ref.width;
  return {
    root: (_root = {
      backgroundColor: palette.background.primary,
      minHeight: '100%',
      padding: '0 11px',
      width: '100%'
    }, _defineProperty(_root, breakpoints.up('md'), {
      padding: '0 22px'
    }), _defineProperty(_root, '&.container-color', {
      '&-inverse': {
        backgroundColor: palette.background.contrastPrimary
      },
      '&-light': {
        backgroundColor: palette.background.light
      },
      '&-nest': {
        backgroundColor: palette.background.secondary
      },
      '&-transparent': {
        backgroundColor: 'transparent'
      }
    }), _defineProperty(_root, '& .ui.rail', {
      position: 'absolute'
    }), _defineProperty(_root, '& .container-content', {
      margin: '0 auto',
      maxWidth: "".concat(1720 - width.navigation.md.expanded, "px"),
      position: 'relative',
      width: '100%'
    }), _defineProperty(_root, '& .container-content-max-width', {
      '&-laptop': {
        maxWidth: "".concat(1024 - width.navigation.md.expanded - 44, "px")
      }
    }), _root)
  };
});

function ContainerDeprecated(props) {
  var as = props.as,
      children = props.children,
      className = props.className,
      color = props.color,
      style = props.style;
  var classes = useStyles(props);
  var rootClasses = (0, _classnames["default"])('ui', 'container_deprecated', classes.root, className, {
    'container-color-inverse': color === 'inverse',
    'container-color-light': color === 'light',
    'container-color-nest': color === 'nest',
    'container-color-transparent': color === 'transparent'
  });

  var ElementType = _utils["default"].getElementType(as || 'main', props);

  return /*#__PURE__*/_react["default"].createElement(ElementType, {
    className: rootClasses,
    style: style
  }, children);
}

ContainerDeprecated.ActionBar = _containerDeprecatedActionBar["default"];
ContainerDeprecated.Content = _containerDeprecatedContent["default"];
ContainerDeprecated.propTypes = propTypes;
ContainerDeprecated.defaultProps = defaultProps;
var _default = ContainerDeprecated;
exports["default"] = _default;