@rolster/react-components 18.22.1 → 18.22.3

package/dist/cjs/assets/{index-B9-Brjbd.css → index-DZlD2mZH.css}

@@ -514,6 +514,15 @@
   transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=CheckBox.css.map */
 
+.rls-image {
+  content-visibility: auto;
+  background-color: var(--rls-theme-color-600);
+  opacity: 0;
+}
+.rls-image--complet {
+  opacity: 1;
+} /*# sourceMappingURL=Image.css.map */
+
 .rls-input {
   --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
   --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
@@ -2609,10 +2618,10 @@
 .rls-image-chooser__modal {
   --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
     var(--rls-sizing-x12) var(--rls-sizing-x12);
-  --rlc-modal-max-width: calc(100% - var(--rls-sizing-x16));
+  --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
   width: 100%;
 }
-@media only screen and (max-width: 420px) {
+@media only screen and (max-width: 480px) {
   .rls-image-chooser__modal {
     --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
       var(--rls-sizing-x8) var(--rls-sizing-x8);

package/dist/cjs/index.js

@@ -1554,6 +1554,24 @@ function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
 
+function RlsImage({ src }) {
+    const [isComplet, setIsComplet] = require$$0.useState(false);
+    const refSrc = require$$0.useRef(src);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-image', { complet: isComplet });
+    }, [isComplet]);
+    require$$0.useEffect(() => {
+        if (refSrc.current !== src) {
+            setIsComplet(false);
+            refSrc.current = src;
+        }
+    }, [src]);
+    const onLoad = require$$0.useCallback(() => {
+        setIsComplet(true);
+    }, []);
+    return jsxRuntimeExports.jsx("img", { className: className, src: src, onLoad: onLoad });
+}
+
 function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
     const valueInitial = formControl?.value ?? value ? String(value) : '';
     const [valueInput, setValueInput] = require$$0.useState(valueInitial);
@@ -3378,25 +3396,28 @@ function RlsImageEditor(props) {
         refOverlayLeft.current.style.width = `calc(${left}px)`;
     }, []);
     const refreshSelectionFromWidth = require$$0.useCallback((rateSelection) => {
-        const _ratio = rateSelection * getRatioFactor(props.ratio || '1:1');
-        let width = (refImage.current.offsetWidth * rateSelection) / 100;
-        let height = (refImage.current.offsetWidth * _ratio) / 100;
-        if (height > refImage.current.offsetHeight) {
-            height = refImage.current.offsetHeight;
-            width =
-                (height * refImage.current.offsetHeight) /
-                    refImage.current.offsetHeight;
+        const ratioFactor = getRatioFactor(props.ratio || '1:1');
+        const _ratio = rateSelection * ratioFactor;
+        const offsetWidth = refImage.current?.offsetWidth || 0;
+        const offsetHeight = refImage.current?.offsetHeight || 0;
+        let width = (offsetWidth * rateSelection) / 100;
+        let height = (offsetWidth * _ratio) / 100;
+        if (height > offsetHeight) {
+            height = offsetHeight;
+            width = height / ratioFactor;
         }
         return { height, width };
     }, [props.ratio]);
     const refreshSelectionFromHeight = require$$0.useCallback((rateSelection) => {
-        const _ratio = rateSelection * getRatioFactor(props.ratio || '1:1');
-        let height = (refImage.current.offsetHeight * rateSelection) / 100;
-        let width = (refImage.current.offsetHeight * _ratio) / 100;
-        if (width > refImage.current.offsetWidth) {
-            width = refImage.current.offsetWidth;
-            height =
-                (width * refImage.current.offsetWidth) / refImage.current.offsetWidth;
+        const ratioFactor = getRatioFactor(props.ratio || '1:1');
+        const _ratio = rateSelection * ratioFactor;
+        const offsetWidth = refImage.current?.offsetWidth || 0;
+        const offsetHeight = refImage.current?.offsetHeight || 0;
+        let height = (offsetHeight * rateSelection) / 100;
+        let width = (offsetHeight * _ratio) / 100;
+        if (width > offsetWidth) {
+            width = offsetWidth;
+            height = width / ratioFactor;
         }
         return { height, width };
     }, [props.ratio]);
@@ -3499,13 +3520,14 @@ function RlsImageEditor(props) {
                     props.formControl?.setValue(value);
                 };
             }
-        }, props.mimeType || 'image/jpeg', 1);
+        }, props.mimeType || 'image/jpeg', props.imgQuality || 1);
     }, [
         props.ratio,
         props.mimeType,
         props.onValue,
         props.formControl,
-        props.imgWidth
+        props.imgWidth,
+        props.imgQuality
     ]);
     const onRestore = require$$0.useCallback(() => {
         const context = refCanvas.current.getContext('2d');
@@ -3567,7 +3589,7 @@ function RlsImageChooser(props) {
     const onCancel = require$$0.useCallback(() => {
         setSrcEditor(undefined);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: onSelect, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), srcEditor && (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-chooser__modal", visible: true, children: jsxRuntimeExports.jsx(RlsImageEditor, { src: srcEditor, formControl: props.formControl, imgWidth: props.imgWidth, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: props.disabled, children: labels.actionCancel }) }) })), jsxRuntimeExports.jsx("input", { ref: refInput, type: "file", disabled: props.disabled })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: onSelect, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), srcEditor && (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-chooser__modal", visible: true, children: jsxRuntimeExports.jsx(RlsImageEditor, { src: srcEditor, formControl: props.formControl, imgWidth: props.imgWidth, imgQuality: props.imgQuality, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: props.disabled, children: labels.actionCancel }) }) })), jsxRuntimeExports.jsx("input", { ref: refInput, type: "file", disabled: props.disabled })] }));
 }
 
 const DURATION_ANIMATION = 240;
@@ -3695,6 +3717,7 @@ exports.RlsFieldSelectTemplate = RlsFieldSelectTemplate;
 exports.RlsFieldText = RlsFieldText;
 exports.RlsFormNavigation = RlsFormNavigation;
 exports.RlsIcon = RlsIcon;
+exports.RlsImage = RlsImage;
 exports.RlsImageChooser = RlsImageChooser;
 exports.RlsImageEditor = RlsImageEditor;
 exports.RlsInput = RlsInput;