@etsoo/react 1.4.85 → 1.4.89

package/lib/app/ServiceApp.d.ts

@@ -34,8 +34,9 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
     constructor(settings: S, name: string);
     /**
      * Go to the login page
+     * @param tryLogin Try to login again
      */
-    toLoginPage(): void;
+    toLoginPage(tryLogin?: boolean): void;
     /**
      * Refresh token
      * @param props Props

package/lib/app/ServiceApp.js

@@ -41,8 +41,9 @@ export class ServiceApp extends ReactApp {
     }
     /**
      * Go to the login page
+     * @param tryLogin Try to login again
      */
-    toLoginPage() {
+    toLoginPage(tryLogin) {
         const coreUrl = this.settings.webUrl;
         window.location.href =
             coreUrl +
@@ -51,7 +52,8 @@ export class ServiceApp extends ReactApp {
                 '&' +
                 DomUtils.CultureField +
                 '=' +
-                this.culture;
+                this.culture +
+                (tryLogin ? '' : '&tryLogin=false');
     }
     /**
      * Refresh token

package/lib/mu/ComboBox.d.ts

@@ -5,6 +5,10 @@ import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
  * ComboBox props
  */
 export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T> {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
     /**
      * Data readonly
      */

package/lib/mu/ComboBox.js

@@ -12,7 +12,7 @@ import { SearchField } from './SearchField';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -82,7 +82,7 @@ export function ComboBox(props) {
                     return;
                 if (onLoadData)
                     onLoadData(result);
-                if (search) {
+                if (autoAddBlankItem) {
                     SharedUtils.addBlankItem(result, idField, labelField);
                 }
                 setOptions(result);

package/lib/mu/LoadingButton.js

@@ -15,6 +15,8 @@ export function LoadingButton(props) {
     const [loading, setLoading] = React.useState(false);
     // Icon
     const localEndIcon = loading ? (React.createElement(CircularProgress, { ...loadingIconProps })) : (endIcon);
+    // Button ref
+    const buttonRef = React.createRef();
     // Check if the component is mounted
     const isMounted = React.useRef(true);
     React.useEffect(() => {
@@ -23,23 +25,23 @@ export function LoadingButton(props) {
         };
     }, []);
     // Layout
-    return (React.createElement(Button, { disabled: loading, endIcon: localEndIcon, onClick: async (event) => {
+    return (React.createElement(Button, { disabled: loading, ref: buttonRef, endIcon: localEndIcon, onClick: async (event) => {
             if (onClick) {
+                // Disable the button
+                buttonRef.current.disabled = true;
                 // Update state
                 setLoading(true);
+                // https://stackoverflow.com/questions/38508420/how-to-know-if-a-function-is-async
                 // const AsyncFunction = (async () => {}).constructor;
                 // onClick instanceof AsyncFunction
-                if (onClick.constructor.name === 'AsyncFunction') {
-                    // May long time running
-                    await onClick(event);
-                }
-                else {
-                    onClick(event);
-                }
+                await onClick(event);
                 // Warning: Can't perform a React state update on an unmounted component
                 // It's necessary to check the component is mounted now
-                if (isMounted.current)
+                if (isMounted.current) {
                     setLoading(false);
+                    // Enable the button
+                    buttonRef.current.disabled = false;
+                }
             }
         }, ...rest }));
 }

package/lib/mu/SelectBool.js

@@ -9,13 +9,13 @@ import { SelectEx } from './SelectEx';
  */
 export function SelectBool(props) {
     // Destruct
-    const { search = true, ...rest } = props;
+    const { search = true, autoAddBlankItem = search, ...rest } = props;
     // Options
     const options = [
         { id: 'false', label: globalApp.get('no') },
         { id: 'true', label: globalApp.get('yes') }
     ];
-    if (search)
+    if (autoAddBlankItem)
         Utils.addBlankItem(options);
     // Layout
     return React.createElement(SelectEx, { options: options, search: search, ...rest });

package/lib/mu/SelectEx.d.ts

@@ -5,6 +5,10 @@ import { IdLabelDto } from '@etsoo/appscript';
  * Extended select component props
  */
 export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
     /**
      * Id field, default is id
      */

package/lib/mu/SelectEx.js

@@ -12,7 +12,7 @@ import { Utils } from '@etsoo/shared';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', itemIconRenderer, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, value, onChange, ...rest } = props;
+    const { defaultValue, idField = 'id', itemIconRenderer, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
@@ -97,7 +97,7 @@ export function SelectEx(props) {
                     return;
                 if (onLoadData)
                     onLoadData(result);
-                if (search) {
+                if (autoAddBlankItem) {
                     Utils.addBlankItem(result, idField, labelField);
                 }
                 setOptions(result);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.85",
+    "version": "1.4.89",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,16 +50,16 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.33",
+        "@etsoo/appscript": "^1.2.37",
         "@etsoo/notificationbase": "^1.1.1",
-        "@etsoo/shared": "^1.1.9",
+        "@etsoo/shared": "^1.1.10",
         "@mui/icons-material": "^5.3.1",
         "@mui/material": "^5.4.0",
         "@reach/router": "^1.3.4",
-        "@types/pica": "^5.1.3",
+        "@types/pica": "^9.0.0",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/reach__router": "^1.3.10",
-        "@types/react": "^17.0.38",
+        "@types/react": "^17.0.39",
         "@types/react-avatar-editor": "^10.3.6",
         "@types/react-beautiful-dnd": "^13.1.2",
         "@types/react-dom": "^17.0.11",
@@ -72,15 +72,15 @@
         "react-beautiful-dnd": "^13.1.0",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.4",
-        "react-imask": "^6.3.0",
+        "react-imask": "^6.4.0",
         "react-window": "^1.8.6"
     },
     "devDependencies": {
-        "@babel/cli": "^7.16.8",
-        "@babel/core": "^7.16.12",
-        "@babel/plugin-transform-runtime": "^7.16.10",
+        "@babel/cli": "^7.17.0",
+        "@babel/core": "^7.17.0",
+        "@babel/plugin-transform-runtime": "^7.17.0",
         "@babel/preset-env": "^7.16.11",
-        "@babel/runtime-corejs3": "^7.16.8",
+        "@babel/runtime-corejs3": "^7.17.0",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^5.10.2",
@@ -89,7 +89,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react": "^7.28.0",
-        "jest": "^27.4.7",
+        "jest": "^27.5.0",
         "react-test-renderer": "^17.0.2",
         "ts-jest": "^27.1.3",
         "typescript": "^4.5.5"

package/src/app/ServiceApp.ts

@@ -69,8 +69,9 @@ export class ServiceApp<
 
     /**
      * Go to the login page
+     * @param tryLogin Try to login again
      */
-    override toLoginPage() {
+    override toLoginPage(tryLogin?: boolean) {
         const coreUrl = this.settings.webUrl;
         window.location.href =
             coreUrl +
@@ -79,7 +80,8 @@ export class ServiceApp<
             '&' +
             DomUtils.CultureField +
             '=' +
-            this.culture;
+            this.culture +
+            (tryLogin ? '' : '&tryLogin=false');
     }
 
     /**

package/src/mu/ComboBox.tsx

@@ -13,6 +13,11 @@ import { SearchField } from './SearchField';
  */
 export interface ComboBoxProps<T extends {}>
     extends AutocompleteExtendedProps<T> {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
+
     /**
      * Data readonly
      */
@@ -48,6 +53,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
     // Destruct
     const {
         search = false,
+        autoAddBlankItem = search,
         idField = 'id',
         idValue,
         inputError,
@@ -156,7 +162,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
                 if (onLoadData) onLoadData(result);
-                if (search) {
+                if (autoAddBlankItem) {
                     SharedUtils.addBlankItem(result, idField, labelField);
                 }
                 setOptions(result);

package/src/mu/LoadingButton.tsx

@@ -38,6 +38,9 @@ export function LoadingButton(props: LoadingButtonProps) {
         endIcon
     );
 
+    // Button ref
+    const buttonRef = React.createRef<HTMLButtonElement>();
+
     // Check if the component is mounted
     const isMounted = React.useRef(true);
 
@@ -51,24 +54,29 @@ export function LoadingButton(props: LoadingButtonProps) {
     return (
         <Button
             disabled={loading}
+            ref={buttonRef}
             endIcon={localEndIcon}
             onClick={async (event) => {
                 if (onClick) {
+                    // Disable the button
+                    buttonRef.current!.disabled = true;
+
                     // Update state
                     setLoading(true);
 
+                    // https://stackoverflow.com/questions/38508420/how-to-know-if-a-function-is-async
                     // const AsyncFunction = (async () => {}).constructor;
                     // onClick instanceof AsyncFunction
-                    if (onClick.constructor.name === 'AsyncFunction') {
-                        // May long time running
-                        await onClick(event);
-                    } else {
-                        onClick(event);
-                    }
+                    await onClick(event);
 
                     // Warning: Can't perform a React state update on an unmounted component
                     // It's necessary to check the component is mounted now
-                    if (isMounted.current) setLoading(false);
+                    if (isMounted.current) {
+                        setLoading(false);
+
+                        // Enable the button
+                        buttonRef.current!.disabled = false;
+                    }
                 }
             }}
             {...rest}

package/src/mu/SelectBool.tsx

@@ -17,7 +17,7 @@ export interface SelectBoolProps
  */
 export function SelectBool(props: SelectBoolProps) {
     // Destruct
-    const { search = true, ...rest } = props;
+    const { search = true, autoAddBlankItem = search, ...rest } = props;
 
     // Options
     const options: IdLabelDto<string>[] = [
@@ -25,7 +25,7 @@ export function SelectBool(props: SelectBoolProps) {
         { id: 'true', label: globalApp.get('yes')! }
     ];
 
-    if (search) Utils.addBlankItem(options);
+    if (autoAddBlankItem) Utils.addBlankItem(options);
 
     // Layout
     return <SelectEx options={options} search={search} {...rest} />;

package/src/mu/SelectEx.tsx

@@ -21,6 +21,11 @@ import { Utils } from '@etsoo/shared';
  */
 export interface SelectExProps<T extends {}>
     extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
+
     /**
      * Id field, default is id
      */
@@ -82,6 +87,7 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
         name,
         options = [],
         search = false,
+        autoAddBlankItem = search,
         value,
         onChange,
         ...rest
@@ -172,7 +178,7 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
                 if (onLoadData) onLoadData(result);
-                if (search) {
+                if (autoAddBlankItem) {
                     Utils.addBlankItem(result, idField, labelField);
                 }
                 setOptions(result);