@darwish/hooks-core/lib/useRouteState.js

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useRouteState = exports.useRouteStates = void 0;
var react_1 = require("react");
var NumberParam = Infinity;
var StringParam = '';
var BooleanParam = undefined;
var ArrayParam = [];
function useRouteStates(obj) {
    var _a = (0, react_1.useState)(obj), state = _a[0], setState = _a[1];
    (0, react_1.useLayoutEffect)(function () {
        var handlePopstate = function () {
            var searchParams = new URLSearchParams(window.location.search);
            var _loop_1 = function (key, type) {
                var paramValue = type === ArrayParam
                    ? searchParams.getAll(key)
                    : searchParams.get(key);
                setState(function (prev) {
                    var _a;
                    return __assign(__assign({}, prev), (_a = {}, _a[key] = paramValue, _a));
                });
            };
            for (var _i = 0, _a = Object.entries(obj); _i < _a.length; _i++) {
                var _b = _a[_i], key = _b[0], type = _b[1];
                _loop_1(key, type);
            }
        };
        window.addEventListener('popstate', handlePopstate);
        return function () {
            window.removeEventListener('popstate', handlePopstate);
        };
    }, []);
    var updateState = (0, react_1.useCallback)(function (value) {
        var url = new URL(window.location.href);
        var _loop_2 = function (key, val) {
            var type = obj[key];
            if (type !== ArrayParam) {
                if (val === undefined) {
                    url.searchParams.delete(key);
                }
                else {
                    url.searchParams.set(key, val);
                }
            }
            else {
                url.searchParams.delete(key);
                if (val && Array.isArray(val) && val.length > 0) {
                    val.forEach(function (v) {
                        url.searchParams.append(key, v);
                    });
                }
            }
        };
        for (var _i = 0, _a = Object.entries(value); _i < _a.length; _i++) {
            var _b = _a[_i], key = _b[0], val = _b[1];
            _loop_2(key, val);
        }
        window.history.pushState({}, '', url);
        setState(function (prev) {
            return __assign(__assign({}, prev), value);
        });
    }, []);
    return [state, updateState];
}
exports.useRouteStates = useRouteStates;
function useRouteState(key, type) {
    var _a = (0, react_1.useState)(function () {
        // 初始化url上已有的参数， 比如f5刷新
        if (![ArrayParam, StringParam, BooleanParam, NumberParam].includes(type)) {
            return null;
        }
        var url = new URL(window.location.href);
        if (type !== ArrayParam) {
            var value = url.searchParams.get(key);
            if (value === null) {
                return type;
            }
            else {
                return value;
            }
        }
        else {
            var value = url.searchParams.getAll(key);
            return value.length ? value : type;
        }
    }), state = _a[0], setState = _a[1];
    (0, react_1.useLayoutEffect)(function () {
        /**
         * 浏览器导航返回时，对状态进行还原上一步
         */
        var handlePopstate = function () {
            var searchParams = new URLSearchParams(window.location.search);
            var paramValue = type === ArrayParam ? searchParams.getAll(key) : searchParams.get(key);
            /**
             * TODO 这里不知道为啥渲染两次，把多余的if掉
             */
            if (paramValue === state) {
                setState(paramValue);
            }
        };
        window.addEventListener('popstate', handlePopstate);
        return function () {
            window.removeEventListener('popstate', handlePopstate);
        };
    }, []);
    var updateState = (0, react_1.useCallback)(function (value) {
        /**
         * 这个钩子仅仅支持这两个类型的赋值，object请使用useRouterStates
         * 更加复杂请移入其他方案
         */
        if (![ArrayParam, StringParam, BooleanParam, NumberParam].includes(type)) {
            console.error('a invalid type is passed');
            return;
        }
        var url = new URL(window.location.href);
        if (type !== ArrayParam) {
            /**
             *  基础类型
             */
            if ([undefined, null, '', Infinity].includes(value)) {
                url.searchParams.delete(key);
                window.history.pushState({}, '', url);
            }
            else {
                url.searchParams.set(key, value);
                window.history.pushState({}, '', url);
            }
        }
        else {
            /**
             * 数组类型
             */
            url.searchParams.delete(key);
            if (value && Array.isArray(value) && value.length > 0) {
                value.forEach(function (v) {
                    url.searchParams.append(key, v);
                });
            }
            window.history.pushState({}, '', url);
        }
        setState(value);
    }, []);
    return [state, updateState];
}
exports.useRouteState = useRouteState;