sapo-components-ui-rn 1.0.76 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapo-components-ui-rn",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "description": "React Native UI Components Library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/NumberKeyboard/index.tsx

@@ -21,6 +21,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 */
@@ -53,6 +55,7 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
   label = "",
   onChangeText,
   maxValue = 999999999999,
+  minValue = 0,
   type = "integer",
   formatDecimal = 3,
   visible,
@@ -63,6 +66,7 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
 
   const [inputValue, setInputValue] = useState<string>(value?.toString() || "");
   const [isFirstInput, setIsFirstInput] = useState<boolean>(true);
+  const [canSave, setCanSave] = useState<boolean>(true);
 
   useEffect(() => {
     if (visible) {
@@ -71,6 +75,16 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
     }
   }, [visible, value]);
 
+  useEffect(() => {
+    const currentValue = Number(inputValue);
+    const minValueNumber = Number(minValue);
+    setCanSave(
+      !isNaN(currentValue) &&
+        !isNaN(minValueNumber) &&
+        currentValue >= minValueNumber
+    );
+  }, [inputValue, minValue]);
+
   const handleKeyPress = useCallback(
     (key: string) => {
       if (key === "del") {
@@ -81,7 +95,17 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
 
       if (key === "000") {
         if (type === "integer" && inputValue.length > 0) {
-          setInputValue((prev) => prev + "000");
+          const newInputValue = inputValue + "000";
+          const newValue = Number(newInputValue);
+          const maxValueNumber = Number(maxValue);
+
+          if (
+            !isNaN(newValue) &&
+            !isNaN(maxValueNumber) &&
+            newValue <= maxValueNumber
+          ) {
+            setInputValue(newInputValue);
+          }
           setIsFirstInput(false);
         }
         return;
@@ -89,7 +113,6 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
 
       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.");
           } else {
@@ -106,6 +129,19 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
         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;
+        }
+      }
+
       const newInputValue = inputValue + key;
       const newValue = Number(newInputValue);
       const maxValueNumber = Number(maxValue);
@@ -133,18 +169,20 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
   );
 
   const handleClear = useCallback(() => {
-    setInputValue("0");
+    setInputValue("");
     setIsFirstInput(true);
   }, []);
 
   const handleSave = useCallback(() => {
+    if (!canSave) return;
+
     let finalValue = inputValue;
     if (inputValue.endsWith(".")) {
       finalValue = inputValue.slice(0, -1);
     }
     onChangeText?.(finalValue);
     onClose();
-  }, [inputValue, onChangeText, onClose]);
+  }, [inputValue, onChangeText, onClose, canSave]);
 
   const handleClose = useCallback(() => {
     onClose();
@@ -169,10 +207,10 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
           backgroundColor={colors.surfacePrimaryDefault}
           style={styles.modalContent}
         >
-          <Text style={styles.modalTitle}>{label}</Text>
+          <Text style={[styles.text18, styles.modalTitle]}>{label}</Text>
           <View width={"100%"}>
             <View paddingHorizontal={SPACE_40}>
-              <Text numberOfLines={1} style={styles.valueText}>
+              <Text numberOfLines={1} style={[styles.text30, styles.valueText]}>
                 {formatNumberInput(inputValue, formatDecimal) || "0"}
               </Text>
             </View>
@@ -216,6 +254,7 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
                       <Text
                         style={[
                           styles.keyText,
+                          styles.text22,
                           key === "000" &&
                             type === "float" &&
                             styles.disabledKeyText,
@@ -238,7 +277,7 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
               style={styles.actionButton}
               onPress={handleClose}
             >
-              <Text style={styles.actionText}>Đóng</Text>
+              <Text style={[styles.actionText, styles.text16]}>Đóng</Text>
             </TouchableOpacity>
             <Spacer
               style={{ height: "100%" }}
@@ -251,7 +290,11 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
               onPress={handleSave}
             >
               <Text
-                style={[styles.actionText, { color: colors.textBrandDefault }]}
+                style={[
+                  styles.actionText,
+                  styles.text16,
+                  { color: colors.textBrandDefault },
+                ]}
               >
                 Lưu
               </Text>
@@ -278,13 +321,11 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   modalTitle: {
-    fontSize: 18,
     textAlign: "center",
     marginTop: 16,
     marginBottom: 8,
   },
   valueText: {
-    fontSize: 30,
     textAlign: "center",
   },
   clearButton: {
@@ -311,7 +352,6 @@ const styles = StyleSheet.create({
     height: 48,
   },
   keyText: {
-    fontSize: 22,
     fontWeight: "500",
   },
   actionRow: {
@@ -327,7 +367,6 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
   },
   actionText: {
-    fontSize: 16,
     fontWeight: "600",
   },
   disabledKey: {

package/src/components/SelectionField/index.tsx

@@ -38,7 +38,6 @@ export interface SelectionFieldProps extends TouchableOpacityProps {
   textProps?: IText;
   textColor?: string;
   labelColor?: string;
-  size?: number;
   textStyle?: TextStyle;
   labelStyle?: TextStyle;
   disabled?: boolean;
@@ -61,7 +60,6 @@ const SelectionField = ({
   disabled = false,
   textColor,
   labelColor,
-  size = 16,
   theme: themeOverrides,
   required = false,
   ...props
@@ -138,7 +136,6 @@ const SelectionField = ({
             <Text
               numberOfLines={1}
               color={getColor()}
-              size={size}
               style={[disabled && disabledTextStyle, textStyle]}
               {...textProps}
             >

package/src/components/TextInput/TextInputNumber.tsx

@@ -24,7 +24,7 @@ import {
 import ScaleButton from "../ScaleButton";
 import Text from "../Text";
 import View from "../View";
-import { useInternalTheme } from "../..//core/theming";
+import { useInternalTheme } from "../../core/theming";
 import { ThemeProp } from "../../types";
 import Spacer from "../Spacer";
 import Icon from "../Icon";
@@ -138,8 +138,18 @@ const TextInputNumber = ({
     if (key === "del") {
       setInputValue((prev) => prev.slice(0, -1));
     } else if (key === "000") {
-      if (type === "integer" && inputValue.length > 0) {
-        setInputValue((prev) => prev + "000");
+      if (type === "integer") {
+        const newInputValue = inputValue + "000";
+        const newValue = Number(newInputValue);
+        const maxValueNumber = Number(maxValue);
+
+        if (
+          !isNaN(newValue) &&
+          !isNaN(maxValueNumber) &&
+          newValue <= maxValueNumber
+        ) {
+          setInputValue(newInputValue);
+        }
         setIsFirstInput(false);
       }
     } else if (key === ".") {
@@ -157,6 +167,19 @@ const TextInputNumber = ({
         setInputValue(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.");
+            return;
+          } else if (key >= "1" && key <= "9") {
+            setInputValue(key);
+            return;
+          } else {
+            return;
+          }
+        }
+
         const newInputValue = inputValue + key;
         const newValue = Number(newInputValue);
         const maxValueNumber = Number(maxValue);
@@ -168,13 +191,13 @@ const TextInputNumber = ({
         ) {
           if (inputValue.includes(".")) {
             const [intPart, decimalPart = ""] = inputValue.split(".");
-            if (intPart.length < 12 && decimalPart.length === 0) {
+            if (newInputValue.length <= 12 && decimalPart.length === 0) {
               setInputValue((prev) => prev + key);
-            } else if (decimalPart.length < 3) {
+            } else if (newInputValue.length <= 12 && decimalPart.length < 3) {
               setInputValue((prev) => prev + key);
             }
           } else {
-            if (inputValue.length < 12) {
+            if (newInputValue.length <= 12) {
               setInputValue((prev) => prev + key);
             }
           }
@@ -246,7 +269,14 @@ const TextInputNumber = ({
               borderRadius: BORDER_RADIUS_6,
             },
 
-            [styles.border, { borderColor: colors.borderPrimaryDefault }],
+            [
+              styles.border,
+              {
+                borderColor: isShowModalKeyboard
+                  ? colors.borderBrandDefault
+                  : colors.borderPrimaryDefault,
+              },
+            ],
 
             textError.length > 0 && [
               {
@@ -379,10 +409,13 @@ const TextInputNumber = ({
             backgroundColor={colors.surfacePrimaryDefault}
             style={styles.modalContent}
           >
-            <Text style={styles.modalTitle}>{label}</Text>
+            <Text style={[styles.modalTitle, styles.text18]}>{label}</Text>
             <View width={"100%"}>
               <View paddingHorizontal={SPACE_40}>
-                <Text numberOfLines={1} style={styles.valueText}>
+                <Text
+                  numberOfLines={1}
+                  style={[styles.text30, styles.valueText]}
+                >
                   {formatNumberInput(inputValue, formatDecimal) || "0"}
                 </Text>
               </View>
@@ -429,6 +462,7 @@ const TextInputNumber = ({
                         <Text
                           style={[
                             styles.keyText,
+                            styles.text22,
                             key === "000" &&
                               type === "float" &&
                               styles.disabledKeyText,
@@ -451,7 +485,7 @@ const TextInputNumber = ({
                 style={styles.actionButton}
                 onPress={onCloseModalKeyboard}
               >
-                <Text style={styles.actionText}>Đóng</Text>
+                <Text style={[styles.actionText, styles.text16]}>Đóng</Text>
               </TouchableOpacity>
               <Spacer
                 style={{
@@ -469,6 +503,7 @@ const TextInputNumber = ({
                 <Text
                   style={[
                     styles.actionText,
+                    styles.text16,
                     { color: colors.textBrandDefault },
                     !canSave && { color: colors.textSecondary },
                   ]}
@@ -513,14 +548,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   modalTitle: {
-    fontSize: 18,
     textAlign: "center",
     marginTop: 16,
     marginBottom: 8,
   },
 
   valueText: {
-    fontSize: 30,
     textAlign: "center",
   },
   clearButton: {
@@ -547,7 +580,6 @@ const styles = StyleSheet.create({
     height: 48,
   },
   keyText: {
-    fontSize: 22,
     fontWeight: "500",
   },
   actionRow: {
@@ -563,7 +595,6 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
   },
   actionText: {
-    fontSize: 16,
     fontWeight: "600",
   },
   disabledKey: {