@rahmatsaputra-my-id/react-js-library 0.0.16 → 0.0.18

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

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

package/dist/constants/Images/Images.types.d.ts

@@ -8,6 +8,8 @@ export interface IIconOption {
     edit?: string;
     exit?: string;
     filter?: string;
+    flag_english?: string;
+    flag_indonesia?: string;
     flash_off?: string;
     flash_on?: string;
     history_transaction?: string;

package/dist/index.es.js

@@ -420,6 +420,8 @@ var Icons = {
     edit: "".concat(PATH.IMAGE, "/icon-edit.png"),
     exit: "".concat(PATH.IMAGE, "/icon-exit.png"),
     filter: "".concat(PATH.IMAGE, "/icon-filter.png"),
+    flag_english: "".concat(PATH.PERSONAL_WEB, "/icon/icon_flag_united_states.png"),
+    flag_indonesia: "".concat(PATH.PERSONAL_WEB, "/icon/icon_flag_indonesia.png"),
     flash_off: "".concat(PATH.IMAGE, "/icon-flash-off.png"),
     flash_on: "".concat(PATH.IMAGE, "/icon-flash-on.png"),
     history_transaction: "".concat(PATH.IMAGE, "/icon-history-transaction.png"),
@@ -30215,8 +30217,9 @@ 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, _s = _a.isInputRupiah, isInputRupiah = _s === void 0 ? false : _s, props = __rest(_a, ["borderColor", "borderRadius", "bottom", "center", "label", "labelError", "left", "multiline", "padding", "right", "rows", "style", "styleLabel", "styleTextInput", "top", "value", "onChange", "handleOnScanQr", "isInputRupiah"]);
-    var _t = useState(false), isScannerVisible = _t[0], setIsScannerVisible = _t[1];
+    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 '';
@@ -30227,6 +30230,13 @@ var TextInput = function (_a) {
     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);
@@ -30237,9 +30247,23 @@ var TextInput = function (_a) {
             onChange(event);
         }
     };
-    var adjustedStyleTextInput = __assign(__assign({}, styleTextInput), { paddingRight: handleOnScanQr ? 40 : styleTextInput.paddingRight });
+    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: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) : (jsx("input", __assign({ type: "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
+    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();