sapo-components-ui-rn 1.0.74 → 1.0.76

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

@@ -3,6 +3,7 @@ import { TextProps } from "react-native";
 import { ThemeProp } from "../../types";
 export interface IText extends TextProps {
     size?: number;
+    lineHeight?: number;
     color?: string;
     center?: boolean;
     bold?: boolean;

package/dist/index.esm.js

@@ -4911,18 +4911,24 @@ var memoWithRef = function (component) {
 var Text = function (props) {
     var children = props.children, onPress = props.onPress; props.theme; var rest = __rest(props, ["children", "onPress", "theme"]);
     var theme = useInternalTheme();
+    var colors = theme.colors;
     delete rest.style;
     var _getStyle = function () {
         var style = {
             fontWeight: "normal",
-            color: colors.ink.INK100,
+            color: colors.textDefault,
             fontFamily: "Inter-Regular",
+            fontSize: 14,
+            lineHeight: 20,
         };
-        var _a = props.size, size = _a === void 0 ? 14 : _a, center = props.center, color = props.color, bold = props.bold, medium = props.medium;
+        var _a = props.size, size = _a === void 0 ? 14 : _a, lineHeight = props.lineHeight, center = props.center, color = props.color, bold = props.bold, medium = props.medium;
         style.color = theme.colors.textDefault || "black";
         if (size) {
             style.fontSize = size;
         }
+        if (lineHeight) {
+            style.lineHeight = lineHeight;
+        }
         if (color) {
             style.color = color;
         }
@@ -5252,7 +5258,13 @@ var TextInputFlat = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, required = _a.required, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value", "textError", "required"]);
     var _g = React$3.useState(value || ""), inputValue = _g[0], setInputValue = _g[1];
     React$3.useEffect(function () {
-        setInputValue(value || "");
+        if (value === undefined) {
+            setInputValue("");
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText("");
+        }
+        else {
+            setInputValue(value || "");
+        }
     }, [value]);
     var handleChangeText = function (text) {
         setInputValue(text);
@@ -5572,7 +5584,13 @@ var TextInputDefault = function (_a) {
     }), inputTextColor = _o.inputTextColor, activeColor = _o.activeColor, selectionColor = _o.selectionColor;
     var _p = React$3.useState(value || ""), inputValue = _p[0], setInputValue = _p[1];
     React$3.useEffect(function () {
-        setInputValue(value || "");
+        if (value === undefined) {
+            setInputValue("");
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText("");
+        }
+        else {
+            setInputValue(value || "");
+        }
     }, [value]);
     var handleChangeText = function (text) {
         setInputValue(text);
@@ -5840,52 +5858,52 @@ var containerStyles = StyleSheet.create({
     },
     //MARK: text size
     text10: {
-        fontSize: 10 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 12 + (Platform.OS === "android" ? 2 : 4),
+        fontSize: 10,
+        lineHeight: 12,
     },
     text12: {
-        fontSize: 12 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 16 + (Platform.OS === "android" ? 2 : 4),
+        fontSize: 12,
+        lineHeight: 16,
     },
     text14: {
-        fontSize: 14 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 20 + (Platform.OS === "android" ? 2 : 4),
+        fontSize: 14,
+        lineHeight: 20,
     },
     text16: {
-        fontSize: 16 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 24 + (Platform.OS === "android" ? 2 : 4),
+        fontSize: 16,
+        lineHeight: 24,
     },
     text18: {
-        fontSize: 18 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 28 + (Platform.OS === "android" ? 1 : 2),
+        fontSize: 18,
+        lineHeight: 28,
     },
     text20: {
-        fontSize: 20 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 28 + (Platform.OS === "android" ? 1 : 2),
+        fontSize: 20,
+        lineHeight: 28,
     },
     text22: {
-        fontSize: 22 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 30 + (Platform.OS === "android" ? 1 : 2),
+        fontSize: 22,
+        lineHeight: 30,
     },
     text24: {
-        fontSize: 24 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 32 + (Platform.OS === "android" ? 1 : 2),
+        fontSize: 24,
+        lineHeight: 32,
     },
     text26: {
-        fontSize: 26 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 34 + (Platform.OS === "android" ? 1 : 2),
+        fontSize: 26,
+        lineHeight: 34,
     },
     text28: {
-        fontSize: 28 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 36 + (Platform.OS === "android" ? 1 : 2),
+        fontSize: 28,
+        lineHeight: 36,
     },
     text30: {
-        fontSize: 30 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 38 + (Platform.OS === "android" ? 1 : 2),
+        fontSize: 30,
+        lineHeight: 38,
     },
     text32: {
-        fontSize: 32 + (Platform.OS === "android" ? 1 : 2),
-        lineHeight: 40 + (Platform.OS === "android" ? 1 : 2),
+        fontSize: 32,
+        lineHeight: 40,
     },
     //MARK:fonts
     textRegular: {
@@ -5908,12 +5926,13 @@ var containerStyles = StyleSheet.create({
 
 function formatNumberInput$1(value, formatDecimal) {
     if (!value)
-        return "0";
+        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(/^0+(?=\d)/, ""); // Loại bỏ số 0 đầu nếu có
     intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     // Giới hạn phần thập phân 3 số
     if (decimalPart)
@@ -5926,7 +5945,7 @@ function formatNumberInput$1(value, formatDecimal) {
     return result;
 }
 var TextInputNumber = function (_a) {
-    var style = _a.style, _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.textError, textError = _d === void 0 ? "" : _d, left = _a.left, right = _a.right, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? "" : _f, _g = _a.suffix, suffix = _g === void 0 ? "" : _g, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, _j = _a.maxValue, maxValue = _j === void 0 ? 999999999 : _j, _k = _a.minValue, minValue = _k === void 0 ? 0 : _k, _l = _a.type, type = _l === void 0 ? "integer" : _l, _m = _a.formatDecimal, formatDecimal = _m === void 0 ? 3 : _m, _o = _a.required, required = _o === void 0 ? false : _o, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "minValue", "type", "formatDecimal", "required"]);
+    var style = _a.style, _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.textError, textError = _d === void 0 ? "" : _d, left = _a.left, right = _a.right, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? "" : _f, _g = _a.suffix, suffix = _g === void 0 ? "" : _g, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, _j = _a.maxValue, maxValue = _j === void 0 ? 999999999999 : _j, _k = _a.minValue, minValue = _k === void 0 ? 0 : _k, _l = _a.type, type = _l === void 0 ? "integer" : _l, _m = _a.formatDecimal, formatDecimal = _m === void 0 ? 3 : _m, _o = _a.required, required = _o === void 0 ? false : _o, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "minValue", "type", "formatDecimal", "required"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var _p = useState(false), isShowModalKeyboard = _p[0], setIsShowModalKeyboard = _p[1];
@@ -5964,11 +5983,21 @@ var TextInputNumber = function (_a) {
         if (key === "del") {
             setInputValue(function (prev) { return prev.slice(0, -1); });
         }
+        else if (key === "000") {
+            if (type === "integer" && inputValue.length > 0) {
+                setInputValue(function (prev) { return prev + "000"; });
+                setIsFirstInput(false);
+            }
+        }
         else if (key === ".") {
-            if (type === "float" &&
-                !inputValue.includes(".") &&
-                inputValue.length > 0) {
-                setInputValue(function (prev) { return prev + 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 {
+                    setInputValue(function (prev) { return prev + key; });
+                }
                 setIsFirstInput(false);
             }
         }
@@ -5978,7 +6007,7 @@ var TextInputNumber = function (_a) {
                 setIsFirstInput(false);
             }
             else {
-                var newInputValue = inputValue === "0" ? key : inputValue + key;
+                var newInputValue = inputValue + key;
                 var newValue = Number(newInputValue);
                 var maxValueNumber = Number(maxValue);
                 if (!isNaN(newValue) &&
@@ -5986,7 +6015,7 @@ var TextInputNumber = function (_a) {
                     newValue <= maxValueNumber) {
                     if (inputValue.includes(".")) {
                         var _a = inputValue.split("."), intPart = _a[0], _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
-                        if (intPart.length < 10 && decimalPart.length === 0) {
+                        if (intPart.length < 12 && decimalPart.length === 0) {
                             setInputValue(function (prev) { return prev + key; });
                         }
                         else if (decimalPart.length < 3) {
@@ -5994,8 +6023,8 @@ var TextInputNumber = function (_a) {
                         }
                     }
                     else {
-                        if (inputValue.length < 10) {
-                            setInputValue(function (prev) { return (prev === "0" ? key : prev + key); });
+                        if (inputValue.length < 12) {
+                            setInputValue(function (prev) { return prev + key; });
                         }
                     }
                 }
@@ -6003,7 +6032,7 @@ var TextInputNumber = function (_a) {
         }
     };
     var handleClear = function () {
-        setInputValue("0");
+        setInputValue("");
     };
     var handleClearInput = function () {
         setInputValue("");
@@ -6020,13 +6049,14 @@ var TextInputNumber = function (_a) {
         setIsShowModalKeyboard(false);
     };
     var checkValueEmpty = function () {
-        if (value.toString() === "") {
+        if (value === undefined || value === null || value.toString() === "") {
             return true;
         }
         return false;
     };
+    console.log(value, "value");
     var checkLabelEmpty = function () {
-        if (label.toString() === "") {
+        if (label === undefined || label === null || label.toString() === "") {
             return true;
         }
         return false;
@@ -6110,14 +6140,21 @@ var TextInputNumber = function (_a) {
                         ["1", "2", "3"],
                         ["4", "5", "6"],
                         ["7", "8", "9"],
-                        [".", "0", "del"],
+                        [type === "integer" ? "000" : ".", "0", "del"],
                     ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$b.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
                             styles$b.keyButton,
-                            key === "." && type === "integer" && styles$b.disabledKey,
-                        ], onPress: function () { return handleKeyPress(key); }, disabled: key === "." && type === "integer" }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default.createElement(Text$1, { style: [
+                            key === "000" && type === "float" && styles$b.disabledKey,
+                            key === "." &&
+                                inputValue.includes(".") &&
+                                styles$b.disabledKey,
+                        ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && type === "float") ||
+                            (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default.createElement(Text$1, { style: [
                             styles$b.keyText,
+                            key === "000" &&
+                                type === "float" &&
+                                styles$b.disabledKeyText,
                             key === "." &&
-                                type === "integer" &&
+                                inputValue.includes(".") &&
                                 styles$b.disabledKeyText,
                         ] }, key)))); }))); })),
                     React__default.createElement(View, { style: styles$b.actionRow },
@@ -6507,7 +6544,7 @@ var Button = function (_a) {
         }
     };
     return (React__default.createElement(View, { row: !full },
-        React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
+        React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading }),
             React__default.createElement(View, { style: [
                     styles$a.button,
                     {
@@ -6520,7 +6557,8 @@ var Button = function (_a) {
                     backgroundColor && { backgroundColor: backgroundColor },
                     renderButtonStyle(),
                     buttonSize === "small" && styles$a.small,
-                    disabled && [
+                    disabled &&
+                        !isLoading && [
                         styles$a.disabled,
                         {
                             borderColor: colors.borderPrimaryDisabled,
@@ -7298,7 +7336,7 @@ var formatNumberInput = function (value, formatDecimal) {
     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 ? 999999999 : _d, _e = _a.type, type = _e === void 0 ? "integer" : _e, _f = _a.formatDecimal, formatDecimal = _f === void 0 ? 3 : _f, visible = _a.visible, onClose = _a.onClose;
+    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.type, type = _e === void 0 ? "integer" : _e, _f = _a.formatDecimal, formatDecimal = _f === void 0 ? 3 : _f, visible = _a.visible, onClose = _a.onClose;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var _g = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _g[0], setInputValue = _g[1];
@@ -7315,11 +7353,22 @@ var NumberKeyboard = function (_a) {
             setIsFirstInput(false);
             return;
         }
+        if (key === "000") {
+            if (type === "integer" && inputValue.length > 0) {
+                setInputValue(function (prev) { return prev + "000"; });
+                setIsFirstInput(false);
+            }
+            return;
+        }
         if (key === ".") {
-            if (type === "float" &&
-                !inputValue.includes(".") &&
-                inputValue.length > 0) {
-                setInputValue(function (prev) { return prev + key; });
+            if (type === "float" && !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 {
+                    setInputValue(function (prev) { return prev + key; });
+                }
                 setIsFirstInput(false);
             }
             return;
@@ -7329,7 +7378,7 @@ var NumberKeyboard = function (_a) {
             setIsFirstInput(false);
             return;
         }
-        var newInputValue = inputValue === "0" ? key : inputValue + key;
+        var newInputValue = inputValue + key;
         var newValue = Number(newInputValue);
         var maxValueNumber = Number(maxValue);
         if (!isNaN(newValue) &&
@@ -7337,7 +7386,7 @@ var NumberKeyboard = function (_a) {
             newValue <= maxValueNumber) {
             if (inputValue.includes(".")) {
                 var _a = inputValue.split("."), intPart = _a[0], _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
-                if (intPart.length < 10 && decimalPart.length === 0) {
+                if (intPart.length < 12 && decimalPart.length === 0) {
                     setInputValue(function (prev) { return prev + key; });
                 }
                 else if (decimalPart.length < formatDecimal) {
@@ -7345,8 +7394,8 @@ var NumberKeyboard = function (_a) {
                 }
             }
             else {
-                if (inputValue.length < 10) {
-                    setInputValue(function (prev) { return (prev === "0" ? key : prev + key); });
+                if (inputValue.length < 12) {
+                    setInputValue(function (prev) { return prev + key; });
                 }
             }
         }
@@ -7367,13 +7416,6 @@ var NumberKeyboard = function (_a) {
         onClose();
         setIsFirstInput(true);
     }, [onClose]);
-    var renderKeyboardRow = useCallback(function (row) { return (React__default.createElement(View, { key: row.join(""), style: styles.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
-            styles.keyButton,
-            key === "." && type === "integer" && styles.disabledKey,
-        ], onPress: function () { return handleKeyPress(key); }, disabled: key === "." && type === "integer" }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default.createElement(Text$1, { style: [
-            styles.keyText,
-            key === "." && type === "integer" && styles.disabledKeyText,
-        ] }, key)))); }))); }, [handleKeyPress, type]);
     return (React__default.createElement(Modal, { visible: visible, transparent: true, animationType: "fade", 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 },
@@ -7387,8 +7429,23 @@ var NumberKeyboard = function (_a) {
                     ["1", "2", "3"],
                     ["4", "5", "6"],
                     ["7", "8", "9"],
-                    [".", "0", "del"],
-                ].map(renderKeyboardRow)),
+                    [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(".") &&
+                            styles.disabledKey,
+                    ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && type === "float") ||
+                        (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default.createElement(Text$1, { style: [
+                        styles.keyText,
+                        key === "000" &&
+                            type === "float" &&
+                            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 }, "\u0110\u00F3ng")),