@etsoo/materialui 1.3.68 → 1.3.69

package/lib/UserAvatarEditor.js

@@ -10,6 +10,7 @@ import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 import { FileUploadButton } from "./FileUploadButton";
+const defaultSize = 300;
 const defaultState = {
     scale: 1,
     rotate: 0
@@ -22,11 +23,11 @@ const defaultState = {
  */
 export function UserAvatarEditor(props) {
     // Destruct
-    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = 200, height = 200, 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] } = props;
     // Container width
     const containerWidth = width + 2 * border + 44 + 4;
     // Calculated max width
-    const maxWidthCalculated = maxWidth == null || maxWidth < 200 ? 3 * width : maxWidth;
+    const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
     // Labels
     const labels = Labels.UserAvatarEditor;
     // Ref
@@ -41,6 +42,10 @@ export function UserAvatarEditor(props) {
     const [ready, setReady] = React.useState(false);
     // Editor states
     const [editorState, setEditorState] = React.useState(defaultState);
+    // Height
+    // noHeight: height is not set and will be updated dynamically
+    const noHeight = height <= 0;
+    const [localHeight, setHeight] = React.useState(noHeight ? defaultSize : height);
     // Range
     const [min, max, step] = range;
     const marks = [
@@ -69,7 +74,10 @@ export function UserAvatarEditor(props) {
         setScale(editorState.scale + (isAdd ? step : -step));
     };
     // Handle image load
-    const handleLoad = () => {
+    const handleLoad = (imageInfo) => {
+        if (noHeight) {
+            setHeight((imageInfo.height * width) / imageInfo.width);
+        }
         setReady(true);
     };
     // Handle file upload
@@ -115,7 +123,7 @@ export function UserAvatarEditor(props) {
         };
         if (data.width > maxWidthCalculated) {
             // Target height
-            const heightCalculated = (height * maxWidthCalculated) / width;
+            const heightCalculated = (localHeight * maxWidthCalculated) / width;
             // Target
             const to = document.createElement("canvas");
             to.width = maxWidthCalculated;
@@ -136,5 +144,5 @@ export function UserAvatarEditor(props) {
     };
     // 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: height }), children: _jsx(AE, { ref: ref, border: border, width: width, height: height, 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(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 })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.68",
+  "version": "1.3.69",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -54,9 +54,9 @@
     "@etsoo/notificationbase": "^1.1.42",
     "@etsoo/react": "^1.7.54",
     "@etsoo/shared": "^1.2.41",
-    "@mui/icons-material": "^5.15.18",
-    "@mui/material": "^5.15.18",
-    "@mui/x-data-grid": "^7.5.1",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "^5.15.19",
+    "@mui/x-data-grid": "^7.6.1",
     "chart.js": "^4.4.3",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",

package/src/UserAvatarEditor.tsx

@@ -17,6 +17,9 @@ import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 import { FileUploadButton } from "./FileUploadButton";
+import { ImageState } from "react-avatar-editor";
+
+const defaultSize = 300;
 
 /**
  * User avatar editor to Blob helper
@@ -109,8 +112,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     maxWidth,
     onDone,
     scaledResult = false,
-    width = 200,
-    height = 200,
+    width = defaultSize,
+    height = defaultSize,
     range = [0.1, 2, 0.1]
   } = props;
 
@@ -119,7 +122,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
   // Calculated max width
   const maxWidthCalculated =
-    maxWidth == null || maxWidth < 200 ? 3 * width : maxWidth;
+    maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
 
   // Labels
   const labels = Labels.UserAvatarEditor;
@@ -142,6 +145,13 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   // Editor states
   const [editorState, setEditorState] = React.useState(defaultState);
 
+  // Height
+  // noHeight: height is not set and will be updated dynamically
+  const noHeight = height <= 0;
+  const [localHeight, setHeight] = React.useState(
+    noHeight ? defaultSize : height
+  );
+
   // Range
   const [min, max, step] = range;
   const marks = [
@@ -179,7 +189,10 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   };
 
   // Handle image load
-  const handleLoad = () => {
+  const handleLoad = (imageInfo: ImageState) => {
+    if (noHeight) {
+      setHeight((imageInfo.height * width) / imageInfo.width);
+    }
     setReady(true);
   };
 
@@ -238,7 +251,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
     if (data.width > maxWidthCalculated) {
       // Target height
-      const heightCalculated = (height * maxWidthCalculated) / width;
+      const heightCalculated = (localHeight * maxWidthCalculated) / width;
 
       // Target
       const to = document.createElement("canvas");
@@ -277,14 +290,14 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
       <Stack direction="row" spacing={0.5}>
         <React.Suspense
           fallback={
-            <Skeleton variant="rounded" width={width} height={height} />
+            <Skeleton variant="rounded" width={width} height={localHeight} />
           }
         >
           <AE
             ref={ref}
             border={border}
             width={width}
-            height={height}
+            height={localHeight}
             onLoadSuccess={handleLoad}
             image={previewImage ?? ""}
             scale={editorState.scale}