heroui-modal-provider/dist/index.js

[](https://www.npmjs.com/package/heroui-modal-provider) [](https://w

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

var cc = require('./cc-OwKbw9kR.js');
var React = require('react');

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

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

var modalContextFallback = {
    state: {},
    updateModal: function updateModal() {
        return undefined;
    },
    hideModal: function hideModal() {
        return undefined;
    },
    destroyModal: function destroyModal() {
        return undefined;
    },
    destroyModalsByRootId: function destroyModalsByRootId() {
        return undefined;
    },
    showModal: function showModal() {
        return {
            id: 'id',
            hide: function hide() {
                return undefined;
            },
            destroy: function destroy() {
                return undefined;
            },
            update: function update() {
                return undefined;
            }
        };
    }
};
var ModalContext = React.createContext(undefined);

var Types = /*#__PURE__*/ function(Types) {
    Types["SHOW"] = "SHOW";
    Types["HIDE"] = "HIDE";
    Types["UPDATE"] = "UPDATE";
    Types["DESTROY"] = "DESTROY";
    Types["DESTROY_BY_ROOT_ID"] = "DESTROY_BY_ROOT_ID";
    Types["UNKNOWN"] = "UNKNOWN";
    return Types;
}({});
var initialState = {};
function reducer(state, action) {
    switch(action.type){
        case "SHOW":
            {
                var _action_payload = action.payload, id = _action_payload.id, component = _action_payload.component, props = _action_payload.props, options = _action_payload.options;
                var _obj;
                return cc._extends({}, state, (_obj = {}, _obj[id] = {
                    component: component,
                    props: cc._extends({}, props, {
                        isOpen: true
                    }),
                    options: options
                }, _obj));
            }
        case "HIDE":
            {
                var id1 = action.payload.id;
                if (!state[id1]) {
                    return state;
                }
                var _obj1;
                return cc._extends({}, state, (_obj1 = {}, _obj1[id1] = cc._extends({}, state[id1], {
                    props: cc._extends({}, state[id1].props, {
                        isOpen: false
                    })
                }), _obj1));
            }
        case "UPDATE":
            {
                var _action_payload1 = action.payload, id2 = _action_payload1.id, props1 = _action_payload1.props;
                if (!state[id2]) {
                    return state;
                }
                var _obj2;
                return cc._extends({}, state, (_obj2 = {}, _obj2[id2] = cc._extends({}, state[id2], {
                    props: cc._extends({}, state[id2].props, props1)
                }), _obj2));
            }
        case "DESTROY":
            {
                var id3 = action.payload.id;
                var newState = cc._extends({}, state);
                delete newState[id3];
                return newState;
            }
        case "DESTROY_BY_ROOT_ID":
            {
                var rootId = action.payload.rootId;
                return Object.keys(state).filter(function(key) {
                    return key.split('.')[0] !== rootId;
                }).reduce(function(acc, key) {
                    var _obj;
                    return cc._extends({}, acc, (_obj = {}, _obj[key] = state[key], _obj));
                }, {});
            }
        default:
            throw new Error('Unexpected action');
    }
}

var MISSED_MODAL_ID_ERROR_MESSAGE = '[ERROR]: Modal ID is missing';
var MISSED_MODAL_ROOT_ID_ERROR_MESSAGE = '[ERROR]: Modal root ID is missing';

var uid = function uid(len) {
    if (len === void 0) len = 8;
    var buf = [];
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charlen = chars.length;
    for(var i = 0; i < len; i++){
        buf[i] = chars.charAt(Math.floor(Math.random() * charlen));
    }
    return buf.join('');
};

var config = {
    /**
   * If set to `true` you will get an error when trying to access
   * a context without the `ModalProvider` declared above.
   */ enforceProvider: false
};
function setModalConfig(newConfig) {
    Object.assign(config, newConfig);
}
function getModalConfig() {
    return config;
}

function useModalContext() {
    var context = React.useContext(ModalContext);
    var enforceProvider = getModalConfig().enforceProvider;
    if (enforceProvider && context === undefined) {
        throw new Error('useModalContext must be used within a ModalProvider');
    }
    return context || modalContextFallback;
}

var defaultOptions = {
    disableAutoDestroy: false
};
function useModal(options) {
    if (options === void 0) options = defaultOptions;
    var disableAutoDestroy = cc._extends({}, defaultOptions, options).disableAutoDestroy;
    var _useModalContext = useModalContext(), showModal = _useModalContext.showModal, destroyModalsByRootId = _useModalContext.destroyModalsByRootId, otherModalContextProps = cc._object_without_properties_loose(_useModalContext, [
        "showModal",
        "destroyModalsByRootId"
    ]);
    var rootId = React.useRef(uid(6));
    React.useEffect(function() {
        return function() {
            if (!disableAutoDestroy && destroyModalsByRootId) {
                destroyModalsByRootId(rootId.current);
            }
        };
    }, [
        disableAutoDestroy,
        destroyModalsByRootId
    ]);
    return cc._extends({
        showModal: React.useCallback(function(component, props, options) {
            return showModal(component, props, cc._extends({
                rootId: rootId.current,
                hideOnClose: true
            }, options));
        }, [
            showModal
        ]),
        destroyModalsByRootId: destroyModalsByRootId
    }, otherModalContextProps);
}

var nexus = {};
function ModalNexus() {
    nexus.getModal = useModal();
    return null;
}
var getModal = function getModal() {
    return nexus.getModal;
};

function ModalProvider(param) {
    var children = param.children, _param_suspense = param.suspense, suspense = _param_suspense === void 0 ? true : _param_suspense, _param_fallback = param.fallback, fallback = _param_fallback === void 0 ? null : _param_fallback;
    var _React_useReducer = React__default.default.useReducer(reducer, initialState), state = _React_useReducer[0], dispatch = _React_useReducer[1];
    var update = React__default.default.useCallback(function(id, _1) {
        _1.isOpen; var props = cc._object_without_properties_loose(_1, [
            "isOpen"
        ]);
        if (!id) {
            console.error(MISSED_MODAL_ID_ERROR_MESSAGE);
            return;
        }
        dispatch({
            type: Types.UPDATE,
            payload: {
                id: id,
                props: props
            }
        });
    }, [
        dispatch
    ]);
    var hide = React__default.default.useCallback(function(id) {
        if (!id) {
            console.error(MISSED_MODAL_ID_ERROR_MESSAGE);
            return;
        }
        dispatch({
            type: Types.HIDE,
            payload: {
                id: id
            }
        });
    }, [
        dispatch
    ]);
    var destroy = React__default.default.useCallback(function(id) {
        if (!id) {
            console.error(MISSED_MODAL_ID_ERROR_MESSAGE);
            return;
        }
        dispatch({
            type: Types.DESTROY,
            payload: {
                id: id
            }
        });
    }, [
        dispatch
    ]);
    var destroyByRootId = React__default.default.useCallback(function(rootId) {
        if (!rootId) {
            console.error(MISSED_MODAL_ROOT_ID_ERROR_MESSAGE);
            return;
        }
        dispatch({
            type: Types.DESTROY_BY_ROOT_ID,
            payload: {
                rootId: rootId
            }
        });
    }, [
        dispatch
    ]);
    var show = React__default.default.useCallback(function(component, props, options) {
        var id = uid(8);
        if (options && options.rootId) {
            id = options.rootId + "." + id;
        }
        dispatch({
            type: Types.SHOW,
            payload: {
                id: id,
                component: component,
                props: props,
                options: options
            }
        });
        return {
            id: id,
            hide: function hide1() {
                return hide(id);
            },
            destroy: function destroy1() {
                return destroy(id);
            },
            update: function update1(newProps) {
                return update(id, newProps);
            }
        };
    }, [
        dispatch,
        hide,
        destroy,
        update
    ]);
    var renderState = function renderState() {
        return Object.keys(state).map(function(id) {
            var _state_id = state[id], Component = _state_id.component, props = _state_id.props, options = _state_id.options;
            var handleClose = function handleClose() {
                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
                    args[_key] = arguments[_key];
                }
                if (options && options.hideOnClose) {
                    hide(id);
                }
                if (options && options.destroyOnClose && options.hideOnClose) {
                    destroy(id);
                }
                if (props && props.onClose) {
                    var _props;
                    (_props = props).onClose.apply(_props, [].concat(args));
                }
            };
            var handleExited = function handleExited() {
                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
                    args[_key] = arguments[_key];
                }
                var _props_motionProps_onAnimationComplete;
                var _props_motionProps_onAnimationComplete1, _props_motionProps;
                if (props == null ? void 0 : props.isOpen) return;
                props == null ? void 0 : (_props_motionProps = props.motionProps) == null ? void 0 : (_props_motionProps_onAnimationComplete1 = _props_motionProps.onAnimationComplete) == null ? void 0 : (_props_motionProps_onAnimationComplete = _props_motionProps_onAnimationComplete1).call.apply(_props_motionProps_onAnimationComplete, [].concat([
                    _props_motionProps
                ], args));
                destroy(id);
            };
            var extraProps = {
                motionProps: cc._extends({}, props == null ? void 0 : props.motionProps, {
                    onAnimationComplete: handleExited
                })
            };
            return /*#__PURE__*/ React__default.default.createElement(Component, cc._extends({}, props, {
                key: id,
                onClose: handleClose
            }, options && !options.destroyOnClose && extraProps));
        });
    };
    var SuspenseWrapper = suspense ? React.Suspense : React.Fragment;
    return /*#__PURE__*/ React__default.default.createElement(ModalContext.Provider, {
        value: {
            state: state,
            updateModal: update,
            hideModal: hide,
            destroyModal: destroy,
            showModal: show,
            destroyModalsByRootId: destroyByRootId
        }
    }, children, /*#__PURE__*/ React__default.default.createElement(ModalNexus, null), /*#__PURE__*/ React__default.default.createElement(SuspenseWrapper, suspense && {
        fallback: fallback
    }, renderState()));
}

exports.ModalProvider = ModalProvider;
exports.default = ModalProvider;
exports.getModal = getModal;
exports.getModalConfig = getModalConfig;
exports.setModalConfig = setModalConfig;
exports.useModal = useModal;