@carbon/react
Version:
React components for the Carbon Design System
114 lines (112 loc) • 4.15 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.
*/
import { Escape } from "../../internal/keyboard/keys.js";
import { match } from "../../internal/keyboard/match.js";
import { noopFn } from "../../internal/noopFn.js";
import { warning } from "../../internal/warning.js";
import { ButtonKinds } from "../Button/Button.js";
import Button_default from "../Button/index.js";
import Modal_default from "../Modal/index.js";
import React from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/ModalWrapper/ModalWrapper.tsx
/**
* 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.
*/
let didWarnAboutDeprecation = false;
var ModalWrapper = class extends React.Component {
constructor(props) {
super(props);
this.triggerButton = React.createRef();
this.modal = React.createRef();
this.state = { isOpen: false };
this.handleOpen = () => {
this.setState({ isOpen: true });
};
this.handleClose = (evt) => {
const innerModal = this.modal.current?.querySelector("div");
if (this.modal.current && evt && !innerModal?.contains(evt.target) && this.props.preventCloseOnClickOutside) return;
else this.setState({ isOpen: false }, () => this.triggerButton.current?.focus());
};
this.handleOnRequestSubmit = (evt) => {
const { handleSubmit, shouldCloseAfterSubmit } = this.props;
if (handleSubmit && shouldCloseAfterSubmit) {
handleSubmit(evt);
this.handleClose(evt);
}
handleSubmit?.(evt);
};
warning(didWarnAboutDeprecation, "`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`");
didWarnAboutDeprecation = true;
}
render() {
const { children, onKeyDown = noopFn, buttonTriggerText, buttonTriggerClassName, renderTriggerButtonIcon, primaryButtonText = "Save", secondaryButtonText = "Cancel", triggerButtonIconDescription = "Provide icon description if icon is used", triggerButtonKind = "primary", disabled = false, handleSubmit, shouldCloseAfterSubmit, selectorPrimaryFocus = "[data-modal-primary-focus]", preventCloseOnClickOutside, ...other } = this.props;
const props = {
...other,
selectorPrimaryFocus,
open: this.state.isOpen,
onRequestClose: this.handleClose,
onRequestSubmit: this.handleOnRequestSubmit
};
return /* @__PURE__ */ jsxs("div", {
role: "presentation",
onKeyDown: (evt) => {
if (match(evt, Escape)) {
this.handleClose(evt);
onKeyDown(evt);
}
},
children: [/* @__PURE__ */ jsx(Button_default, {
className: buttonTriggerClassName,
disabled,
kind: triggerButtonKind,
renderIcon: renderTriggerButtonIcon,
iconDescription: triggerButtonIconDescription,
onClick: this.handleOpen,
ref: this.triggerButton,
children: buttonTriggerText
}), /* @__PURE__ */ jsx(Modal_default, {
ref: this.modal,
primaryButtonText,
secondaryButtonText,
...props,
children
})]
});
}
};
ModalWrapper.propTypes = {
buttonTriggerClassName: PropTypes.string,
buttonTriggerText: PropTypes.node,
children: PropTypes.node,
disabled: PropTypes.bool,
handleOpen: PropTypes.func,
handleSubmit: PropTypes.func,
id: PropTypes.string,
modalBeforeContent: PropTypes.bool,
modalHeading: PropTypes.string,
modalLabel: PropTypes.string,
modalText: PropTypes.string,
onKeyDown: PropTypes.func,
passiveModal: PropTypes.bool,
preventCloseOnClickOutside: PropTypes.bool,
primaryButtonText: PropTypes.string,
renderTriggerButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
secondaryButtonText: PropTypes.string,
selectorPrimaryFocus: PropTypes.string,
shouldCloseAfterSubmit: PropTypes.bool,
status: PropTypes.string,
triggerButtonIconDescription: PropTypes.string,
triggerButtonKind: PropTypes.oneOf(ButtonKinds),
withHeader: PropTypes.bool
};
//#endregion
export { ModalWrapper as default };