@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
163 lines (156 loc) • 6.48 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var react = require('@carbon/react');
var ConfirmModal = require('../ConfirmModal/ConfirmModal.js');
var Modal = require('../Modal/Modal.js');
var cx = require('classnames');
var useSetState = require('../../tools/useSetState.js');
var settings = require('../../internal/settings.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
*/
FlowModalContainer.defaultProps = {
composedModalProps: {},
isOpen: false,
modalHeaderProps: {},
};
function FlowModalContainer(props) {
const [state, setState] = useSetState.default({
formData: new Map(),
isConfirmModalOpen: false,
isOpen: props.isOpen,
shouldConfirmModalClose: false,
step: 0,
...props.initialState,
});
// Let it be externally controlled
React.useEffect(() => {
setState({ isOpen: props.isOpen });
}, [props.isOpen, setState]);
/**
* Change step value to the requested value
* @param {number} stepRequested - requested value
*/
function goToStep(stepRequested) {
setState({ step: stepRequested });
}
/**
* Change step to next one
*/
function requestNextStep() {
goToStep(state.step + 1);
}
/**
* Change step to previous one
*/
function requestPreviousStep() {
goToStep(state.step - 1);
}
/**
* Save data colected by user input into formData
* @param {obj} data - the new data to be saved
*/
function saveValues(data) {
setState({ formData: { ...state.formData, ...data } });
if (typeof props.onFormDataChange === "function") {
props.onFormDataChange(state.formData);
}
}
/**
* Reset to initial state
* and let parent know
*/
function resetInitialState(stateUpdate) {
setState({
formData: new Map(),
isConfirmModalOpen: false,
shouldConfirmModalClose: false,
step: 0,
...props.initialState,
...stateUpdate,
});
if (typeof props.onFormDataChange === "function") {
props.onFormDataChange(state.formData);
}
}
function handleOpenModal() {
setState({ isOpen: true });
}
/**
* Close modal and call event function for parent if provided
*/
function handleCloseModal() {
resetInitialState({ isOpen: false });
if (typeof props.onCloseModal === "function") {
props.onCloseModal();
}
}
/**
* Check if should confirm exit with confirm modal or just exit modal flow
*/
function handleShouldCloseModal() {
if (state.shouldConfirmModalClose) {
setState({ isConfirmModalOpen: true });
}
else {
handleCloseModal();
}
}
function 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
*/
function handleSetShouldConfirmModalClose(shouldConfirmModalClose) {
setState({ shouldConfirmModalClose });
}
/**
* Determine which child to render based on the current step in the flow
*/
function determineChildToRender() {
const { step } = state;
let childToRender;
if (React__default.default.Children.count(props.children) > 0) {
React__default.default.Children.forEach(props.children, (child, index) => {
if (index === step) {
childToRender = child;
}
});
}
return childToRender;
}
const { containerClassName, ...restComposedModalProps } = props.composedModalProps;
const { subtitle, ...restModalHeaderProps } = props.modalHeaderProps;
const childToRender = determineChildToRender();
return (React__default.default.createElement(React__default.default.Fragment, null,
props.modalTrigger && props.modalTrigger({ openModal: handleOpenModal }),
React__default.default.createElement(Modal.Modal, { appElement: props.appElement, containerClassName: cx__default.default(`${settings.prefix}--bmrg-modal-flow-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-flow-subtitle` }, subtitle)),
Array.isArray(props.progressSteps) && (React__default.default.createElement(react.ProgressIndicator, { currentIndex: state.step }, props.progressSteps.map((stepProps, index) => (React__default.default.createElement(react.ProgressStep, { key: index, ...stepProps }))))),
childToRender &&
state.isOpen &&
React__default.default.cloneElement(childToRender, {
closeModal: handleShouldCloseModal,
forceCloseModal: handleCloseModal,
formData: state.formData,
goToStep,
requestNextStep,
requestPreviousStep,
resetInitialState,
saveValues,
setShouldConfirmModalClose: handleSetShouldConfirmModalClose,
shouldConfirmModalClose: state.shouldConfirmModalClose,
step: state.step,
}),
React__default.default.createElement(ConfirmModal.default, { affirmativeAction: handleCloseModal, appElement: props.appElement, negativeAction: closeConfirmModal, isOpen: state.isConfirmModalOpen, onCloseModal: closeConfirmModal, ...props.confirmModalProps }))));
}
exports.FlowModalContainer = FlowModalContainer;
exports.default = FlowModalContainer;