sapo-components-ui-rn 1.0.70 → 1.0.72

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

@@ -26,5 +26,5 @@ export interface ButtonProps extends TouchableOpacityProps {
     buttonSize?: "normal" | "small";
     critical?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ style, title, border, borderColor, isLoading, left, right, margin, textStyle, textProps, onPress, disabled, backgroundColor, textColor, bold, size, medium, mode, transparent, full, theme: themeOverrides, buttonSize, critical, ...props }: ButtonProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, title, border, borderColor, isLoading, left, right, margin, textStyle, textProps, onPress, disabled, backgroundColor, textColor, bold, medium, mode, transparent, full, theme: themeOverrides, buttonSize, size, critical, ...props }: ButtonProps) => React.JSX.Element>;
 export default _default;

package/dist/components/TextInput/TextInput.d.ts

@@ -11,6 +11,7 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     suffix?: string;
     textError?: string;
     maxValue?: number;
+    minValue?: number;
     type?: "integer" | "float";
     formatDecimal?: 1 | 2 | 3;
     required?: boolean;
@@ -21,11 +22,11 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     /**
      * The text or component to use for the floating label.
      */
-    label: TextInputLabelProp;
+    label?: TextInputLabelProp;
     /**
      * Placeholder for the input.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Whether to style the TextInput with error style.
      */

package/dist/components/TextInput/TextInputNumber.d.ts

@@ -15,9 +15,10 @@ export interface TextInputNumberProps extends TouchableOpacityProps {
     clearButton?: boolean;
     theme?: ThemeProp;
     maxValue?: number;
+    minValue?: number;
     type?: "integer" | "float";
     formatDecimal?: 1 | 2 | 3;
     required?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, suffix, clearButton, maxValue, type, formatDecimal, required, ...props }: TextInputNumberProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, suffix, clearButton, maxValue, minValue, type, formatDecimal, required, ...props }: TextInputNumberProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -358,6 +358,7 @@ var ref = {
                 borderSuccessInverseDefault: green.GREEN40,
                 toggleBackgroundDefault: ink.INK10,
                 toggleBackgroundActive: green.GREEN80,
+                overlayPrimaryDefault: ink.INK40,
             },
         },
         light: {
@@ -502,6 +503,7 @@ var ref = {
                 borderSuccessInverseDefault: green.GREEN40,
                 toggleBackgroundDefault: ink.INK10,
                 toggleBackgroundActive: green.GREEN80,
+                overlayPrimaryDefault: ink.INK40,
             },
         },
     },
@@ -1272,6 +1274,7 @@ var LightTheme = {
         borderSuccessInverseDefault: green.GREEN40,
         toggleBackgroundDefault: ink.INK10,
         toggleBackgroundActive: green.GREEN80,
+        overlayPrimaryDefault: ink.INK40,
     },
     fonts: configureFonts(),
     animation: {
@@ -1420,6 +1423,7 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         borderSuccessInverseDefault: green.GREEN40,
         toggleBackgroundDefault: ink.INK10,
         toggleBackgroundActive: green.GREEN80,
+        overlayPrimaryDefault: ink.INK40,
     } });
 
 var DefaultTheme = LightTheme;
@@ -5437,6 +5441,15 @@ var TextInputFlat = function (_a) {
         }
         return React$3.createElement(View$1, null);
     };
