sapo-components-ui-rn 1.0.76 → 1.0.78

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

@@ -8,6 +8,8 @@ export interface NumberKeyboardProps {
     onChangeText?: (value: string) => void;
     /** Giá trị tối đa cho phép */
     maxValue?: number;
+    /** Giá trị tối thiểu cho phép */
+    minValue?: number;
     /** Loại input: integer hoặc float */
     type?: "integer" | "float";
     /** Số chữ số thập phân cho phép */

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

@@ -13,7 +13,6 @@ export interface SelectionFieldProps extends TouchableOpacityProps {
     textProps?: IText;
     textColor?: string;
     labelColor?: string;
-    size?: number;
     textStyle?: TextStyle;
     labelStyle?: TextStyle;
     disabled?: boolean;
@@ -21,5 +20,5 @@ export interface SelectionFieldProps extends TouchableOpacityProps {
     theme?: ThemeProp;
     required?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, size, theme: themeOverrides, required, ...props }: SelectionFieldProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, theme: themeOverrides, required, ...props }: SelectionFieldProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -5984,8 +5984,15 @@ var TextInputNumber = function (_a) {
             setInputValue(function (prev) { return prev.slice(0, -1); });
         }
         else if (key === "000") {
-            if (type === "integer" && inputValue.length > 0) {
-                setInputValue(function (prev) { return prev + "000"; });
+            if (type === "integer") {
+                var newInputValue = inputValue + "000";
+                var newValue = Number(newInputValue);
+                var maxValueNumber = Number(maxValue);
+                if (!isNaN(newValue) &&
+                    !isNaN(maxValueNumber) &&
+                    newValue <= maxValueNumber) {
+                    setInputValue(newInputValue);
+                }
                 setIsFirstInput(false);
             }
         }
@@ -6007,6 +6014,20 @@ var TextInputNumber = function (_a) {
                 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.");
+                        return;
+                    }
+                    else if (key >= "1" && key <= "9") {
+                        setInputValue(key);
+                        return;
+                    }
+                    else {
+                        return;
+                    }
+                }
                 var newInputValue = inputValue + key;
                 var newValue = Number(newInputValue);
                 var maxValueNumber = Number(maxValue);
@@ -6014,16 +6035,16 @@ var TextInputNumber = function (_a) {
                     !isNaN(maxValueNumber) &&
                     newValue <= maxValueNumber) {
                     if (inputValue.includes(".")) {
-                        var _a = inputValue.split("."), intPart = _a[0], _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
-                        if (intPart.length < 12 && decimalPart.length === 0) {
+                        var _a = inputValue.split("."); _a[0]; var _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
+                        if (newInputValue.length <= 12 && decimalPart.length === 0) {
                             setInputValue(function (prev) { return prev + key; });
                         }
-                        else if (decimalPart.length < 3) {
+                        else if (newInputValue.length <= 12 && decimalPart.length < 3) {
                             setInputValue(function (prev) { return prev + key; });
                         }
                     }
                     else {
-                        if (inputValue.length < 12) {
+                        if (newInputValue.length <= 12) {
                             setInputValue(function (prev) { return prev + key; });
                         }
                     }
@@ -6078,7 +6099,14 @@ var TextInputNumber = function (_a) {
                     {
                         borderRadius: BORDER_RADIUS_6,
                     },
-                    [styles$b.border, { borderColor: colors.borderPrimaryDefault }],
+                    [
+                        styles$b.border,
+                        {
+                            borderColor: isShowModalKeyboard
+                                ? colors.borderBrandDefault
+                                : colors.borderPrimaryDefault,
+                        },
+                    ],
                     textError.length > 0 && [
                         {
                             borderColor: colors.borderErrorDefault,
@@ -6130,10 +6158,10 @@ var TextInputNumber = function (_a) {
         React__default.createElement(Modal, { visible: isShowModalKeyboard, transparent: true, animationType: "fade", onRequestClose: onCloseModalKeyboard },
             React__default.createElement(TouchableOpacity, { style: styles$b.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
                 React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles$b.modalContent },
-                    React__default.createElement(Text$1, { style: styles$b.modalTitle }, label),
+                    React__default.createElement(Text$1, { style: [styles$b.modalTitle, styles$b.text18] }, label),
                     React__default.createElement(View, { width: "100%" },
                         React__default.createElement(View, { paddingHorizontal: SPACE_40 },
-                            React__default.createElement(Text$1, { numberOfLines: 1, style: styles$b.valueText }, formatNumberInput$1(inputValue, formatDecimal) || "0")),
+                            React__default.createElement(Text$1, { numberOfLines: 1, style: [styles$b.text30, styles$b.valueText] }, formatNumberInput$1(inputValue, formatDecimal) || "0")),
                         React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
                             React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
                     React__default.createElement(View, { style: styles$b.keyboardGrid }, [
@@ -6150,6 +6178,7 @@ var TextInputNumber = function (_a) {
                         ], 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,
+                            styles$b.text22,
                             key === "000" &&
                                 type === "float" &&
                                 styles$b.disabledKeyText,
@@ -6159,13 +6188,14 @@ var TextInputNumber = function (_a) {
                         ] }, key)))); }))); })),
                     React__default.createElement(View, { style: styles$b.actionRow },
                         React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$b.actionButton, onPress: onCloseModalKeyboard },
-                            React__default.createElement(Text$1, { style: styles$b.actionText }, "\u0110\u00F3ng")),
+                            React__default.createElement(Text$1, { style: [styles$b.actionText, styles$b.text16] }, "\u0110\u00F3ng")),
                         React__default.createElement(Spacer, { style: {
                                 height: "100%",
                             }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
                         React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: [styles$b.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
                             React__default.createElement(Text$1, { style: [
                                     styles$b.actionText,
+                                    styles$b.text16,
                                     { color: colors.textBrandDefault },
                                     !canSave && { color: colors.textSecondary },
                                 ] }, "L\u01B0u"))))))));
