@rolster/react-components 18.23.4 → 18.23.6

package/dist/es/index.js

@@ -3476,7 +3476,7 @@ function RlsImageEditor(props) {
     useResize({ refElement: refImage, onResize: onResizeElement });
     const onCropImage = useCallback(() => {
         const cropProps = getCropProperties();
-        const width = props.imgWidth || cropProps.width;
+        const width = props.maxWidth || cropProps.width;
         const height = width * getRatioFactor(props.ratio || '1:1');
         refPicture.current.width = width;
         refPicture.current.height = height;
@@ -3495,14 +3495,14 @@ function RlsImageEditor(props) {
                     props.formControl?.setValue(value);
                 };
             }
-        }, props.mimeType || 'image/jpeg', props.imgQuality || 1);
+        }, props.mimeType || 'image/jpeg', props.quality || 1);
     }, [
         props.ratio,
         props.mimeType,
         props.onValue,
         props.formControl,
-        props.imgWidth,
-        props.imgQuality
+        props.maxWidth,
+        props.quality
     ]);
     const onRestore = useCallback(() => {
         const context = refCanvas.current.getContext('2d');
@@ -3544,7 +3544,6 @@ function useImageEditorController(options) {
     useEffect(() => {
         refInput.current = document.createElement('input');
         refInput.current.type = 'file';
-        refInput.current.disabled = true;
         refInput.current.onchange = () => {
             if (refInput.current.files &&
                 MIME_TYPE_SUPPORTS.includes(refInput.current.files[0].type)) {
@@ -3564,22 +3563,23 @@ function useImageEditorController(options) {
     const onCancel = useCallback(() => {
         setSrcEditor(undefined);
     }, []);
-    const component = useMemo(() => {
-        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { src: srcEditor, formControl: options.formControl, imgWidth: options.imgWidth, imgQuality: options.imgQuality, onValue: onEditorValue, visible: true, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: options.disabled, children: labels.actionCancel }) })));
+    const RlsImageEditorChooser = useMemo(() => {
+        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { visible: true, src: srcEditor, formControl: options.formControl, maxWidth: options.maxWidth, quality: options.quality, ratio: options.ratio, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: options.disabled, children: labels.actionCancel }) })));
     }, [
         srcEditor,
         labels,
         options.formControl,
-        options.imgWidth,
-        options.imgQuality,
+        options.maxWidth,
+        options.quality,
+        options.ratio,
         options.disabled,
         onEditorValue,
         onCancel
     ]);
     const onImageChooser = useCallback(() => {
-        refInput.current.click();
-    }, []);
-    return { RlsImageEditorChooser: component, onImageChooser };
+        !options.disabled && refInput.current.click();
+    }, [options.disabled]);
+    return { onImageChooser, RlsImageEditorChooser };
 }
 
 function RlsImageChooser(props) {
@@ -3588,17 +3588,11 @@ function RlsImageChooser(props) {
         setSrc(image.base64);
         props.onValue && props.onValue(image);
     }, [props.onValue]);
-    const { RlsImageEditorChooser, onImageChooser } = useImageEditorController({
-        disabled: props.disabled,
-        formControl: props.formControl,
-        imgQuality: props.imgQuality,
-        imgWidth: props.imgWidth,
-        onValue
-    });
+    const controller = useImageEditorController({ ...props, onValue });
     useEffect(() => {
         props.src && setSrc(props.src);
     }, [props.src]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: onImageChooser, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), RlsImageEditorChooser] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: controller.onImageChooser, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), controller.RlsImageEditorChooser] }));
 }
 
 const DURATION_ANIMATION = 240;