@carbon/react
Version:
React components for the Carbon Design System
232 lines (224 loc) • 8.35 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
'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');
var noopFn = require('../../internal/noopFn.js');
var InlineLoading = require('../InlineLoading/InlineLoading.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({
secondaryButtons,
secondaryButtonText,
secondaryClassName,
closeModal,
onRequestClose,
disabled
}) {
function handleRequestClose(evt) {
closeModal(evt);
onRequestClose(evt);
}
if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, secondaryButtons.map(({
buttonText,
onClick: onButtonClick
}, i) => /*#__PURE__*/React__default["default"].createElement(Button["default"], {
key: `${buttonText}-${i}`,
className: secondaryClassName,
kind: "secondary",
onClick: onButtonClick || handleRequestClose
}, buttonText)));
}
if (secondaryButtonText) {
return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
disabled: disabled,
className: secondaryClassName,
onClick: handleRequestClose,
kind: "secondary"
}, secondaryButtonText);
}
return null;
}
SecondaryButtonSet.propTypes = {
closeModal: PropTypes__default["default"].func,
disabled: PropTypes__default["default"].bool,
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({
children,
className: customClassName,
closeModal = noopFn.noopFn,
danger,
inputref,
onRequestClose = noopFn.noopFn,
onRequestSubmit = noopFn.noopFn,
primaryButtonDisabled,
primaryButtonText,
primaryClassName,
secondaryButtonText,
secondaryButtons,
secondaryClassName,
loadingStatus = 'inactive',
loadingDescription,
loadingIconDescription,
onLoadingSuccess = noopFn.noopFn,
...rest
}, ref) {
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 primaryButtonClass = cx__default["default"](primaryClassName, loadingStatus !== 'inactive' ? `${prefix}--btn--loading` : null);
const loadingActive = loadingStatus !== 'inactive';
const secondaryButtonProps = {
closeModal,
secondaryButtons,
secondaryButtonText,
secondaryClassName,
onRequestClose,
disabled: loadingActive
};
return /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
className: footerClass
}, rest, {
// @ts-expect-error: Invalid derived types, will be fine once explicit types are added
ref: ref,
"aria-busy": loadingActive
}), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
onClick: onRequestSubmit,
className: primaryButtonClass,
disabled: loadingActive || primaryButtonDisabled,
kind: danger ? 'danger' : 'primary',
ref: inputref
}, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default["default"].createElement(InlineLoading["default"], {
status: loadingStatus,
description: loadingDescription,
iconDescription: loadingIconDescription,
className: `${prefix}--inline-loading--btn`,
onSuccess: onLoadingSuccess
})), 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.
*/
inputref: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
current: PropTypes__default["default"].any
})]),
/**
* Specify the description for the loading text
*/
loadingDescription: PropTypes__default["default"].string,
/**
* Specify the description for the loading text
*/
loadingIconDescription: PropTypes__default["default"].string,
/**
* loading status
*/
loadingStatus: PropTypes__default["default"].oneOf(['inactive', 'active', 'finished', 'error']),
/**
* Provide an optional handler to be invoked when loading is
* successful
*/
onLoadingSuccess: PropTypes__default["default"].func,
/**
* 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
};
exports.ModalFooter = ModalFooter;