+    var checkLineRightAction = function () {
+        if (!multiline && right && inputValue) {
+            return true;
+        }
+        if (parentState.focused && right) {
+            return true;
+        }
+        return false;
+    };
     return (React$3.createElement(View$1, null,
         React$3.createElement(View$1, { style: {
                 flexDirection: "row",
@@ -5484,7 +5497,7 @@ var TextInputFlat = function (_a) {
                     renderSuffix())),
             !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$d.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
-            !multiline && right && (React$3.createElement(Spacer, { width: 1, height: 30, backgroundColor: theme.colors.borderPrimaryDefault, style: {
+            checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                     marginRight: SPACE_8,
                 } })),
             React$3.createElement(View$1, { style: {
@@ -5665,6 +5678,15 @@ var TextInputDefault = function (_a) {
         }
         return React$3.createElement(View, null);
     };
+    var checkLineRightAction = function () {
+        if (!multiline && right && inputValue) {
+            return true;
+        }
+        if (parentState.focused && right) {
+            return true;
+        }
+        return false;
+    };
     return (React$3.createElement(View, { style: viewStyle },
         React$3.createElement(View, { row: true, alignCenter: !multiline, justifyCenter: true, style: [
                 {
@@ -5723,7 +5745,7 @@ var TextInputDefault = function (_a) {
                     !multiline && renderSuffix()))),
             !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$c.clearButtonMultiline : styles$c.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
-            !multiline && right && (React$3.createElement(Spacer, { width: 1, height: 30, backgroundColor: colors.borderPrimaryDefault, style: {
+            checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: colors.borderPrimaryDefault, style: {
                     marginRight: CONSTANTS.SPACE_8,
                 } })),
             right && !clearButton && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_2 }),
@@ -5904,18 +5926,26 @@ 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.type, type = _k === void 0 ? "integer" : _k, _l = _a.formatDecimal, formatDecimal = _l === void 0 ? 3 : _l, _m = _a.required, required = _m === void 0 ? false : _m, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "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 ? 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 theme = useInternalTheme();
     var colors = theme.colors;
-    var _o = useState(false), isShowModalKeyboard = _o[0], setIsShowModalKeyboard = _o[1];
-    var _p = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _p[0], setInputValue = _p[1];
-    var _q = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), numberValue = _q[0], setNumberValue = _q[1];
+    var _p = useState(false), isShowModalKeyboard = _p[0], setIsShowModalKeyboard = _p[1];
+    var _q = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _q[0], setInputValue = _q[1];
+    var _r = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), numberValue = _r[0], setNumberValue = _r[1];
+    var _s = useState(true), canSave = _s[0], setCanSave = _s[1];
     var disabledTextStyle = {
         color: colors.textSecondary,
     };
     useEffect(function () {
         setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
     }, [value]);
+    useEffect(function () {
+        var currentValue = Number(inputValue);
+        var minValueNumber = Number(minValue);
+        setCanSave(!isNaN(currentValue) &&
+            !isNaN(minValueNumber) &&
+            currentValue >= minValueNumber);
+    }, [inputValue, minValue]);
     var getColorValue = useMemo(function () {
         if (disabled) {
             return colors.textPlaceholder;
@@ -5964,7 +5994,7 @@ var TextInputNumber = function (_a) {
         }
     };
     var handleClear = function () {
-        setInputValue("");
+        setInputValue("0");
     };
     var handleClearInput = function () {
         setInputValue("");
@@ -6050,7 +6080,7 @@ var TextInputNumber = function (_a) {
                             suffix)))),
                 clearButton && !checkValueEmpty() && (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, onPress: handleClearInput },
                     React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))),
-                right && (React__default.createElement(Spacer, { width: 1, height: 30, backgroundColor: theme.colors.borderPrimaryDefault, style: {
+                right && numberValue && (React__default.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                         marginLeft: SPACE_4,
                     } })),
                 right && (React__default.createElement(View, { center: true, paddingLeft: SPACE_8, height: "100%" }, right)),
@@ -6086,10 +6116,11 @@ var TextInputNumber = function (_a) {
                         React__default.createElement(Spacer, { style: {
                                 height: "100%",
                             }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
-                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$b.actionButton, onPress: handleSave },
+                        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,
                                     { color: colors.textBrandDefault },
+                                    !canSave && { color: colors.textSecondary },
                                 ] }, "L\u01B0u"))))))));
 };
 var styles$b = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
