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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import Button from '../Button/Button.js';
import '../Button/Button.Skeleton.js';
import ButtonSet from '../ButtonSet/ButtonSet.js';
import cx from 'classnames';
import { usePrefix } from '../../internal/usePrefix.js';

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.createElement(Button, {
        key: `${buttonText}-${i}`,
        className: secondaryClassName,
        kind: "tertiary",
        onClick: onButtonClick || handleRequestClose
      }, buttonText);
    });
  }
  if (secondaryButtonText) {
    return /*#__PURE__*/React__default.createElement(Button, {
      className: secondaryClassName,
      onClick: handleRequestClose,
      kind: "tertiary"
    }, secondaryButtonText);
  }
  return null;
}
SecondaryButtonSet.propTypes = {
  closeModal: PropTypes.func,
  onRequestClose: PropTypes.func,
  secondaryButtonText: PropTypes.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.node,
        onClick: PropTypes.func
      };
      props[propName].forEach(secondaryButton => {
        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
      });
    }
    return null;
  },
  secondaryClassName: PropTypes.string
};
const ModalFooter = /*#__PURE__*/React__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();
  const footerClass = cx(`${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.createElement(ButtonSet, _extends({
      className: footerClass
    }, rest, {
      ref: ref
    }), /*#__PURE__*/React__default.createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
      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.node,
  /**
   * Specify a custom className to be applied to the Modal Footer container
   */
  className: PropTypes.string,
  /**
   * Specify an optional function that is called whenever the modal is closed
   */
  closeModal: PropTypes.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.bool,
  /**
   * The `ref` callback for the primary button.
   */
  // @ts-expect-error: Invalid derived type
  inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.any
  })]),
  /**
   * Specify an optional function for when the modal is requesting to be
   * closed
   */
  onRequestClose: PropTypes.func,
  /**
   * Specify an optional function for when the modal is requesting to be
   * submitted
   */
  onRequestSubmit: PropTypes.func,
  /**
   * Specify whether the primary button should be disabled
   */
  primaryButtonDisabled: PropTypes.bool,
  /**
   * Specify the text for the primary button
   */
  primaryButtonText: PropTypes.string,
  /**
   * Specify a custom className to be applied to the primary button
   */
  primaryClassName: PropTypes.string,
  /**
   * Specify the text for the secondary button
   */
  secondaryButtonText: PropTypes.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.node,
        onClick: PropTypes.func
      };
      props[propName].forEach(secondaryButton => {
        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
      });
    }
    return null;
  },
  /**
   * Specify a custom className to be applied to the secondary button
   */
  secondaryClassName: PropTypes.string
};
const noop = () => {};
ModalFooter.defaultProps = {
  onRequestClose: noop,
  onRequestSubmit: noop,
  closeModal: noop
};

export { ModalFooter };