@rolster/react-components 18.23.5 → 18.23.7

package/dist/es/index.js

@@ -3330,7 +3330,7 @@ function simpleThreeRule(value1, value2, proportion) {
     return (value2 * proportion) / value1;
 }
 function RlsImageEditor(props) {
-    const [selection, setSelection] = useState(props.rateSelection ?? 60);
+    const [selection, setSelection] = useState(props.selection ?? 60);
     const [labels, setLabels] = useState({
         actionRestore: reactI18n('editorImageActionRestore'),
         actionSelect: reactI18n('editorImageActionSelect')
@@ -3346,6 +3346,9 @@ function RlsImageEditor(props) {
     const refPicture = useRef(null);
     const image = useRef(new Image());
     const originalImage = useRef();
+    const ratio = useMemo(() => {
+        return props.ratio || '1:1';
+    }, [props.ratio]);
     const getCropProperties = useCallback(() => {
         return {
             height: simpleThreeRule(refImage.current.offsetHeight, image.current.height, refSelection.current.offsetHeight),
@@ -3371,7 +3374,7 @@ function RlsImageEditor(props) {
         refOverlayLeft.current.style.width = `calc(${left}px)`;
     }, []);
     const refreshSelectionFromWidth = useCallback((rateSelection) => {
-        const ratioFactor = getRatioFactor(props.ratio || '1:1');
+        const ratioFactor = getRatioFactor(ratio);
         const _ratio = rateSelection * ratioFactor;
         const offsetWidth = refImage.current?.offsetWidth || 0;
         const offsetHeight = refImage.current?.offsetHeight || 0;
@@ -3382,10 +3385,10 @@ function RlsImageEditor(props) {
             width = height / ratioFactor;
         }
         return { height, width };
-    }, [props.ratio]);
+    }, [ratio]);
     const refreshSelectionFromHeight = useCallback((rateSelection) => {
-        const ratioFactor = getRatioFactor(props.ratio || '1:1');
-        const _ratio = rateSelection * ratioFactor;
+        const ratioFactor = getRatioFactor(ratio);
+        const _ratio = rateSelection / ratioFactor;
         const offsetWidth = refImage.current?.offsetWidth || 0;
         const offsetHeight = refImage.current?.offsetHeight || 0;
         let height = (offsetHeight * rateSelection) / 100;
@@ -3395,7 +3398,7 @@ function RlsImageEditor(props) {
             height = width / ratioFactor;
         }
         return { height, width };
-    }, [props.ratio]);
+    }, [ratio]);
     const refreshSelectionStyle = useCallback((rateSelection) => {
         if (image.current.width > 0 && image.current.height > 0) {
             const { height, width } = image.current.width >= image.current.height
@@ -3415,7 +3418,7 @@ function RlsImageEditor(props) {
             }
             refreshOverlaysStyle();
         }
-    }, [props.ratio]);
+    }, [ratio]);
     const setImageStyle = useCallback((width, height) => {
         refImage.current.style.width = width;
         refImage.current.style.height = height;
@@ -3476,8 +3479,8 @@ function RlsImageEditor(props) {
     useResize({ refElement: refImage, onResize: onResizeElement });
     const onCropImage = useCallback(() => {
         const cropProps = getCropProperties();
-        const width = props.imgWidth || cropProps.width;
-        const height = width * getRatioFactor(props.ratio || '1:1');
+        const width = props.maxWidth || cropProps.width;
+        const height = width * getRatioFactor(ratio);
         refPicture.current.width = width;
         refPicture.current.height = height;
         const context = refPicture.current.getContext('2d');
@@ -3495,14 +3498,14 @@ function RlsImageEditor(props) {
                     props.formControl?.setValue(value);
                 };
             }
-        }, props.mimeType || 'image/jpeg', props.imgQuality || 1);
+        }, props.mimeType || 'image/jpeg', props.quality || 1);
     }, [
-        props.ratio,
+        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 +3567,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, selection: options.selection, 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 +3591,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;