@mskcc/carbon-react/lib/components/ComposedModal/ModalFooter.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var PropTypes = require('prop-types');
var Button = require('../Button/Button.js');
require('../Button/Button.Skeleton.js');
var ButtonSet = require('../ButtonSet/ButtonSet.js');
var cx = require('classnames');
var usePrefix = require('../../internal/usePrefix.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

function SecondaryButtonSet(_ref) {
  let {
    secondaryButtons,
    secondaryButtonText,
    secondaryClassName,
    closeModal,
    onRequestClose
  } = _ref;
  function handleRequestClose(evt) {
    closeModal(evt);
    onRequestClose(evt);
  }
  if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
    return secondaryButtons.map((_ref2, i) => {
      let {
        buttonText,
        onClick: onButtonClick
      } = _ref2;
      return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
        key: `${buttonText}-${i}`,
        className: secondaryClassName,
        kind: "tertiary",
        onClick: onButtonClick || handleRequestClose
      }, buttonText);
    });
  }
  if (secondaryButtonText) {
    return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
      className: secondaryClassName,
      onClick: handleRequestClose,
      kind: "tertiary"
    }, secondaryButtonText);
  }
  return null;
}
SecondaryButtonSet.propTypes = {
  closeModal: PropTypes__default["default"].func,
  onRequestClose: PropTypes__default["default"].func,
  secondaryButtonText: PropTypes__default["default"].string,
  secondaryButtons: (props, propName, componentName) => {
    if (props.secondaryButtons) {
      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
        return new Error(`${propName} needs to be an array of two button config objects`);
      }
      const shape = {
        buttonText: PropTypes__default["default"].node,
        onClick: PropTypes__default["default"].func
      };
      props[propName].forEach(secondaryButton => {
        PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
      });
    }
    return null;
  },
  secondaryClassName: PropTypes__default["default"].string
};
const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function ModalFooter(_ref3, ref) {
  let {
    children,
    className: customClassName,
    closeModal,
    danger,
    inputref,
    onRequestClose,
    onRequestSubmit,
    primaryButtonDisabled,
    primaryButtonText,
    primaryClassName,
    secondaryButtonText,
    secondaryButtons,
    secondaryClassName,
    ...rest
  } = _ref3;
  const prefix = usePrefix.usePrefix();
  const footerClass = cx__default["default"](`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
  const secondaryButtonProps = {
    closeModal,
    secondaryButtons,
    secondaryButtonText,
    secondaryClassName,
    onRequestClose
  };
  return (
    /*#__PURE__*/
    // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
    React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
      className: footerClass
    }, rest, {
      ref: ref
    }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
      onClick: onRequestSubmit,
      className: primaryClassName,
      disabled: primaryButtonDisabled,
      kind: danger ? 'danger' : 'primary',
      ref: inputref
    }, primaryButtonText), children)
  );
});
ModalFooter.propTypes = {
  /**
   * Pass in content that will be rendered in the Modal Footer
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify a custom className to be applied to the Modal Footer container
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify an optional function that is called whenever the modal is closed
   */
  closeModal: PropTypes__default["default"].func,
  /**
   * Specify whether the primary button should be replaced with danger button.
   * Note that this prop is not applied if you render primary/danger button by yourself
   */
  danger: PropTypes__default["default"].bool,
  /**
   * The `ref` callback for the primary button.
   */
  // @ts-expect-error: Invalid derived type
  inputref: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
    current: PropTypes__default["default"].any
  })]),
  /**
   * Specify an optional function for when the modal is requesting to be
   * closed
   */
  onRequestClose: PropTypes__default["default"].func,
  /**
   * Specify an optional function for when the modal is requesting to be
   * submitted
   */
  onRequestSubmit: PropTypes__default["default"].func,
  /**
   * Specify whether the primary button should be disabled
   */
  primaryButtonDisabled: PropTypes__default["default"].bool,
  /**
   * Specify the text for the primary button
   */
  primaryButtonText: PropTypes__default["default"].string,
  /**
   * Specify a custom className to be applied to the primary button
   */
  primaryClassName: PropTypes__default["default"].string,
  /**
   * Specify the text for the secondary button
   */
  secondaryButtonText: PropTypes__default["default"].string,
  /**
   * Specify an array of config objects for secondary buttons
   * (`Array<{
   *   buttonText: string,
   *   onClick: function,
   * }>`).
   */
  secondaryButtons: (props, propName, componentName) => {
    if (props.secondaryButtons) {
      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
        return new Error(`${propName} needs to be an array of two button config objects`);
      }
      const shape = {
        buttonText: PropTypes__default["default"].node,
        onClick: PropTypes__default["default"].func
      };
      props[propName].forEach(secondaryButton => {
        PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
      });
    }
    return null;
  },
  /**
   * Specify a custom className to be applied to the secondary button
   */
  secondaryClassName: PropTypes__default["default"].string
};
const noop = () => {};
ModalFooter.defaultProps = {
  onRequestClose: noop,
  onRequestSubmit: noop,
  closeModal: noop
};

exports.ModalFooter = ModalFooter;