@etsoo/materialui 1.2.35 → 1.2.37

package/lib/UserAvatarEditor.js

@@ -10,6 +10,7 @@ const defaultState = {
     scale: 1,
     rotate: 0
 };
+const AE = React.lazy(() => import("react-avatar-editor"));
 /**
  * User avatar editor
  * https://github.com/mosch/react-avatar-editor
@@ -27,7 +28,6 @@ export function UserAvatarEditor(props) {
     const labels = Labels.UserAvatarEditor;
     // Ref
     const ref = React.createRef();
-    const [AE, setAE] = React.useState();
     // Button ref
     const buttonRef = React.createRef();
     // Preview image state
@@ -111,15 +111,13 @@ export function UserAvatarEditor(props) {
             onDone(data, toBlob);
         }
     };
-    React.useEffect(() => {
-        import("react-avatar-editor").then((result) => setAE(result.default));
-    }, []);
     return (React.createElement(Stack, { direction: "column", spacing: 0.5, width: containerWidth },
         React.createElement(Button, { variant: "outlined", size: "medium", component: "label", startIcon: React.createElement(ComputerIcon, null), fullWidth: true },
             labels.upload,
             React.createElement("input", { id: "fileInput", type: "file", accept: "image/png, image/jpeg", multiple: false, hidden: true, onChange: handleFileChange })),
         React.createElement(Stack, { direction: "row", spacing: 0.5 },
-            AE == null ? (React.createElement(Skeleton, { variant: "rounded", width: width, height: height })) : (React.createElement(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : "", scale: editorState.scale, rotate: editorState.rotate })),
+            React.createElement(React.Suspense, { fallback: React.createElement(Skeleton, { variant: "rounded", width: width, height: height }) },
+                React.createElement(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : "", scale: editorState.scale, rotate: editorState.rotate })),
             React.createElement(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready },
                 React.createElement(Button, { onClick: () => handleRotate(90), title: labels.rotateRight },
                     React.createElement(RotateRightIcon, null)),

package/lib/app/CommonApp.js

@@ -96,7 +96,7 @@ export class CommonApp extends ReactApp {
                         return;
                     }
                     // Set password for the action
-                    rq.pwd = await this.encrypt(await this.hash(pwd));
+                    rq.pwd = this.encrypt(this.hash(pwd));
                     // Submit again
                     const result = await this.api.put("Auth/RefreshToken", rq, payload);
                     if (result == null)

package/lib/app/ReactApp.js

@@ -145,10 +145,11 @@ export class ReactApp extends CoreApp {
         // Same?
         if (culture.name === this.culture)
             return;
-        // Dispatch action
-        dispatch(culture);
         // Super call
-        this.changeCulture(culture);
+        this.changeCulture(culture).then(() => {
+            // Dispatch action
+            dispatch(culture);
+        });
     }
     /**
      * Get date format props

package/lib/app/ServiceApp.js

@@ -110,7 +110,7 @@ export class ServiceApp extends ReactApp {
             const userData = result.data;
             // Use core system access token to service api to exchange service access token
             const serviceResult = await this.serviceApi.put("Auth/ExchangeToken", {
-                token: await this.encryptEnhanced(userData.token, this.settings.serviceId.toString())
+                token: this.encryptEnhanced(userData.token, this.settings.serviceId.toString())
             }, {
                 showLoading,
                 onError: (error) => {
@@ -154,7 +154,7 @@ export class ServiceApp extends ReactApp {
                         return;
                     }
                     // Set password for the action
-                    rq.pwd = await this.encrypt(await this.hash(pwd));
+                    rq.pwd = this.encrypt(this.hash(pwd));
                     // Submit again
                     const result = await this.api.put("Auth/RefreshToken", rq, payload);
                     if (result == null)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.35",
+  "version": "1.2.37",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.6",
+    "@etsoo/appscript": "^1.4.7",
     "@etsoo/notificationbase": "^1.1.25",
-    "@etsoo/react": "^1.6.79",
+    "@etsoo/react": "^1.6.80",
     "@etsoo/shared": "^1.2.5",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",

package/src/UserAvatarEditor.tsx

@@ -76,6 +76,8 @@ const defaultState: EditorState = {
   rotate: 0
 };
 
+const AE = React.lazy(() => import("react-avatar-editor"));
+
 /**
  * User avatar editor
  * https://github.com/mosch/react-avatar-editor
@@ -107,8 +109,6 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   // Ref
   const ref = React.createRef<AvatarEditor>();
 
-  const [AE, setAE] = React.useState<typeof AvatarEditor>();
-
   // Button ref
   const buttonRef = React.createRef<HTMLButtonElement>();
 
@@ -214,10 +214,6 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     }
   };
 
-  React.useEffect(() => {
-    import("react-avatar-editor").then((result) => setAE(result.default));
-  }, []);
-
   return (
     <Stack direction="column" spacing={0.5} width={containerWidth}>
       <Button
@@ -238,9 +234,11 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
         />
       </Button>
       <Stack direction="row" spacing={0.5}>
-        {AE == null ? (
-          <Skeleton variant="rounded" width={width} height={height} />
-        ) : (
+        <React.Suspense
+          fallback={
+            <Skeleton variant="rounded" width={width} height={height} />
+          }
+        >
           <AE
             ref={ref}
             border={border}
@@ -251,7 +249,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
             scale={editorState.scale}
             rotate={editorState.rotate}
           />
-        )}
+        </React.Suspense>
         <ButtonGroup size="small" orientation="vertical" disabled={!ready}>
           <Button onClick={() => handleRotate(90)} title={labels.rotateRight}>
             <RotateRightIcon />

package/src/app/CommonApp.ts

@@ -144,7 +144,7 @@ export abstract class CommonApp<
             }
 
             // Set password for the action
-            rq.pwd = await this.encrypt(await this.hash(pwd));
+            rq.pwd = this.encrypt(this.hash(pwd));
 
             // Submit again
             const result = await this.api.put<LoginResult>(

package/src/app/ReactApp.ts

@@ -355,11 +355,11 @@ export class ReactApp<
     // Same?
     if (culture.name === this.culture) return;
 
-    // Dispatch action
-    dispatch(culture);
-
     // Super call
-    this.changeCulture(culture);
+    this.changeCulture(culture).then(() => {
+      // Dispatch action
+      dispatch(culture);
+    });
   }
 
   /**

package/src/app/ServiceApp.ts

@@ -167,7 +167,7 @@ export class ServiceApp<
       const serviceResult = await this.serviceApi.put<ServiceLoginResult<U>>(
         "Auth/ExchangeToken",
         {
-          token: await this.encryptEnhanced(
+          token: this.encryptEnhanced(
             userData.token,
             this.settings.serviceId.toString()
           )
@@ -226,7 +226,7 @@ export class ServiceApp<
             }
 
             // Set password for the action
-            rq.pwd = await this.encrypt(await this.hash(pwd));
+            rq.pwd = this.encrypt(this.hash(pwd));
 
             // Submit again
             const result = await this.api.put<LoginResult>(