@etsoo/materialui 1.2.31 → 1.2.32

package/lib/PullToRefreshUI.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Options } from 'pulltorefreshjs';
+import React from "react";
+import type { Options } from "pulltorefreshjs";
 /**
  * PullToRefresh UI
  * Use hammerjs or touchemulator to simulate browser as mobile device

package/lib/PullToRefreshUI.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import PullToRefresh from 'pulltorefreshjs';
+import React from "react";
 /**
  * PullToRefresh UI
  * Use hammerjs or touchemulator to simulate browser as mobile device
@@ -9,9 +8,14 @@ import PullToRefresh from 'pulltorefreshjs';
 export function PullToRefreshUI(props) {
     // Ready
     React.useEffect(() => {
-        PullToRefresh.init(props);
+        let pr;
+        import("pulltorefreshjs").then((PullToRefresh) => {
+            PullToRefresh.init(props);
+            pr = PullToRefresh;
+        });
         return () => {
-            PullToRefresh.destroyAll();
+            if (pr)
+                pr.destroyAll();
         };
     }, [props]);
     return React.createElement(React.Fragment, null);

package/lib/UserAvatarEditor.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 /**
  * User avatar editor to Blob helper
  */

package/lib/UserAvatarEditor.js

@@ -1,13 +1,11 @@
-import { Button, ButtonGroup, Slider, Stack } from '@mui/material';
-import React from 'react';
-import AvatarEditor from 'react-avatar-editor';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import ClearAllIcon from '@mui/icons-material/ClearAll';
-import ComputerIcon from '@mui/icons-material/Computer';
-import DoneIcon from '@mui/icons-material/Done';
-import pica from 'pica';
-import { Labels } from './app/Labels';
+import { Button, ButtonGroup, Skeleton, Slider, Stack } from "@mui/material";
+import React from "react";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+import ClearAllIcon from "@mui/icons-material/ClearAll";
+import ComputerIcon from "@mui/icons-material/Computer";
+import DoneIcon from "@mui/icons-material/Done";
+import { Labels } from "./app/Labels";
 const defaultState = {
     scale: 1,
     rotate: 0
@@ -29,6 +27,7 @@ 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
@@ -39,7 +38,7 @@ export function UserAvatarEditor(props) {
     const [editorState, setEditorState] = React.useState(defaultState);
     // Handle zoom
     const handleZoom = (_event, value, _activeThumb) => {
-        const scale = typeof value === 'number' ? value : value[0];
+        const scale = typeof value === "number" ? value : value[0];
         const newState = { ...editorState, scale };
         setEditorState(newState);
     };
@@ -75,7 +74,7 @@ export function UserAvatarEditor(props) {
         setEditorState(newState);
     };
     // Handle done
-    const handleDone = () => {
+    const handleDone = async () => {
         var _a, _b;
         // Data
         var data = scaledResult
@@ -84,17 +83,18 @@ export function UserAvatarEditor(props) {
         if (data == null)
             return;
         // pica
+        const pica = (await import("pica")).default;
         const picaInstance = pica();
         // toBlob helper
         // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
-        const toBlob = (canvas, mimeType = 'image/jpeg', quality = 1) => {
+        const toBlob = (canvas, mimeType = "image/jpeg", quality = 1) => {
             return picaInstance.toBlob(canvas, mimeType, quality);
         };
         if (data.width > maxWidthCalculated) {
             // Target height
             const heightCalculated = (height * maxWidthCalculated) / width;
             // Target
-            const to = document.createElement('canvas');
+            const to = document.createElement("canvas");
             to.width = maxWidthCalculated;
             to.height = heightCalculated;
             // Large photo, resize it
@@ -111,12 +111,15 @@ 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 },
-            React.createElement(AvatarEditor, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : '', scale: editorState.scale, rotate: editorState.rotate }),
+            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(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready },
                 React.createElement(Button, { onClick: () => handleRotate(90), title: labels.rotateRight },
                     React.createElement(RotateRightIcon, null)),

package/lib/app/CommonApp.d.ts

@@ -1,6 +1,6 @@
-import { IAppSettings, IUser, RefreshTokenProps, RefreshTokenRQ } from '@etsoo/appscript';
-import { IPageData } from '@etsoo/react';
-import { ReactApp } from './ReactApp';
+import { IAppSettings, IUser, RefreshTokenProps, RefreshTokenRQ } from "@etsoo/appscript";
+import { IPageData } from "@etsoo/react";
+import { ReactApp } from "./ReactApp";
 /**
  * Common independent application
  * 通用独立程序

package/lib/app/CommonApp.js

@@ -1,5 +1,5 @@
-import { CoreConstants } from '@etsoo/react';
-import { ReactApp } from './ReactApp';
+import { CoreConstants } from "@etsoo/react";
+import { ReactApp } from "./ReactApp";
 /**
  * Common independent application
  * 通用独立程序
@@ -40,7 +40,7 @@ export class CommonApp extends ReactApp {
         const { callback, data, relogin = false, showLoading = false } = props !== null && props !== void 0 ? props : {};
         // Token
         const token = this.getCacheToken();
-        if (token == null || token === '') {
+        if (token == null || token === "") {
             if (callback)
                 callback(false);
             return false;
@@ -69,7 +69,7 @@ export class CommonApp extends ReactApp {
             const refreshToken = this.getResponseToken(payload.response);
             if (refreshToken == null || result.data == null) {
                 if (failCallback)
-                    failCallback(this.get('noData'));
+                    failCallback(this.get("noData"));
                 return false;
             }
             // Keep
@@ -82,23 +82,23 @@ export class CommonApp extends ReactApp {
             return true;
         };
         // Call API
-        const result = await this.api.put('Auth/RefreshToken', rq, payload);
+        const result = await this.api.put("Auth/RefreshToken", rq, payload);
         if (result == null)
             return false;
         if (!result.ok) {
-            if (result.type === 'TokenExpired' && relogin) {
+            if (result.type === "TokenExpired" && relogin) {
                 // Try login
                 // Dialog to receive password
-                var labels = this.getLabels('reloginTip', 'login');
+                var labels = this.getLabels("reloginTip", "login");
                 this.notifier.prompt(labels.reloginTip, async (pwd) => {
                     if (pwd == null) {
                         this.toLoginPage();
                         return;
                     }
                     // Set password for the action
-                    rq.pwd = this.encrypt(this.hash(pwd));
+                    rq.pwd = await this.encrypt(await this.hash(pwd));
                     // Submit again
-                    const result = await this.api.put('Auth/RefreshToken', rq, payload);
+                    const result = await this.api.put("Auth/RefreshToken", rq, payload);
                     if (result == null)
                         return;
                     if (result.ok) {
@@ -117,7 +117,7 @@ export class CommonApp extends ReactApp {
                     // Popup message
                     this.alertResult(result);
                     return false;
-                }, labels.login, { type: 'password' });
+                }, labels.login, { type: "password" });
                 // Fake truth to avoid reloading
                 return true;
             }

package/lib/app/IServiceApp.d.ts

@@ -1,6 +1,6 @@
-import { IApi } from '@etsoo/appscript';
-import { IServiceUser } from './IServiceUser';
-import { ReactAppType } from './ReactApp';
+import { IApi } from "@etsoo/appscript";
+import { IServiceUser } from "./IServiceUser";
+import { ReactAppType } from "./ReactApp";
 /**
  * Service application interface
  */
@@ -23,7 +23,7 @@ export interface IServiceApp extends ReactAppType {
      * @param passphrase Secret passphrase
      * @returns Pure text
      */
-    serviceDecrypt(messageEncrypted: string, passphrase?: string): string | undefined;
+    serviceDecrypt(messageEncrypted: string, passphrase?: string): Promise<string | undefined>;
     /**
      * Service encrypt message
      * @param message Message
@@ -31,5 +31,5 @@ export interface IServiceApp extends ReactAppType {
      * @param iterations Iterations, 1000 times, 1 - 99
      * @returns Result
      */
-    serviceEncrypt(message: string, passphrase?: string, iterations?: number): string | undefined;
+    serviceEncrypt(message: string, passphrase?: string, iterations?: number): Promise<string | undefined>;
 }

package/lib/app/ReactApp.js

@@ -108,19 +108,20 @@ export class ReactApp extends CoreApp {
     changeCulture(culture) {
         var _a, _b;
         // Super call to update cultrue
-        super.changeCulture(culture);
-        // Update component labels
-        Labels.setLabels(culture.resources, {
-            notificationMU: {
-                alertTitle: "warning",
-                alertOK: "ok",
-                confirmTitle: "confirm",
-                confirmYes: "ok",
-                confirmNo: "cancel",
-                promptTitle: "prompt",
-                promptCancel: "cancel",
-                promptOK: "ok"
-            }
+        super.changeCulture(culture, (resources) => {
+            // Update component labels
+            Labels.setLabels(resources, {
+                notificationMU: {
+                    alertTitle: "warning",
+                    alertOK: "ok",
+                    confirmTitle: "confirm",
+                    confirmYes: "ok",
+                    confirmNo: "cancel",
+                    promptTitle: "prompt",
+                    promptCancel: "cancel",
+                    promptOK: "ok"
+                }
+            });
         });
         // Document title
         // Default is servier name's label or appName label

package/lib/app/ServiceApp.d.ts

@@ -52,7 +52,7 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
      * @param passphrase Secret passphrase
      * @returns Pure text
      */
-    serviceDecrypt(messageEncrypted: string, passphrase?: string): string | undefined;
+    serviceDecrypt(messageEncrypted: string, passphrase?: string): Promise<string | undefined>;
     /**
      * Service encrypt message
      * @param message Message
@@ -60,7 +60,7 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
      * @param iterations Iterations, 1000 times, 1 - 99
      * @returns Result
      */
-    serviceEncrypt(message: string, passphrase?: string, iterations?: number): string;
+    serviceEncrypt(message: string, passphrase?: string, iterations?: number): Promise<string>;
     /**
      * Try login
      * @param data Additional data

package/lib/app/ServiceApp.js

@@ -154,7 +154,7 @@ export class ServiceApp extends ReactApp {
                         return;
                     }
                     // Set password for the action
-                    rq.pwd = this.encrypt(this.hash(pwd));
+                    rq.pwd = await this.encrypt(await this.hash(pwd));
                     // Submit again
                     const result = await this.api.put("Auth/RefreshToken", rq, payload);
                     if (result == null)
@@ -230,10 +230,8 @@ export class ServiceApp extends ReactApp {
      * @param serviceUser Service user
      */
     userLoginEx(user, refreshToken, serviceUser) {
-        var _a;
         // Service user login
-        this.servicePassphrase =
-            (_a = this.decrypt(serviceUser.servicePassphrase, this.settings.serviceId.toString())) !== null && _a !== void 0 ? _a : "";
+        this.decrypt(serviceUser.servicePassphrase, this.settings.serviceId.toString()).then((result) => (this.servicePassphrase = result !== null && result !== void 0 ? result : ""));
         // Service user
         this.serviceUser = serviceUser;
         // Service API token

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.31",
+  "version": "1.2.32",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,10 +50,10 @@
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.3.99",
-    "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.74",
-    "@etsoo/shared": "^1.2.1",
+    "@etsoo/appscript": "^1.4.2",
+    "@etsoo/notificationbase": "^1.1.25",
+    "@etsoo/react": "^1.6.77",
+    "@etsoo/shared": "^1.2.5",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/x-data-grid": "^6.3.1",
@@ -85,8 +85,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "typescript": "^5.0.4"

package/src/PullToRefreshUI.tsx

@@ -1,5 +1,8 @@
-import React from 'react';
-import PullToRefresh, { Options } from 'pulltorefreshjs';
+import React from "react";
+import type { Options } from "pulltorefreshjs";
+import type PullToRefresh from "pulltorefreshjs";
+
+type p = typeof PullToRefresh;
 
 /**
  * PullToRefresh UI
@@ -8,14 +11,18 @@ import PullToRefresh, { Options } from 'pulltorefreshjs';
  * @returns Component
  */
 export function PullToRefreshUI(props: Options) {
-    // Ready
-    React.useEffect(() => {
-        PullToRefresh.init(props);
+  // Ready
+  React.useEffect(() => {
+    let pr: p | null;
+    import("pulltorefreshjs").then((PullToRefresh) => {
+      PullToRefresh.init(props);
+      pr = PullToRefresh;
+    });
 
-        return () => {
-            PullToRefresh.destroyAll();
-        };
-    }, [props]);
+    return () => {
+      if (pr) pr.destroyAll();
+    };
+  }, [props]);
 
-    return <React.Fragment />;
+  return <React.Fragment />;
 }