@rahmatsaputra-my-id/react-js-library 0.0.29 → 0.0.57

package/dist/components/ImageInput/ImageInput.component.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { ImageInputProps } from './ImageInput.component.types';
+import React from 'react';
 declare const ImageInput: React.FC<ImageInputProps>;
 export default ImageInput;

package/dist/components/ImageInput/ImageInput.component.types.d.ts

@@ -1,9 +1,10 @@
 export interface ImageInputProps {
     label?: string;
     subLabel?: string;
-    imageUrl?: string;
+    imageUrl?: string | null;
+    handleOnUpload: () => void;
+    handleOnPreview: () => void;
     containerStyle?: any;
     isMandatory?: boolean;
     isEditAble?: boolean;
-    handleOnPickImage: () => void;
 }

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

@@ -1,4 +1,4 @@
 export interface ILoadingSpinnerProps {
-    loadingType?: 'page' | 'section' | 'section-s' | 'component' | boolean;
+    loadingType?: 'page' | 'section' | boolean;
     loadingIcon?: string;
 }

package/dist/components/NoRecord/NoRecord.component.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { INoRecordProps } from './NoRecord.types';
-declare const NoRecord: ({ title, style, ...props }: INoRecordProps) => JSX.Element;
+declare const NoRecord: ({ children, style, ...props }: INoRecordProps) => JSX.Element;
 export default NoRecord;

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from "react";
 export interface INoRecordProps {
-    title?: string;
+    children?: any;
     style?: CSSProperties;
 }

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

@@ -14,14 +14,11 @@ 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/components/TouchableOpacity/TouchableOpacity.component.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
 import { ITouchableOpacityProps } from './TouchableOpacity.types';
-declare const TouchableOpacity: ({ children, onPress, style, disabled, ...props }: ITouchableOpacityProps & {
-    disabled?: boolean | undefined;
-}) => JSX.Element | null;
+declare const TouchableOpacity: ({ children, onPress, style, ...props }: ITouchableOpacityProps) => JSX.Element | null;
 export default TouchableOpacity;

package/dist/constants/Colors/Color.types.d.ts

