sapo-components-ui-rn 1.0.77 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapo-components-ui-rn",
-  "version": "1.0.77",
+  "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();

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

@@ -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 && [
               {