sapo-components-ui-rn 1.0.58 → 1.0.59

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

@@ -9,6 +9,8 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     right?: React.ReactNode;
     prefix?: string;
     textError?: string;
+    maxValue?: number;
+    type?: "integer" | "float";
     /**
      * If true, user won't be able to interact with the component.
      */

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

@@ -5,7 +5,7 @@ import { ThemeProp } from "../../types";
 export interface TextInputNumberProps extends TouchableOpacityProps {
     style?: StyleProp<ViewStyle>;
     borderColor?: string;
-    value?: string;
+    value?: string | number;
     label?: string;
     textError?: string;
     left?: React.ReactNode;
@@ -20,6 +20,8 @@ export interface TextInputNumberProps extends TouchableOpacityProps {
     onChangeText?: (value: string) => void;
     clearButton?: boolean;
     theme?: ThemeProp;
+    maxValue?: number;
+    type?: "integer" | "float";
 }
-declare const _default: React.MemoExoticComponent<({ style, value, label, textError, borderColor, left, right, textStyle, labelStyle, textProps, onChangeText, disabled, textColor, labelColor, theme: themeOverrides, prefix, clearButton, ...props }: TextInputNumberProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, value, label, textError, borderColor, left, right, textStyle, labelStyle, textProps, onChangeText, disabled, textColor, labelColor, theme: themeOverrides, prefix, clearButton, maxValue, type, ...props }: TextInputNumberProps) => React.JSX.Element>;
 export default _default;

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

@@ -42,6 +42,8 @@ interface ViewProps {
     borderRadius?: number;
     borderWidth?: number;
     borderColor?: string;
+    pointerEvents?: "box-none" | "box-only" | "none" | "auto";
+    gap?: number;
 }
-declare const _default: React.MemoExoticComponent<({ row, full, justifyCenter, justifyBetween, alignCenter, center, color, backgroundColor, width, height, padding, paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, paddingLeft, paddingRight, paddingTop, alignEnd, wrap, borderBottomWidth, borderBottomColor, borderRadius, borderWidth, borderColor, style, onPress, activeOpacity, children, disabled, paddingBottom, marginTop, marginBottom, marginLeft, marginRight, borderTopWidth, borderTopColor, borderLeftWidth, borderLeftColor, borderRightWidth, borderRightColor, }: ViewProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ row, full, justifyCenter, justifyBetween, alignCenter, center, color, backgroundColor, width, height, padding, paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, paddingLeft, paddingRight, paddingTop, alignEnd, wrap, borderBottomWidth, borderBottomColor, borderRadius, borderWidth, borderColor, style, onPress, activeOpacity, children, disabled, paddingBottom, marginTop, marginBottom, marginLeft, marginRight, borderTopWidth, borderTopColor, borderLeftWidth, borderLeftColor, borderRightWidth, borderRightColor, pointerEvents, gap, }: ViewProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { Platform, Dimensions, StyleSheet, useColorScheme, Animated, Easing, View as View$1, I18nManager, TouchableOpacity, NativeModules, Switch as Switch$1, Text as Text$2, Pressable, useWindowDimensions, TextInput as TextInput$1, Modal, ActivityIndicator as ActivityIndicator$1, ImageBackground, Image as Image$2 } from 'react-native';
 import * as React$3 from 'react';
