@etsoo/materialui 1.0.43 → 1.0.45

package/lib/SelectEx.js

@@ -4,6 +4,7 @@ import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { Utils } from '@etsoo/shared';
+import { ReactUtils } from '@etsoo/react';
 /**
  * Extended select component
  * @param props Props
@@ -52,7 +53,12 @@ export function SelectEx(props) {
         localValue = valueSource;
     }
     // Value state
-    const [valueState, setValueState] = React.useState();
+    const [valueState, setValueStateBase] = React.useState();
+    const valueRef = React.useRef();
+    const setValueState = (newValue) => {
+        valueRef.current = newValue;
+        setValueStateBase(newValue);
+    };
     React.useEffect(() => {
         if (localValue != null)
             setValueState(localValue);
@@ -69,22 +75,23 @@ export function SelectEx(props) {
     const handleChange = (event) => {
         const value = event.target.value;
         if (multiple && !Array.isArray(value))
-            setItemValue([value]);
+            return setItemValue([value]);
         else
-            setItemValue(value);
+            return setItemValue(value);
     };
     // Set item
     const setItemValue = (id) => {
-        if (id != valueState) {
+        var _a;
+        if (id != valueRef.current) {
             setValueState(id);
-            /*
-            const input = divRef.current?.querySelector('input');
+            const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                ReactUtils.triggerChange(input, id as string, false);
+                ReactUtils.triggerChange(input, id, false);
             }
-            */
+            return true;
         }
