wix-style-react/dist/src/BaseModalLayout/LayoutBlocks/Header/Header.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

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

var _HeaderSt = require("./Header.st.css");

var _ModalHeading = _interopRequireDefault(require("./ModalHeading"));

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

var _Text = _interopRequireDefault(require("../../../Text"));

var _Divider = _interopRequireDefault(require("../../../Divider"));

var _BaseModalLayoutContext = require("../../BaseModalLayoutContext");

var Header = function Header(_ref) {
  var dataHook = _ref.dataHook,
      className = _ref.className,
      titleAppearance = _ref.titleAppearance,
      showHeaderDivider = _ref.showHeaderDivider;

  var _useBaseModalLayoutCo = (0, _BaseModalLayoutContext.useBaseModalLayoutContext)(),
      headerClassName = _useBaseModalLayoutCo.headerClassName,
      title = _useBaseModalLayoutCo.title,
      subtitle = _useBaseModalLayoutCo.subtitle;

  return (title || subtitle) && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": dataHook,
    className: (0, _HeaderSt.st)(_HeaderSt.classes.root, headerClassName, className)
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _HeaderSt.classes.innerContent
  }, typeof title === 'string' ? /*#__PURE__*/_react["default"].createElement(Header.Title, {
    headingAppearance: titleAppearance
  }, title) : title, subtitle && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    className: _HeaderSt.classes.subtitle,
    secondary: true,
    dataHook: _constants.dataHooks.headerSubtitle
  }, subtitle)), showHeaderDivider && /*#__PURE__*/_react["default"].createElement(_Divider["default"], null)) || null;
};

exports.Header = Header;

Header.Title = function (_ref2) {
  var _ref2$headingAppearan = _ref2.headingAppearance,
      headingAppearance = _ref2$headingAppearan === void 0 ? 'custom' : _ref2$headingAppearan,
      children = _ref2.children;
  return /*#__PURE__*/_react["default"].createElement(_ModalHeading["default"], {
    headingAppearance: headingAppearance,
    children: children,
    className: _HeaderSt.classes.title,
    dataHook: _constants.dataHooks.headerTitle
  });
};

Header.displayName = 'BaseModalLayout.Header';
Header.propTypes = {
  /** additional css classes */
  className: _propTypes["default"].string,

  /** data hook for testing */
  dataHook: _propTypes["default"].string,

  /** The modal's title */
  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** The modal's title appearance */
  titleAppearance: _ModalHeading["default"].propTypes.headingAppearance,

  /** The modal's subtitle */
  subtitle: _propTypes["default"].string,

  /** Shows a divider at the bottom of the Header*/
  showHeaderDivider: _propTypes["default"].bool
};
Header.defaultProps = {
  titleAppearance: 'custom',
  showHeaderDivider: false
};