@carbon/ibm-products
Version:
Carbon for IBM Products
199 lines (191 loc) • 6.42 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 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.
*/
'use strict';
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var react = require('@carbon/react');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');
var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
var uuidv4 = require('../../global/js/utils/uuidv4.js');
var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
const componentName = 'RemoveModal';
/**
The `RemoveModal` covers what is known as high impact and medium impact deleting.
Enabling `textConfirmation` enables what would be considered the high impact state of the modal.
For additional information on differentiating between delete / remove and low / medium / high impact please refer to the usage guidelines.
*/
exports.RemoveModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
body,
className,
iconDescription,
inputInvalidText,
inputLabelText,
inputPlaceholderText,
label,
onClose,
onRequestSubmit,
open,
portalTarget: portalTargetIn,
preventCloseOnClickOutside,
primaryButtonDisabled,
primaryButtonText,
primaryDangerDescription,
resourceName,
secondaryButtonText,
textConfirmation,
title,
...rest
} = _ref;
const previousState = usePreviousValue.usePreviousValue({
open
});
const [userInput, setUserInput] = React.useState('');
const idRef = React.useRef(uuidv4.default());
const renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
const onChangeHandler = e => {
setUserInput(e.target.value);
};
const checkPrimaryButtonDisabled = () => {
// user control should be used primarily
if (primaryButtonDisabled) {
return true;
} else if (textConfirmation && userInput !== resourceName) {
return true;
}
return false;
};
const primaryButtonStatus = checkPrimaryButtonDisabled();
const blockClass = `${settings.pkg.prefix}--remove-modal`;
// Clear the user input this way so that if the onRequestSubmit handler fails for some reason
// the value of the input will still remain: we only want to empty the input value
// when open actually changes to false.
React.useEffect(() => {
if (!open && previousState?.open) {
setUserInput('');
}
}, [open, previousState?.open]);
return renderPortalUse(/*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
className: cx(blockClass, className),
size: "sm",
"aria-label": title,
open,
ref,
preventCloseOnClickOutside,
onClose
}, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.ModalHeader, {
title: title,
label: label,
iconDescription: iconDescription
}), /*#__PURE__*/React.createElement(react.ModalBody, null, typeof body === 'string' ? /*#__PURE__*/React.createElement("p", {
className: `${blockClass}__body`
}, body) : body, textConfirmation && /*#__PURE__*/React.createElement(react.TextInput, {
id: `${idRef.current}-confirmation-input`,
className: `${blockClass}__input`,
invalidText: inputInvalidText,
labelText: inputLabelText,
placeholder: inputPlaceholderText,
onChange: onChangeHandler,
value: userInput,
"data-modal-primary-focus": true
})), /*#__PURE__*/React.createElement(react.ModalFooter, null, /*#__PURE__*/React.createElement(react.Button, {
type: "button",
kind: "secondary",
onClick: onClose,
"data-modal-primary-focus": !textConfirmation
}, secondaryButtonText), /*#__PURE__*/React.createElement(react.Button, {
type: "submit",
kind: "danger",
dangerDescription: primaryDangerDescription,
onClick: onRequestSubmit,
disabled: primaryButtonStatus
}, primaryButtonText))));
});
// Return a placeholder if not released and not enabled by feature flag
exports.RemoveModal = settings.pkg.checkComponentEnabled(exports.RemoveModal, componentName);
exports.RemoveModal.propTypes = {
/**
* The content to be displayed in the body of the modal
*/
body: index.default.node.isRequired,
/**
* Optional classname
*/
className: index.default.string,
/**
* Provide a description for "close" icon that can be read by screen readers
*/
iconDescription: index.default.string.isRequired,
/**
* Message showed when user input fails validation
*/
inputInvalidText: index.default.string,
/**
* Label for text box
*/
inputLabelText: index.default.node,
/**
* Placeholder for text box
*/
inputPlaceholderText: index.default.string,
/**
* Specify the modal label texts
*/
label: index.default.string,
/**
* Callback function that runs when user closes the modal
*/
onClose: index.default.func,
/**
* Callback function that runs when user submits the modal
*/
onRequestSubmit: index.default.func,
/**
* Specify whether the Modal is currently open
*/
open: index.default.bool.isRequired,
/**
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
*/
portalTarget: index.default.node,
/**
* Prevent closing on click outside of modal
*/
preventCloseOnClickOutside: index.default.bool,
/**
* Specify whether the primary button should be disabled. This value will override textConfirmation
*/
primaryButtonDisabled: index.default.bool,
/**
* Specify the text for the primary button
*/
primaryButtonText: index.default.string,
/**
* Specify the danger description on the primary button
*/
primaryDangerDescription: index.default.string,
/**
* The name of the resource being acted upon
*/
resourceName: index.default.string.isRequired,
/**
* Specify the text for the secondary button
*/
secondaryButtonText: index.default.string,
/**
* Specify whether or not to show the text confirmation input
*/
textConfirmation: index.default.bool,
/**
* The text displayed at the top of the modal
*/
title: index.default.string.isRequired
};
exports.RemoveModal.displayName = componentName;