@helpscout/hsds-react/components/Modal/Modal.ActionFooter.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

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

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

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

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

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

var _Modal = require("./Modal.utils");

var _ModalActionFooter = require("./Modal.ActionFooter.css");

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

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

function noop() {}

var ModalActionFooter = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(ModalActionFooter, _React$PureComponent);

  function ModalActionFooter() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _this.handleCancel = function (e) {
      e && e.preventDefault();
      var onCancel = _this.props.onCancel;
      onCancel();
    };

    _this.handlePrimaryAction = function (e) {
      e && e.preventDefault();
      var onPrimaryClick = _this.props.onPrimaryClick;
      onPrimaryClick();
    };

    _this.handleSecondaryAction = function (e) {
      e && e.preventDefault();
      var onSecondaryClick = _this.props.onSecondaryClick;
      onSecondaryClick();
    };

    return _this;
  }

  var _proto = ModalActionFooter.prototype;

  _proto.renderPrimaryButton = function renderPrimaryButton() {
    var _this$props = this.props,
        primaryButtonText = _this$props.primaryButtonText,
        primaryButtonProps = _this$props.primaryButtonProps,
        state = _this$props.state,
        primaryButtonDisabled = _this$props.primaryButtonDisabled;
    var theme = _Button.THEME_BLUE;
    if (state === 'success') theme = _Button.THEME_GREEN;
    if (state === 'danger') theme = _Button.THEME_RED;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalActionFooter.PrimaryButtonUI, (0, _extends2.default)({
      size: "lg",
      "data-cy": "PrimaryButton"
    }, primaryButtonProps, {
      theme: theme,
      onClick: this.handlePrimaryAction,
      disabled: primaryButtonDisabled,
      children: primaryButtonText
    }));
  };

  _proto.renderSecondaryButton = function renderSecondaryButton() {
    var _this$props2 = this.props,
        kind = _this$props2.kind,
        secondaryButtonText = _this$props2.secondaryButtonText,
        secondaryButtonProps = _this$props2.secondaryButtonProps,
        secondaryButtonDisabled = _this$props2.secondaryButtonDisabled;

    if (!secondaryButtonText) {
      return null;
    }

    var ButtonComponent = kind === _Modal.MODAL_KIND.ALERT ? _ModalActionFooter.SecondaryAlertButtonUI : _ModalActionFooter.SecondaryButtonUI;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonComponent, (0, _extends2.default)({
      size: "lg",
      theme: "grey",
      outlined: true,
      "data-cy": "SecondaryButton"
    }, secondaryButtonProps, {
      onClick: this.handleSecondaryAction,
      disabled: secondaryButtonDisabled,
      children: secondaryButtonText
    }));
  };

  _proto.renderCancelButton = function renderCancelButton() {
    var _this$props3 = this.props,
        cancelText = _this$props3.cancelText,
        cancelProps = _this$props3.cancelProps,
        showDefaultCancel = _this$props3.showDefaultCancel;

    if (!(showDefaultCancel && cancelText)) {
      return null;
    }

    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalActionFooter.CancelButtonUI, (0, _extends2.default)({
      linked: true,
      size: "lg",
      theme: _Button.THEME_GREY,
      className: "is-cancel",
      "data-cy": "CancelButton"
    }, cancelProps, {
      onClick: this.handleCancel,
      children: cancelText
    }));
  };

  _proto.render = function render() {
    var _this$props4 = this.props,
        className = _this$props4.className,
        kind = _this$props4.kind,
        state = _this$props4.state,
        shadow = _this$props4.shadow,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["className", "kind", "state", "shadow"]);
    var modalKindClassName = (0, _Modal.getModalKindClassName)(kind);
    var componentClassName = (0, _classnames.default)('c-ModalActionFooter', modalKindClassName, state === 'danger' && 'is-danger', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalActionFooter.ActionFooterUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      gap: "md",
      placement: "bottom",
      size: "md",
      shadow: shadow,
      children: [this.renderCancelButton(), this.renderSecondaryButton(), this.renderPrimaryButton()]
    }));
  };

  return ModalActionFooter;
}(_react.default.PureComponent);

ModalActionFooter.defaultProps = {
  cancelText: 'Cancel',
  cancelProps: {},
  'data-cy': 'ModalActionFooter',
  kind: _Modal.MODAL_KIND.DEFAULT,
  onCancel: noop,
  onPrimaryClick: noop,
  onSecondaryClick: noop,
  primaryButtonText: 'Save',
  primaryButtonProps: {},
  primaryButtonDisabled: false,
  secondaryButtonText: null,
  secondaryButtonProps: {},
  secondaryButtonDisabled: false,
  showDefaultCancel: true,
  state: ''
};
ModalActionFooter.propTypes = {
  /** Text on cancel button */
  cancelText: _propTypes.default.string,

  /** Extra props on cancel button */
  cancelProps: _propTypes.default.object,

  /** The kind of version 2 Modal style to apply. */
  kind: _propTypes.default.oneOf(['alert', 'default', 'branded', 'sequence']),

  /** Callback on cancel button click */
  onCancel: _propTypes.default.func,

  /** Callback on primary button click */
  onPrimaryClick: _propTypes.default.func,

  /** Callback on secondary button click */
  onSecondaryClick: _propTypes.default.func,

  /** Text on primary button */
  primaryButtonText: _propTypes.default.string,

  /** Extra props on primary button */
  primaryButtonProps: _propTypes.default.object,

  /** Whether the button is disabled */
  primaryButtonDisabled: _propTypes.default.bool,

  /** Text on secondary button */
  secondaryButtonText: _propTypes.default.string,

  /** Whether the button is disabled */
  secondaryButtonDisabled: _propTypes.default.bool,

  /** Extra props on secondary button */
  secondaryButtonProps: _propTypes.default.object,

  /** Show cancel button */
  showDefaultCancel: _propTypes.default.bool,

  /** State to use when styling a version 2 Modal (currently only `danger` state is custom styled). */
  state: _propTypes.default.oneOf(['', 'danger']),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = ModalActionFooter;
exports.default = _default;