-import React__default, { useMemo, memo, forwardRef as forwardRef$1, useState, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
+import React__default, { useMemo, memo, forwardRef as forwardRef$1, useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react';
 import require$$1 from 'deepmerge';
 import color from 'color';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
@@ -1929,7 +1929,7 @@ var styles$h = StyleSheet.create({
 });
 
 var ViewCustom = function (_a) {
-    var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight, borderTopWidth = _a.borderTopWidth, borderTopColor = _a.borderTopColor, borderLeftWidth = _a.borderLeftWidth, borderLeftColor = _a.borderLeftColor, borderRightWidth = _a.borderRightWidth, borderRightColor = _a.borderRightColor;
+    var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight, borderTopWidth = _a.borderTopWidth, borderTopColor = _a.borderTopColor, borderLeftWidth = _a.borderLeftWidth, borderLeftColor = _a.borderLeftColor, borderRightWidth = _a.borderRightWidth, borderRightColor = _a.borderRightColor, pointerEvents = _a.pointerEvents, gap = _a.gap;
     var getStyle = function () {
         var styleCustom = {};
         if (row) {
@@ -2041,6 +2041,12 @@ var ViewCustom = function (_a) {
         if (borderColor) {
             styleCustom.borderColor = borderColor;
         }
+        if (pointerEvents) {
+            styleCustom.pointerEvents = pointerEvents;
+        }
+        if (gap) {
+            styleCustom.gap = gap;
+        }
         return StyleSheet.create({ styleCustom: styleCustom }).styleCustom;
     };
     var defaultStyle = getStyle();
@@ -5956,14 +5962,18 @@ function formatNumberInput(value) {
     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, borderColor = _a.borderColor, left = _a.left, right = _a.right, textStyle = _a.textStyle; _a.labelStyle; var textProps = _a.textProps, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? "" : _f, _g = _a.clearButton, clearButton = _g === void 0 ? false : _g, props = __rest(_a, ["style", "value", "label", "textError", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onChangeText", "disabled", "textColor", "labelColor", "theme", "prefix", "clearButton"]);
+    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, borderColor = _a.borderColor, left = _a.left, right = _a.right, textStyle = _a.textStyle; _a.labelStyle; var textProps = _a.textProps, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? "" : _f, _g = _a.clearButton, clearButton = _g === void 0 ? false : _g, _h = _a.maxValue, maxValue = _h === void 0 ? 9999999999 : _h, _j = _a.type, type = _j === void 0 ? "integer" : _j, props = __rest(_a, ["style", "value", "label", "textError", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onChangeText", "disabled", "textColor", "labelColor", "theme", "prefix", "clearButton", "maxValue", "type"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var _h = useState(false), isShowModalKeyboard = _h[0], setIsShowModalKeyboard = _h[1];
-    var _j = useState(value || ""), inputValue = _j[0], setInputValue = _j[1];
+    var _k = useState(false), isShowModalKeyboard = _k[0], setIsShowModalKeyboard = _k[1];
+    var _l = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _l[0], setInputValue = _l[1];
+    var _m = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), numberValue = _m[0], setNumberValue = _m[1];
     var disabledTextStyle = {
         color: colors.textSecondary,
     };
+    useEffect(function () {
+        setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
+    }, [value]);
     var getColorValue = useMemo(function () {
         if (textError.length > 0) {
             return colors.textErrorDefault;
@@ -5971,44 +5981,61 @@ var TextInputNumber = function (_a) {
         if (disabled) {
             return colors.textPlaceholder;
         }
-        if (value.length > 0) {
+        if (numberValue.length > 0) {
             return colors.textDefault;
         }
         return textColor || colors.textSecondary;
-    }, [textColor, colors, textError, disabled, value]);
+    }, [textColor, colors, textError, disabled, numberValue]);
     var handleKeyPress = function (key) {
         if (key === "del") {
             setInputValue(function (prev) { return prev.slice(0, -1); });
         }
         else if (key === ".") {
-            if (!inputValue.includes(".") && inputValue.length > 0)
+            if (type === "float" &&
+                !inputValue.includes(".") &&
+                inputValue.length > 0) {
                 setInputValue(function (prev) { return prev + key; });
+            }
         }
         else {
-            if (inputValue.includes(".")) {
-                var _a = inputValue.split("."), intPart = _a[0], _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
-                // Giới hạn phần nguyên 10 số, phần thập phân 3 số
-                if (intPart.length < 10 && decimalPart.length === 0) {
-                    setInputValue(function (prev) { return prev + key; });
-                }
-                else if (decimalPart.length < 3) {
-                    setInputValue(function (prev) { return prev + key; });
+            var newInputValue = inputValue === "0" ? key : inputValue + key;
+            var newValue = Number(newInputValue);
+            var maxValueNumber = Number(maxValue);
+            if (!isNaN(newValue) &&
+                !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 < 10 && decimalPart.length === 0) {
+                        setInputValue(function (prev) { return prev + key; });
+                    }
+                    else if (decimalPart.length < 3) {
+                        setInputValue(function (prev) { return prev + key; });
+                    }
                 }
-            }
-            else {
-                // Chỉ cho phép phần nguyên tối đa 10 số
-                if (inputValue.length < 10) {
-                    setInputValue(function (prev) { return (prev === "0" ? key : prev + key); });
+                else {
+                    if (inputValue.length < 10) {
+                        setInputValue(function (prev) { return (prev === "0" ? key : prev + key); });
+                    }
                 }
             }
         }
     };
     var handleClear = function () {
         setInputValue("");
+    };
+    var handleClearInput = function () {
+        setInputValue("");
+        setNumberValue("");
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText("");
     };
     var handleSave = function () {
-        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(inputValue);
+        var finalValue = inputValue;
+        if (inputValue.endsWith(".")) {
+            finalValue = inputValue.slice(0, -1);
+        }
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(finalValue);
+        setNumberValue(finalValue);
         setIsShowModalKeyboard(false);
     };
     var checkValueEmpty = function () {
@@ -6028,6 +6055,9 @@ var TextInputNumber = function (_a) {
     };
     var onCloseModalKeyboard = function () {
         setIsShowModalKeyboard(false);
+        setTimeout(function () {
+            setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
+        }, 300);
     };
     return (React__default.createElement(View, null,
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onShowModalKeyboard }, props, { disabled: disabled || false }),
@@ -6068,16 +6098,16 @@ var TextInputNumber = function (_a) {
                         !checkValueEmpty() && prefix.toString() !== "" && (React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: colors.textSecondary, style: [disabled && disabledTextStyle, textStyle] }, textProps),
                             prefix, " ")),
                         React__default.createElement(View, { full: true },
-                            React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: getColorValue, style: [disabled && disabledTextStyle, textStyle] }, textProps), checkValueEmpty() ? label : formatNumberInput(value))))),
-                clearButton && !checkValueEmpty() && (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, onPress: handleClear },
+                            React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: getColorValue, style: [disabled && disabledTextStyle, textStyle] }, textProps), checkValueEmpty() ? label : formatNumberInput(numberValue))))),
+                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(View, { paddingLeft: SPACE_8, height: "100%" }, right)),
                 React__default.createElement(Spacer, { width: SPACE_12 }))),
         textError.length > 0 && (React__default.createElement(View, { paddingHorizontal: SPACE_12, paddingVertical: SPACE_4 },
             React__default.createElement(Text$1, { style: styles$a.text12, color: colors.textErrorDefault }, textError))),
