@etsoo/materialui 1.4.28 → 1.4.30

package/lib/UserAvatarEditor.d.ts

@@ -8,7 +8,7 @@ export interface UserAvatarEditorToBlob {
  * User avatar editor on done handler
  */
 export interface UserAvatarEditorOnDoneHandler {
-    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob, type: string): void;
+    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob, type: string): Promise<void | false | undefined>;
 }
 /**
  * User avatar editor props

package/lib/UserAvatarEditor.js

@@ -97,6 +97,10 @@ export function UserAvatarEditor(props) {
     const handleReset = () => {
         setEditorState({ ...defaultState });
     };
+    const resetUI = () => {
+        setPreviewImage(undefined);
+        handleReset();
+    };
     // Handle rotate
     const handleRotate = (r) => {
         let rotate = editorState.rotate + r;
@@ -130,16 +134,21 @@ export function UserAvatarEditor(props) {
             to.height = heightCalculated;
             // Large photo, resize it
             // https://github.com/nodeca/pica
-            picaInstance
-                .resize(data, to, {
+            const canvas = await picaInstance.resize(data, to, {
                 unsharpAmount: 160,
                 unsharpRadius: 0.6,
                 unsharpThreshold: 1
-            })
-                .then((result) => onDone(result, toBlob, type.current));
+            });
+            const result = await onDone(canvas, toBlob, type.current);
+            if (result === false) {
+                resetUI();
+            }
         }
         else {
-            onDone(data, toBlob, type.current);
+            const result = await onDone(data, toBlob, type.current);
+            if (result === false) {
+                resetUI();
+            }
         }
     };
     // Load the component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.28",
+  "version": "1.4.30",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -35,12 +35,12 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@etsoo/appscript": "^1.5.70",
+    "@etsoo/appscript": "^1.5.71",
     "@etsoo/notificationbase": "^1.1.54",
     "@etsoo/react": "^1.8.3",
     "@etsoo/shared": "^1.2.55",
-    "@mui/icons-material": "^6.1.8",
-    "@mui/material": "^6.1.8",
+    "@mui/icons-material": "^6.1.9",
+    "@mui/material": "^6.1.9",
     "@mui/x-data-grid": "^7.22.3",
     "chart.js": "^4.4.6",
     "chartjs-plugin-datalabels": "^2.2.0",

package/src/UserAvatarEditor.tsx

@@ -40,7 +40,7 @@ export interface UserAvatarEditorOnDoneHandler {
     canvas: HTMLCanvasElement,
     toBlob: UserAvatarEditorToBlob,
     type: string
-  ): void;
+  ): Promise<void | false | undefined>;
 }
 
 /**
@@ -224,6 +224,11 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     setEditorState({ ...defaultState });
   };
 
+  const resetUI = () => {
+    setPreviewImage(undefined);
+    handleReset();
+  };
+
   // Handle rotate
   const handleRotate = (r: number) => {
     let rotate = editorState.rotate + r;
@@ -266,15 +271,21 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
       // Large photo, resize it
       // https://github.com/nodeca/pica
-      picaInstance
-        .resize(data, to, {
-          unsharpAmount: 160,
-          unsharpRadius: 0.6,
-          unsharpThreshold: 1
-        })
-        .then((result) => onDone(result, toBlob, type.current));
+      const canvas = await picaInstance.resize(data, to, {
+        unsharpAmount: 160,
+        unsharpRadius: 0.6,
+        unsharpThreshold: 1
+      });
+
+      const result = await onDone(canvas, toBlob, type.current);
+      if (result === false) {
+        resetUI();
+      }
     } else {
-      onDone(data, toBlob, type.current);
+      const result = await onDone(data, toBlob, type.current);
+      if (result === false) {
+        resetUI();
+      }
     }
   };