sapo-components-ui-rn 1.1.96 → 1.1.98

package/dist/components/NumberKeyboard/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ViewStyle, StyleProp } from 'react-native';
+import React from "react";
+import { ViewStyle, StyleProp } from "react-native";
 export interface NumberKeyboardProps {
     /** Giá trị hiện tại của input */
     value?: string | number;
@@ -12,7 +12,7 @@ export interface NumberKeyboardProps {
     /** Giá trị tối thiểu cho phép */
     minValue?: number;
     /** Loại input: integer hoặc float */
-    type?: 'integer' | 'float';
+    type?: "integer" | "float";
     /** Số chữ số thập phân cho phép */
     formatDecimal?: 1 | 2 | 3;
     /** Trạng thái hiển thị modal */

package/dist/index.esm.js

@@ -5394,7 +5394,7 @@ function formatNumberInput$1(value, formatDecimal) {
         result = "-" + result;
     return result;
 }
-function formatShowInput(value, formatDecimal) {
+function formatShowInput$1(value, formatDecimal) {
     if (!value)
         return "";
     if (value === "")
@@ -5755,7 +5755,7 @@ var TextInputNumber = function (_a) {
             finalValue = inputValue.slice(0, -1);
         }
         if (formatDecimal) {
-            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(formatShowInput(finalValue, formatDecimal));
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(formatShowInput$1(finalValue, formatDecimal));
         }
         else {
             onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(finalValue);
@@ -7336,40 +7336,50 @@ var styles$1 = StyleSheet.create(__assign({}, containerStyles));
 
 var formatNumberInput = function (value, formatDecimal) {
     if (!value)
-        return '';
-    if (value === '')
-        return '';
-    // Xử lý số âm
-    var isNegative = value.startsWith('-');
-    var _a = value.replace(/[^0-9.]/g, '').split('.'), intPart = _a[0], decimalPart = _a[1];
-    // Format phần nguyên
-    intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    // Giới hạn phần thập phân 3 số
+        return "";
+    if (value === "")
+        return "";
+    var isNegative = value.startsWith("-");
+    var _a = value.replace(/[^0-9.]/g, "").split("."), intPart = _a[0], decimalPart = _a[1];
+    intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    if (decimalPart)
+        decimalPart = decimalPart.slice(0, formatDecimal);
+    var result = intPart;
+    if (decimalPart !== undefined)
+        result += "." + decimalPart;
+    if (isNegative)
+        result = "-" + result;
+    return result;
+};
+var formatShowInput = function (value, formatDecimal) {
+    if (!value)
+        return "";
+    if (value === "")
+        return "";
+    var isNegative = value.startsWith("-");
+    var _a = value.replace(/[^0-9.]/g, "").split("."), intPart = _a[0], decimalPart = _a[1];
+    intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, "");
     if (decimalPart)
         decimalPart = decimalPart.slice(0, formatDecimal);
     var result = intPart;
     if (decimalPart !== undefined)
-        result += '.' + decimalPart;
+        result += "." + decimalPart;
     if (isNegative)
-        result = '-' + result;
+        result = "-" + result;
     return result;
 };
 var NumberKeyboard = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, onChangeText = _a.onChangeText, _d = _a.maxValue, maxValue = _d === void 0 ? 999999999999 : _d, _e = _a.minValue, minValue = _e === void 0 ? 0 : _e, _f = _a.type, type = _f === void 0 ? 'integer' : _f, _g = _a.formatDecimal, formatDecimal = _g === void 0 ? 3 : _g, visible = _a.visible, onClose = _a.onClose, keyboardStyle = _a.keyboardStyle;
+    var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, onChangeText = _a.onChangeText, _d = _a.maxValue, maxValue = _d === void 0 ? 999999999999 : _d, _e = _a.minValue, minValue = _e === void 0 ? 0 : _e, _f = _a.type, type = _f === void 0 ? "integer" : _f, _g = _a.formatDecimal, formatDecimal = _g === void 0 ? 3 : _g, visible = _a.visible, onClose = _a.onClose, keyboardStyle = _a.keyboardStyle;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var _h = useState((value === null || value === void 0 ? void 0 : value.toString()) || ''), inputValue = _h[0], setInputValue = _h[1];
+    var _h = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _h[0], setInputValue = _h[1];
     var _j = useState(true), isFirstInput = _j[0], setIsFirstInput = _j[1];
     var _k = useState(true), canSave = _k[0], setCanSave = _k[1];
     useEffect(function () {
         if (visible) {
-            var newValue = (value === null || value === void 0 ? void 0 : value.toString()) || '';
+            var newValue = (value === null || value === void 0 ? void 0 : value.toString()) || "";
             setInputValue(newValue);
-            // Logic mới: Không reset về trạng thái nhập mới khi đã có giá trị
-            // Chỉ set isFirstInput = true khi newValue rỗng hoặc chỉ có dấu trừ
-            // Điều này cho phép người dùng tiếp tục nhập từ giá trị hiện tại
-            // Ví dụ: value=999, người dùng có thể nhập "000" để tạo "999000"
-            if (newValue === '' || newValue === '-') {
+            if (newValue === "" || newValue === "-") {
                 setIsFirstInput(true);
             }
             else {
@@ -7381,68 +7391,71 @@ var NumberKeyboard = function (_a) {
         var currentValue = Number(inputValue);
         var minValueNumber = Number(minValue);
         var maxValueNumber = Number(maxValue);
-        // Kiểm tra canSave với logic mới để hỗ trợ số âm
-        // Ví dụ: value=-100, maxValue=999999999999, minValue=0
-        // -100 < 0 (minValue) nhưng |-100| = 100 <= 999999999999 (maxValue) → canSave = true
         var isValid = false;
         if (!isNaN(currentValue) &&
             !isNaN(minValueNumber) &&
             !isNaN(maxValueNumber)) {
             if (currentValue < 0) {
-                // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
-                // và giá trị không nhỏ hơn minValue (nếu minValue cũng là số âm)
                 var absCurrent = Math.abs(currentValue);
                 var absMaxValue = Math.abs(maxValueNumber);
                 if (minValueNumber < 0) {
-                    // Nếu minValue cũng là số âm, kiểm tra currentValue >= minValue
                     isValid = currentValue >= minValueNumber && absCurrent <= absMaxValue;
                 }
                 else {
-                    // Nếu minValue là số dương hoặc 0, chỉ kiểm tra giá trị tuyệt đối
-                    // Điều này cho phép số âm luôn được lưu nếu không vượt quá maxValue
                     isValid = absCurrent <= absMaxValue;
                 }
             }
             else {
-                // Với số dương, kiểm tra bình thường
                 isValid =
                     currentValue >= minValueNumber && currentValue <= maxValueNumber;
             }
         }
         setCanSave(isValid);
     }, [inputValue, minValue, maxValue]);
+    // Integer: chỉ cho phép "000" khi value hiện tại khác 0 (vd: 1→1000).
+    // Rỗng / 0 / chỉ dấu "-" → disable nút 000.
+    var is000Disabled = useMemo(function () {
+        if (type !== "integer") {
+            return true;
+        }
+        if (!inputValue || inputValue === "-") {
+            return true;
+        }
+        var numericValue = Number(inputValue);
+        return isNaN(numericValue) || numericValue === 0;
+    }, [type, inputValue]);
+    // Float: cho phép nhập "0" khi value rỗng, nhưng không cho "00" liên tiếp ở phần nguyên.
+    var is0Disabled = useMemo(function () {
+        if (type !== "float") {
+            return false;
+        }
+        return inputValue === "0" || inputValue === "-0";
+    }, [type, inputValue]);
     var handleKeyPress = function (key) {
-        if (key === 'del') {
+        if (key === "del") {
             setInputValue(function (prev) { return prev.slice(0, -1); });
         }
-        else if (key === '000') {
-            if (type === 'integer') {
-                // Xử lý trường hợp nhập "000" để tạo số lớn hơn
-                // Ví dụ: "1" + "000" = "1000", "10" + "000" = "10000"
-                // Nếu vượt quá maxValue, sẽ tự động cắt bớt số 0
-                // Logic này đảm bảo người dùng có thể tiếp tục nhập số đã được khởi tạo
-                // Ví dụ: value=999, người dùng có thể nhập "000" để tạo "999000"
-                var newInputValue = inputValue + '000';
+        else if (key === "000") {
+            if (type === "integer") {
+                if (is000Disabled) {
+                    return;
+                }
+                var newInputValue = inputValue + "000";
                 var newValue = Number(newInputValue);
                 var maxValueNumber = Number(maxValue);
-                // Kiểm tra nếu giá trị vượt quá maxValue, cắt bớt số 0
                 if (!isNaN(newValue) &&
                     !isNaN(maxValueNumber) &&
                     newValue > maxValueNumber) {
-                    // Tìm số 0 tối đa có thể thêm vào mà không vượt quá maxValue
                     var tempValue = inputValue;
-                    var tempNewValue = Number(tempValue + '000');
-                    // Giảm dần số 0 cho đến khi không vượt quá maxValue
-                    while (tempNewValue > maxValueNumber && tempValue.endsWith('0')) {
+                    var tempNewValue = Number(tempValue + "000");
+                    while (tempNewValue > maxValueNumber && tempValue.endsWith("0")) {
                         tempValue = tempValue.slice(0, -1);
-                        tempNewValue = Number(tempValue + '000');
+                        tempNewValue = Number(tempValue + "000");
                     }
-                    // Nếu vẫn vượt quá, chỉ thêm số 0 có thể
                     if (tempNewValue > maxValueNumber) {
-                        // Tìm số 0 tối đa có thể thêm
                         var maxZeros = 0;
                         for (var i = 1; i <= 3; i++) {
-                            var testValue = Number(inputValue + '0'.repeat(i));
+                            var testValue = Number(inputValue + "0".repeat(i));
                             if (testValue <= maxValueNumber) {
                                 maxZeros = i;
                             }
@@ -7451,20 +7464,18 @@ var NumberKeyboard = function (_a) {
                             }
                         }
                         if (maxZeros > 0) {
-                            newInputValue = inputValue + '0'.repeat(maxZeros);
+                            newInputValue = inputValue + "0".repeat(maxZeros);
                             newValue = Number(newInputValue);
                         }
                         else {
-                            // Không thể thêm số 0 nào
                             return;
                         }
                     }
                     else {
-                        newInputValue = tempValue + '000';
+                        newInputValue = tempValue + "000";
                         newValue = Number(newInputValue);
                     }
                 }
-                // Kiểm tra xem có thể nhập được không sau khi xử lý "000"
                 if (!isNaN(newValue) &&
                     !isNaN(maxValueNumber) &&
                     newValue <= maxValueNumber) {
@@ -7472,84 +7483,72 @@ var NumberKeyboard = function (_a) {
                 }
                 setIsFirstInput(false);
             }
-            // Nếu type là float, không cho phép nhập "000" ở đầu
         }
-        else if (key === '.') {
-            if (!inputValue.includes('.')) {
-                // Nếu inputValue là "0" hoặc rỗng, giữ lại số 0 và thêm dấu "."
-                if (inputValue === '0' || inputValue === '') {
-                    setInputValue('0.');
+        else if (key === ".") {
+            if (!inputValue.includes(".")) {
+                if (inputValue === "0" || inputValue === "") {
+                    setInputValue("0.");
                 }
-                else if (inputValue === '-') {
-                    // Nếu chỉ có dấu trừ, thêm "0."
-                    setInputValue('-0.');
+                else if (inputValue === "-" || inputValue === "-0") {
+                    setInputValue("-0.");
                 }
                 else {
-                    // Nếu đã có giá trị, thêm dấu "." vào cuối
                     setInputValue(function (prev) { return prev + key; });
                 }
                 setIsFirstInput(false);
             }
         }
         else {
+            if (key === "0" && is0Disabled) {
+                return;
+            }
             if (isFirstInput) {
-                // Nếu type là float và key là "0", không cho phép nhập số 0 đầu tiên
-                if (type === 'float' && key === '000') {
+                if (type === "float" && key === "000") {
                     return;
                 }
-                // Cho phép nhập số 0 đầu tiên cho type float, nhưng không cho phép nhập "000"
-                // Kiểm tra xem có thể nhập được không khi là lần đầu
                 var newValue = Number(key);
                 var maxValueNumber = Number(maxValue);
                 if (!isNaN(newValue) && !isNaN(maxValueNumber)) {
                     var canInput = false;
                     if (newValue < 0) {
-                        // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
                         var absNewValue = Math.abs(newValue);
                         var absMaxValue = Math.abs(maxValueNumber);
                         canInput = absNewValue <= absMaxValue;
                     }
                     else {
-                        // Với số dương, kiểm tra bình thường
                         canInput = newValue <= maxValueNumber;
                     }
                     if (canInput) {
-                        // Nếu inputValue rỗng hoặc chỉ có dấu trừ, thay thế hoàn toàn
-                        if (inputValue === '' || inputValue === '-') {
+                        if (inputValue === "" || inputValue === "-") {
                             setInputValue(key);
                         }
                         else {
-                            // Nếu đã có giá trị, thêm vào cuối
                             setInputValue(inputValue + key);
                         }
                         setIsFirstInput(false);
                     }
                     else {
-                        // Nếu vượt quá maxValue ngay từ đầu, không cho phép nhập
                         return;
                     }
                 }
                 else {
-                    // Nếu inputValue rỗng hoặc chỉ có dấu trừ, thay thế hoàn toàn
-                    if (inputValue === '' || inputValue === '-') {
+                    if (inputValue === "" || inputValue === "-") {
                         setInputValue(key);
                     }
                     else {
-                        // Nếu đã có giá trị, thêm vào cuối
                         setInputValue(inputValue + key);
                     }
                     setIsFirstInput(false);
                 }
             }
             else {
-                // Kiểm tra nếu input bắt đầu bằng 0 và không có dấu chấm
-                if (inputValue === '0') {
-                    if (key === '.') {
-                        setInputValue('0.');
+                if (inputValue === "0" || inputValue === "-0") {
+                    if (key === ".") {
+                        setInputValue(inputValue === "-0" ? "-0." : "0.");
                         return;
                     }
-                    else if (key >= '1' && key <= '9') {
-                        setInputValue(key);
+                    else if (key >= "1" && key <= "9") {
+                        setInputValue(inputValue.startsWith("-") ? "-".concat(key) : key);
                         return;
                     }
                     else {
@@ -7559,90 +7558,68 @@ var NumberKeyboard = function (_a) {
                 var newInputValue = inputValue + key;
                 var newValue = Number(newInputValue);
                 var maxValueNumber = Number(maxValue);
-                // Kiểm tra xem có thể nhập được không
                 var canInput = false;
                 var shouldCheckLength = true;
                 if (!isNaN(newValue) && !isNaN(maxValueNumber)) {
                     if (newValue < 0) {
-                        // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
                         var absNewValue = Math.abs(newValue);
                         var absMaxValue = Math.abs(maxValueNumber);
                         if (absNewValue <= absMaxValue) {
                             canInput = true;
                         }
                         else {
-                            // Nếu vượt quá maxValue, kiểm tra xem có thể nhập được không
-                            // Khi chuỗi nhập chưa có dấu ".", người dùng đang gõ phần
-                            // nguyên nên phải so độ dài với PHẦN NGUYÊN của maxValue.
-                            // Nếu so với cả chuỗi (vd "999999.999" dài 10 ký tự) thì mốc
-                            // chặn dài hơn số chữ số nguyên thật (6), cho gõ tới 9 chữ số.
-                            var maxValueStr = newInputValue.includes('.')
+                            var maxValueStr = newInputValue.includes(".")
                                 ? absMaxValue.toString()
                                 : Math.trunc(absMaxValue).toString();
-                            inputValue.length;
                             var newLength = newInputValue.length;
-                            // Nếu độ dài mới lớn hơn độ dài của maxValue, không cho phép nhập
                             if (newLength > maxValueStr.length) {
                                 return;
                             }
-                            // Nếu độ dài bằng nhau, kiểm tra giá trị
                             if (newLength === maxValueStr.length &&
                                 absNewValue > absMaxValue) {
                                 return;
                             }
-                            // Nếu độ dài nhỏ hơn, có thể nhập được (sẽ kiểm tra khi nhập tiếp)
                             canInput = true;
                             shouldCheckLength = false;
                         }
                     }
                     else {
-                        // Với số dương, kiểm tra bình thường
                         if (newValue <= maxValueNumber) {
                             canInput = true;
                         }
                         else {
-                            // Nếu vượt quá maxValue, kiểm tra xem có thể nhập được không
-                            // Xem giải thích ở nhánh số âm phía trên. Dùng Math.abs trước
-                            // khi trunc để đối xứng với nhánh đó.
-                            var maxValueStr = newInputValue.includes('.')
+                            var maxValueStr = newInputValue.includes(".")
                                 ? maxValueNumber.toString()
                                 : Math.trunc(Math.abs(maxValueNumber)).toString();
-                            inputValue.length;
                             var newLength = newInputValue.length;
-                            // Nếu độ dài mới lớn hơn độ dài của maxValue, không cho phép nhập
                             if (newLength > maxValueStr.length) {
                                 return;
                             }
-                            // Nếu độ dài bằng nhau, kiểm tra giá trị
                             if (newLength === maxValueStr.length &&
                                 newValue > maxValueNumber) {
                                 return;
                             }
-                            // Nếu độ dài nhỏ hơn, có thể nhập được (sẽ kiểm tra khi nhập tiếp)
-                            // Ví dụ: maxValue = 999, inputValue = "99", nhập "9" → "999" (OK)
                             canInput = true;
                             shouldCheckLength = false;
                         }
                     }
                 }
                 if (canInput) {
-                    if (inputValue.includes('.')) {
-                        // Xử lý số thập phân
-                        var _a = inputValue.split('.'); _a[0]; var _b = _a[1], decimalPart = _b === void 0 ? '' : _b;
+                    if (inputValue.includes(".")) {
+                        var _a = inputValue.split("."), _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
                         if (newInputValue.length <= 12 && decimalPart.length === 0) {
                             setInputValue(function (prev) { return prev + key; });
                         }
-                        else if (newInputValue.length <= 12 && decimalPart.length < 3) {
+                        else if (newInputValue.length <= 12 &&
+                            decimalPart.length < formatDecimal) {
                             setInputValue(function (prev) { return prev + key; });
                         }
                     }
                     else {
-                        // Xử lý số nguyên
                         if (shouldCheckLength && newInputValue.length <= 12) {
                             setInputValue(function (prev) { return prev + key; });
                         }
                         else if (!shouldCheckLength) {
-                            // Nếu không cần kiểm tra độ dài (đã kiểm tra maxValue ở trên)
                             setInputValue(function (prev) { return prev + key; });
                         }
                     }
@@ -7651,59 +7628,66 @@ var NumberKeyboard = function (_a) {
         }
     };
     var handleClear = useCallback(function () {
-        setInputValue('');
+        setInputValue("");
         setIsFirstInput(true);
     }, []);
     var handleSave = useCallback(function () {
         var finalValue = inputValue;
-        if (inputValue.endsWith('.')) {
+        if (inputValue.endsWith(".")) {
             finalValue = inputValue.slice(0, -1);
         }
-        // Luôn truyền giá trị gốc (không format) để giữ nguyên dạng số
-        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(finalValue);
+        if (formatDecimal) {
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(formatShowInput(finalValue, formatDecimal));
+        }
+        else {
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(finalValue);
+        }
         onClose();
-    }, [inputValue, onChangeText, onClose]);
+    }, [inputValue, formatDecimal, onChangeText, onClose]);
     var handleClose = useCallback(function () {
         onClose();
         setTimeout(function () {
-            setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || '');
+            setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
         }, 300);
     }, [onClose, value]);
-    return (React__default.createElement(Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: handleClose },
+    return (React__default.createElement(Modal, { visible: visible, transparent: true, animationType: "fade", statusBarTranslucent: true, onRequestClose: handleClose },
         React__default.createElement(TouchableOpacity, { style: styles.modalOverlay, activeOpacity: 1, onPress: handleClose },
             React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: [styles.modalContent, keyboardStyle] },
                 React__default.createElement(Text$1, { style: [styles.text18, styles.modalTitle] }, label),
-                React__default.createElement(View, { width: '100%' },
-                    React__default.createElement(View, { paddingHorizontal: SPACE_40 },
-                        React__default.createElement(Text$1, { numberOfLines: 1, style: [styles.text30, styles.valueText] }, formatNumberInput(inputValue, formatDecimal) || '0')),
+                React__default.createElement(View, { width: "100%", style: styles.valueRow },
+                    React__default.createElement(View, { style: styles.valueTextContainer },
+                        React__default.createElement(Text$1, { numberOfLines: 1, style: [styles.text30, styles.valueText] }, formatNumberInput(inputValue, formatDecimal) || "\u00A0")),
                     React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles.clearButton },
                         React__default.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24, color: colors.textSecondary }))),
                 React__default.createElement(View, { style: styles.keyboardGrid }, [
-                    ['1', '2', '3'],
-                    ['4', '5', '6'],
-                    ['7', '8', '9'],
-                    [type === 'integer' ? '000' : '.', '0', 'del'],
+                    ["1", "2", "3"],
+                    ["4", "5", "6"],
+                    ["7", "8", "9"],
+                    [type === "integer" ? "000" : ".", "0", "del"],
                 ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
                         styles.keyButton,
-                        key === '000' && type === 'float' && styles.disabledKey,
-                        key === '.' &&
-                            inputValue.includes('.') &&
+                        key === "000" && is000Disabled && styles.disabledKey,
+                        key === "0" && is0Disabled && styles.disabledKey,
+                        key === "." &&
+                            inputValue.includes(".") &&
                             styles.disabledKey,
-                    ], onPress: function () { return handleKeyPress(key); }, disabled: (key === '000' && type === 'float') ||
-                        (key === '.' && inputValue.includes('.')) }, key === 'del' ? (React__default.createElement(SvgIcon, { name: "IconDelNumber", width: 24, height: 24 })) : (React__default.createElement(Text$1, { style: [
+                    ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && is000Disabled) ||
+                        (key === "0" && is0Disabled) ||
+                        (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(SvgIcon, { name: "IconDelNumber", width: 24, height: 24, color: colors.textSecondary })) : (React__default.createElement(Text$1, { style: [
                         styles.keyText,
                         styles.text22,
-                        key === '000' &&
-                            type === 'float' &&
+                        key === "000" &&
+                            is000Disabled &&
                             styles.disabledKeyText,
-                        key === '.' &&
-                            inputValue.includes('.') &&
+                        key === "0" && is0Disabled && styles.disabledKeyText,
+                        key === "." &&
+                            inputValue.includes(".") &&
                             styles.disabledKeyText,
                     ] }, key)))); }))); })),
                 React__default.createElement(View, { style: styles.actionRow },
                     React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles.actionButton, onPress: handleClose },
                         React__default.createElement(Text$1, { style: [styles.actionText, styles.text16] }, "\u0110\u00F3ng")),
-                    React__default.createElement(Spacer, { style: { height: '100%' }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
+                    React__default.createElement(Spacer, { style: { height: "100%" }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
                     React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: [styles.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
                         React__default.createElement(Text$1, { style: [
                                 styles.actionText,
@@ -7714,53 +7698,70 @@ var NumberKeyboard = function (_a) {
 };
 var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { modalOverlay: {
         flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'center',
-        alignItems: 'center',
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "center",
+        alignItems: "center",
     }, modalContent: {
         borderRadius: 20,
-        width: '90%',
+        width: "90%",
         paddingBottom: 20,
-        alignItems: 'center',
+        alignItems: "center",
+        overflow: "hidden",
+        zIndex: 1,
     }, modalTitle: {
-        textAlign: 'center',
+        textAlign: "center",
         marginTop: 16,
         marginBottom: 8,
-    }, valueText: {
-        textAlign: 'center',
-    }, clearButton: {
+    }, valueRow: {
+        width: "100%",
+        minHeight: 48,
+        justifyContent: "center",
+        position: "relative",
+    }, valueTextContainer: {
+        width: "100%",
+        paddingHorizontal: SPACE_40,
+        minHeight: 40,
+        justifyContent: "center",
+        alignItems: "center",
+    }, valueText: __assign({ textAlign: "center", width: "100%" }, (Platform.OS === "android" && {
+        includeFontPadding: false,
+        textAlignVertical: "center",
+    })), clearButton: {
         padding: 8,
-        position: 'absolute',
+        position: "absolute",
         right: SPACE_12,
+        top: 0,
+        bottom: 0,
+        justifyContent: "center",
     }, keyboardGrid: {
         marginVertical: 8,
-        width: '90%',
+        width: "90%",
     }, keyboardRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
+        flexDirection: "row",
+        justifyContent: "space-between",
         marginBottom: 8,
     }, keyButton: {
         flex: 1,
         marginHorizontal: 6,
-        backgroundColor: '#F5F5F5',
+        backgroundColor: "#F5F5F5",
         borderRadius: 8,
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: "center",
+        justifyContent: "center",
         height: 48,
     }, keyText: {
-        fontWeight: '500',
+        fontWeight: "500",
     }, actionRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
+        flexDirection: "row",
+        justifyContent: "space-between",
         marginTop: 12,
-        width: '90%',
+        width: "90%",
         paddingHorizontal: 16,
     }, actionButton: {
         flex: 1,
-        alignItems: 'center',
+        alignItems: "center",
         paddingVertical: 12,
     }, actionText: {
-        fontWeight: '600',
+        fontWeight: "600",
     }, disabledKey: {
         opacity: 0.5,
     }, disabledKeyText: {