@rolster/react-components 18.23.6 → 18.23.7

package/dist/cjs/index.js

@@ -3332,7 +3332,7 @@ function simpleThreeRule(value1, value2, proportion) {
     return (value2 * proportion) / value1;
 }
 function RlsImageEditor(props) {
-    const [selection, setSelection] = require$$0.useState(props.rateSelection ?? 60);
+    const [selection, setSelection] = require$$0.useState(props.selection ?? 60);
     const [labels, setLabels] = require$$0.useState({
         actionRestore: reactI18n('editorImageActionRestore'),
         actionSelect: reactI18n('editorImageActionSelect')
@@ -3348,6 +3348,9 @@ function RlsImageEditor(props) {
     const refPicture = require$$0.useRef(null);
     const image = require$$0.useRef(new Image());
     const originalImage = require$$0.useRef();
+    const ratio = require$$0.useMemo(() => {
+        return props.ratio || '1:1';
+    }, [props.ratio]);
     const getCropProperties = require$$0.useCallback(() => {
         return {
             height: simpleThreeRule(refImage.current.offsetHeight, image.current.height, refSelection.current.offsetHeight),
@@ -3373,7 +3376,7 @@ function RlsImageEditor(props) {
         refOverlayLeft.current.style.width = `calc(${left}px)`;
     }, []);
     const refreshSelectionFromWidth = require$$0.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;
@@ -3384,10 +3387,10 @@ function RlsImageEditor(props) {
             width = height / ratioFactor;
         }
         return { height, width };
-    }, [props.ratio]);
+    }, [ratio]);
     const refreshSelectionFromHeight = require$$0.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;
@@ -3397,7 +3400,7 @@ function RlsImageEditor(props) {
             height = width / ratioFactor;
         }
         return { height, width };
-    }, [props.ratio]);
+    }, [ratio]);
     const refreshSelectionStyle = require$$0.useCallback((rateSelection) => {
         if (image.current.width > 0 && image.current.height > 0) {
             const { height, width } = image.current.width >= image.current.height
@@ -3417,7 +3420,7 @@ function RlsImageEditor(props) {
             }
             refreshOverlaysStyle();
         }
-    }, [props.ratio]);
+    }, [ratio]);
     const setImageStyle = require$$0.useCallback((width, height) => {
         refImage.current.style.width = width;
         refImage.current.style.height = height;
@@ -3479,7 +3482,7 @@ function RlsImageEditor(props) {
     const onCropImage = require$$0.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');
@@ -3499,7 +3502,7 @@ function RlsImageEditor(props) {
             }
         }, props.mimeType || 'image/jpeg', props.quality || 1);
     }, [
-        props.ratio,
+        ratio,
         props.mimeType,
         props.onValue,
         props.formControl,
@@ -3566,7 +3569,7 @@ function useImageEditorController(options) {
         setSrcEditor(undefined);
     }, []);
     const RlsImageEditorChooser = require$$0.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,