@@ -6191,12 +6221,10 @@ var styles$b = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
         paddingBottom: 20,
         alignItems: "center",
     }, modalTitle: {
-        fontSize: 18,
         textAlign: "center",
         marginTop: 16,
         marginBottom: 8,
     }, valueText: {
-        fontSize: 30,
         textAlign: "center",
     }, clearButton: {
         padding: 8,
@@ -6218,7 +6246,6 @@ var styles$b = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
         justifyContent: "center",
         height: 48,
     }, keyText: {
-        fontSize: 22,
         fontWeight: "500",
     }, actionRow: {
         flexDirection: "row",
@@ -6231,7 +6258,6 @@ var styles$b = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
         alignItems: "center",
         paddingVertical: 12,
     }, actionText: {
-        fontSize: 16,
         fontWeight: "600",
     }, disabledKey: {
         opacity: 0.5,
@@ -7186,7 +7212,7 @@ var styles$3 = StyleSheet.create({
 });
 
 var SelectionField = function (_a) {
-    var style = _a.style, _b = _a.content, content = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.error, error = _d === void 0 ? "" : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle; _a.labelStyle; var textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor, _f = _a.size, size = _f === void 0 ? 16 : _f; _a.theme; var _g = _a.required, required = _g === void 0 ? false : _g, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "size", "theme", "required"]);
+    var style = _a.style, _b = _a.content, content = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.error, error = _d === void 0 ? "" : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle; _a.labelStyle; var textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor; _a.theme; var _f = _a.required, required = _f === void 0 ? false : _f, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "theme", "required"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
@@ -7239,7 +7265,7 @@ var SelectionField = function (_a) {
                         ] },
                         label,
                         required && React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *"))),
-                    React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: getColor(), size: size, style: [disabled && disabledTextStyle, textStyle] }, textProps),
+                    React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: getColor(), style: [disabled && disabledTextStyle, textStyle] }, textProps),
                         content.toString() === "" ? label : content,
                         required && content.toString() === "" && (React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
                 right || React__default.createElement(Icon$1, { name: "IconArrowDown", type: "Svg", size: 24 }),
@@ -7336,17 +7362,25 @@ 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 ? 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 _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;
     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];
-    var _h = useState(true), isFirstInput = _h[0], setIsFirstInput = _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) {
             setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
             setIsFirstInput(true);
         }
     }, [visible, value]);
