@vgbire/react-keep-alive/dist/keep-alive/index.js

React keepAlive

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useState } from 'react';
import { useEffect, useRef } from 'react';
import { Component } from '../component';
import { useKeepAliveScopeContext } from './context';
export const KeepAlive = (_a) => {
    var { activeKey, max = Number.MAX_SAFE_INTEGER, items, exclude, include, style, className, styles } = _a, rest = __rest(_a, ["activeKey", "max", "items", "exclude", "include", "style", "className", "styles"]);
    const containerRef = useRef(null);
    const [caches, setCaches] = useState([]);
    const [noCacheNode, setNoCacheNode] = useState();
    useEffect(() => {
        let cacheList = caches;
        // 添加
        const cacheRoute = cacheList.find((item) => item.key === activeKey);
        const newCache = items.find((item) => item.key === activeKey);
        if (!cacheRoute) {
            cacheList.push(newCache);
            // 缓存超过上限的
            if (cacheList.length > max) {
                cacheList.shift();
            }
        }
        if (exclude || include) {
            cacheList = cacheList.filter(({ key }) => {
                if ((exclude === null || exclude === void 0 ? void 0 : exclude.length) && exclude.includes(key)) {
                    return false;
                }
                if (include === null || include === void 0 ? void 0 : include.length) {
                    return include.includes(key);
                }
                return true;
            });
        }
        if (!cacheList.find((item) => item.key === activeKey) && newCache) {
            containerRef.current.replaceChildren();
            setNoCacheNode(newCache.children);
        }
        else {
            setNoCacheNode(null);
        }
        setCaches([...cacheList]);
    }, [activeKey, max, items, exclude, include]);
    const { setActive, deactivateds, setDeactivateds } = useKeepAliveScopeContext();
    useEffect(() => {
        // 调用deactivateds方法
        setActive === null || setActive === void 0 ? void 0 : setActive((prevKey) => {
            var _a;
            if ((_a = deactivateds[prevKey]) === null || _a === void 0 ? void 0 : _a.length) {
                deactivateds[prevKey].forEach((item) => {
                    item();
                });
                delete deactivateds[prevKey];
                setDeactivateds === null || setDeactivateds === void 0 ? void 0 : setDeactivateds(Object.assign({}, deactivateds));
            }
            return activeKey;
        });
    }, [activeKey]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", Object.assign({ ref: containerRef, style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.wrapper), className: className }, rest)),
        caches.map(({ key, children }) => {
            return (React.createElement(Component, { key: key, name: key, show: key === activeKey, to: containerRef, style: styles === null || styles === void 0 ? void 0 : styles.content }, children));
        }),
        noCacheNode));
};