@rahmatsaputra-my-id/react-js-library 0.0.15 → 0.0.17

package/dist/components/TextInput/TextInput.types.d.ts

@@ -14,11 +14,14 @@ export interface ITextInputProps {
     placeholder?: string;
     right?: number;
     rows?: number;
+    maxRows?: number;
     style?: any;
     styleLabel?: any;
     styleTextInput?: any;
     top?: number;
     type?: string;
     value?: any;
+    isInputRupiah?: boolean;
+    isInputNumber?: boolean;
     handleOnScanQr?: (data?: string | null) => void;
 }

package/dist/index.es.js

@@ -30215,12 +30215,53 @@ var styles = {
 };
 
 var TextInput = function (_a) {
-    var _b = _a.borderColor, borderColor = _b === void 0 ? Colors.grey2 : _b, _c = _a.borderRadius, borderRadius = _c === void 0 ? 4 : _c, _d = _a.bottom, bottom = _d === void 0 ? 0 : _d, _e = _a.center, center = _e === void 0 ? false : _e, _f = _a.label, label = _f === void 0 ? false : _f, _g = _a.labelError, labelError = _g === void 0 ? false : _g, _h = _a.left, left = _h === void 0 ? 0 : _h, _j = _a.multiline, multiline = _j === void 0 ? false : _j, _k = _a.padding, padding = _k === void 0 ? 0 : _k, _l = _a.right, right = _l === void 0 ? 0 : _l, _m = _a.rows, rows = _m === void 0 ? 10 : _m, _o = _a.style, style = _o === void 0 ? {} : _o, _p = _a.styleLabel, styleLabel = _p === void 0 ? {} : _p, _q = _a.styleTextInput, styleTextInput = _q === void 0 ? {} : _q, _r = _a.top, top = _r === void 0 ? 0 : _r, value = _a.value, onChange = _a.onChange, handleOnScanQr = _a.handleOnScanQr, props = __rest(_a, ["borderColor", "borderRadius", "bottom", "center", "label", "labelError", "left", "multiline", "padding", "right", "rows", "style", "styleLabel", "styleTextInput", "top", "value", "onChange", "handleOnScanQr"]);
-    var _s = useState(false), isScannerVisible = _s[0], setIsScannerVisible = _s[1];
-    // Add paddingRight if QR scanner button exists
-    var adjustedStyleTextInput = __assign(__assign({}, styleTextInput), { paddingRight: handleOnScanQr ? 40 : styleTextInput.paddingRight });
+    var _b = _a.borderColor, borderColor = _b === void 0 ? Colors.grey2 : _b, _c = _a.borderRadius, borderRadius = _c === void 0 ? 4 : _c, _d = _a.bottom, bottom = _d === void 0 ? 0 : _d, _e = _a.center, center = _e === void 0 ? false : _e, _f = _a.label, label = _f === void 0 ? false : _f, _g = _a.labelError, labelError = _g === void 0 ? false : _g, _h = _a.left, left = _h === void 0 ? 0 : _h, _j = _a.multiline, multiline = _j === void 0 ? false : _j, _k = _a.padding, padding = _k === void 0 ? 0 : _k, _l = _a.right, right = _l === void 0 ? 0 : _l, _m = _a.rows, rows = _m === void 0 ? 1 : _m, _o = _a.maxRows, maxRows = _o === void 0 ? 4 : _o, _p = _a.style, style = _p === void 0 ? {} : _p, _q = _a.styleLabel, styleLabel = _q === void 0 ? {} : _q, _r = _a.styleTextInput, styleTextInput = _r === void 0 ? {} : _r, _s = _a.top, top = _s === void 0 ? 0 : _s, value = _a.value, onChange = _a.onChange, handleOnScanQr = _a.handleOnScanQr, _t = _a.isInputRupiah, isInputRupiah = _t === void 0 ? false : _t, _u = _a.isInputNumber, isInputNumber = _u === void 0 ? false : _u, props = __rest(_a, ["borderColor", "borderRadius", "bottom", "center", "label", "labelError", "left", "multiline", "padding", "right", "rows", "maxRows", "style", "styleLabel", "styleTextInput", "top", "value", "onChange", "handleOnScanQr", "isInputRupiah", "isInputNumber"]);
+    var _v = useState(false), isScannerVisible = _v[0], setIsScannerVisible = _v[1];
+    var textAreaRef = useRef(null);
+    var formatRupiahDisplay = function (val) {
+        if (!val)
+            return '';
+        var clean = val.toString().replace(/\D/g, '');
+        return clean.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    };
+    var parseRupiahValue = function (val) { return val.toString().replace(/\D/g, ''); };
+    var handleChange = function (event) {
+        var _a;
+        var inputVal = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) || '';
+        if (isInputNumber) {
+            inputVal = inputVal.replace(/\D/g, '');
+            event.target.value = inputVal;
+        }
+        if (multiline && textAreaRef.current) {
+            autoResize(textAreaRef.current);
+        }
+        if (isInputRupiah) {
+            var numericVal = parseRupiahValue(inputVal);
+            var formatted = formatRupiahDisplay(numericVal);
+            event.target.value = formatted;
+            onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: numericVal }) }));
+        }
+        else {
+            onChange(event);
+        }
+    };
+    var autoResize = function (el) {
+        el.style.height = 'auto';
+        var lineHeight = parseInt(window.getComputedStyle(el).lineHeight || '20', 10);
+        var maxHeight = lineHeight * maxRows;
+        var newHeight = Math.min(el.scrollHeight, maxHeight);
+        el.style.height = "".concat(newHeight, "px");
+        el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+    };
+    useEffect(function () {
+        if (multiline && textAreaRef.current) {
+            autoResize(textAreaRef.current);
+        }
+    }, [value, multiline]);
+    var adjustedStyleTextInput = __assign(__assign({}, styleTextInput), { paddingRight: handleOnScanQr ? 40 : styleTextInput.paddingRight, resize: 'none' });
     var stylesTextInput = __assign(__assign({ borderColor: borderColor, borderRadius: borderRadius, textAlign: center ? 'center' : 'left', paddingBottom: multiline ? 16 : 8 }, styles.textArea), adjustedStyleTextInput);
