@etsoo/materialui 1.4.27 → 1.4.29

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): void | false;
 }
 /**
  * User avatar editor props
@@ -30,6 +30,10 @@ export interface UserAvatarEditorProps {
      * On done handler
      */
     onDone: UserAvatarEditorOnDoneHandler;
+    /**
+     * Select file label
+     */
+    selectFileLabel?: string;
     /**
      * Return scaled result?
      */

package/lib/UserAvatarEditor.js

@@ -4,7 +4,7 @@ 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 ImageIcon from "@mui/icons-material/Image";
 import DoneIcon from "@mui/icons-material/Done";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
@@ -22,14 +22,14 @@ const defaultState = {
  * @returns Component
  */
 export function UserAvatarEditor(props) {
+    // Labels
+    const labels = Labels.UserAvatarEditor;
     // Destruct
-    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = defaultSize, height = defaultSize, range = [0.1, 2, 0.1] } = props;
+    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = defaultSize, height = defaultSize, range = [0.1, 2, 0.1], selectFileLabel = labels.selectFile + "..." } = props;
     // Container width
     const containerWidth = width + 2 * border + 44 + 4;
     // Calculated max width
     const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
-    // Labels
-    const labels = Labels.UserAvatarEditor;
     // Ref
     const ref = React.createRef();
     // Image type
@@ -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;
@@ -136,13 +140,17 @@ export function UserAvatarEditor(props) {
                 unsharpRadius: 0.6,
                 unsharpThreshold: 1
             })
-                .then((result) => onDone(result, toBlob, type.current));
+                .then((result) => {
+                if (onDone(result, toBlob, type.current) === false) {
+                    resetUI();
+                }
+            });
         }
-        else {
-            onDone(data, toBlob, type.current);
+        else if (onDone(data, toBlob, type.current) === 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(ComputerIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: labels.upload }), _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 ?? "", 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/lib/app/Labels.d.ts

@@ -45,7 +45,7 @@ export declare namespace Labels {
         reset: string;
         rotateLeft: string;
         rotateRight: string;
-        upload: string;
+        selectFile: string;
         zoom: string;
     };
     /**

package/lib/app/Labels.js

@@ -46,7 +46,7 @@ export var Labels;
         reset: "Reset",
         rotateLeft: "Rotate left 90°",
         rotateRight: "Rotate right 90°",
-        upload: "Upload",
+        selectFile: "Select file",
         zoom: "Zoom"
     };
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.27",
+  "version": "1.4.29",
   "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.69",
+    "@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

@@ -11,7 +11,7 @@ import type 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 ImageIcon from "@mui/icons-material/Image";
 import DoneIcon from "@mui/icons-material/Done";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
@@ -36,11 +36,9 @@ 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):
+    | void
+    | false;
 }
 
 /**
@@ -67,6 +65,11 @@ export interface UserAvatarEditorProps {
    */
   onDone: UserAvatarEditorOnDoneHandler;
 
+  /**
+   * Select file label
+   */
+  selectFileLabel?: string;
+
   /**
    * Return scaled result?
    */
@@ -105,6 +108,9 @@ const defaultState: EditorState = {
  * @returns Component
  */
 export function UserAvatarEditor(props: UserAvatarEditorProps) {
+  // Labels
+  const labels = Labels.UserAvatarEditor;
+
   // Destruct
   const {
     border = 30,
@@ -114,7 +120,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     scaledResult = false,
     width = defaultSize,
     height = defaultSize,
-    range = [0.1, 2, 0.1]
+    range = [0.1, 2, 0.1],
+    selectFileLabel = labels.selectFile + "..."
   } = props;
 
   // Container width
@@ -124,9 +131,6 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   const maxWidthCalculated =
     maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
 
-  // Labels
-  const labels = Labels.UserAvatarEditor;
-
   // Ref
   const ref = React.createRef<AvatarEditor>();
 
@@ -218,6 +222,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,9 +275,13 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
           unsharpRadius: 0.6,
           unsharpThreshold: 1
         })
-        .then((result) => onDone(result, toBlob, type.current));
-    } else {
-      onDone(data, toBlob, type.current);
+        .then((result) => {
+          if (onDone(result, toBlob, type.current) === false) {
+            resetUI();
+          }
+        });
+    } else if (onDone(data, toBlob, type.current) === false) {
+      resetUI();
     }
   };
 
@@ -280,12 +293,12 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
       <FileUploadButton
         variant="outlined"
         size="medium"
-        startIcon={<ComputerIcon />}
+        startIcon={<ImageIcon />}
         fullWidth
         onUploadFiles={handleFileUpload}
         inputProps={{ multiple: false, accept: "image/png, image/jpeg" }}
       >
-        {labels.upload}
+        {selectFileLabel}
       </FileUploadButton>
       <Stack direction="row" spacing={0.5}>
         <React.Suspense

package/src/app/Labels.ts

@@ -48,7 +48,7 @@ export namespace Labels {
     reset: "Reset",
     rotateLeft: "Rotate left 90°",
     rotateRight: "Rotate right 90°",
-    upload: "Upload",
+    selectFile: "Select file",
     zoom: "Zoom"
   };