-        React__default.createElement(Modal, { visible: isShowModalKeyboard, transparent: true, animationType: "fade" },
-            React__default.createElement(TouchableOpacity, { style: styles$a.modalOverlay, activeOpacity: 1 },
-                React__default.createElement(View, { backgroundColor: colors.surfacePrimaryDefault, style: styles$a.modalContent },
+        React__default.createElement(Modal, { visible: isShowModalKeyboard, transparent: true, animationType: "fade", onRequestClose: onCloseModalKeyboard },
+            React__default.createElement(TouchableOpacity, { style: styles$a.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
+                React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles$a.modalContent },
                     React__default.createElement(Text$1, { style: styles$a.modalTitle }, label),
                     React__default.createElement(View, { width: "100%" },
                         React__default.createElement(View, { paddingHorizontal: SPACE_40 },
@@ -6089,7 +6119,15 @@ var TextInputNumber = function (_a) {
                         ["4", "5", "6"],
                         ["7", "8", "9"],
                         [".", "0", "del"],
-                    ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$a.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: styles$a.keyButton, onPress: function () { return handleKeyPress(key); } }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default.createElement(Text$1, { style: styles$a.keyText }, key)))); }))); })),
+                    ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$a.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
+                            styles$a.keyButton,
+                            key === "." && type === "integer" && styles$a.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$a.keyText,
+                            key === "." &&
+                                type === "integer" &&
+                                styles$a.disabledKeyText,
+                        ] }, key)))); }))); })),
                     React__default.createElement(View, { style: styles$a.actionRow },
                         React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$a.actionButton, onPress: onCloseModalKeyboard },
                             React__default.createElement(Text$1, { style: styles$a.actionText }, "\u0110\u00F3ng")),
@@ -6165,6 +6203,10 @@ var styles$a = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
     }, actionText: {
         fontSize: 16,
         fontWeight: "600",
+    }, disabledKey: {
+        opacity: 0.5,
+    }, disabledKeyText: {
+        opacity: 0.5,
     } }));
 var TextInputNumber$1 = React__default.memo(TextInputNumber);
 
@@ -6197,7 +6239,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, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix"]);
+    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, maxValue = _a.maxValue, type = _a.type, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix", "maxValue", "type"]);
     var theme = useInternalTheme();
     var isControlled = rest.value !== undefined;
     var validInputValue = isControlled ? rest.value : rest.defaultValue;
@@ -6399,7 +6441,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, value: value, label: "Text number", clearButton: clearButton, onChangeText: handleChangeText }));
+        return (React__default.createElement(TextInputNumber$1, { textError: textError, disabled: disabled, prefix: prefix, value: value, label: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, type: type }));
     }
     return (React__default.createElement(TextInputFlat, __assign({ dense: dense, disabled: disabled, error: errorProp, editable: editable, clearButton: clearButton, render: render }, rest, { theme: theme, value: value, parentState: {
             labeled: labeled,