@etsoo/react 1.5.17 → 1.5.21

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

@@ -23,10 +23,6 @@ export function BackButton(props) {
         // Navigate
         const navigate = ReactUtils.getNavigateFn();
         await navigate(-1);
-        const history = ReactUtils.getMemoryHistory();
-        if (history) {
-            console.log(history);
-        }
     };
     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/lib/mu/MobileListItemRenderer.js

@@ -1,16 +1,6 @@
 import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
 import React from 'react';
 import { MoreFab } from './MoreFab';
-function getActions(input) {
-    // Actions
-    const actions = [];
-    input.forEach((action) => {
-        if (typeof action === 'boolean')
-            return;
-        actions.push(action);
-    });
-    return actions;
-}
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
@@ -34,32 +24,7 @@ export function MobileListItemRenderer({ data, itemHeight, margins }, renderer)
                 }, transformOrigin: {
                     vertical: 'top',
                     horizontal: 'right'
-                }, actions: getActions(actions), PaperProps: {
-                    elevation: 0,
-                    sx: {
-                        overflow: 'visible',
-                        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                        mt: -0.4,
-                        '& .MuiAvatar-root': {
-                            width: 32,
-                            height: 32,
-                            ml: -0.5,
-                            mr: 1
-                        },
-                        '&:before': {
-                            content: '""',
-                            display: 'block',
-                            position: 'absolute',
-                            top: 0,
-                            right: 14,
-                            width: 10,
-                            height: 10,
-                            bgcolor: 'background.paper',
-                            transform: 'translateY(-50%) rotate(45deg)',
-                            zIndex: 0
-                        }
-                    }
-                } })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
+                }, actions: actions })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
         React.createElement(CardContent, { sx: {
                 paddingTop: 0,
                 paddingBottom: cardActions == null

package/lib/mu/MoreFab.d.ts

@@ -9,7 +9,11 @@ export interface MoreFabProps extends CustomFabProps {
     /**
      * Actions
      */
-    actions?: ListItemReact[];
+    actions?: (ListItemReact | boolean)[];
+    /**
+     * Dray arrow
+     */
+    drawArrow?: boolean;
     /**
      * Main icon
      */

package/lib/mu/MoreFab.js

@@ -2,16 +2,53 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import React from 'react';
 import { Divider, Fab, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
 import { Link } from '@reach/router';
+function getActions(input) {
+    // Actions
+    const actions = [];
+    input.forEach((action) => {
+        if (typeof action === 'boolean')
+            return;
+        actions.push(action);
+    });
+    return actions;
+}
 /**
  * More fab
  * @returns Component
  */
 export function MoreFab(props) {
     // Destruct
-    const { actions, anchorOrigin = {
+    const { actions, drawArrow = true, anchorOrigin = {
         vertical: 'top',
         horizontal: 'right'
-    }, color = 'primary', icon = React.createElement(MoreHorizIcon, null), iconButton = false, PaperProps, size, title, transformOrigin = {
+    }, color = 'primary', icon = React.createElement(MoreHorizIcon, null), iconButton = false, PaperProps = drawArrow
+        ? {
+            elevation: 0,
+            sx: {
+                overflow: 'visible',
+                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                mt: -0.4,
+                '& .MuiAvatar-root': {
+                    width: 32,
+                    height: 32,
+                    ml: -0.5,
+                    mr: 1
+                },
+                '&:before': {
+                    content: '""',
+                    display: 'block',
+                    position: 'absolute',
+                    top: 0,
+                    right: 14,
+                    width: 10,
+                    height: 10,
+                    bgcolor: 'background.paper',
+                    transform: 'translateY(-50%) rotate(45deg)',
+                    zIndex: 0
+                }
+            }
+        }
+        : undefined, size, title, transformOrigin = {
         vertical: 'bottom',
         horizontal: 'right'
     } } = props;
@@ -30,13 +67,15 @@ export function MoreFab(props) {
     // No actions
     if (actions == null || actions.length == 0)
         return React.createElement(React.Fragment, null);
+    // Actions
+    const actionsLocal = getActions(actions);
     // Has any icon
-    const hasIcon = actions.some((action) => action.icon != null);
+    const hasIcon = actionsLocal.some((action) => action.icon != null);
     // Main
     const main = iconButton ? (React.createElement(IconButton, { color: color, size: size, title: title, onClick: handleClick }, icon)) : (React.createElement(Fab, { color: color, size: size, title: title, onClick: handleClick }, icon));
     return (React.createElement(React.Fragment, null,
         main,
-        React.createElement(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps }, actions.map(({ label, icon, action }, index) => label === '-' ? (React.createElement(Divider, { key: index })) : (React.createElement(MenuItem, { key: label, ...(typeof action === 'string'
+        React.createElement(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps }, actionsLocal.map(({ label, icon, action }, index) => label === '-' ? (React.createElement(Divider, { key: index })) : (React.createElement(MenuItem, { key: label, ...(typeof action === 'string'
                 ? action.includes('://')
                     ? {
                         component: 'a',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.17",
+    "version": "1.5.21",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -53,8 +53,8 @@
         "@etsoo/appscript": "^1.2.50",
         "@etsoo/notificationbase": "^1.1.1",
         "@etsoo/shared": "^1.1.11",
-        "@mui/icons-material": "^5.4.1",
-        "@mui/material": "^5.4.1",
+        "@mui/icons-material": "^5.4.2",
+        "@mui/material": "^5.4.2",
         "@reach/router": "^1.3.4",
         "@types/pica": "^9.0.0",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -76,16 +76,16 @@
         "react-window": "^1.8.6"
     },
     "devDependencies": {
-        "@babel/cli": "^7.17.0",
-        "@babel/core": "^7.17.2",
+        "@babel/cli": "^7.17.3",
+        "@babel/core": "^7.17.4",
         "@babel/plugin-transform-runtime": "^7.17.0",
         "@babel/preset-env": "^7.16.11",
         "@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/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

@@ -2,7 +2,6 @@ import { IconButton, IconButtonProps, useTheme } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import React from 'react';
 import { ReactUtils } from '../app/ReactUtils';
-import { BridgeUtils } from '@etsoo/appscript';
 
 /**
  * BackButton props
@@ -34,11 +33,6 @@ export function BackButton(props: BackButtonProps) {
         // Navigate
         const navigate = ReactUtils.getNavigateFn();
         await navigate(-1);
-
-        const history = ReactUtils.getMemoryHistory();
-        if (history) {
-            console.log(history);
-        }
     };
 
     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 });

package/src/mu/MobileListItemRenderer.tsx

@@ -4,16 +4,6 @@ import { ListItemReact } from '../components/ListItemReact';
 import { MoreFab } from './MoreFab';
 import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
 
-function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
-    // Actions
-    const actions: ListItemReact[] = [];
-    input.forEach((action) => {
-        if (typeof action === 'boolean') return;
-        actions.push(action);
-    });
-    return actions;
-}
-
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
@@ -61,34 +51,7 @@ export function MobileListItemRenderer<T>(
                                 vertical: 'top',
                                 horizontal: 'right'
                             }}
-                            actions={getActions(actions)}
-                            PaperProps={{
-                                elevation: 0,
-                                sx: {
-                                    overflow: 'visible',
-                                    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                                    mt: -0.4,
-                                    '& .MuiAvatar-root': {
-                                        width: 32,
-                                        height: 32,
-                                        ml: -0.5,
-                                        mr: 1
-                                    },
-                                    '&:before': {
-                                        content: '""',
-                                        display: 'block',
-                                        position: 'absolute',
-                                        top: 0,
-                                        right: 14,
-                                        width: 10,
-                                        height: 10,
-                                        bgcolor: 'background.paper',
-                                        transform:
-                                            'translateY(-50%) rotate(45deg)',
-                                        zIndex: 0
-                                    }
-                                }
-                            }}
+                            actions={actions}
                         />
                     ) : (
                         actions

package/src/mu/MoreFab.tsx

@@ -5,7 +5,6 @@ import {
     Divider,
     Fab,
     IconButton,
-    Link as MLink,
     ListItemIcon,
     ListItemText,
     Menu,
@@ -23,7 +22,12 @@ export interface MoreFabProps extends CustomFabProps {
     /**
      * Actions
      */
-    actions?: ListItemReact[];
+    actions?: (ListItemReact | boolean)[];
+
+    /**
+     * Dray arrow
+     */
+    drawArrow?: boolean;
 
     /**
      * Main icon
@@ -54,6 +58,16 @@ export interface MoreFabProps extends CustomFabProps {
     transformOrigin?: PopoverOrigin;
 }
 
+function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
+    // Actions
+    const actions: ListItemReact[] = [];
+    input.forEach((action) => {
+        if (typeof action === 'boolean') return;
+        actions.push(action);
+    });
+    return actions;
+}
+
 /**
  * More fab
  * @returns Component
@@ -62,6 +76,7 @@ export function MoreFab(props: MoreFabProps) {
     // Destruct
     const {
         actions,
+        drawArrow = true,
         anchorOrigin = {
             vertical: 'top',
             horizontal: 'right'
@@ -69,7 +84,34 @@ export function MoreFab(props: MoreFabProps) {
         color = 'primary',
         icon = <MoreHorizIcon />,
         iconButton = false,
-        PaperProps,
+        PaperProps = drawArrow
+            ? {
+                  elevation: 0,
+                  sx: {
+                      overflow: 'visible',
+                      filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                      mt: -0.4,
+                      '& .MuiAvatar-root': {
+                          width: 32,
+                          height: 32,
+                          ml: -0.5,
+                          mr: 1
+                      },
+                      '&:before': {
+                          content: '""',
+                          display: 'block',
+                          position: 'absolute',
+                          top: 0,
+                          right: 14,
+                          width: 10,
+                          height: 10,
+                          bgcolor: 'background.paper',
+                          transform: 'translateY(-50%) rotate(45deg)',
+                          zIndex: 0
+                      }
+                  }
+              }
+            : undefined,
         size,
         title,
         transformOrigin = {
@@ -97,8 +139,11 @@ export function MoreFab(props: MoreFabProps) {
     // No actions
     if (actions == null || actions.length == 0) return <React.Fragment />;
 
+    // Actions
+    const actionsLocal = getActions(actions);
+
     // Has any icon
-    const hasIcon = actions.some((action) => action.icon != null);
+    const hasIcon = actionsLocal.some((action) => action.icon != null);
 
     // Main
     const main = iconButton ? (
@@ -129,7 +174,7 @@ export function MoreFab(props: MoreFabProps) {
                 onClose={handleClose}
                 PaperProps={PaperProps}
             >
-                {actions.map(({ label, icon, action }, index) =>
+                {actionsLocal.map(({ label, icon, action }, index) =>
                     label === '-' ? (
                         <Divider key={index} />
                     ) : (