@etsoo/react 1.5.16 → 1.5.20

package/lib/app/ReactApp.js

@@ -1,6 +1,5 @@
 import { ActionResultError, BridgeUtils, CoreApp, createClient } from '@etsoo/appscript';
 import { WindowStorage } from '@etsoo/shared';
-import { navigate } from '@reach/router';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -199,7 +198,8 @@ export class ReactApp extends CoreApp {
      * @param url Url
      */
     redirectTo(url) {
-        (this.history == null ? navigate : this.history.navigate)(url);
+        const navigate = ReactUtils.getNavigateFn();
+        navigate(url);
     }
     /**
      * Set page data

package/lib/app/ReactUtils.d.ts

@@ -1,9 +1,21 @@
-import { History } from '@reach/router';
+import { History, HistorySource } from '@reach/router';
 import React from 'react';
+declare type MemoryHistorySource = HistorySource & {
+    history: {
+        get entries(): any;
+        get index(): number;
+        go(to: number): void;
+    };
+};
 /**
  * React utils
  */
 export declare namespace ReactUtils {
+    /**
+     * Cretae memory source to fix go back bug
+     * @param initialPath Initial path
+     */
+    function createMemorySource(initialPath?: string): MemoryHistorySource;
     /**
      * Format input value
      * @param value Input value
@@ -35,3 +47,4 @@ export declare namespace ReactUtils {
      */
     function triggerChange(input: HTMLInputElement, value: string, cancelable: boolean): void;
 }
+export {};

package/lib/app/ReactUtils.js

@@ -1,4 +1,4 @@
-import { createHistory, createMemorySource, navigate } from '@reach/router';
+import { createHistory, navigate } from '@reach/router';
 /**
  * React utils
  */
@@ -7,6 +7,71 @@ export var ReactUtils;
     // Memory history
     // https://github.com/reach/router/issues/225
     let memoryHistory;
+    /**
+     * Cretae memory source to fix go back bug
+     * @param initialPath Initial path
+     */
+    function createMemorySource(initialPath = '/') {
+        const searchIndex = initialPath.indexOf('?');
+        const pathname = searchIndex > -1
+            ? initialPath.substring(0, searchIndex)
+            : initialPath;
+        const initialLocation = {
+            pathname,
+            search: searchIndex > -1 ? initialPath.substring(searchIndex) : ''
+        };
+        let index = 0;
+        const stack = [initialLocation];
+        const states = [null];
+        return {
+            get location() {
+                return stack[index];
+            },
+            addEventListener(name, fn) { },
+            removeEventListener(name, fn) { },
+            history: {
+                get entries() {
+                    return stack;
+                },
+                get index() {
+                    return index;
+                },
+                get state() {
+                    return states[index];
+                },
+                pushState(state, _, uri) {
+                    const [pathname, search = ''] = uri.split('?');
+                    index++;
+                    // View a, index = 0
+                    // View b, index = 1
+                    // Go(-1), a, index = 0
+                    // View c, index = 1, directly push is wrong
+                    if (index < stack.length) {
+                        stack.splice(index, stack.length - index);
+                        states.splice(index, stack.length - index);
+                    }
+                    stack.push({
+                        pathname,
+                        search: search.length ? `?${search}` : search
+                    });
+                    states.push(state);
+                },
+                replaceState(state, _, uri) {
+                    const [pathname, search = ''] = uri.split('?');
+                    stack[index] = { pathname, search };
+                    states[index] = state;
+                },
+                go(to) {
+                    const newIndex = index + to;
+                    if (newIndex < 0 || newIndex > states.length - 1) {
+                        return;
+                    }
+                    index = newIndex;
+                }
+            }
+        };
+    }
+    ReactUtils.createMemorySource = createMemorySource;
     /**
      * Format input value
      * @param value Input value

package/lib/mu/BackButton.js

@@ -10,8 +10,6 @@ import { ReactUtils } from '../app/ReactUtils';
 export function BackButton(props) {
     // Destruct
     const { color = 'primary', size = 'small', onClick, ...rest } = props;
-    // Navigate
-    const navigate = ReactUtils.getNavigateFn();
     // Theme
     const theme = useTheme();
     // Color
@@ -19,10 +17,12 @@ export function BackButton(props) {
         ? theme.palette[color]
         : theme.palette.primary;
     // Click handler
-    const onClickLocal = (event) => {
+    const onClickLocal = async (event) => {
         if (onClick)
             onClick(event);
-        navigate(-1);
+        // Navigate
+        const navigate = ReactUtils.getNavigateFn();
+        await navigate(-1);
     };
     return (React.createElement(IconButton, { "aria-label": "Back", color: color, size: size, onClick: onClickLocal, sx: {
             backgroundColor: pColor.contrastText,

package/lib/mu/ListMoreDisplay.js

@@ -56,6 +56,8 @@ export function ListMoreDisplay(props) {
         ref.lastLoadedItems = newItems;
         ref.isNextPageLoading = false;
         ref.hasNextPage = hasNextPage;
+        // Next page
+        ref.currentPage = currentPage + 1;
         // Update rows
         if (states.items == null || reset)
             setStates({ items, completed: !hasNextPage });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.16",
+    "version": "1.5.20",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -83,9 +83,9 @@
         "@babel/runtime-corejs3": "^7.17.2",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.11.0",
-        "@typescript-eslint/parser": "^5.11.0",
-        "eslint": "^8.8.0",
+        "@typescript-eslint/eslint-plugin": "^5.12.0",
+        "@typescript-eslint/parser": "^5.12.0",
+        "eslint": "^8.9.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react": "^7.28.0",

package/src/app/ReactApp.ts

@@ -14,7 +14,7 @@ import {
     NotificationReturn
 } from '@etsoo/notificationbase';
 import { DataTypes, WindowStorage } from '@etsoo/shared';
-import { History, navigate } from '@reach/router';
+import { History } from '@reach/router';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -370,7 +370,8 @@ export class ReactApp<
      * @param url Url
      */
     override redirectTo(url: string) {
-        (this.history == null ? navigate : this.history.navigate)(url);
+        const navigate = ReactUtils.getNavigateFn();
+        navigate(url);
     }
 
     /**

package/src/app/ReactUtils.ts

@@ -1,11 +1,14 @@
-import {
-    createHistory,
-    createMemorySource,
-    History,
-    navigate
-} from '@reach/router';
+import { createHistory, History, HistorySource, navigate } from '@reach/router';
 import React from 'react';
 
+type MemoryHistorySource = HistorySource & {
+    history: {
+        get entries(): any;
+        get index(): number;
+        go(to: number): void;
+    };
+};
+
 /**
  * React utils
  */
@@ -14,6 +17,82 @@ export namespace ReactUtils {
     // https://github.com/reach/router/issues/225
     let memoryHistory: History | null;
 
+    /**
+     * Cretae memory source to fix go back bug
+     * @param initialPath Initial path
+     */
+    export function createMemorySource(
+        initialPath: string = '/'
+    ): MemoryHistorySource {
+        const searchIndex = initialPath.indexOf('?');
+        const pathname =
+            searchIndex > -1
+                ? initialPath.substring(0, searchIndex)
+                : initialPath;
+
+        const initialLocation: any = {
+            pathname,
+            search: searchIndex > -1 ? initialPath.substring(searchIndex) : ''
+        };
+
+        let index = 0;
+
+        const stack = [initialLocation];
+        const states = [null];
+
+        return {
+            get location() {
+                return stack[index];
+            },
+            addEventListener(name, fn) {},
+            removeEventListener(name, fn) {},
+            history: {
+                get entries() {
+                    return stack;
+                },
+                get index() {
+                    return index;
+                },
+                get state() {
+                    return states[index];
+                },
+                pushState(state, _, uri) {
+                    const [pathname, search = ''] = uri.split('?');
+                    index++;
+
+                    // View a, index = 0
+                    // View b, index = 1
+                    // Go(-1), a, index = 0
+                    // View c, index = 1, directly push is wrong
+                    if (index < stack.length) {
+                        stack.splice(index, stack.length - index);
+                        states.splice(index, stack.length - index);
+                    }
+
+                    stack.push({
+                        pathname,
+                        search: search.length ? `?${search}` : search
+                    });
+                    states.push(state);
+                },
+                replaceState(state, _, uri) {
+                    const [pathname, search = ''] = uri.split('?');
+                    stack[index] = { pathname, search };
+                    states[index] = state;
+                },
+                go(to: number) {
+                    const newIndex = index + to;
+
+                    if (newIndex < 0 || newIndex > states.length - 1) {
+                        return;
+                    }
+
+                    index = newIndex;
+                }
+            }
+        };
+    }
+
     /**
      * Format input value
      * @param value Input value

package/src/mu/BackButton.tsx

@@ -17,9 +17,6 @@ export function BackButton(props: BackButtonProps) {
     // Destruct
     const { color = 'primary', size = 'small', onClick, ...rest } = props;
 
-    // Navigate
-    const navigate = ReactUtils.getNavigateFn();
-
     // Theme
     const theme = useTheme();
 
@@ -30,9 +27,12 @@ export function BackButton(props: BackButtonProps) {
             : theme.palette.primary;
 
     // Click handler
-    const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const onClickLocal = async (event: React.MouseEvent<HTMLButtonElement>) => {
         if (onClick) onClick(event);
-        navigate(-1);
+
+        // Navigate
+        const navigate = ReactUtils.getNavigateFn();
+        await navigate(-1);
     };
 
     return (

package/src/mu/ListMoreDisplay.tsx

@@ -137,6 +137,9 @@ export function ListMoreDisplay<
         ref.isNextPageLoading = false;
         ref.hasNextPage = hasNextPage;
 
+        // Next page
+        ref.currentPage = currentPage + 1;
+
         // Update rows
         if (states.items == null || reset)
             setStates({ items, completed: !hasNextPage });