@boomerang-io/carbon-addons-boomerang-react/dist/cjs/components/ComposedModal/ComposedModal.js

Carbon Addons for Boomerang apps

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var react = require('@carbon/react');
var cx = require('classnames');
var Modal = require('../Modal/Modal.js');
var ConfirmModal = require('../ConfirmModal/ConfirmModal.js');
var settings = require('../../internal/settings.js');
var useSetState = require('../../tools/useSetState.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var cx__default = /*#__PURE__*/_interopDefault(cx);

/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function ComposedModal(props) {
    const { appElement = "#app", composedModalProps = {}, isOpen = false, modalHeaderProps = {} } = props;
    const [state, setState] = useSetState.default({
        isConfirmModalOpen: false,
        isOpen: isOpen,
        shouldConfirmModalClose: false,
        step: 0,
        ...props.initialState,
    });
    // Let it be externally controlled
    React.useEffect(() => {
        setState({ isOpen });
        // eslint-disable-next-line
    }, [isOpen]);
    /**
     * Reset to initial state
     * and let parent know
     */
    const resetInitialState = (stateUpdate) => {
        setState({
            isConfirmModalOpen: false,
            shouldConfirmModalClose: false,
            ...props.initialState,
            ...stateUpdate,
        });
    };
    const handleOpenModal = () => {
        setState({ isOpen: true });
    };
    /**
     * Close modal and call event function for parent if provided
     */
    const handleCloseModal = () => {
        resetInitialState({ isOpen: false });
        if (typeof props.onCloseModal === "function") {
            props.onCloseModal();
        }
    };
    /**
     * Check if should confirm exit with confirm modal or just exit modal flow
     */
    const handleShouldCloseModal = () => {
        if (state.shouldConfirmModalClose) {
            setState({ isConfirmModalOpen: true });
        }
        else {
            handleCloseModal();
        }
    };
    const closeConfirmModal = () => {
        setState({ isConfirmModalOpen: false });
    };
    /**
     * Method passed to children components and they determine if should confirm exit of modal
     * @param {bool} shouldConfirmModalClose - boolean of current component
     */
    const handleSetShouldConfirmModalClose = (shouldConfirmModalClose) => {
        setState({ shouldConfirmModalClose });
    };
    const { containerClassName, ...restComposedModalProps } = composedModalProps;
    const { subtitle, ...restModalHeaderProps } = modalHeaderProps;
    return (React__default.default.createElement(React__default.default.Fragment, null,
        props.modalTrigger && props.modalTrigger({ openModal: handleOpenModal }),
        React__default.default.createElement(Modal.Modal, { appElement: appElement, containerClassName: cx__default.default(`${settings.prefix}--bmrg-modal-composed-container`, `${settings.prefix}--modal-container`, props.size ? `${settings.prefix}--modal-container--${props.size}` : "modal-container-fix-width", containerClassName), isOpen: state.isOpen, onRequestClose: handleShouldCloseModal, shouldCloseOnOverlayClick: false, ...restComposedModalProps },
            React__default.default.createElement(react.ModalHeader, { closeModal: handleShouldCloseModal, ...restModalHeaderProps }, subtitle && React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-modal-composed-subtitle` }, subtitle)),
            state.isOpen &&
                typeof props.children === "function" &&
                props.children({
                    closeModal: handleShouldCloseModal,
                    forceCloseModal: handleCloseModal,
                    resetInitialState: resetInitialState,
                    setShouldConfirmModalClose: handleSetShouldConfirmModalClose,
                    shouldConfirmModalClose: state.shouldConfirmModalClose,
                }),
            React__default.default.createElement(ConfirmModal.default, { affirmativeAction: handleCloseModal, appElement: appElement, negativeAction: closeConfirmModal, isOpen: state.isConfirmModalOpen, onCloseModal: closeConfirmModal, ...props.confirmModalProps }))));
}

exports.ComposedModal = ComposedModal;
exports.default = ComposedModal;