react-cm-ui/core/layout/containerDeprecated/containerDeprecatedActionBar.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 _utils = _interopRequireDefault(require("../../utils/utils"));

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

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', 'section']),
  children: _propTypes["default"].node,
  className: _propTypes["default"].string,
  color: _propTypes["default"].oneOf(_utils["default"].colorEnums()),
  stretch: _propTypes["default"].bool,
  style: _propTypes["default"].shape({})
};
var defaultProps = {
  as: null,
  children: null,
  className: null,
  color: null,
  stretch: null,
  style: null
};
var useStyles = (0, _makeStyles["default"])(function (_ref) {
  var breakpoints = _ref.breakpoints,
      palette = _ref.palette;
  return {
    root: {
      alignItems: 'center',
      backgroundColor: palette.background.primary,
      borderBottom: "1px solid ".concat(palette.border.primary),
      borderTop: "1px solid ".concat(palette.border.primary),
      display: 'flex',
      justifyContent: 'flex-start',
      minHeight: 70,
      padding: '0 22px',
      width: 'auto',
      '&.container-action-bar-color': {
        '&-inverse': {
          backgroundColor: palette.background.contrastPrimary
        },
        '&-light': {
          backgroundColor: palette.background.light
        },
        '&-nest': {
          backgroundColor: palette.background.secondary
        },
        '&-primary': {
          backgroundColor: palette.background.primary
        },
        '&-transparent': {
          backgroundColor: 'transparent'
        }
      },
      '&.container-action-bar-stretch': _defineProperty({
        margin: '0 -11px'
      }, breakpoints.up('md'), {
        margin: '0 -22px'
      })
    },
    '@global': {
      '.container_deprecated .ui.sub-navigation + .container-action-bar': {
        borderTop: 0
      }
    }
  };
});

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

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

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

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