@@ -54,12 +54,6 @@ export interface IColorsOption {
     orange50?: '#FFD8A1';
     palePeach?: '#FFD6A2';
     pink?: '#F2EBEC';
-    pink1?: '#F9DFDE';
-    pink2?: '#F09EA9';
-    pink3?: '#EE869F';
-    pink4?: '#EB6190';
-    pink5?: '#A73775';
-    pink6?: '#6F1C5B';
     platinum?: '#E9E4E4';
     red?: '#D45757';
     red100?: '#FF4C47';

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

@@ -2,36 +2,23 @@ export interface IIconOption {
     arrow_right_thin?: string;
     arrow_right?: string;
     camera?: string;
-    cart?: string;
-    checklist_success?: string;
     close?: string;
     edit?: string;
     exit?: string;
-    filter?: string;
-    flag_english?: string;
-    flag_indonesia?: string;
     flash_off?: string;
     flash_on?: string;
-    history_transaction?: string;
     image_not_available: string;
     information?: string;
     langugage?: string;
-    list?: string;
-    love_empty?: string;
-    love_filled?: string;
-    member?: string;
     more?: string;
     printer?: string;
-    privilege?: string;
     question?: string;
-    role_privilege?: string;
-    role?: string;
     rotate?: string;
     scan_qr?: string;
     send?: string;
     support?: string;
     tax?: string;
     terms_and_conditions?: string;
-    wallet?: string;
-    bulk_product?: string;
+    love_empty?: string;
+    love_filled?: string;
 }

package/dist/index.es.js

@@ -198,13 +198,12 @@ var styles$e = {
 };
 
 var TouchableOpacity = function (_a) {
-    var children = _a.children, onPress = _a.onPress, style = _a.style, _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["children", "onPress", "style", "disabled"]);
-    var handleOnPress = function (event) {
-        if (!disabled && onPress) {
-            onPress(event);
-        }
+    var children = _a.children, onPress = _a.onPress, style = _a.style, props = __rest(_a, ["children", "onPress", "style"]);
+    var handleOnPress = function () {
+        if (onPress)
+            onPress();
     };
-    return (jsx("div", __assign({ onClick: handleOnPress, style: __assign(__assign(__assign({}, styles$e.content), style), { opacity: disabled ? 0.5 : 1, pointerEvents: disabled ? 'none' : 'auto' }) }, props, { children: children })));
+    return (jsx("div", __assign({ onClick: handleOnPress, style: __assign(__assign({}, styles$e.content), style) }, props, { children: children })));
 };
 
 var Colors = {
@@ -262,12 +261,6 @@ var Colors = {
     orange50: '#FFD8A1',
     palePeach: '#FFD6A2',
     pink: '#F2EBEC',
-    pink1: '#F9DFDE',
-    pink2: '#F09EA9',
-    pink3: '#EE869F',
-    pink4: '#EB6190',
-    pink5: '#A73775',
-    pink6: '#6F1C5B',
     platinum: '#E9E4E4',
     red: '#D45757',
     red100: '#FF4C47',
@@ -421,38 +414,25 @@ var Icons = {
     arrow_right_thin: "".concat(PATH.IMAGE, "/icon-arrow-right-thin.png"),
     arrow_right: "".concat(PATH.IMAGE, "/icon-arrow-right.png"),
     camera: "".concat(PATH.IMAGE, "/icon-camera.png"),
-    cart: "".concat(PATH.IMAGE, "/icon-cart.png"),
-    checklist_success: "".concat(PATH.IMAGE, "/icon-checklist-success.png"),
     close: "".concat(PATH.WEDDING, "/icon-close.png"),
     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"),
     image_not_available: "".concat(PATH.PERSONAL_WEB, "/image-not-available.png"),
     information: "".concat(PATH.IMAGE, "/icon-information.png"),
     langugage: "".concat(PATH.IMAGE, "/icon-language.png"),
-    list: "".concat(PATH.IMAGE, "/icon-list.png"),
-    love_empty: "".concat(PATH.IMAGE, "/icon-love-empty.png"),
-    love_filled: "".concat(PATH.IMAGE, "/icon-love-filled.png"),
-    member: "".concat(PATH.IMAGE, "/icon-member.png"),
     more: "".concat(PATH.IMAGE, "/icon-more.png"),
     printer: "".concat(PATH.IMAGE, "/icon-printer.png"),
-    privilege: "".concat(PATH.IMAGE, "/icon-privilege.png"),
     question: "".concat(PATH.IMAGE, "/icon-question.png"),
-    role_privilege: "".concat(PATH.IMAGE, "/icon-role-privilege.png"),
-    role: "".concat(PATH.IMAGE, "/icon-role.png"),
     rotate: "".concat(PATH.IMAGE, "/icon-rotate.png"),
     scan_qr: "".concat(PATH.IMAGE, "/icon-scan-qr.png"),
     send: "".concat(PATH.IMAGE, "/icon-send.png"),
     support: "".concat(PATH.IMAGE, "/icon-support.png"),
     tax: "".concat(PATH.IMAGE, "/icon-tax.png"),
     terms_and_conditions: "".concat(PATH.IMAGE, "/icon-terms-and-conditions.png"),
-    wallet: "".concat(PATH.IMAGE, "/icon-wallet.png"),
-    bulk_product: "".concat(PATH.IMAGE, "/icon-bulk-product.png"),
+    love_empty: "".concat(PATH.IMAGE, "/icon-love-empty.png"),
+    love_filled: "".concat(PATH.IMAGE, "/icon-love-filled.png"),
 };
 
 var Images = function (_a) {
@@ -853,7 +833,7 @@ var Text = function (_a) {
 };
 
 var BottomSheetPhoto = function (_a) {
-    var visible = _a.visible, onClose = _a.onClose, _b = _a.title, title = _b === void 0 ? 'Pilihan' : _b, onUploadBase64 = _a.onUploadBase64;
+    var visible = _a.visible, onClose = _a.onClose, _b = _a.title, title = _b === void 0 ? '' : _b, onUploadBase64 = _a.onUploadBase64;
     var fileInputRef = useRef(null);
     var _c = useState(false), cameraVisible = _c[0], setCameraVisible = _c[1];
     var _d = useState(20), paddingBottom = _d[0], setPaddingBottom = _d[1];
@@ -1006,22 +986,19 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-spinner {\n  width: 15px;\n  height: 15px;\n  /* Light grey */\n  border: 4px solid #ffffff;\n  /* Black */\n  border-top: 4px solid #000000;\n  border-radius: 50%;\n  animation: spinner 1s linear infinite;\n}\n\n.loading-spinner-section {\n  width: 120px;\n  height: 120px;\n  /* Light grey */\n  border: 15px solid rgb(220, 220, 226);\n  /* Black */\n  border-top: 15px solid #000000;\n  border-radius: 50%;\n  animation: spinner 1.5s linear infinite;\n}\n\n.loading-spinner-section-s {\n  width: 60px;\n  height: 60px;\n  /* Light grey */\n  border: 10px solid rgb(220, 220, 226);\n  /* Black */\n  border-top: 10px solid #000000;\n  border-radius: 50%;\n  animation: spinner 1.5s linear infinite;\n}\n\n.loading-spinner-pages {\n  width: 130px;\n  height: 130px;\n  border: 20px solid rgb(220, 220, 226);\n  border-top: 20px solid #000000;\n  border-radius: 50%;\n  animation: spinner 1.5s linear infinite;\n}\n";
+var css_248z = "@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-spinner {\n  width: 15px;\n  height: 15px;\n  /* Light grey */\n  border: 4px solid #ffffff;\n  /* Black */\n  border-top: 4px solid #000000;\n  border-radius: 50%;\n  animation: spinner 1s linear infinite;\n}\n\n.loading-spinner-section {\n  width: 120px;\n  height: 120px;\n  /* Light grey */\n  border: 15px solid rgb(220, 220, 226);\n  /* Black */\n  border-top: 15px solid #000000;\n  border-radius: 50%;\n  animation: spinner 1.5s linear infinite;\n}\n\n.loading-spinner-pages {\n  width: 130px;\n  height: 130px;\n  border: 20px solid rgb(220, 220, 226);\n  border-top: 20px solid #000000;\n  border-radius: 50%;\n  animation: spinner 1.5s linear infinite;\n}\n";
 styleInject(css_248z);
 
 var LoadingSpinner = function (_a) {
     var _b = _a.loadingType, loadingType = _b === void 0 ? false : _b, _c = _a.loadingIcon, loadingIcon = _c === void 0 ? '' : _c;
-    var renderSpinnerComponent = function () { return jsx("div", { className: "loading-spinner" }); };
-    var renderSpinnerSection = function () { return (jsx(View, __assign({ style: styles$a.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section" }) }))); };
-    var renderSpinnerSectionS = function () { return (jsx(View, __assign({ style: styles$a.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section-s" }) }))); };
-    var renderSpinnerPage = function () { return (jsx(View, __assign({ style: styles$a.loadingSpinnerPageContainer }, { children: jsxs(View, __assign({ style: styles$a.loadingSpinnerPageContent }, { children: [jsx("div", { className: "loading-spinner-pages" }), loadingIcon ? (jsx("img", { style: styles$a.loadingIcon, src: loadingIcon, alt: '' })) : null] })) }))); };
+    var _renderSpinnerComponent = function () { return jsx("div", { className: "loading-spinner" }); };
+    var _renderSpinnerSection = function () { return (jsx(View, __assign({ style: styles$a.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section" }) }))); };
+    var _renderSpinnerPage = function () { return (jsx(View, __assign({ style: styles$a.loadingSpinnerPageContainer }, { children: jsxs(View, __assign({ style: styles$a.loadingSpinnerPageContent }, { children: [jsx("div", { className: "loading-spinner-pages" }), loadingIcon ? (jsx("img", { style: styles$a.loadingIcon, src: loadingIcon, alt: '' })) : null] })) }))); };
     return (jsx(Fragment, { children: loadingType === 'page'
-            ? renderSpinnerPage()
+            ? _renderSpinnerPage()
             : loadingType === 'section'
-                ? renderSpinnerSection()
-                : loadingType === 'section-s'
-                    ? renderSpinnerSectionS()
-                    : renderSpinnerComponent() }));
+                ? _renderSpinnerSection()
+                : _renderSpinnerComponent() }));
 };
 
 var Button = function (_a) {
@@ -1192,6 +1169,12 @@ var styles$7 = {
     },
 };
 
+var ImageInput = function (_a) {
+    var label = _a.label, subLabel = _a.subLabel, _b = _a.imageUrl, imageUrl = _b === void 0 ? null : _b, handleOnUpload = _a.handleOnUpload, handleOnPreview = _a.handleOnPreview, containerStyle = _a.containerStyle, _c = _a.isMandatory, isMandatory = _c === void 0 ? false : _c, _d = _a.isEditAble, isEditAble = _d === void 0 ? false : _d;
+    var renderScreen = function () { return (jsxs(View, __assign({ style: __assign(__assign({}, styles$7.container), containerStyle) }, { children: [jsx(TouchableOpacity, __assign({ style: styles$7.containerImage, onPress: imageUrl ? handleOnPreview : handleOnUpload }, { children: jsx(Images, { src: imageUrl ? imageUrl : Icons.camera, style: imageUrl ? styles$7.image : styles$7.iconCamera }) })), jsxs(View, __assign({ style: styles$7.containerText }, { children: [label && (jsx(Text, __assign({ type: "bold_16", style: styles$7.label }, { children: label }))), subLabel && jsx(Text, { children: subLabel }), isMandatory && jsx(Text, __assign({ type: "normal_14_red" }, { children: '*Wajib' }))] })), isEditAble && imageUrl && (jsx(TouchableOpacity, __assign({ onPress: handleOnUpload }, { children: jsx(Images, { src: Icons.edit, style: styles$7.iconEdit }) })))] }))); };
+    return renderScreen();
+};
+
 var styles$6 = {
     backdrop: {
         position: 'fixed',
@@ -1250,23 +1233,6 @@ var PhotoPreviewModal = function (_a) {
                 }, style: styles$6.image })) : (jsx("p", __assign({ style: styles$6.noImageContainer }, { children: "No image provided" }))) })) })), document.body);
 };
 
-var ImageInput = function (_a) {
-    var label = _a.label, subLabel = _a.subLabel, _b = _a.imageUrl, imageUrl = _b === void 0 ? null : _b, containerStyle = _a.containerStyle, _c = _a.isMandatory, isMandatory = _c === void 0 ? false : _c, _d = _a.isEditAble, isEditAble = _d === void 0 ? false : _d, _e = _a.handleOnPickImage, handleOnPickImage = _e === void 0 ? function (_base64) { } : _e;
-    var _f = useState(imageUrl !== null && imageUrl !== void 0 ? imageUrl : undefined), imagePreview = _f[0], setImagePreview = _f[1];
-    var _g = useState(false), isVisibleBottomSheet = _g[0], setIsVisibleBottomSheet = _g[1];
-    var _h = useState(false), isPreviewVisible = _h[0], setIsPreviewVisible = _h[1];
-    var handleOnUpload = function () { return setIsVisibleBottomSheet(true); };
-    var handleOnPreview = function () { return setIsPreviewVisible(true); };
-    return (jsxs(View, __assign({ style: __assign(__assign({}, styles$7.container), containerStyle) }, { children: [jsx(TouchableOpacity, __assign({ style: styles$7.containerImage, onPress: imagePreview ? handleOnPreview : handleOnUpload }, { children: jsx(Images, { src: imagePreview ? imagePreview : Icons.camera, style: imagePreview ? styles$7.image : styles$7.iconCamera }) })), jsxs(View, __assign({ style: styles$7.containerText }, { children: [label && (jsx(Text, __assign({ type: "bold_16", style: styles$7.label }, { children: label }))), subLabel && jsx(Text, { children: subLabel }), isMandatory && jsx(Text, __assign({ type: "normal_14_red" }, { children: '*Wajib' }))] })), isEditAble && imagePreview && (jsx(TouchableOpacity, __assign({ onPress: handleOnUpload }, { children: jsx(Images, { src: Icons.edit, style: styles$7.iconEdit }) }))), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, onUploadBase64: function (base64) {
-                    if (typeof base64 === 'string') {
-                        setImagePreview(base64);
-                        if (typeof handleOnPickImage === 'function') {
-                            handleOnPickImage(base64);
-                        }
-                    }
-                } })] })));
-};
-
 var styles$5 = {
     sliderContainer: {
         position: 'relative',
@@ -1475,28 +1441,24 @@ var MultipleImageInput = function (_a) {
             setImages(initialImages);
         }
     }, [arrImage]);
-    useEffect(function () {
-        var timeout = setTimeout(function () {
-            handleSelectedImages === null || handleSelectedImages === void 0 ? void 0 : handleSelectedImages(images.map(function (i) { return ({ file: i.file }); }));
-        }, 0);
-        return function () { return clearTimeout(timeout); };
-    }, [images]);
-    var handleChange = function (base64) { return __awaiter$1(void 0, void 0, void 0, function () {
-        var newImage;
+    var handleChange = function (e) { return __awaiter$1(void 0, void 0, void 0, function () {
+        var newImages;
         return __generator$1(this, function (_a) {
-            newImage = { file: base64, src: base64 };
-            setImages(function (prev) {
-                var combined = __spreadArray(__spreadArray([], prev, true), [newImage], false);
+            newImages = [{ file: e }];
+            setImages(function (prevImages) {
+                var combined = __spreadArray(__spreadArray([], prevImages, true), newImages, true);
                 var unique = combined.filter(function (img, idx) { return combined.findIndex(function (i) { return i.src === img.src; }) === idx; });
+                handleSelectedImages(unique.map(function (i) { return ({ file: i.file }); }));
                 return unique;
             });
             return [2 /*return*/];
         });
     }); };
     var removeImage = function (index) {
-        setImages(function (prev) {
-            var updated = __spreadArray([], prev, true);
+        setImages(function (prevImages) {
+            var updated = __spreadArray([], prevImages, true);
             updated.splice(index, 1);
+            handleSelectedImages === null || handleSelectedImages === void 0 ? void 0 : handleSelectedImages(updated.map(function (i) { return ({ file: i.file }); }));
             return updated;
         });
     };
@@ -1522,8 +1484,8 @@ var styles$3 = {
 };
 
 var NoRecord = function (_a) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? {} : _b, props = __rest(_a, ["title", "style"]);
-    return (jsx(View, __assign({ style: __assign(__assign({}, styles$3.container), style) }, props, { children: jsx(Text, { children: title !== null && title !== void 0 ? title : 'No Record Found' }) })));
+    _a.children; var _b = _a.style, style = _b === void 0 ? {} : _b, props = __rest(_a, ["children", "style"]);
+    return (jsx(View, __assign({ style: __assign(__assign({}, styles$3.container), style) }, props, { children: jsx(Text, { children: 'No Record Found' }) })));
 };
 
 var styles$2 = {
@@ -30248,53 +30210,12 @@ 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 ? 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 _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 stylesTextInput = __assign(__assign({ borderColor: borderColor, borderRadius: borderRadius, textAlign: center ? 'center' : 'left', paddingBottom: multiline ? 16 : 8 }, styles.textArea), adjustedStyleTextInput);
-    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
+    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
                             ? styles.scanQrImageContainerWithLabel
                             : styles.scanQrImageContainer, onPress: function () {
                             handleOnScanQr();