sapo-components-ui-rn 1.0.59 → 1.0.60

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

@@ -24,6 +24,7 @@ export interface ButtonProps extends TouchableOpacityProps {
     full?: boolean;
     theme?: ThemeProp;
     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, ...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, size, medium, mode, transparent, full, theme: themeOverrides, buttonSize, 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> & {
     textError?: string;
     maxValue?: number;
     type?: "integer" | "float";
+    formatDecimal?: 1 | 2 | 3;
     /**
      * If true, user won't be able to interact with the component.
      */

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

@@ -22,6 +22,7 @@ export interface TextInputNumberProps extends TouchableOpacityProps {
     theme?: ThemeProp;
     maxValue?: number;
     type?: "integer" | "float";
+    formatDecimal?: 1 | 2 | 3;
 }
-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>;
+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, formatDecimal, ...props }: TextInputNumberProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -5942,7 +5942,7 @@ var containerStyles = StyleSheet.create({
     },
 });
 
-function formatNumberInput(value) {
+function formatNumberInput(value, formatDecimal) {
     if (!value)
         return "0";
     // Xử lý số âm
@@ -5953,7 +5953,7 @@ function formatNumberInput(value) {
     intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     // Giới hạn phần thập phân 3 số
     if (decimalPart)
-        decimalPart = decimalPart.slice(0, 3);
+        decimalPart = decimalPart.slice(0, formatDecimal);
     var result = intPart;
     if (decimalPart !== undefined)
         result += "." + decimalPart;
@@ -5962,12 +5962,12 @@ 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, _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 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 ? 999999999 : _h, _j = _a.type, type = _j === void 0 ? "integer" : _j, _k = _a.formatDecimal, formatDecimal = _k === void 0 ? 3 : _k, props = __rest(_a, ["style", "value", "label", "textError", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onChangeText", "disabled", "textColor", "labelColor", "theme", "prefix", "clearButton", "maxValue", "type", "formatDecimal"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
-    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 _l = useState(false), isShowModalKeyboard = _l[0], setIsShowModalKeyboard = _l[1];
+    var _m = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _m[0], setInputValue = _m[1];
+    var _o = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), numberValue = _o[0], setNumberValue = _o[1];
     var disabledTextStyle = {
         color: colors.textSecondary,
     };
@@ -6098,7 +6098,9 @@ 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(numberValue))))),
+                            React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: getColorValue, style: [disabled && disabledTextStyle, textStyle] }, textProps), checkValueEmpty()
+                                ? label
+                                : formatNumberInput(numberValue, formatDecimal))))),
                 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)),
@@ -6111,7 +6113,7 @@ var TextInputNumber = function (_a) {
                     React__default.createElement(Text$1, { style: styles$a.modalTitle }, label),
                     React__default.createElement(View, { width: "100%" },
                         React__default.createElement(View, { paddingHorizontal: SPACE_40 },
-                            React__default.createElement(Text$1, { numberOfLines: 1, style: styles$a.valueText }, formatNumberInput(inputValue) || "0")),
+                            React__default.createElement(Text$1, { numberOfLines: 1, style: styles$a.valueText }, formatNumberInput(inputValue, formatDecimal) || "0")),
                         React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles$a.clearButton },
                             React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
                     React__default.createElement(View, { style: styles$a.keyboardGrid }, [
@@ -6441,7 +6443,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: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, type: type }));
+        return (React__default.createElement(TextInputNumber$1, { textError: textError, disabled: disabled, prefix: prefix, value: value, label: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, formatDecimal: rest.formatDecimal, 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,
@@ -6464,18 +6466,32 @@ 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, 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"]);
+    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 theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
-        color: colors.textBrandDisabled,
+        color: colors.textDisabled,
     };
     var renderButtonStyle = function () {
         switch (mode) {
             case "outlined":
-                return [styles$9.border, { borderColor: colors.borderBrandDefault }];
+                return [
+                    styles$9.border,
+                    { borderColor: colors.borderBrandDefault },
+                    critical && {
+                        backgroundColor: colors.surfacePrimaryDefault,
+                        borderColor: colors.borderCriticalDefault,
+                        borderWidth: CONSTANTS.BORDER_WIDTH_1,
+                    },
+                ];
             case "contained":
-                return [{ backgroundColor: colors.surfaceBrandDefault }];
+                return [
+                    {
+                        backgroundColor: critical
+                            ? colors.surfaceCriticalDefault
+                            : colors.surfaceBrandDefault,
+                    },
+                ];
             case "transparent":
                 return [
                     { borderColor: colors.borderBrandDefault },
@@ -6486,10 +6502,16 @@ var Button = function (_a) {
     var renderTextColor = function () {
         switch (mode) {
             case "outlined":
+                if (critical) {
+                    return colors.textCriticalDefault;
+                }
                 return colors.textBrandDefault;
             case "contained":
                 return colors.textOnFillDefault;
             case "transparent":
+                if (critical) {
+                    return colors.textCriticalDefault;
+                }
                 return colors.textBrandDefault;
         }
     };