@etsoo/materialui 1.3.55 → 1.3.57

package/__tests__/ReactAppTests.tsx

@@ -0,0 +1,107 @@
+import {
+  AddressUtils,
+  ApiAuthorizationScheme,
+  ExternalSettings,
+  en,
+  zhHans
+} from "@etsoo/appscript";
+import { ReactApp } from "../src";
+import { DataTypes, DomUtils, IActionResult, Utils } from "@etsoo/shared";
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+
+// Without it will popup error:
+// The current testing environment is not configured to support act
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+// Detected country or region
+const { detectedCountry } = DomUtils;
+
+// Detected culture
+const { detectedCulture } = DomUtils;
+
+// Supported cultures
+const supportedCultures: DataTypes.CultureDefinition[] = [zhHans({}), en({})];
+
+// Supported regions
+const supportedRegions = ["CN"];
+
+const settings = ExternalSettings.format({
+  /**
+   * Endpoint of the API service
+   */
+  endpoint: "http://{hostname}/com.etsoo.SmartERPApi/api/",
+
+  /**
+   * App root url
+   */
+  homepage: "/cms",
+
+  /**
+   * Web url of the cloud
+   */
+  webUrl: "http://localhost",
+
+  // Authorization scheme
+  authScheme: ApiAuthorizationScheme.Bearer,
+
+  // Detected culture
+  detectedCulture,
+
+  // Supported cultures
+  cultures: supportedCultures,
+
+  // Supported regions
+  regions: supportedRegions,
+
+  // Browser's time zone
+  timeZone: Utils.getTimeZone(),
+
+  // Current country or region
+  currentRegion: AddressUtils.getRegion(
+    supportedRegions,
+    detectedCountry,
+    detectedCulture
+  ),
+
+  // Current culture
+  currentCulture: DomUtils.getCulture(supportedCultures, detectedCulture)![0]
+});
+
+const app = new ReactApp(settings, "test");
+
+// Root
+const root = document.body;
+const container: HTMLElement = document.createElement("div");
+root.append(container);
+
+// The state provider
+const Provider = ReactApp.notifierProvider;
+const reactRoot = createRoot(container);
+
+act(() => {
+  // Concorrent renderer needs act block
+  reactRoot.render(<Provider />);
+});
+
+test("Test for properties", () => {
+  const result: IActionResult = {
+    ok: false,
+    type: "https://tools.ietf.org/html/rfc9110#section-15.5.1",
+    title: "One or more validation errors occurred.",
+    status: 400,
+    errors: {
+      $: [
+        "JSON deserialization for type \u0027com.etsoo.CMS.RQ.User.UserCreateRQ\u0027 was missing required properties, including the following: password"
+      ],
+      rq: ["The rq field is required."]
+    },
+    traceId: "00-ed96a4f0c83f066594ecc69b77da9803-df770e3cd714fedd-00"
+  };
+
+  act(() => {
+    app.alertResult(result);
+  });
+
+  expect(root.innerHTML).toContain(result.title);
+});

package/lib/TextFieldEx.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TextFieldProps } from '@mui/material';
+import React from "react";
+import { TextFieldProps } from "@mui/material";
 /**
  * Extended text field props
  */

package/lib/TextFieldEx.js

