wix-style-react/dist/es/src/MessageBox/FunctionalLayout/HeaderLayout.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import CloseButton from '../../CloseButton';
import styles from './HeaderLayout.scss';

var HeaderLayout = function HeaderLayout(_ref) {
  var title = _ref.title,
      onCancel = _ref.onCancel,
      theme = _ref.theme,
      closeButton = _ref.closeButton;
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(styles.header, styles[theme]),
    "data-hook": "header-layout"
  }, /*#__PURE__*/React.createElement("span", {
    className: styles.titleLabel,
    "data-hook": "header-layout-title"
  }, title), closeButton ? /*#__PURE__*/React.createElement(CloseButton, {
    dataHook: "header-close-button",
    size: "medium",
    skin: "lightFilled",
    onClick: onCancel
  }) : null);
};

HeaderLayout.defaultProps = {
  theme: 'blue',
  closeButton: true
};
HeaderLayout.propTypes = {
  title: PropTypes.node,
  onCancel: PropTypes.func,
  closeButton: PropTypes.bool,
  theme: PropTypes.oneOf(['red', 'blue', 'purple'])
};
export default HeaderLayout;