terra-content-container/lib/ContentContainer.js

The Terra ContentContainer is a structural component for the purpose of arranging content with a header.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _terraScroll = _interopRequireDefault(require("terra-scroll"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _ContentContainerModule = _interopRequireDefault(require("./ContentContainer.module.scss"));
var _excluded = ["header", "footer", "children", "fill", "scrollRefCallback", "setFocusOnContainer", "backgroundColor"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
var cx = _bind.default.bind(_ContentContainerModule.default);
var propTypes = {
  /**
   * The header element to be placed within the header area of the container.
   */
  header: _propTypes.default.node,
  /**
   * The footer element to be placed within the footer area of the container.
   */
  footer: _propTypes.default.node,
  /**
   * The children to be placed within the main content area of the container.
   */
  children: _propTypes.default.node,
  /**
   * Whether or not the container should expanded to fill its parent element.
   */
  fill: _propTypes.default.bool,
  /**
   * Ref callback for the scrollable area of the content container.
   */
  scrollRefCallback: _propTypes.default.func,
  /**
   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
   * Sets focus on content when set to `true`. Focus on content helps in scrolling  within container when there is no interactive element to focus within container.
   */
  setFocusOnContainer: _propTypes.default.bool,
  /**
   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
   * This prop needs to be set only if `setFocusOnContainer` is set. Based on dark or light background color the border will be white or black respectively to maintain
   * an accessible color contrast ratio.
   */
  backgroundColor: _propTypes.default.oneOf(['dark', 'light'])
};
var defaultProps = {
  header: undefined,
  footer: undefined,
  children: undefined,
  fill: false,
  scrollRefCallback: undefined,
  setFocusOnContainer: false,
  backgroundColor: undefined
};
var ContentContainer = function ContentContainer(_ref) {
  var header = _ref.header,
    footer = _ref.footer,
    children = _ref.children,
    fill = _ref.fill,
    scrollRefCallback = _ref.scrollRefCallback,
    setFocusOnContainer = _ref.setFocusOnContainer,
    backgroundColor = _ref.backgroundColor,
    customProps = _objectWithoutProperties(_ref, _excluded);
  var theme = _react.default.useContext(_terraThemeContext.default);
  var lightBackground = 'light';
  var contentLayoutClassNames = cx(["content-container-".concat(fill ? 'fill' : 'static'), customProps.className]);

  // setting tab index to 0 if setFocusOnContainer is set
  var scrollAttrs = setFocusOnContainer ? {
    tabIndex: 0
  } : '';
  // border will only be visible when setFocusOnContainer is set for content-container
  var background = setFocusOnContainer && (backgroundColor || lightBackground);
  var scrollClassNames = cx('normalizer', theme.className, {
    'content-container-focused-padding': setFocusOnContainer
  }, background);
  return /*#__PURE__*/_react.default.createElement("div", _extends({}, customProps, {
    className: contentLayoutClassNames
  }), header && /*#__PURE__*/_react.default.createElement("div", {
    className: cx('header', {
      'content-container-focused-padding': setFocusOnContainer
    })
  }, header), /*#__PURE__*/_react.default.createElement("div", {
    className: cx('main')
  }, /*#__PURE__*/_react.default.createElement(_terraScroll.default, _extends({
    className: scrollClassNames,
    refCallback: scrollRefCallback
  }, scrollAttrs), children)), footer && /*#__PURE__*/_react.default.createElement("div", {
    className: cx('footer', {
      'content-container-focused-padding': setFocusOnContainer
    })
  }, footer));
};
ContentContainer.propTypes = propTypes;
ContentContainer.defaultProps = defaultProps;
var _default = exports.default = ContentContainer;