@etsoo/react 1.1.85 → 1.1.89

package/__tests__/mu/NotifierMUTests.tsx

@@ -1,3 +1,4 @@
+import Done from '@mui/icons-material/Done';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
@@ -33,7 +34,11 @@ test('Alert tests', () => {
 
     expect(button.length).toBe(1);
     expect(button[0].innerHTML).toContain('OK');
-    button[0].click();
+
+    act(() => {
+        button[0].click();
+    });
+
     expect(handleClick).toBeCalled();
 
     // Fast forward
@@ -54,7 +59,11 @@ test('Confirm tests', () => {
 
     expect(button.length).toBe(2);
     expect(button[0].innerHTML).toContain('Cancel');
-    button[0].click();
+
+    act(() => {
+        button[0].click();
+    });
+
     expect(handleClick).toBeCalled();
 
     // Fast forward
@@ -63,11 +72,13 @@ test('Confirm tests', () => {
 
 test('Prompt tests', () => {
     // Click
-    const handleClick = jest.fn();
+    const handleClick = jest.fn((result: boolean) => {
+        expect(result).toBeTruthy();
+    });
 
     act(() => {
         // Add the notification
-        notifier.prompt('Prompt message', handleClick, undefined, {
+        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
             type: 'switch'
         });
     });
@@ -77,10 +88,13 @@ test('Prompt tests', () => {
 
     expect(button.length).toBe(2); // Switch will generate a button
     expect(button[1].innerHTML).toContain('OK');
-    button[1].click();
+
+    act(() => {
+        button[1].click();
+    });
+
     expect(handleClick).toBeCalled();
 
-    // Fast forward
     jest.runOnlyPendingTimers();
 });
 

package/lib/app/ReactApp.d.ts

@@ -8,6 +8,9 @@ import { UserAction, UserState } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
 /**
  * React app state detector
+ * Case 1: undefined, when refresh the whole page
+ * Case 2: false, unauthorized
+ * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
  * @param props Props
  * @returns Component
  */

package/lib/app/ReactApp.js

@@ -5,6 +5,9 @@ import { UserActionType, UserState } from '../states/UserState';
 let app;
 /**
  * React app state detector
+ * Case 1: undefined, when refresh the whole page
+ * Case 2: false, unauthorized
+ * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
  * @param props Props
  * @returns Component
  */

package/lib/components/GridLoader.d.ts

@@ -95,10 +95,6 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
      * Is next page loading?
      */
     isNextPageLoading: boolean;
-    /**
-     * Mounted or not
-     */
-    mounted?: boolean;
     /**
      * Current rows
      */

package/lib/components/ScrollerGrid.js

@@ -10,14 +10,11 @@ export const ScrollerGrid = (props) => {
     const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, footerRenderer, headerRenderer, itemRenderer, idField = 'id', loadBatchSize, loadData, mRef, onItemsRendered, onSelectChange, rowHeight = 53, threshold = 6, width, ...rest } = props;
     // States
     const [state, stateUpdate] = React.useReducer((currentState, newState) => {
-        if (!currentState.mounted)
-            return currentState;
         return { ...currentState, ...newState };
     }, {
         autoLoad,
         currentPage: 0,
         hasNextPage: true,
-        mounted: true,
         isNextPageLoading: false,
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderByAsc,
@@ -25,6 +22,7 @@ export const ScrollerGrid = (props) => {
         batchSize: 10,
         selectedItems: []
     });
+    const isMounted = React.useRef(true);
     const ref = React.createRef();
     // Load data
     const loadDataLocal = (pageAdd = 1) => {
@@ -44,7 +42,7 @@ export const ScrollerGrid = (props) => {
             data
         };
         loadData(loadProps).then((result) => {
-            if (result == null || !state.mounted) {
+            if (result == null || !isMounted.current) {
                 return;
             }
             const newItems = result.length;
@@ -173,7 +171,7 @@ export const ScrollerGrid = (props) => {
     }), [state.rows, state.selectedItems]);
     React.useEffect(() => {
         return () => {
-            state.mounted = false;
+            isMounted.current = false;
         };
     }, []);
     // Destruct state

package/lib/components/ScrollerList.js

@@ -27,14 +27,11 @@ export const ScrollerList = (props) => {
     const refs = useCombinedRefs(oRef, outerRef);
     // States
     const [state, stateUpdate] = React.useReducer((currentState, newState) => {
-        if (!currentState.mounted)
-            return currentState;
         return { ...currentState, ...newState };
     }, {
         autoLoad,
         currentPage: 0,
         hasNextPage: true,
-        mounted: true,
         isNextPageLoading: false,
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderByAsc,
@@ -42,6 +39,7 @@ export const ScrollerList = (props) => {
         batchSize: GridSizeGet(loadBatchSize, height),
         selectedItems: []
     });
+    const isMounted = React.useRef(true);
     // Load data
     const loadDataLocal = (pageAdd = 1) => {
         // Prevent multiple loadings
@@ -60,7 +58,7 @@ export const ScrollerList = (props) => {
             data
         };
         loadData(loadProps).then((result) => {
-            if (result == null || !state.mounted) {
+            if (result == null || !isMounted.current) {
                 return;
             }
             const newItems = result.length;
@@ -158,7 +156,7 @@ export const ScrollerList = (props) => {
                 window.cancelAnimationFrame(requestAnimationFrameSeed);
             // Remove scroll event
             window.removeEventListener('scroll', handleWindowScroll);
-            state.mounted = false;
+            isMounted.current = false;
         };
     }, []);
     // Destruct state

package/lib/mu/NotifierMU.js

@@ -132,7 +132,7 @@ export class NotificationMU extends NotificationReact {
                         result = this.onReturn(numberValue);
                     }
                     else if (type === 'switch') {
-                        const boolValue = inputRef.current.value == 'true';
+                        const boolValue = inputRef.current.value === 'true';
                         result = this.onReturn(boolValue);
                     }
                     else {

package/lib/mu/TableEx.js

@@ -49,6 +49,7 @@ export function TableEx(props) {
         batchSize: rowsPerPageLocal,
         selectedItems: []
     });
+    const isMounted = React.useRef(true);
     // Reset the state and load again
     const reset = (add) => {
         const state = {
@@ -91,7 +92,7 @@ export function TableEx(props) {
             data
         };
         loadData(loadProps).then((result) => {
-            if (result == null) {
+            if (!isMounted.current || result == null) {
                 return;
             }
             const newItems = result.length;
@@ -166,6 +167,11 @@ export function TableEx(props) {
     // Auto load data when current page is 0
     if (currentPage === 0 && stateAutoLoad && lastLoadedItems == null)
         loadDataLocal();
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
     // Layout
     return (React.createElement(Paper, null,
         React.createElement(TableContainer, { sx: { maxHeight } },

package/lib/mu/Tiplist.js

@@ -27,6 +27,7 @@ export function Tiplist(props) {
     });
     // State
     const [state] = React.useState({});
+    const isMounted = React.useRef(true);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {
@@ -73,6 +74,8 @@ export function Tiplist(props) {
             stateUpdate({ loading: true });
         // Load list
         loadData(keyword, id).then((options) => {
+            if (!isMounted.current)
+                return;
             // Indicates loading completed
             stateUpdate({
                 loading: false,
@@ -107,6 +110,15 @@ export function Tiplist(props) {
             state.idLoaded = true;
         }
     }
+    React.useEffect(() => {
+        return () => {
+            // Clear any seed
+            if (state.loadDataSeed != null) {
+                clearTimeout(state.loadDataSeed);
+            }
+            isMounted.current = false;
+        };
+    }, []);
     // Layout
     return (React.createElement("div", null,
         React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, defaultValue: localIdValue }),

package/lib/mu/pages/CommonPage.js

@@ -22,7 +22,7 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabSize = 'medium', maxWidth = false, moreActions, onRefresh, onUpdate, paddings = MUGlobal.pagePaddings, scrollContainer, pullContainer, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabButtons, fabSize = 'medium', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, pullContainer, sx = {}, ...rest } = props;
     // Merge style
     Object.assign(sx, {
         padding: paddings
@@ -30,14 +30,19 @@ export function CommonPage(props) {
     // Labels
     const labels = Labels.CommonPage;
     // Update
-    const update = onUpdate
-        ? onUpdate
-        : onRefresh
+    const update = onUpdateAll
+        ? onUpdateAll
+        : onUpdate
             ? (authorized) => {
-                if (authorized)
-                    onRefresh();
+                if (authorized == null || authorized)
+                    onUpdate();
             }
-            : undefined;
+            : onRefresh
+                ? (authorized) => {
+                    if (authorized)
+                        onRefresh();
+                }
+                : undefined;
     // Return the UI
     return (React.createElement(React.Fragment, null,
         update && React.createElement(ReactAppStateDetector, { update: update }),

package/lib/mu/pages/CommonPageProps.d.ts

@@ -21,13 +21,17 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      */
     moreActions?: MoreAction[];
     /**
-     * On refresh callback
+     * On refresh callback, only when authorized = true
      */
     onRefresh?: () => void | PromiseLike<void>;
     /**
-     * On page update, may uses onRefresh
+     * On page update, when authorized = null or true case, may uses onRefresh
      */
-    onUpdate?: IStateUpdate;
+    onUpdate?: () => void | PromiseLike<void>;
+    /**
+     * On page update, all cases with authorized
+     */
+    onUpdateAll?: IStateUpdate;
     /**
      * Paddings
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.1.85",
+    "version": "1.1.89",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -44,11 +44,11 @@
         "@emotion/react": "^11.4.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.3.0",
-        "@etsoo/appscript": "^1.0.87",
+        "@etsoo/appscript": "^1.0.88",
         "@etsoo/notificationbase": "^1.0.78",
         "@etsoo/shared": "^1.0.41",
-        "@mui/icons-material": "^5.0.0-rc.0",
-        "@mui/material": "^5.0.0-rc.0",
+        "@mui/icons-material": "^5.0.0",
+        "@mui/material": "^5.0.0",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",

package/src/app/ReactApp.ts

@@ -23,6 +23,9 @@ let app: IReactApp<IAppSettings, any>;
 
 /**
  * React app state detector
+ * Case 1: undefined, when refresh the whole page
+ * Case 2: false, unauthorized
+ * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
  * @param props Props
  * @returns Component
  */

package/src/components/GridLoader.ts

@@ -130,11 +130,6 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
      */
     isNextPageLoading: boolean;
 
-    /**
-     * Mounted or not
-     */
-    mounted?: boolean;
-
     /**
      * Current rows
      */

package/src/components/ScrollerGrid.tsx

@@ -164,14 +164,12 @@ export const ScrollerGrid = <T extends Record<string, any>>(
             currentState: GridLoaderStates<T>,
             newState: Partial<GridLoaderStates<T>>
         ) => {
-            if (!currentState.mounted) return currentState;
             return { ...currentState, ...newState };
         },
         {
             autoLoad,
             currentPage: 0,
             hasNextPage: true,
-            mounted: true,
             isNextPageLoading: false,
             orderBy: defaultOrderBy,
             orderByAsc: defaultOrderByAsc,
@@ -180,6 +178,7 @@ export const ScrollerGrid = <T extends Record<string, any>>(
             selectedItems: []
         }
     );
+    const isMounted = React.useRef(true);
 
     const ref = React.createRef<VariableSizeGrid<T>>();
 
@@ -204,7 +203,7 @@ export const ScrollerGrid = <T extends Record<string, any>>(
         };
 
         loadData(loadProps).then((result) => {
-            if (result == null || !state.mounted) {
+            if (result == null || !isMounted.current) {
                 return;
             }
 
@@ -360,7 +359,7 @@ export const ScrollerGrid = <T extends Record<string, any>>(
 
     React.useEffect(() => {
         return () => {
-            state.mounted = false;
+            isMounted.current = false;
         };
     }, []);
 

package/src/components/ScrollerList.tsx

@@ -142,14 +142,12 @@ export const ScrollerList = <T extends Record<string, any>>(
             currentState: GridLoaderStates<T>,
             newState: Partial<GridLoaderStates<T>>
         ) => {
-            if (!currentState.mounted) return currentState;
             return { ...currentState, ...newState };
         },
         {
             autoLoad,
             currentPage: 0,
             hasNextPage: true,
-            mounted: true,
             isNextPageLoading: false,
             orderBy: defaultOrderBy,
             orderByAsc: defaultOrderByAsc,
@@ -158,6 +156,7 @@ export const ScrollerList = <T extends Record<string, any>>(
             selectedItems: []
         }
     );
+    const isMounted = React.useRef(true);
 
     // Load data
     const loadDataLocal = (pageAdd: number = 1) => {
@@ -180,7 +179,7 @@ export const ScrollerList = <T extends Record<string, any>>(
         };
 
         loadData(loadProps).then((result) => {
-            if (result == null || !state.mounted) {
+            if (result == null || !isMounted.current) {
                 return;
             }
 
@@ -302,7 +301,7 @@ export const ScrollerList = <T extends Record<string, any>>(
             // Remove scroll event
             window.removeEventListener('scroll', handleWindowScroll);
 
-            state.mounted = false;
+            isMounted.current = false;
         };
     }, []);
 

package/src/mu/NotifierMU.tsx

@@ -248,7 +248,7 @@ export class NotificationMU extends NotificationReact {
                         }
                         result = this.onReturn(numberValue);
                     } else if (type === 'switch') {
-                        const boolValue = inputRef.current.value == 'true';
+                        const boolValue = inputRef.current.value === 'true';
                         result = this.onReturn(boolValue);
                     } else {
                         const textValue = inputRef.current.value.trim();

package/src/mu/TableEx.tsx

@@ -163,6 +163,7 @@ export function TableEx<T extends Record<string, any>>(props: TableExProps<T>) {
             selectedItems: []
         }
     );
+    const isMounted = React.useRef(true);
 
     // Reset the state and load again
     const reset = (add?: {}) => {
@@ -216,7 +217,7 @@ export function TableEx<T extends Record<string, any>>(props: TableExProps<T>) {
         };
 
         loadData(loadProps).then((result) => {
-            if (result == null) {
+            if (!isMounted.current || result == null) {
                 return;
             }
 
@@ -325,6 +326,12 @@ export function TableEx<T extends Record<string, any>>(props: TableExProps<T>) {
     if (currentPage === 0 && stateAutoLoad && lastLoadedItems == null)
         loadDataLocal();
 
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
     // Layout
     return (
         <Paper>

package/src/mu/Tiplist.tsx

@@ -113,6 +113,7 @@ export function Tiplist<T extends Record<string, any>>(props: TiplistProps<T>) {
         idLoaded?: boolean;
         idSet?: boolean;
     }>({});
+    const isMounted = React.useRef(true);
 
     // Add readOnly
     const addReadOnly = (params: AutocompleteRenderInputParams) => {
@@ -175,6 +176,8 @@ export function Tiplist<T extends Record<string, any>>(props: TiplistProps<T>) {
 
         // Load list
         loadData(keyword, id).then((options) => {
+            if (!isMounted.current) return;
+
             // Indicates loading completed
             stateUpdate({
                 loading: false,
@@ -213,6 +216,17 @@ export function Tiplist<T extends Record<string, any>>(props: TiplistProps<T>) {
         }
     }
 
+    React.useEffect(() => {
+        return () => {
+            // Clear any seed
+            if (state.loadDataSeed != null) {
+                clearTimeout(state.loadDataSeed);
+            }
+
+            isMounted.current = false;
+        };
+    }, []);
+
     // Layout
     return (
         <div>

package/src/mu/pages/CommonPage.tsx

@@ -35,6 +35,7 @@ export function CommonPage(props: CommonPageProps) {
         moreActions,
         onRefresh,
         onUpdate,
+        onUpdateAll,
         paddings = MUGlobal.pagePaddings,
         scrollContainer,
         pullContainer,
@@ -51,8 +52,12 @@ export function CommonPage(props: CommonPageProps) {
     const labels = Labels.CommonPage;
 
     // Update
-    const update = onUpdate
-        ? onUpdate
+    const update = onUpdateAll
+        ? onUpdateAll
+        : onUpdate
+        ? (authorized?: boolean) => {
+              if (authorized == null || authorized) onUpdate();
+          }
         : onRefresh
         ? (authorized?: boolean) => {
               if (authorized) onRefresh();

package/src/mu/pages/CommonPageProps.ts

@@ -24,14 +24,19 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
     moreActions?: MoreAction[];
 
     /**
-     * On refresh callback
+     * On refresh callback, only when authorized = true
      */
     onRefresh?: () => void | PromiseLike<void>;
 
     /**
-     * On page update, may uses onRefresh
+     * On page update, when authorized = null or true case, may uses onRefresh
      */
-    onUpdate?: IStateUpdate;
+    onUpdate?: () => void | PromiseLike<void>;
+
+    /**
+     * On page update, all cases with authorized
+     */
+    onUpdateAll?: IStateUpdate;
 
     /**
      * Paddings