wix-style-react
Version:
69 lines (60 loc) • 2.44 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Header.st.css';
import ModalHeading from './ModalHeading';
import { dataHooks } from '../../constants';
import Text from '../../../Text';
import Divider from '../../../Divider';
import { useBaseModalLayoutContext } from '../../BaseModalLayoutContext';
export var Header = function Header(_ref) {
var dataHook = _ref.dataHook,
className = _ref.className,
titleAppearance = _ref.titleAppearance,
showHeaderDivider = _ref.showHeaderDivider;
var _useBaseModalLayoutCo = useBaseModalLayoutContext(),
headerClassName = _useBaseModalLayoutCo.headerClassName,
title = _useBaseModalLayoutCo.title,
subtitle = _useBaseModalLayoutCo.subtitle;
return (title || subtitle) && /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook,
className: st(classes.root, headerClassName, className)
}, /*#__PURE__*/React.createElement("div", {
className: classes.innerContent
}, typeof title === 'string' ? /*#__PURE__*/React.createElement(Header.Title, {
headingAppearance: titleAppearance
}, title) : title, subtitle && /*#__PURE__*/React.createElement(Text, {
className: classes.subtitle,
secondary: true,
dataHook: dataHooks.headerSubtitle
}, subtitle)), showHeaderDivider && /*#__PURE__*/React.createElement(Divider, null)) || null;
};
Header.Title = function (_ref2) {
var _ref2$headingAppearan = _ref2.headingAppearance,
headingAppearance = _ref2$headingAppearan === void 0 ? 'custom' : _ref2$headingAppearan,
children = _ref2.children;
return /*#__PURE__*/React.createElement(ModalHeading, {
headingAppearance: headingAppearance,
children: children,
className: classes.title,
dataHook: dataHooks.headerTitle
});
};
Header.displayName = 'BaseModalLayout.Header';
Header.propTypes = {
/** additional css classes */
className: PropTypes.string,
/** data hook for testing */
dataHook: PropTypes.string,
/** The modal's title */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** The modal's title appearance */
titleAppearance: ModalHeading.propTypes.headingAppearance,
/** The modal's subtitle */
subtitle: PropTypes.string,
/** Shows a divider at the bottom of the Header*/
showHeaderDivider: PropTypes.bool
};
Header.defaultProps = {
titleAppearance: 'custom',
showHeaderDivider: false
};