@rolster/react-components 18.23.5 → 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');
@@ -3564,13 +3564,14 @@ function useImageEditorController(options) {
         setSrcEditor(undefined);
     }, []);
     const RlsImageEditorChooser = 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 }) })));
+        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
@@ -3587,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;