@etsoo/materialui 1.4.29 → 1.4.31

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 | false;
+    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob, type: string): Promise<void | false | undefined>;
 }
 /**
  * User avatar editor props

package/lib/UserAvatarEditor.js

@@ -38,6 +38,7 @@ export function UserAvatarEditor(props) {
     const buttonRef = React.createRef();
     // Preview image state
     const [previewImage, setPreviewImage] = React.useState(image);
+    React.useEffect(() => setPreviewImage(image), [image]);
     // Is ready state
     const [ready, setReady] = React.useState(false);
     // Editor states
@@ -75,6 +76,9 @@ export function UserAvatarEditor(props) {
     };
     // Handle image load
     const handleLoad = (imageInfo) => {
+        // Ignore small images
+        if (imageInfo.height < 10 || imageInfo.width < 10)
+            return;
         if (noHeight) {
             setHeight((imageInfo.height * width) / imageInfo.width);
         }
@@ -134,23 +138,25 @@ 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) => {
-                if (onDone(result, toBlob, type.current) === false) {
-                    resetUI();
-                }
             });
+            const result = await onDone(canvas, toBlob, type.current);
+            if (result === false) {
+                resetUI();
+            }
         }
-        else if (onDone(data, toBlob, type.current) === false) {
-            resetUI();
+        else {
+            const result = await onDone(data, toBlob, type.current);
+            if (result === false) {
+                resetUI();
+            }
         }
     };
     // Load the component
     const AE = React.lazy(() => import("react-avatar-editor"));
-    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ?? "", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
+    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
+                                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.29",
+  "version": "1.4.31",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",

package/src/UserAvatarEditor.tsx

@@ -36,9 +36,11 @@ export interface UserAvatarEditorToBlob {
  * User avatar editor on done handler
  */
 export interface UserAvatarEditorOnDoneHandler {
-  (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob, type: string):
-    | void
-    | false;
+  (
+    canvas: HTMLCanvasElement,
+    toBlob: UserAvatarEditorToBlob,
+    type: string
+  ): Promise<void | false | undefined>;
 }
 
 /**
@@ -143,6 +145,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   // Preview image state
   const [previewImage, setPreviewImage] = React.useState(image);
 
+  React.useEffect(() => setPreviewImage(image), [image]);
+
   // Is ready state
   const [ready, setReady] = React.useState(false);
 
@@ -194,6 +198,9 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
   // Handle image load
   const handleLoad = (imageInfo: ImageState) => {
+    // Ignore small images
+    if (imageInfo.height < 10 || imageInfo.width < 10) return;
+
     if (noHeight) {
       setHeight((imageInfo.height * width) / imageInfo.width);
     }
@@ -269,19 +276,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) => {
-          if (onDone(result, toBlob, type.current) === false) {
-            resetUI();
-          }
-        });
-    } else if (onDone(data, toBlob, type.current) === false) {
-      resetUI();
+      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 {
+      const result = await onDone(data, toBlob, type.current);
+      if (result === false) {
+        resetUI();
+      }
     }
   };
 
@@ -312,7 +321,10 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
             width={width}
             height={localHeight}
             onLoadSuccess={handleLoad}
-            image={previewImage ?? ""}
+            image={
+              previewImage ??
+              "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
+            }
             scale={editorState.scale}
             rotate={editorState.rotate}
           />