@@ -6191,7 +6222,7 @@ var DefaultRenderer = function (props) { return React__default.createElement(Tex
  * @extends TextInput props https://reactnative.dev/docs/textinput#props
  */
 var TextInput = forwardRef(function (_a, ref) {
-    var _b = _a.mode, mode = _b === void 0 ? "flat" : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, errorProp = _e === void 0 ? false : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, _g = _a.editable, editable = _g === void 0 ? true : _g, contentStyle = _a.contentStyle, _h = _a.render, render = _h === void 0 ? DefaultRenderer : _h; _a.theme; var placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, textError = _a.textError, prefix = _a.prefix, suffix = _a.suffix, maxValue = _a.maxValue, type = _a.type, _j = _a.required, required = _j === void 0 ? false : _j, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix", "suffix", "maxValue", "type", "required"]);
+    var _b = _a.mode, mode = _b === void 0 ? "flat" : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, errorProp = _e === void 0 ? false : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, _g = _a.editable, editable = _g === void 0 ? true : _g, contentStyle = _a.contentStyle, _h = _a.render, render = _h === void 0 ? DefaultRenderer : _h; _a.theme; var placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, textError = _a.textError, prefix = _a.prefix, suffix = _a.suffix, maxValue = _a.maxValue, minValue = _a.minValue, type = _a.type, _j = _a.required, required = _j === void 0 ? false : _j, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix", "suffix", "maxValue", "minValue", "type", "required"]);
     var theme = useInternalTheme();
     var isControlled = rest.value !== undefined;
     var validInputValue = isControlled ? rest.value : rest.defaultValue;
@@ -6393,7 +6424,7 @@ var TextInput = forwardRef(function (_a, ref) {
             }, onFocus: handleFocus, forceFocus: forceFocus, onBlur: handleBlur, allowFontScaling: false, onChangeText: handleChangeText, onLayoutAnimatedText: handleLayoutAnimatedText, onInputLayout: handleInputContainerLayout, onLabelTextLayout: handleLabelTextLayout, onLeftAffixLayoutChange: onLeftAffixLayoutChange, onRightAffixLayoutChange: onRightAffixLayoutChange, maxFontSizeMultiplier: maxFontSizeMultiplier, contentStyle: contentStyle, scaledLabel: scaledLabel })));
     }
     if (mode === "number") {
-        return (React__default.createElement(TextInputNumber$1, { textError: textError, disabled: disabled, prefix: prefix, suffix: suffix, value: value, right: rest.right, left: rest.left, required: required, label: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, formatDecimal: rest.formatDecimal, type: type }));
+        return (React__default.createElement(TextInputNumber$1, { textError: textError, disabled: disabled, prefix: prefix, suffix: suffix, value: value, right: rest.right, left: rest.left, required: required, label: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, minValue: minValue, formatDecimal: rest.formatDecimal, type: type }));
     }
     return (React__default.createElement(TextInputFlat, __assign({ dense: dense, disabled: disabled, error: errorProp, textError: textError, editable: editable, prefix: prefix, suffix: suffix, clearButton: clearButton, required: required, render: render }, rest, { theme: theme, value: value, parentState: {
             labeled: labeled,
@@ -6416,7 +6447,7 @@ var TextInput = forwardRef(function (_a, ref) {
 TextInput.Affix = TextInputAffix;
 
 var Button = function (_a) {
-    var style = _a.style, title = _a.title; _a.border; var borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right; _a.margin; var textStyle = _a.textStyle, textProps = _a.textProps, onPress = _a.onPress, disabled = _a.disabled, backgroundColor = _a.backgroundColor, textColor = _a.textColor, _b = _a.bold, bold = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 16 : _c, _d = _a.medium, medium = _d === void 0 ? false : _d, _e = _a.mode, mode = _e === void 0 ? "contained" : _e; _a.transparent; var _g = _a.full, full = _g === void 0 ? false : _g; _a.theme; var _h = _a.buttonSize, buttonSize = _h === void 0 ? "normal" : _h, _j = _a.critical, critical = _j === void 0 ? false : _j, props = __rest(_a, ["style", "title", "border", "borderColor", "isLoading", "left", "right", "margin", "textStyle", "textProps", "onPress", "disabled", "backgroundColor", "textColor", "bold", "size", "medium", "mode", "transparent", "full", "theme", "buttonSize", "critical"]);
+    var style = _a.style, title = _a.title; _a.border; var borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right; _a.margin; var textStyle = _a.textStyle, textProps = _a.textProps, onPress = _a.onPress, disabled = _a.disabled, backgroundColor = _a.backgroundColor, textColor = _a.textColor, _b = _a.bold, bold = _b === void 0 ? true : _b, _c = _a.medium, medium = _c === void 0 ? false : _c, _d = _a.mode, mode = _d === void 0 ? "contained" : _d; _a.transparent; var _f = _a.full, full = _f === void 0 ? false : _f; _a.theme; var _g = _a.buttonSize, buttonSize = _g === void 0 ? "normal" : _g, _h = _a.size, size = _h === void 0 ? buttonSize === "small" ? 14 : 16 : _h, _j = _a.critical, critical = _j === void 0 ? false : _j, props = __rest(_a, ["style", "title", "border", "borderColor", "isLoading", "left", "right", "margin", "textStyle", "textProps", "onPress", "disabled", "backgroundColor", "textColor", "bold", "medium", "mode", "transparent", "full", "theme", "buttonSize", "size", "critical"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
@@ -7300,32 +7331,16 @@ var NumberKeyboard = function (_a) {
         }
     }, [inputValue, maxValue, type, formatDecimal]);
     var handleClear = useCallback(function () {
-        setInputValue("");
+        setInputValue("0");
     }, []);
     var handleSave = useCallback(function () {
         var finalValue = inputValue;
         if (inputValue.endsWith(".")) {
             finalValue = inputValue.slice(0, -1);
         }
-        // Nếu giá trị rỗng hoặc chỉ có dấu chấm, trả về "0"
-        if (!finalValue || finalValue === ".") {
-            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText("0");
-            onClose();
-            return;
-        }
-        // Ép kiểu kết quả thành số theo type
-        if (type === "integer") {
-            var intValue = parseInt(finalValue, 10);
-            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(intValue.toString());
-        }
-        else {
-            var floatValue = parseFloat(finalValue);
-            // Giới hạn số chữ số thập phân theo formatDecimal
-            var formattedFloat = floatValue.toFixed(formatDecimal);
-            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(formattedFloat);
-        }
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(finalValue);
         onClose();
-    }, [inputValue, onChangeText, onClose, type, formatDecimal]);
+    }, [inputValue, onChangeText, onClose]);
     var handleClose = useCallback(function () {
         onClose();
         setTimeout(function () {