@etsoo/materialui 1.4.30 → 1.4.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/UserAvatarEditor.js
CHANGED
|
@@ -38,6 +38,7 @@ export function UserAvatarEditor(props) {
|
|
|
38
38
|
const buttonRef = React.createRef();
|
|
39
39
|
// Preview image state
|
|
40
40
|
const [previewImage, setPreviewImage] = React.useState(image);
|
|
41
|
+
React.useEffect(() => setPreviewImage(image), [image]);
|
|
41
42
|
// Is ready state
|
|
42
43
|
const [ready, setReady] = React.useState(false);
|
|
43
44
|
// Editor states
|
|
@@ -75,6 +76,9 @@ export function UserAvatarEditor(props) {
|
|
|
75
76
|
};
|
|
76
77
|
// Handle image load
|
|
77
78
|
const handleLoad = (imageInfo) => {
|
|
79
|
+
// Ignore too small images
|
|
80
|
+
if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10)
|
|
81
|
+
return;
|
|
78
82
|
if (noHeight) {
|
|
79
83
|
setHeight((imageInfo.height * width) / imageInfo.width);
|
|
80
84
|
}
|
|
@@ -153,5 +157,6 @@ export function UserAvatarEditor(props) {
|
|
|
153
157
|
};
|
|
154
158
|
// Load the component
|
|
155
159
|
const AE = React.lazy(() => import("react-avatar-editor"));
|
|
156
|
-
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 ??
|
|
160
|
+
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 ??
|
|
161
|
+
"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 })] }));
|
|
157
162
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/materialui",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.32",
|
|
4
4
|
"description": "TypeScript Material-UI Implementation",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@emotion/css": "^11.13.5",
|
|
36
36
|
"@emotion/react": "^11.13.5",
|
|
37
37
|
"@emotion/styled": "^11.13.5",
|
|
38
|
-
"@etsoo/appscript": "^1.5.
|
|
38
|
+
"@etsoo/appscript": "^1.5.72",
|
|
39
39
|
"@etsoo/notificationbase": "^1.1.54",
|
|
40
40
|
"@etsoo/react": "^1.8.3",
|
|
41
41
|
"@etsoo/shared": "^1.2.55",
|
package/src/UserAvatarEditor.tsx
CHANGED
|
@@ -145,6 +145,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
|
|
|
145
145
|
// Preview image state
|
|
146
146
|
const [previewImage, setPreviewImage] = React.useState(image);
|
|
147
147
|
|
|
148
|
+
React.useEffect(() => setPreviewImage(image), [image]);
|
|
149
|
+
|
|
148
150
|
// Is ready state
|
|
149
151
|
const [ready, setReady] = React.useState(false);
|
|
150
152
|
|
|
@@ -196,6 +198,9 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
|
|
|
196
198
|
|
|
197
199
|
// Handle image load
|
|
198
200
|
const handleLoad = (imageInfo: ImageState) => {
|
|
201
|
+
// Ignore too small images
|
|
202
|
+
if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10) return;
|
|
203
|
+
|
|
199
204
|
if (noHeight) {
|
|
200
205
|
setHeight((imageInfo.height * width) / imageInfo.width);
|
|
201
206
|
}
|
|
@@ -316,7 +321,10 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
|
|
|
316
321
|
width={width}
|
|
317
322
|
height={localHeight}
|
|
318
323
|
onLoadSuccess={handleLoad}
|
|
319
|
-
image={
|
|
324
|
+
image={
|
|
325
|
+
previewImage ??
|
|
326
|
+
"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
|
|
327
|
+
}
|
|
320
328
|
scale={editorState.scale}
|
|
321
329
|
rotate={editorState.rotate}
|
|
322
330
|
/>
|