mui-extended/dist/utils/CloseOnNavigation.js

Extended UI Components built on Material UI

import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect } from "react";
var MuiExtReplaceableHistory = /** @class */ (function () {
    function MuiExtReplaceableHistory() {
        this.stateStack = [];
        if (typeof window !== "undefined") {
            this.register();
        }
    }
    MuiExtReplaceableHistory.getInstanse = function () {
        if (!this.instanse) {
            this.instanse = new MuiExtReplaceableHistory();
        }
        return this.instanse;
    };
    MuiExtReplaceableHistory.prototype.getTopState = function () {
        return this.stateStack[this.stateStack.length - 1];
    };
    MuiExtReplaceableHistory.prototype.register = function () {
        var _this = this;
        var originalPushState = window.history.pushState.bind(window.history);
        var originalReplaceState = window.history.replaceState.bind(window.history);
        var cleanDataForOriginalAction = function (data) {
            var _data = data;
            if ((_data === null || _data === void 0 ? void 0 : _data.type) == "MuiExt-replaceable-state") {
                return { type: "MuiExt-replaceable-state" };
            }
            return _data;
        };
        var replaceState = function (data, unused, url) {
            var state = _this.stateStack.pop();
            if ((state === null || state === void 0 ? void 0 : state.type) == "MuiExt-replaceable-state") {
                state.callback(true);
            }
            _this.stateStack.push(data);
            originalReplaceState(cleanDataForOriginalAction(data), unused, url);
        };
        var pushState = function (data, unused, url) {
            var topState = _this.getTopState();
            if ((topState === null || topState === void 0 ? void 0 : topState.type) == "MuiExt-replaceable-state") {
                replaceState(data, unused, url);
            }
            else {
                _this.stateStack.push(data);
                originalPushState(cleanDataForOriginalAction(data), unused, url);
            }
        };
        window.history.pushState = pushState.bind(this);
        window.history.replaceState = replaceState.bind(this);
        window.addEventListener("popstate", function () {
            var state = _this.stateStack.pop();
            if ((state === null || state === void 0 ? void 0 : state.type) == "MuiExt-replaceable-state") {
                state.callback(false);
            }
        });
    };
    MuiExtReplaceableHistory.prototype.pushState = function (callback) {
        window.history.pushState({
            type: "MuiExt-replaceable-state",
            callback: callback
        }, null);
    };
    MuiExtReplaceableHistory.prototype.back = function () {
        var state = this.getTopState();
        if ((state === null || state === void 0 ? void 0 : state.type) == "MuiExt-replaceable-state") {
            window.history.back();
        }
    };
    return MuiExtReplaceableHistory;
}());
export var withCloseOnNavigation = function (Modal) {
    var ImprovedModal = forwardRef(function ModalWithNavigationClose(_a, ref) {
        var children = _a.children, props = __rest(_a, ["children"]);
        useEffect(function () {
            var history = MuiExtReplaceableHistory.getInstanse();
            if (props.open) {
                history.pushState(function () {
                    props.onClose(null);
                });
            }
            else {
                history.back();
            }
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, [props.open]);
        return (_jsx(Modal, __assign({}, props, { ref: ref, children: children })));
    });
    return ImprovedModal;
};