react-cm-ui/core/layout/content/content.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 _constants = require("../../global/constants");

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,
  classes: _propTypes["default"].shape({
    root: _propTypes["default"].string
  }),
  className: _propTypes["default"].string,
  id: _propTypes["default"].string,
  isFiltersRailOpen: _propTypes["default"].bool,
  moduleType: _propTypes["default"].oneOf(['drawer', 'page']),
  scrollable: _propTypes["default"].bool,
  style: _propTypes["default"].shape({})
};
var defaultProps = {
  as: 'section',
  children: null,
  classes: null,
  className: null,
  id: null,
  isFiltersRailOpen: false,
  moduleType: 'page',
  scrollable: false,
  style: null
};
var useStyles = (0, _makeStyles["default"])(function (theme) {
  var breakpoints = theme.breakpoints,
      gutters = theme.gutters;
  return {
    isInDrawer: {},
    isInPage: {},
    root: {
      position: 'relative',
      transition: 'margin 200ms ease-out',
      zIndex: 0,
      '&$isInPage': _defineProperty({
        margin: "0 -".concat(gutters.page.sm, "px"),
        padding: "0 ".concat(gutters.page.sm, "px")
      }, breakpoints.up(496), {
        margin: "0 -".concat(gutters.page[496], "px"),
        padding: "0 ".concat(gutters.page[496], "px")
      }),
      '&$isInDrawer': {
        padding: "0 ".concat(gutters.drawer.sm, "px")
      },
      '&.page--content-filters_rail_open': {
        marginLeft: 250
      },
      '&.page--content-scrollable': {
        overflowX: 'scroll'
      }
    }
  };
});

function Content(props) {
  var _ClassNames;

  var as = props.as,
      children = props.children,
      className = props.className,
      id = props.id,
      isFiltersRailOpen = props.isFiltersRailOpen,
      moduleType = props.moduleType,
      scrollable = props.scrollable,
      style = props.style;
  var classes = useStyles(props);
  var winWidth = window.innerWidth;
  var isMobile = winWidth <= 767;
  var rootClasses = (0, _classnames["default"])(_constants.UI_CLASS_NAME, _constants.BEM_CONTENT, classes.root, className, (_ClassNames = {}, _defineProperty(_ClassNames, classes.isInPage, !moduleType || moduleType === 'page'), _defineProperty(_ClassNames, classes.isInDrawer, moduleType === 'drawer'), _defineProperty(_ClassNames, "".concat(_constants.BEM_CONTENT, "-filters_rail_open"), !isMobile && isFiltersRailOpen), _defineProperty(_ClassNames, "".concat(_constants.BEM_CONTENT, "-scrollable"), scrollable), _ClassNames));

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

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

Content.propTypes = propTypes;
Content.defaultProps = defaultProps;
var _default = Content;
exports["default"] = _default;