+    useEffect(function () {
+        var currentValue = Number(inputValue);
+        var minValueNumber = Number(minValue);
+        setCanSave(!isNaN(currentValue) &&
+            !isNaN(minValueNumber) &&
+            currentValue >= minValueNumber);
+    }, [inputValue, minValue]);
     var handleKeyPress = useCallback(function (key) {
         if (key === "del") {
             setInputValue(function (prev) { return prev.slice(0, -1); });
@@ -7355,14 +7389,20 @@ var NumberKeyboard = function (_a) {
         }
         if (key === "000") {
             if (type === "integer" && inputValue.length > 0) {
-                setInputValue(function (prev) { return prev + "000"; });
+                var newInputValue_1 = inputValue + "000";
+                var newValue_1 = Number(newInputValue_1);
+                var maxValueNumber_1 = Number(maxValue);
+                if (!isNaN(newValue_1) &&
+                    !isNaN(maxValueNumber_1) &&
+                    newValue_1 <= maxValueNumber_1) {
+                    setInputValue(newInputValue_1);
+                }
                 setIsFirstInput(false);
             }
             return;
         }
         if (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.");
                 }
@@ -7378,6 +7418,20 @@ var NumberKeyboard = function (_a) {
             setIsFirstInput(false);
             return;
         }
+        // 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.");
+                return;
+            }
+            else if (key >= "1" && key <= "9") {
+                setInputValue(key);
+                return;
+            }
+            else {
+                return;
+            }
+        }
         var newInputValue = inputValue + key;
         var newValue = Number(newInputValue);
         var maxValueNumber = Number(maxValue);
@@ -7401,17 +7455,19 @@ var NumberKeyboard = function (_a) {
         }
     }, [inputValue, maxValue, type, formatDecimal, isFirstInput]);
     var handleClear = useCallback(function () {
-        setInputValue("0");
+        setInputValue("");
         setIsFirstInput(true);
     }, []);
     var handleSave = useCallback(function () {
+        if (!canSave)
+            return;
         var finalValue = inputValue;
         if (inputValue.endsWith(".")) {
             finalValue = inputValue.slice(0, -1);
         }
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(finalValue);
         onClose();
-    }, [inputValue, onChangeText, onClose]);
+    }, [inputValue, onChangeText, onClose, canSave]);
     var handleClose = useCallback(function () {
         onClose();
         setIsFirstInput(true);
@@ -7419,10 +7475,10 @@ var NumberKeyboard = function (_a) {
     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 },
-                React__default.createElement(Text$1, { style: styles.modalTitle }, label),
+                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.valueText }, formatNumberInput(inputValue, formatDecimal) || "0")),
+                        React__default.createElement(Text$1, { numberOfLines: 1, style: [styles.text30, styles.valueText] }, formatNumberInput(inputValue, formatDecimal) || "0")),
                     React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles.clearButton },
                         React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
                 React__default.createElement(View, { style: styles.keyboardGrid }, [
@@ -7439,6 +7495,7 @@ var NumberKeyboard = function (_a) {
                     ], 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,
+                        styles.text22,
                         key === "000" &&
                             type === "float" &&
                             styles.disabledKeyText,
@@ -7448,10 +7505,14 @@ var NumberKeyboard = function (_a) {
                     ] }, 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")),
+                        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(TouchableOpacity, { activeOpacity: 0.8, style: styles.actionButton, onPress: handleSave },
-                        React__default.createElement(Text$1, { style: [styles.actionText, { color: colors.textBrandDefault }] }, "L\u01B0u")))))));
+                        React__default.createElement(Text$1, { style: [
+                                styles.actionText,
+                                styles.text16,
+                                { color: colors.textBrandDefault },
+                            ] }, "L\u01B0u")))))));
 };
 var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { modalOverlay: {
         flex: 1,
@@ -7464,12 +7525,10 @@ var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { modalOv
         paddingBottom: 20,
         alignItems: "center",
     }, modalTitle: {
-        fontSize: 18,
         textAlign: "center",
         marginTop: 16,
         marginBottom: 8,
     }, valueText: {
-        fontSize: 30,
         textAlign: "center",
     }, clearButton: {
         padding: 8,
@@ -7491,7 +7550,6 @@ var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { modalOv
         justifyContent: "center",
         height: 48,
     }, keyText: {
-        fontSize: 22,
         fontWeight: "500",
     }, actionRow: {
         flexDirection: "row",
@@ -7504,7 +7562,6 @@ var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { modalOv
         alignItems: "center",
         paddingVertical: 12,
     }, actionText: {
-        fontSize: 16,
         fontWeight: "600",
     }, disabledKey: {
         opacity: 0.5,