@rolster/react-components 19.8.21 → 19.8.22

package/dist/es/index.mjs

@@ -482,20 +482,41 @@ function RlsAmountComponent({ value, className, decimals, rlsTheme, symbol }) {
 }
 const RlsAmount = memo(RlsAmountComponent);
 
-function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows = 1, value }) {
+const AREA_TEXT_MAX_ROWS = 8;
+const AREA_TEXT_MIN_ROWS = 3;
+function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
     const valueInitial = String(formControl?.value ?? value ?? '');
+    const rowsMin = minRows ?? AREA_TEXT_MIN_ROWS;
+    const rowsMax = Math.max(maxRows ?? AREA_TEXT_MAX_ROWS, rowsMin);
     const [valueArea, setValueArea] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
     const elementRef = useRef(null);
     const areaRef = formControl?.elementRef ?? elementRef;
     const changeIsInternal = useRef(false);
+    const heightIsManual = useRef(false);
+    const heightApplied = useRef(0);
     const refreshHeight = useCallback(() => {
         const element = areaRef.current;
-        if (element) {
-            element.style.height = 'auto';
-            element.style.height = `${element.scrollHeight}px`;
+        if (!element || heightIsManual.current) {
+            return;
+        }
+        element.style.height = 'auto';
+        const { lineHeight, paddingBottom, paddingTop } = getComputedStyle(element);
+        const heightLine = parseFloat(lineHeight);
+        const heightContent = element.scrollHeight;
+        if (!heightLine) {
+            element.style.height = `${heightContent}px`;
+            heightApplied.current = heightContent;
+            return;
         }
-    }, [areaRef]);
+        const heightPadding = parseFloat(paddingTop) + parseFloat(paddingBottom);
+        const heightMin = heightLine * rowsMin + heightPadding;
+        const heightMax = heightLine * rowsMax + heightPadding;
+        const height = Math.min(Math.max(heightContent, heightMin), heightMax);
+        element.style.height = `${height}px`;
+        element.style.overflowY = heightContent > heightMax ? 'auto' : 'hidden';
+        heightApplied.current = height;
+    }, [areaRef, rowsMax, rowsMin]);
     useEffect(() => {
         if (!changeIsInternal.current) {
             const nextValue = String(formControl?.value ?? value ?? '');
@@ -508,14 +529,31 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
     useEffect(() => {
         refreshHeight();
     }, [refreshHeight, valueArea]);
+    useEffect(() => {
+        const element = areaRef.current;
+        if (!element ||
+            resize === 'none' ||
+            typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            if (heightIsManual.current || !heightApplied.current) {
+                return;
+            }
+            if (Math.abs(element.offsetHeight - heightApplied.current) > 1) {
+                heightIsManual.current = true;
+                element.style.overflowY = 'auto';
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [areaRef, resize]);
     const onChangeArea = useCallback((event) => {
         const nextValue = event.target.value;
         changeIsInternal.current = true;
         onValue?.(nextValue);
         setValueArea(nextValue);
         formControl?.setValue(nextValue);
-        event.target.style.height = 'auto';
-        event.target.style.height = `${event.target.scrollHeight}px`;
     }, [formControl, onValue]);
     const onKeyDownArea = useCallback((event) => {
         onKeyDown?.(event);
@@ -536,12 +574,14 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         setFocused(() => false);
         onBlur?.();
     }, [formControl, onBlur]);
+    const disabledArea = formControl?.disabled || disabled;
     const className = renderClassStatus('rls-area-text', {
-        disabled: formControl?.disabled || disabled,
+        disabled: disabledArea,
         focused: formControl?.focused ?? focused,
-        readonly: readOnly
+        readonly: readOnly,
+        resizable: resize !== 'none' && !disabledArea && !readOnly
     });
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, rows: rows, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", children: valueArea })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
 }
 const RlsAreaText = memo(RlsAreaTextComponent);
 
@@ -648,8 +688,11 @@ function RlsCheckBoxControlComponent({ formControl, disabled, identifier, rlsThe
 }
 const RlsCheckBoxControl = memo(RlsCheckBoxControlComponent);
 
-function RlsSkeletonComponent({ rlsTheme }) {
-    return jsxRuntimeExports.jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
+function RlsSkeletonComponent({ animation, rlsTheme }) {
+    const className = renderClassStatus('rls-skeleton', {
+        animation: animation !== 'shimmer' && animation
+    });
+    return jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme });
 }
 const RlsSkeleton = memo(RlsSkeletonComponent);
 
@@ -1258,8 +1301,8 @@ function RlsRadioButtonComponent({ checked, disabled, identifier, rlsTheme, onCl
 }
 const RlsRadioButton = memo(RlsRadioButtonComponent);
 
-function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
+function RlsSkeletonTextComponent({ active, animation, children, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, { animation: animation })) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
 const RlsSkeletonText = memo(RlsSkeletonTextComponent);
 
@@ -1548,17 +1591,31 @@ function RlsMessageFormErrorComponent({ className, formControl }) {
 const RlsMessageFormError = memo(RlsMessageFormErrorComponent);
 
 function RlsFieldAreaComponent(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { children, formControl, identifier, maxLength, rlsTheme } = props;
+    const { onValue } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
+    const valueSource = formControl?.value ?? props.value;
+    const [valueLength, setValueLength] = useState(() => {
+        return (valueSource ?? '').length;
+    });
+    useEffect(() => {
+        if (valueSource !== undefined) {
+            setValueLength(valueSource.length);
+        }
+    }, [valueSource]);
+    const onValueArea = useCallback((value) => {
+        setValueLength(value.length);
+        onValue?.(value);
+    }, [onValue]);
     const className = renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
         focused: formControl?.focused && !disabled,
         readonly: props.readOnly
     }, 'rls-field-area');
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props, onValue: onValueArea }) }) }), props.counter && (jsxRuntimeExports.jsx("span", { className: "rls-field-box__helper rls-field-area__counter", children: maxLength ? `${valueLength} / ${maxLength}` : valueLength })), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldArea = memo(RlsFieldAreaComponent);