@rolster/react-components 18.22.1 → 18.22.3

package/dist/es/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/es/index.js

@@ -1552,6 +1552,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] = useState(false);
+    const refSrc = useRef(src);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-image', { complet: isComplet });
+    }, [isComplet]);
+    useEffect(() => {
+        if (refSrc.current !== src) {
+            setIsComplet(false);
+            refSrc.current = src;
+        }
+    }, [src]);
+    const onLoad = 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] = useState(valueInitial);
@@ -3376,25 +3394,28 @@ function RlsImageEditor(props) {
         refOverlayLeft.current.style.width = `calc(${left}px)`;
     }, []);
     const refreshSelectionFromWidth = 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 = 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]);
@@ -3497,13 +3518,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 = useCallback(() => {
         const context = refCanvas.current.getContext('2d');
@@ -3565,7 +3587,7 @@ function RlsImageChooser(props) {
     const onCancel = 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;
@@ -3654,5 +3676,5 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
-export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useListController, useRelocationOnComponent, useResize, useSnackbar };
+export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useListController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map