@@ -1,12 +1,14 @@
-import React from 'react';
-import { IconButton, InputAdornment, TextField } from '@mui/material';
-import { MUGlobal } from './MUGlobal';
-import { Clear, Visibility } from '@mui/icons-material';
-import { Keyboard } from '@etsoo/shared';
-import { useCombinedRefs, useDelayedExecutor } from '@etsoo/react';
+import React from "react";
+import { IconButton, InputAdornment, TextField } from "@mui/material";
+import { MUGlobal } from "./MUGlobal";
+import { Clear, Visibility } from "@mui/icons-material";
+import { Keyboard } from "@etsoo/shared";
+import { useCombinedRefs, useDelayedExecutor } from "@etsoo/react";
 export const TextFieldEx = React.forwardRef((props, ref) => {
     // Destructure
-    const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
+    const { changeDelay, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
+    // Shrink
+    InputLabelProps.shrink ?? (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
     // State
     const [errorText, updateErrorText] = React.useState();
     const [empty, updateEmpty] = React.useState(true);
@@ -20,17 +22,17 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
         errorEx = true;
         helperTextEx = errorText;
     }
-    let typeEx = showPassword ? 'password' : type;
+    let typeEx = showPassword ? "password" : type;
     let input;
     const localRef = (ref) => {
         input = ref;
-        if (input.value !== '') {
+        if (input.value !== "") {
             updateEmpty(false);
         }
     };
     const clearClick = () => {
         if (input != null) {
-            input.value = '';
+            input.value = "";
             input.focus();
         }
         if (errorText != null) {
@@ -55,7 +57,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
                     return;
             }
             input.blur();
-            input.type = 'text';
+            input.type = "text";
         }
         preventDefault(e);
     };
@@ -64,7 +66,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
         if (input) {
             if (onVisibility)
                 return;
-            input.type = 'password';
+            input.type = "password";
         }
         preventDefault(e);
     };
@@ -78,15 +80,15 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
     }
     // Extend key precess
     const onKeyPressEx = onEnter == null
-        ? onKeyPress
+        ? onKeyDown
         : (e) => {
             if (e.key === Keyboard.Keys.Enter) {
                 // Enter press callback
                 onEnter(e);
             }
-            if (!e.isDefaultPrevented && onKeyPress != null) {
+            if (!e.isDefaultPrevented && onKeyDown != null) {
                 // Common press callback
-                onKeyPress(e);
+                onKeyDown(e);
             }
         };
     React.useImperativeHandle(ref, () => ({
@@ -108,7 +110,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
             updateErrorText(undefined);
         }
         if (showClear || showPassword) {
-            if (event.target.value === '') {
+            if (event.target.value === "") {
                 updateEmpty(true);
             }
             else if (empty) {
@@ -130,5 +132,5 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
         };
     }, []);
     // Textfield
-    return (React.createElement(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, onChange: onChangeEx, onKeyPress: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
+    return (React.createElement(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.55",
+  "version": "1.3.57",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@etsoo/appscript": "^1.4.87",
+    "@etsoo/appscript": "^1.4.89",
     "@etsoo/notificationbase": "^1.1.42",
-    "@etsoo/react": "^1.7.41",
+    "@etsoo/react": "^1.7.43",
     "@etsoo/shared": "^1.2.40",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@mui/x-data-grid": "^7.3.2",
+    "@mui/x-data-grid": "^7.4.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",
@@ -82,7 +82,7 @@
     "@types/jest": "^29.5.12",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-avatar-editor": "^13.0.2",
     "@types/react-dom": "^18.3.0",
     "@types/react-input-mask": "^3.0.5",

package/src/TextFieldEx.tsx

@@ -1,268 +1,271 @@
-import React from 'react';
+import React from "react";
 import {
-    IconButton,
-    InputAdornment,
-    TextField,
-    TextFieldProps
-} from '@mui/material';
-import { MUGlobal } from './MUGlobal';
-import { Clear, Visibility } from '@mui/icons-material';
-import { Keyboard } from '@etsoo/shared';
-import { useCombinedRefs, useDelayedExecutor } from '@etsoo/react';
+  IconButton,
+  InputAdornment,
+  TextField,
+  TextFieldProps
+} from "@mui/material";
+import { MUGlobal } from "./MUGlobal";
+import { Clear, Visibility } from "@mui/icons-material";
+import { Keyboard } from "@etsoo/shared";
+import { useCombinedRefs, useDelayedExecutor } from "@etsoo/react";
 
 /**
  * Extended text field props
  */
 export type TextFieldExProps = TextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-
-    /**
-     * On enter click
-     */
-    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
-
-    /**
-     * On visibility
-     * @param input HTML input
-     * @returns Result
-     */
-    onVisibility?: (
-        input: HTMLInputElement
-    ) => void | boolean | Promise<boolean>;
-
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-
-    /**
-     * Show clear button
-     */
-    showClear?: boolean;
-
-    /**
-     * Show password button
-     */
-    showPassword?: boolean;
+  /**
+   * Change delay (ms) to avoid repeatly dispatch onChange
+   */
+  changeDelay?: number;
+
+  /**
+   * On enter click
+   */
+  onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
+
+  /**
+   * On visibility
+   * @param input HTML input
+   * @returns Result
+   */
+  onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
+
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
+
+  /**
+   * Show clear button
+   */
+  showClear?: boolean;
+
+  /**
+   * Show password button
+   */
+  showPassword?: boolean;
 };
 
 /**
  * Extended text field methods
  */
 export interface TextFieldExMethods {
-    /**
-     * Set error
-     * @param error Error
-     */
-    setError(error: React.ReactNode): void;
+  /**
+   * Set error
+   * @param error Error
+   */
+  setError(error: React.ReactNode): void;
 }
 
 export const TextFieldEx = React.forwardRef<
-    TextFieldExMethods,
-    TextFieldExProps
+  TextFieldExMethods,
+  TextFieldExProps
 >((props, ref) => {
-    // Destructure
-    const {
-        changeDelay,
-        error,
-        fullWidth = true,
-        helperText,
-        InputProps = {},
-        onChange,
-        onKeyPress,
-        onEnter,
-        onVisibility,
-        inputRef,
-        readOnly,
-        showClear,
-        showPassword,
-        type,
-        variant = MUGlobal.textFieldVariant,
-        ...rest
-    } = props;
-
-    // State
-    const [errorText, updateErrorText] = React.useState<React.ReactNode>();
-    const [empty, updateEmpty] = React.useState<boolean>(true);
-
-    // Read only
-    if (readOnly != null) InputProps.readOnly = readOnly;
-
-    // Calculate
-    let errorEx = error;
-    let helperTextEx = helperText;
-    if (errorText != null) {
-        errorEx = true;
-        helperTextEx = errorText;
+  // Destructure
+  const {
+    changeDelay,
+    error,
+    fullWidth = true,
+    helperText,
+    InputLabelProps = {},
+    InputProps = {},
+    onChange,
+    onKeyDown,
+    onEnter,
+    onVisibility,
+    inputRef,
+    readOnly,
+    showClear,
+    showPassword,
+    type,
+    variant = MUGlobal.textFieldVariant,
+    ...rest
+  } = props;
+
+  // Shrink
+  InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
+
+  // State
+  const [errorText, updateErrorText] = React.useState<React.ReactNode>();
+  const [empty, updateEmpty] = React.useState<boolean>(true);
+
+  // Read only
+  if (readOnly != null) InputProps.readOnly = readOnly;
+
+  // Calculate
+  let errorEx = error;
+  let helperTextEx = helperText;
+  if (errorText != null) {
+    errorEx = true;
+    helperTextEx = errorText;
+  }
+
+  let typeEx = showPassword ? "password" : type;
+
+  let input: HTMLInputElement | undefined;
+  const localRef = (ref: HTMLInputElement) => {
+    input = ref;
+
+    if (input.value !== "") {
+      updateEmpty(false);
     }
+  };
 
-    let typeEx = showPassword ? 'password' : type;
+  const clearClick = () => {
+    if (input != null) {
+      input.value = "";
+      input.focus();
+    }
 
-    let input: HTMLInputElement | undefined;
-    const localRef = (ref: HTMLInputElement) => {
-        input = ref;
+    if (errorText != null) {
+      // Reset
+      updateErrorText(undefined);
+    }
 
-        if (input.value !== '') {
-            updateEmpty(false);
-        }
-    };
+    updateEmpty(true);
+  };
 
-    const clearClick = () => {
-        if (input != null) {
-            input.value = '';
-            input.focus();
-        }
+  const preventDefault = (e: React.TouchEvent | React.MouseEvent) => {
+    // Prevent long press
+    if (e.isPropagationStopped()) e.stopPropagation();
 
-        if (errorText != null) {
-            // Reset
-            updateErrorText(undefined);
-        }
+    if (e.isDefaultPrevented()) e.preventDefault();
+  };
 
-        updateEmpty(true);
-    };
+  const touchStart = async (e: React.TouchEvent | React.MouseEvent) => {
+    // Show the password
+    if (input) {
+      if (onVisibility) {
+        const result = await onVisibility(input);
+        if (result === false) return;
+      }
 
-    const preventDefault = (e: React.TouchEvent | React.MouseEvent) => {
-        // Prevent long press
-        if (e.isPropagationStopped()) e.stopPropagation();
+      input.blur();
+      input.type = "text";
+    }
+    preventDefault(e);
+  };
 
-        if (e.isDefaultPrevented()) e.preventDefault();
-    };
+  const touchEnd = (e: React.TouchEvent | React.MouseEvent) => {
+    // Show the password
+    if (input) {
+      if (onVisibility) return;
 
-    const touchStart = async (e: React.TouchEvent | React.MouseEvent) => {
-        // Show the password
-        if (input) {
-            if (onVisibility) {
-                const result = await onVisibility(input);
-                if (result === false) return;
-            }
-
-            input.blur();
-            input.type = 'text';
-        }
-        preventDefault(e);
-    };
+      input.type = "password";
+    }
+    preventDefault(e);
+  };
+
+  // Show password and/or clear button
+  if (!empty && (showPassword || showClear)) {
+    InputProps.endAdornment = (
+      <InputAdornment position="end">
+        {showPassword && (
+          <IconButton
+            tabIndex={-1}
+            onContextMenu={(event) => event.preventDefault()}
+            onMouseDown={touchStart}
+            onMouseUp={touchEnd}
+            onTouchStart={touchStart}
+            onTouchCancel={touchEnd}
+            onTouchEnd={touchEnd}
+          >
+            <Visibility />
+          </IconButton>
+        )}
+        {showClear && (
+          <IconButton onClick={clearClick} tabIndex={-1}>
+            <Clear />
+          </IconButton>
+        )}
+      </InputAdornment>
+    );
+  }
+
+  // Extend key precess
+  const onKeyPressEx =
+    onEnter == null
+      ? onKeyDown
+      : (e: React.KeyboardEvent<HTMLDivElement>) => {
+          if (e.key === Keyboard.Keys.Enter) {
+            // Enter press callback
+            onEnter(e);
+          }
+
+          if (!e.isDefaultPrevented && onKeyDown != null) {
+            // Common press callback
+            onKeyDown(e);
+          }
+        };
 
-    const touchEnd = (e: React.TouchEvent | React.MouseEvent) => {
-        // Show the password
-        if (input) {
-            if (onVisibility) return;
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      /**
+       * Set error
+       * @param error Error
+       */
+      setError(error: React.ReactNode): void {
+        updateErrorText(error);
+      }
+    }),
+    []
+  );
+
+  const isMounted = React.useRef(true);
+  const delayed =
+    onChange != null && changeDelay != null && changeDelay >= 1
+      ? useDelayedExecutor(onChange, changeDelay)
+      : undefined;
+
+  const onChangeEx = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    if (errorText != null) {
+      // Reset
+      updateErrorText(undefined);
+    }
 
-            input.type = 'password';
-        }
-        preventDefault(e);
-    };
+    if (showClear || showPassword) {
+      if (event.target.value === "") {
+        updateEmpty(true);
+      } else if (empty) {
+        updateEmpty(false);
+      }
+    }
 
-    // Show password and/or clear button
-    if (!empty && (showPassword || showClear)) {
-        InputProps.endAdornment = (
-            <InputAdornment position="end">
-                {showPassword && (
-                    <IconButton
-                        tabIndex={-1}
-                        onContextMenu={(event) => event.preventDefault()}
-                        onMouseDown={touchStart}
-                        onMouseUp={touchEnd}
-                        onTouchStart={touchStart}
-                        onTouchCancel={touchEnd}
-                        onTouchEnd={touchEnd}
-                    >
-                        <Visibility />
-                    </IconButton>
-                )}
-                {showClear && (
-                    <IconButton onClick={clearClick} tabIndex={-1}>
-                        <Clear />
-                    </IconButton>
-                )}
-            </InputAdornment>
-        );
+    if (onChange == null) return;
+
+    if (changeDelay == null || changeDelay < 1) {
+      onChange(event);
+      return;
     }
 
-    // Extend key precess
-    const onKeyPressEx =
-        onEnter == null
-            ? onKeyPress
-            : (e: React.KeyboardEvent<HTMLDivElement>) => {
-                  if (e.key === Keyboard.Keys.Enter) {
-                      // Enter press callback
-                      onEnter(e);
-                  }
-
-                  if (!e.isDefaultPrevented && onKeyPress != null) {
-                      // Common press callback
-                      onKeyPress(e);
-                  }
-              };
-
-    React.useImperativeHandle(
-        ref,
-        () => ({
-            /**
-             * Set error
-             * @param error Error
-             */
-            setError(error: React.ReactNode): void {
-                updateErrorText(error);
-            }
-        }),
-        []
-    );
+    delayed?.call(undefined, event);
+  };
 
-    const isMounted = React.useRef(true);
-    const delayed =
-        onChange != null && changeDelay != null && changeDelay >= 1
-            ? useDelayedExecutor(onChange, changeDelay)
-            : undefined;
-
-    const onChangeEx = (
-        event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-        if (errorText != null) {
-            // Reset
-            updateErrorText(undefined);
-        }
-
-        if (showClear || showPassword) {
-            if (event.target.value === '') {
-                updateEmpty(true);
-            } else if (empty) {
-                updateEmpty(false);
-            }
-        }
-
-        if (onChange == null) return;
-
-        if (changeDelay == null || changeDelay < 1) {
-            onChange(event);
-            return;
-        }
-
-        delayed?.call(undefined, event);
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false;
+      delayed?.clear();
     };
-
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-            delayed?.clear();
-        };
-    }, []);
-
-    // Textfield
-    return (
-        <TextField
-            error={errorEx}
-            fullWidth={fullWidth}
-            helperText={helperTextEx}
-            inputRef={useCombinedRefs(inputRef, localRef)}
-            InputProps={InputProps}
-            onChange={onChangeEx}
-            onKeyPress={onKeyPressEx}
-            type={typeEx}
-            variant={variant}
-            {...rest}
-        />
-    );
+  }, []);
+
+  // Textfield
+  return (
+    <TextField
+      error={errorEx}
+      fullWidth={fullWidth}
+      helperText={helperTextEx}
+      inputRef={useCombinedRefs(inputRef, localRef)}
+      InputProps={InputProps}
+      InputLabelProps={InputLabelProps}
+      onChange={onChangeEx}
+      onKeyDown={onKeyPressEx}
+      type={typeEx}
+      variant={variant}
+      {...rest}
+    />
+  );
 });

package/src/app/ReactApp.ts

@@ -298,6 +298,7 @@ export class ReactApp<
           React.createElement("br"),
           React.createElement("span", { style: { fontSize: "9px" } }, tip)
         );
+
         this.notifier.alert(titleNode, callback);
         return;
       }