@rolster/react-components 18.23.6 → 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;
@@ -3477,7 +3480,7 @@ function RlsImageEditor(props) {
     const onCropImage = useCallback(() => {
         const cropProps = getCropProperties();
         const width = props.maxWidth || cropProps.width;
-        const height = width * getRatioFactor(props.ratio || '1:1');
+        const height = width * getRatioFactor(ratio);
         refPicture.current.width = width;
         refPicture.current.height = height;
         const context = refPicture.current.getContext('2d');
@@ -3497,7 +3500,7 @@ function RlsImageEditor(props) {
             }
         }, props.mimeType || 'image/jpeg', props.quality || 1);
     }, [
-        props.ratio,
+        ratio,
         props.mimeType,
         props.onValue,
         props.formControl,
@@ -3564,7 +3567,7 @@ function useImageEditorController(options) {
         setSrcEditor(undefined);
     }, []);
     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 }) })));
+        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,