+        return false;
     };
     // Get option id
     const getId = (option) => {
@@ -147,8 +154,9 @@ export function SelectEx(props) {
                         if (event.defaultPrevented)
                             return;
                     }
-                    doItemChange(localOptions, event.target.value, true);
-                    handleChange(event);
+                    if (handleChange(event)) {
+                        doItemChange(localOptions, event.target.value, true);
+                    }
                 }, renderValue: (selected) => {
                     // The text shows up
                     return localOptions

package/lib/app/ReactApp.d.ts

@@ -4,10 +4,14 @@ import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from '@etsoo/react';
 import { NavigateFunction, NavigateOptions } from 'react-router-dom';
+/**
+ * React Application Type
+ */
+export declare type ReactAppType = IApp & IReactAppBase;
 /**
  * Global application
  */
-export declare let globalApp: IApp & IReactAppBase;
+export declare let globalApp: ReactAppType;
 /**
  * React app state detector
  * Case 1: undefined, when refresh the whole page
@@ -95,7 +99,6 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * Get notifier provider
      */
     static get notifierProvider(): React.FunctionComponent<object>;
-    private static createApi;
     private static createNotifier;
     /**
      * Culture state

package/lib/app/ReactApp.js

@@ -57,7 +57,7 @@ export class ReactApp extends CoreApp {
      * @param name Application name
      */
     constructor(settings, name) {
-        super(settings, ReactApp.createApi(settings), ReactApp.createNotifier(), new WindowStorage(), name);
+        super(settings, createClient(), ReactApp.createNotifier(), new WindowStorage(), name);
         /**
          * User state
          */
@@ -77,13 +77,6 @@ export class ReactApp extends CoreApp {
     static get notifierProvider() {
         return this._notifierProvider;
     }
-    static createApi(settings) {
-        // API
-        // Support to replace {hostname} with current hostname
-        const api = createClient();
-        api.baseUrl = settings.endpoint;
-        return api;
-    }
     static createNotifier() {
         // Notifier
         ReactApp._notifierProvider = NotifierMU.setup();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.43",
+    "version": "1.0.45",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,12 +51,12 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@etsoo/appscript": "^1.3.1",
+        "@etsoo/appscript": "^1.3.4",
         "@etsoo/notificationbase": "^1.1.12",
-        "@etsoo/react": "^1.6.12",
-        "@etsoo/shared": "^1.1.59",
-        "@mui/icons-material": "^5.10.6",
-        "@mui/material": "^5.10.8",
+        "@etsoo/react": "^1.6.14",
+        "@etsoo/shared": "^1.1.60",
+        "@mui/icons-material": "^5.10.9",
+        "@mui/material": "^5.10.9",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.21",
@@ -71,24 +71,24 @@
         "react-dom": "^18.2.0",
         "react-draggable": "^4.4.5",
         "react-imask": "^6.4.3",
-        "react-router-dom": "^6.4.1",
+        "react-router-dom": "^6.4.2",
         "react-window": "^1.8.7"
     },
     "devDependencies": {
         "@babel/cli": "^7.19.3",
         "@babel/core": "^7.19.3",
         "@babel/plugin-transform-runtime": "^7.19.1",
-        "@babel/preset-env": "^7.19.3",
-        "@babel/runtime-corejs3": "^7.19.1",
+        "@babel/preset-env": "^7.19.4",
+        "@babel/runtime-corejs3": "^7.19.4",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
-        "@types/jest": "^29.1.1",
-        "@typescript-eslint/eslint-plugin": "^5.39.0",
-        "@typescript-eslint/parser": "^5.39.0",
-        "eslint": "^8.24.0",
+        "@types/jest": "^29.1.2",
+        "@typescript-eslint/eslint-plugin": "^5.40.0",
+        "@typescript-eslint/parser": "^5.40.0",
+        "eslint": "^8.25.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.8",
+        "eslint-plugin-react": "^7.31.10",
         "jest": "^29.1.2",
         "jest-environment-jsdom": "^29.1.2",
         "ts-jest": "^29.0.3",

package/src/SelectEx.tsx

@@ -23,6 +23,7 @@ import {
     ListType,
     Utils
 } from '@etsoo/shared';
+import { ReactUtils } from '@etsoo/react';
 
 /**
  * Extended select component props
@@ -183,7 +184,12 @@ export function SelectEx<
     }
 
     // Value state
-    const [valueState, setValueState] = React.useState<unknown>();
+    const [valueState, setValueStateBase] = React.useState<unknown>();
+    const valueRef = React.useRef<unknown>();
+    const setValueState = (newValue: unknown) => {
+        valueRef.current = newValue;
+        setValueStateBase(newValue);
+    };
 
     React.useEffect(() => {
         if (localValue != null) setValueState(localValue);
@@ -201,23 +207,23 @@ export function SelectEx<
     // Change handler
     const handleChange = (event: SelectChangeEvent<unknown>) => {
         const value = event.target.value;
-        if (multiple && !Array.isArray(value)) setItemValue([value]);
-        else setItemValue(value);
+        if (multiple && !Array.isArray(value)) return setItemValue([value]);
+        else return setItemValue(value);
     };
 
     // Set item
     const setItemValue = (id: unknown) => {
-        if (id != valueState) {
+        if (id != valueRef.current) {
             setValueState(id);
 
-            /*
             const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id as string, false);
             }
-            */
+            return true;
         }
+        return false;
     };
 
     // Get option id
@@ -314,8 +320,14 @@ export function SelectEx<
                             // event.preventDefault() will block executing
                             if (event.defaultPrevented) return;
                         }
-                        doItemChange(localOptions, event.target.value, true);
-                        handleChange(event);
+
+                        if (handleChange(event)) {
+                            doItemChange(
+                                localOptions,
+                                event.target.value,
+                                true
+                            );
+                        }
                     }}
                     renderValue={(selected) => {
                         // The text shows up

package/src/app/ReactApp.ts

@@ -37,10 +37,15 @@ import {
 } from '@etsoo/react';
 import { NavigateFunction, NavigateOptions } from 'react-router-dom';
 
+/**
+ * React Application Type
+ */
+export type ReactAppType = IApp & IReactAppBase;
+
 /**
  * Global application
  */
-export let globalApp: IApp & IReactAppBase;
+export let globalApp: ReactAppType;
 
 /**
  * React app state detector
@@ -192,14 +197,6 @@ export class ReactApp<
         return this._notifierProvider;
     }
 
-    private static createApi(settings: IAppSettings) {
-        // API
-        // Support to replace {hostname} with current hostname
-        const api = createClient();
-        api.baseUrl = settings.endpoint;
-        return api;
-    }
-
     private static createNotifier() {
         // Notifier
         ReactApp._notifierProvider = NotifierMU.setup();
@@ -255,7 +252,7 @@ export class ReactApp<
     constructor(settings: S, name: string) {
         super(
             settings,
-            ReactApp.createApi(settings),
+            createClient(),
             ReactApp.createNotifier(),
             new WindowStorage(),
             name