@helpscout/hsds-react/components/SimpleModal/SimpleModal.layouts.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.HeaderAndFooter = HeaderAndFooter;
exports.Confirmation = Confirmation;

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

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

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

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

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

var _ScrollableContainer = _interopRequireDefault(require("../ScrollableContainer"));

var _Button = _interopRequireDefault(require("../Button"));

var _SimpleModalLayouts = require("./SimpleModal.layouts.css");

var _jsxRuntime = require("react/jsx-runtime");

/* istanbul ignore file */
function noop() {}

function HeaderAndFooter(_ref) {
  var children = _ref.children,
      heading = _ref.heading,
      header = _ref.header,
      footer = _ref.footer,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["children", "heading", "header", "footer"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollableContainer.default, (0, _extends2.default)({
    width: "100%",
    height: "100%",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleModalLayouts.HeaderUI, {
      className: (0, _classnames.default)('SimpleModal__header', header && 'with-custom-header-content'),
      children: header ? header : /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
        children: heading
      })
    }),
    body: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleModalLayouts.BodyUI, {
      className: "SimpleModal__body",
      children: children
    }),
    footer: footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleModalLayouts.FooterUI, {
      className: 'SimpleModal__footer',
      children: footer
    }) : null
  }, rest));
}

HeaderAndFooter.propTypes = {
  /** The content to put in the body of the modal*/
  children: _propTypes.default.any,

  /** Custom footer content */
  footer: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),

  /** If you just need a modal title in the header, use this */
  heading: _propTypes.default.string,

  /** Custom header content */
  header: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element])
};

function Confirmation(_ref2) {
  var heading = _ref2.heading,
      body = _ref2.body,
      _ref2$onConfirm = _ref2.onConfirm,
      onConfirm = _ref2$onConfirm === void 0 ? noop : _ref2$onConfirm,
      _ref2$onCancel = _ref2.onCancel,
      onCancel = _ref2$onCancel === void 0 ? noop : _ref2$onCancel,
      _ref2$confirmButtonPr = _ref2.confirmButtonProps,
      confirmButtonProps = _ref2$confirmButtonPr === void 0 ? {} : _ref2$confirmButtonPr,
      _ref2$cancelButtonPro = _ref2.cancelButtonProps,
      cancelButtonProps = _ref2$cancelButtonPro === void 0 ? {} : _ref2$cancelButtonPro,
      _ref2$confirmButtonTe = _ref2.confirmButtonText,
      confirmButtonText = _ref2$confirmButtonTe === void 0 ? 'Accept' : _ref2$confirmButtonTe,
      _ref2$cancelButtonTex = _ref2.cancelButtonText,
      cancelButtonText = _ref2$cancelButtonTex === void 0 ? 'Cancel' : _ref2$cancelButtonTex,
      danger = _ref2.danger;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SimpleModalLayouts.ConfirmationWrapperUI, {
    className: (0, _classnames.default)(!body && 'is-compact'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleModalLayouts.ConfirmationHeadingUI, {
      children: heading
    }), body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleModalLayouts.ConfirmationBodyUI, {
      children: body
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SimpleModalLayouts.ConfirmationFooterUI, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({
        outlined: true,
        theme: "grey",
        onClick: onCancel
      }, cancelButtonProps, {
        children: cancelButtonText
      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({
        theme: danger ? 'red' : 'blue',
        onClick: onConfirm
      }, confirmButtonProps, {
        children: confirmButtonText
      }))]
    })]
  });
}

Confirmation.propTypes = {
  /** Text or element for the modal heading */
  heading: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]).isRequired,

  /** Text or element for the modal body */
  body: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),

  /** Callback to run on main action click */
  onConfirm: _propTypes.default.func,

  /** Callback to run on cancel action click */
  onCancel: _propTypes.default.func,

  /** Any valid prop for a Button to apply to the Cancel button*/
  cancelButtonProps: _propTypes.default.any,

  /** Any valid prop for a Button to apply to the Confirm button*/
  confirmButtonProps: _propTypes.default.any,

  /** Text of the main action button */
  confirmButtonText: _propTypes.default.string,

  /** Text of the cancel button */
  cancelButtonText: _propTypes.default.string,

  /** Render the main action as a red button */
  danger: _propTypes.default.bool
};