-    return (jsxs(Fragment, { children: [jsxs(View, __assign({ style: styles.container }, { children: [jsxs(View, __assign({ style: __assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, padding: padding }, style) }, { children: [label && (jsx(Text, { style: __assign(__assign({}, styles.label), styleLabel), children: label })), jsx(View, { children: multiline ? (jsx("textarea", __assign({ rows: rows, type: 'text', style: stylesTextInput, value: value, onChange: onChange }, props))) : (jsx("input", __assign({ type: 'text', value: value, onChange: onChange, style: stylesTextInput }, props))) }), labelError ? (jsx(Text, { style: styles.labelError, children: labelError })) : null] })), handleOnScanQr && (jsx(TouchableOpacity, __assign({ style: label
+    var inputType = isInputRupiah || isInputNumber ? 'tel' : 'text';
+    return (jsxs(Fragment, { children: [jsxs(View, __assign({ style: styles.container }, { children: [jsxs(View, __assign({ style: __assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, padding: padding }, style) }, { children: [label && (jsx(Text, { style: __assign(__assign({}, styles.label), styleLabel), children: label })), jsx(View, { children: multiline ? (jsx("textarea", __assign({ ref: textAreaRef, rows: rows, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) : (jsx("input", __assign({ type: inputType, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) }), labelError ? (jsx(Text, { style: styles.labelError, children: labelError })) : null] })), handleOnScanQr && (jsx(TouchableOpacity, __assign({ style: label
                             ? styles.scanQrImageContainerWithLabel
                             : styles.scanQrImageContainer, onPress: function () {
                             handleOnScanQr();