Merge pull request #3 from Bert0324/feat-keep-alive

Feat keep alive

index.d.ts

@@ -8,6 +8,7 @@ interface IConfig {
     selfMatched: boolean[];
     path: string;
     switchRoute: boolean;
+    transition?: ITransition;
 }
 
 export interface IRefObj {
@@ -29,6 +30,11 @@ export interface IRefObj {
 
 export type IBeforeRoute = (from: string, to: string) => boolean | undefined | void | Promise<boolean | undefined | void>;
 export type IAfterRoute = (from: string, to: string) => void;
+export type ITransition = {
+    match: CSSProperties;
+    notMatch: CSSProperties;
+    trans: CSSProperties;
+};
 
 /**
  * Router Configuration
@@ -69,6 +75,15 @@ export interface IPageRouter {
      * - its priority is higher than `keepAlive` in props
      */
     keepAlive?: boolean;
+    /**
+     * transition animation
+     */
+    transition?: ITransition;
+    /**
+     * loading delay
+     * - default is `500`ms
+     */
+    delay?: number;
 }
 
 /**
@@ -113,6 +128,10 @@ export interface IRouterProps {
      *  - default is `true`
      */
     switchRoute?: boolean;
+    /**
+     * transition animation
+     */
+    transition?: ITransition;
 }
 
 declare module 'react-routers' {
@@ -124,11 +143,11 @@ declare module 'react-routers' {
     /**
      * triggered when first entering route and every time active it
      */
-    const useActive: () => void;
+    const useActive: (effect: () => void) => void;
     /**
      * triggered every time unmount route
      */
-    const useDeActive: () => void;
+    const useDeActive: (effect: () => void) => void;
     /**
      * `useParams` like <https://reactrouter.com/core/api/Hooks/useparams>
      */
@@ -138,4 +157,9 @@ declare module 'react-routers' {
      */
     const useRefContext: () => IRefObj | null;
     export { Routers, useActive, useDeActive, useParams, useRefContext };
+}
+
+declare module '*.module.less' {
+    const styles: { readonly [key: string]: string };
+    export default styles;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-routers",
-  "version": "1.0.12",
+  "version": "1.0.18",
   "description": "router component",
   "author": "yuchen.huang <'[email protected]'>",
   "main": "dist/main.min.js",
@@ -46,6 +46,7 @@
     "@types/clean-webpack-plugin": "^0.1.3",
     "@types/html-webpack-plugin": "^3.2.4",
     "@types/loader-utils": "^2.0.1",
+    "@types/lodash-es": "^4.17.4",
     "@types/mini-css-extract-plugin": "^1.2.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
@@ -70,7 +71,10 @@
     "mini-css-extract-plugin": "^1.3.1",
     "monaco-editor-webpack-plugin": "^2.1.0",
     "postcss-loader": "^4.1.0",
+    "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "style-loader": "^2.0.0",
     "thread-loader": "^3.0.1",
     "ts-loader": "^8.0.12",
@@ -80,9 +84,9 @@
     "webpack": "^4.44.1",
     "webpack-cli": "^4.3.0",
     "webpack-dev-server": "^3.11.1",
-    "webpack-merge": "^5.7.3",
-    "react": "^17.0.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0"
+    "webpack-merge": "^5.7.3"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.20"
   }
 }

src/context/hooks.ts

@@ -12,8 +12,6 @@ export const useActive = (effect: () => void) => {
     const data = useRefContext()!;
     const history = useHistory();
     useEffect(() => {
-        // // eslint-disable-next-line no-debugger
-        // debugger;
         const key = findMatchPath(data.map, history.location.pathname);
         if (key !== notExistPath) {
             if (!data.actives[key]) {

src/core/KeepAlive.tsx

@@ -8,6 +8,7 @@ export const KeepAlive: FC<{ config: IConfig }> = memo(({ children, config }) =>
     const history = useHistory();
     const [match, setMatch] = useState(false);
     const [firstMatched, setFirstMatched] = useState(false);
+    const [delayMatch, setDelayMatch] = useState(false);
     const data = useRefContext()!;
 
     const checkMatch = () => {
@@ -47,17 +48,35 @@ export const KeepAlive: FC<{ config: IConfig }> = memo(({ children, config }) =>
         history.listen(() => checkMatch());
     }, []);
 
+    useEffect(() => {
+        setTimeout(() => {
+            setDelayMatch(match);
+        }, 500);
+    }, [match]);
+
+    const transitionStyle = {
+        ...config.transition?.trans,
+        ...(match ? config.transition?.match : config.transition?.notMatch)
+    };
+
     return (
         <>
             {config.alive ? 
                 <>
-                    {firstMatched ?                 
-                        <div style={{ display: match ? '' : 'none' }}>
+                    {firstMatched ?    
+                        <div 
+                            style={{ display: (config.transition ? delayMatch : match) ? '' : 'none', ...transitionStyle }}
+                        >
                             {children}
-                        </div> : null}
+                        </div>      
+                        : null}
                 </>
             : 
-            match ? children : null}
+            <div 
+                style={transitionStyle}
+            >
+                {(config.transition ? delayMatch : match) ? children : null}
+            </div>}
         </>
     );
 }, (prev, next) => JSON.stringify(prev.config) === JSON.stringify(next.config));

src/core/Router.tsx

@@ -1,5 +1,6 @@
-import React, { lazy, Suspense, FC, memo, useState, useMemo, useEffect } from 'react';
+import React, { lazy, Suspense, FC, memo, useState, useMemo, useEffect, useCallback } from 'react';
 import { Route, withRouter, useHistory } from 'react-router-dom';
+import { throttle } from 'lodash-es';
 import { IPageRouter, IRouterProps } from '../..';
 import { Provider, useRefContext } from '../context/context';
 import { KeepAlive } from './KeepAlive';
@@ -8,11 +9,15 @@ import { findMatchRoute } from '../utils/utils';
 /**
  * router
  */
-const Router: FC<IRouterProps> = memo(({ routers, fallback, redirect, beforeEach, afterEach, style, keepAlive, switchRoute = true }) => {
+const Router: FC<IRouterProps> = memo(({ routers, fallback, redirect, beforeEach, afterEach, style, keepAlive, switchRoute = true, transition, delay }) => {
     const history = useHistory();
-    const [loading, setLoading] = useState(true);
+    const [loading, _setLoading] = useState(true);
     const data = useRefContext()!;
 
+    const setLoading = useCallback(throttle((_loading: boolean) => {
+        _setLoading(_loading);
+    }, (delay || 500), { leading: false, trailing: true }), [_setLoading]);
+
     const Loading = useMemo(() => {
         const Fallback = fallback;
         if (!Fallback) return <></>;
@@ -47,7 +52,8 @@ const Router: FC<IRouterProps> = memo(({ routers, fallback, redirect, beforeEach
                 alive,
                 selfMatched: [],
                 path: params.path,
-                switchRoute
+                switchRoute,
+                transition: params.transition || transition
             };
             return (
                 <Route path='*' key={params.path}>
@@ -81,6 +87,7 @@ const Router: FC<IRouterProps> = memo(({ routers, fallback, redirect, beforeEach
     };
 
     data.historyChangeHandler = async () => {
+        // don't show loading with an interval
         setLoading(true);
         data.matched = [];
         setTimeout(async () => {

src/utils/utils.ts

@@ -29,4 +29,4 @@ export const findMatch = <T = {}>(map: { [key: string]: any }, path: string) =>
         }
         return acc;
     }, undefined as unknown as match<T>);
-};
+};

test/async.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useActive, useDeActive } from '../src';
+import { useActive, useDeActive } from '../src/index';
 
 const Sub: FC = () => {
 
@@ -22,6 +22,7 @@ export const AsyncComponent: FC = () => {
     useDeActive(() => {
         console.log('page1 deactive', data);
     });
+
     return (
         <>
             page1

test/index.tsx

@@ -1,8 +1,7 @@
 import React, { FC, useEffect, useState } from 'react';
 import { render } from 'react-dom';
 import { Link, BrowserRouter } from 'react-router-dom';
-import { useParams } from '../src/context/hooks';
-import { Routers } from '../src/core/Router';
+import { Routers, useParams } from '../src';
 import { LoadingPage } from './loading';
 
 const asyncTask = () => new Promise<void>(resolve => setTimeout(() => resolve(), 2000));
@@ -40,12 +39,12 @@ const App: FC = () => {
                                 path: '/:page',     // test/page2/page3
                                 name: 'page3',
                                 Component: async () => () => {
-                                    const params = useParams();
-                                    console.log(params);
+                                    // const params = useParams();
+                                    // console.log(params);
                                     return <>page3</>
                                 },
                                 beforeRoute: (from, to) => {
-                                    // return false;
+                                    return false;
                                 },
                             }
                         ]
@@ -58,7 +57,7 @@ const App: FC = () => {
                 redirect='/page1'
                 fallback={LoadingPage}
             />            
-            <Routers 
+            {/* <Routers 
                 routers={[
                     // {
                     //     path: '/',
@@ -75,7 +74,7 @@ const App: FC = () => {
                     },
                 ]}
                 fallback={LoadingPage}
-            />
+            /> */}
         </BrowserRouter>
     );
 };

yarn.lock

@@ -2009,6 +2009,18 @@
     "@types/node" "*"
     "@types/webpack" "*"
 
+"@types/lodash-es@^4.17.4":
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.4.tgz#b2e440d2bf8a93584a9fd798452ec497986c9b97"
+  integrity sha512-BBz79DCJbD2CVYZH67MBeHZRX++HF+5p8Mo5MzjZi64Wac39S3diedJYHZtScbRVf4DjZyN6LzA0SB0zy+HSSQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.168"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
+  integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
+
 "@types/mime@*":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.3.tgz"
@@ -6091,6 +6103,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.20:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.20.tgz#29f6332eefc60e849f869c264bc71126ad61e8f7"
+  integrity sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"