@etsoo/materialui 1.4.27 → 1.4.28

package/lib/UserAvatarEditor.d.ts

@@ -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
@@ -144,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: 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.28",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -35,7 +35,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@etsoo/appscript": "^1.5.69",
+    "@etsoo/appscript": "^1.5.70",
     "@etsoo/notificationbase": "^1.1.54",
     "@etsoo/react": "^1.8.3",
     "@etsoo/shared": "^1.2.55",

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";
@@ -67,6 +67,11 @@ export interface UserAvatarEditorProps {
    */
   onDone: UserAvatarEditorOnDoneHandler;
 
+  /**
+   * Select file label
+   */
+  selectFileLabel?: string;
+
   /**
    * Return scaled result?
    */
@@ -105,6 +110,9 @@ const defaultState: EditorState = {
  * @returns Component
  */
 export function UserAvatarEditor(props: UserAvatarEditorProps) {
+  // Labels
+  const labels = Labels.UserAvatarEditor;
+
   // Destruct
   const {
     border = 30,
@@ -114,7 +122,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 +133,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>();
 
@@ -280,12 +286,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"
   };