react-cm-ui/core/surfaces/appBar/appBar.js

React UI for Healthy Church

"use strict";

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

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

var _lodash = require("lodash");

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

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

var _constants = require("../../global/constants");

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

var _appBarConstants = require("./appBarConstants");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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 = {
  /**
   * App Bar content
   */
  children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape({}), _propTypes["default"].arrayOf(_propTypes["default"].shape({}))]).isRequired,

  /**
   * Additional classes strings.
   */
  className: _propTypes["default"].string,

  /**
   * Additional classes object.
   */
  classes: _propTypes["default"].shape({
    root: _propTypes["default"].string
  }),

  /**
   * Used for DOM testing. https://testing-library.com/docs/queries/bytestid/
   */
  dataTestId: _propTypes["default"].string,

  /**
   * Content position.
   */
  placement: _propTypes["default"].oneOf(['top-left', 'top-center', 'top-right', 'middle-left', 'middle-center', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right']),

  /**
   * Supply any inline styles to the App Bar's container
  */
  style: _propTypes["default"].shape({})
};
var defaultProps = {
  className: '',
  classes: {},
  dataTestId: "".concat(_constants.UI_CLASS_NAME, "-").concat(_constants.BEM_APP_BAR),
  placement: 'top-left',
  style: undefined
};
var useStyles = (0, _makeStyles["default"])(function (theme) {
  var _root;

  var heightMd = (0, _lodash.get)(theme, 'height.appHeader.md');
  var heightSm = (0, _lodash.get)(theme, 'height.appHeader.sm');
  var colorBlack = (0, _lodash.get)(theme, 'palette.common.black');
  return {
    root: (_root = {
      backgroundColor: (0, _lodash.get)(theme, 'palette.background.primary'),
      boxShadow: "0 2px 1px -2px ".concat(colorBlack),
      padding: '10px 22px',
      display: 'flex',
      justifyContent: function justifyContent(_ref) {
        var placement = _ref.placement;

        switch (placement) {
          case _appBarConstants.PLACEMENT_TOP_LEFT:
          case _appBarConstants.PLACEMENT_MIDDLE_LEFT:
          case _appBarConstants.PLACEMENT_BOTTOM_LEFT:
            return _appBarConstants.JUSTIFY_CONTENT_START;

          case _appBarConstants.PLACEMENT_TOP_CENTER:
          case _appBarConstants.PLACEMENT_MIDDLE_CENTER:
          case _appBarConstants.PLACEMENT_BOTTOM_CENTER:
            return _appBarConstants.JUSTIFY_CONTENT_CENTER;

          case _appBarConstants.PLACEMENT_TOP_RIGHT:
          case _appBarConstants.PLACEMENT_MIDDLE_RIGHT:
          case _appBarConstants.PLACEMENT_BOTTOM_RIGHT:
            return _appBarConstants.JUSTIFY_CONTENT_END;

          default:
            return _appBarConstants.JUSTIFY_CONTENT_START;
        }
      },
      alignItems: function alignItems(_ref2) {
        var placement = _ref2.placement;

        switch (placement) {
          case _appBarConstants.PLACEMENT_TOP_LEFT:
          case _appBarConstants.PLACEMENT_TOP_CENTER:
          case _appBarConstants.PLACEMENT_TOP_RIGHT:
            return _appBarConstants.ALIGN_ITEMS_START;

          case _appBarConstants.PLACEMENT_MIDDLE_LEFT:
          case _appBarConstants.PLACEMENT_MIDDLE_CENTER:
          case _appBarConstants.PLACEMENT_MIDDLE_RIGHT:
            return _appBarConstants.ALIGN_ITEMS_CENTER;

          case _appBarConstants.PLACEMENT_BOTTOM_LEFT:
          case _appBarConstants.PLACEMENT_BOTTOM_CENTER:
          case _appBarConstants.PLACEMENT_BOTTOM_RIGHT:
            return _appBarConstants.ALIGN_ITEMS_END;

          default:
            return _appBarConstants.ALIGN_ITEMS_START;
        }
      }
    }, _defineProperty(_root, theme.breakpoints.up('sm'), {
      height: heightSm
    }), _defineProperty(_root, theme.breakpoints.up('md'), {
      height: heightMd
    }), _root)
  };
});
/**
 * App Bar is replacing our old Title Bar component. It's a wrapper for the a page title.
 */

function AppBar(props) {
  var children = props.children,
      classes = props.classes,
      className = props.className,
      dataTestId = props.dataTestId,
      style = props.style,
      restProps = _objectWithoutProperties(props, ["children", "classes", "className", "dataTestId", "style"]);

  var innerClasses = useStyles(props);
  var rootClasses = (0, _classnames["default"])(_constants.UI_CLASS_NAME, _constants.BEM_APP_BAR, classes.root, innerClasses.root, className);
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
    className: rootClasses,
    "data-testid": dataTestId,
    style: style // eslint-disable-next-line react/jsx-props-no-spreading

  }, restProps), children);
}

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