@carbon/react
Version:
React components for the Carbon Design System
144 lines (142 loc) • 6.25 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_noopFn = require("../../internal/noopFn.js");
const require_index = require("../Button/index.js");
const require_index$1 = require("../ButtonSet/index.js");
const require_index$2 = require("../InlineLoading/index.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/ComposedModal/ModalFooter.tsx
/**
* Copyright IBM Corp. 2023, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
function SecondaryButtonSet({ secondaryButtons, secondaryButtonText, secondaryClassName, closeModal, onRequestClose, disabled }) {
function handleRequestClose(evt) {
closeModal(evt);
onRequestClose(evt);
}
if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: secondaryButtons.map(({ buttonText, onClick: onButtonClick }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
className: secondaryClassName,
kind: "secondary",
onClick: onButtonClick || handleRequestClose,
children: buttonText
}, `${buttonText}-${i}`)) });
if (secondaryButtonText) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
disabled,
className: secondaryClassName,
onClick: handleRequestClose,
kind: "secondary",
children: secondaryButtonText
});
return null;
}
SecondaryButtonSet.propTypes = {
closeModal: prop_types.default.func,
disabled: prop_types.default.bool,
onRequestClose: prop_types.default.func,
secondaryButtonText: prop_types.default.string,
secondaryButtons: (props, propName, componentName) => {
if (props.secondaryButtons) {
if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) return /* @__PURE__ */ new Error(`${propName} needs to be an array of two button config objects`);
const shape = {
buttonText: prop_types.default.node,
onClick: prop_types.default.func
};
props[propName].forEach((secondaryButton) => {
prop_types.default.checkPropTypes(shape, secondaryButton, propName, componentName);
});
}
return null;
},
secondaryClassName: prop_types.default.string
};
const ModalFooter = react.default.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = require_noopFn.noopFn, danger, inputref, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, ...rest }, ref) {
const prefix = require_usePrefix.usePrefix();
const footerClass = (0, classnames.default)(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
const primaryButtonClass = (0, classnames.default)(primaryClassName, loadingStatus !== "inactive" ? `${prefix}--btn--loading` : null);
const loadingActive = loadingStatus !== "inactive";
const secondaryButtonProps = {
closeModal,
secondaryButtons,
secondaryButtonText,
secondaryClassName,
onRequestClose,
disabled: loadingActive
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.default, {
className: footerClass,
...rest,
ref,
"aria-busy": loadingActive,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryButtonSet, { ...secondaryButtonProps }),
primaryButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
onClick: onRequestSubmit,
className: primaryButtonClass,
disabled: loadingActive || primaryButtonDisabled,
kind: danger ? "danger" : "primary",
ref: inputref,
children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
status: loadingStatus,
description: loadingDescription,
iconDescription: loadingIconDescription,
className: `${prefix}--inline-loading--btn`,
onSuccess: onLoadingSuccess
})
}),
children
]
});
});
ModalFooter.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
closeModal: prop_types.default.func,
danger: prop_types.default.bool,
inputref: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.any })]),
loadingDescription: prop_types.default.string,
loadingIconDescription: prop_types.default.string,
loadingStatus: prop_types.default.oneOf([
"inactive",
"active",
"finished",
"error"
]),
onLoadingSuccess: prop_types.default.func,
onRequestClose: prop_types.default.func,
onRequestSubmit: prop_types.default.func,
primaryButtonDisabled: prop_types.default.bool,
primaryButtonText: prop_types.default.string,
primaryClassName: prop_types.default.string,
secondaryButtonText: prop_types.default.string,
secondaryButtons: (props, propName, componentName) => {
if (props.secondaryButtons) {
if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) return /* @__PURE__ */ new Error(`${propName} needs to be an array of two button config objects`);
const shape = {
buttonText: prop_types.default.node,
onClick: prop_types.default.func
};
props[propName].forEach((secondaryButton) => {
prop_types.default.checkPropTypes(shape, secondaryButton, propName, componentName);
});
}
return null;
},
secondaryClassName: prop_types.default.string
};
//#endregion
exports.ModalFooter = ModalFooter;