sapo-components-ui-rn 1.1.56 → 1.1.58

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

@@ -22,7 +22,7 @@ export interface ButtonProps extends TouchableOpacityProps {
     onPress?: (res?: any) => void;
     full?: boolean;
     theme?: ThemeProp;
-    buttonSize?: "normal" | "small";
+    buttonSize?: "normal" | "small" | "large";
     type?: "default" | "text";
     critical?: boolean;
     width?: number;

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

@@ -15,6 +15,10 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     type?: "integer" | "float";
     formatDecimal?: 1 | 2 | 3;
     required?: boolean;
+    labelScaleValue?: number;
+    labelStyle?: StyleProp<TextStyle>;
+    textErrorStyle?: StyleProp<TextStyle>;
+    height?: number;
     /**
      * If true, user won't be able to interact with the component.
      */

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, ViewStyle, TouchableOpacityProps } from "react-native";
+import { StyleProp, ViewStyle, TouchableOpacityProps, TextStyle } from "react-native";
 import { ThemeProp } from "../../types";
 export interface TextInputNumberProps extends TouchableOpacityProps {
     style?: StyleProp<ViewStyle>;
@@ -19,6 +19,10 @@ export interface TextInputNumberProps extends TouchableOpacityProps {
     type?: "integer" | "float";
     formatDecimal?: 1 | 2 | 3;
     required?: boolean;
+    labelStyle?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<TextStyle>;
+    textErrorStyle?: StyleProp<TextStyle>;
+    height?: number;
 }
-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>;
+declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, suffix, clearButton, maxValue, minValue, type, formatDecimal, required, labelStyle, contentStyle, textErrorStyle, height, ...props }: TextInputNumberProps) => React.JSX.Element>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { TextInput as NativeTextInput, Animated, TextStyle, LayoutChangeEvent, ColorValue, StyleProp, ViewProps, ViewStyle, NativeSyntheticEvent, TextLayoutEventData } from "react-native";
+import type { TextInput as NativeTextInput, Animated, TextStyle, LayoutChangeEvent, ColorValue, StyleProp, ViewProps, ViewStyle, NativeSyntheticEvent, TextLayoutEventData, TextProps } from "react-native";
 import type { $Omit, InternalTheme, ThemeProp } from "./../../types";
 export type TextInputLabelProp = string | React.ReactElement;
 type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
@@ -79,6 +79,7 @@ export type State = {
         width: number;
     };
     contentStyle?: StyleProp<ViewProps>;
+    labelStyle?: StyleProp<TextProps>;
 };
 export type ChildTextInputProps = {
     parentState: State;
@@ -97,6 +98,10 @@ export type ChildTextInputProps = {
     suffix?: string;
     textError?: string;
     required?: boolean;
+    labelStyle?: StyleProp<TextStyle>;
+    labelScaleValue?: number;
+    textErrorStyle?: StyleProp<TextStyle>;
+    inputHeight?: number;
 } & $Omit<TextInputTypesWithoutMode, "theme"> & {
     theme: InternalTheme;
 };

package/dist/index.esm.js

@@ -5661,7 +5661,7 @@ 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 ? 999999999999 : _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 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 ? 999999999999 : _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, labelStyle = _a.labelStyle, contentStyle = _a.contentStyle, textErrorStyle = _a.textErrorStyle, height = _a.height, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "minValue", "type", "formatDecimal", "required", "labelStyle", "contentStyle", "textErrorStyle", "height"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var _p = useState(false), isShowModalKeyboard = _p[0], setIsShowModalKeyboard = _p[1];
@@ -6006,6 +6006,9 @@ var TextInputNumber = function (_a) {
                     {
                         borderRadius: BORDER_RADIUS_6,
                     },
+                    {
+                        height: height ? height : 48,
+                    },
                     [
                         styles$c.border,
                         {
@@ -6037,6 +6040,7 @@ var TextInputNumber = function (_a) {
                 React__default.createElement(View, { full: true, paddingRight: SPACE_4 },
                     !checkValueEmpty() && !checkLabelEmpty() && (React__default.createElement(View, null,
                         React__default.createElement(Text$1, { size: 12, color: colors.textSecondary, style: [
+                                labelStyle,
                                 disabled && {
                                     color: colors.textPlaceholder,
                                 },
@@ -6045,17 +6049,25 @@ var TextInputNumber = function (_a) {
                                 },
                             ] },
                             label,
-                            required && React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
+                            required && (React__default.createElement(Text$1, { style: [labelStyle], color: colors.textErrorDefault },
+                                " ",
+                                "*"))))),
                     React__default.createElement(View, { row: true, alignCenter: true },
-                        !checkValueEmpty() && prefix.toString() !== "" && (React__default.createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [disabled && disabledTextStyle] },
+                        !checkValueEmpty() && prefix.toString() !== "" && (React__default.createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [contentStyle, , disabled && disabledTextStyle] },
                             prefix, " ")),
                         React__default.createElement(View, { full: true },
-                            React__default.createElement(Text$1, { numberOfLines: 1, color: getColorValue, style: [styles$c.text14, disabled && disabledTextStyle] },
+                            React__default.createElement(Text$1, { numberOfLines: 1, color: getColorValue, style: [
+                                    styles$c.text14,
+                                    contentStyle,
+                                    disabled && disabledTextStyle,
+                                ] },
                                 checkValueEmpty()
                                     ? label
                                     : formatNumberInput$1(numberValue, formatDecimal),
-                                checkValueEmpty() && required && (React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
-                        !checkValueEmpty() && suffix.toString() !== "" && (React__default.createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [disabled && disabledTextStyle] }, " ",
+                                checkValueEmpty() && required && (React__default.createElement(Text$1, { style: [contentStyle], color: colors.textErrorDefault },
+                                    " ",
+                                    "*")))),
+                        !checkValueEmpty() && suffix.toString() !== "" && (React__default.createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [contentStyle, disabled && disabledTextStyle] }, " ",
                             suffix)))),
                 clearButton && !checkValueEmpty() && (React__default.createElement(TouchableOpacity, { style: {
                         alignContent: "center",
@@ -6068,7 +6080,7 @@ var TextInputNumber = function (_a) {
                 right && (React__default.createElement(View, { center: true, paddingLeft: SPACE_8, height: "100%" }, right)),
                 React__default.createElement(Spacer, { width: SPACE_12 }))),
         !disabled && textError.length > 0 && (React__default.createElement(View, { paddingHorizontal: SPACE_12, paddingVertical: SPACE_4 },
-            React__default.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError))),
+            React__default.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault, style: [textErrorStyle] }, textError))),
         React__default.createElement(Modal, { visible: isShowModalKeyboard, transparent: true, animationType: "fade", onRequestClose: onCloseModalKeyboard },
             React__default.createElement(TouchableOpacity, { style: styles$c.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
                 React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles$c.modalContent },
@@ -6118,7 +6130,8 @@ var styles$c = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
         height: 48,
         flexDirection: "row",
         justifyContent: "space-between",
-        paddingVertical: Platform.OS === "android" ? 3 : SPACE_6,
+        alignItems: "center",
+        // paddingVertical: Platform.OS === "android" ? 3 : SPACE_6
     }, border: {
         borderWidth: BORDER_WIDTH_1,
     }, small: {
@@ -6208,7 +6221,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, 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 _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, labelStyle = _a.labelStyle, textErrorStyle = _a.textErrorStyle, height = _a.height, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix", "suffix", "maxValue", "minValue", "type", "required", "labelStyle", "textErrorStyle", "height"]);
     var theme = useInternalTheme();
     var isControlled = rest.value !== undefined;
     var validInputValue = isControlled ? rest.value : rest.defaultValue;
@@ -6410,7 +6423,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, minValue: minValue, 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, labelStyle: labelStyle, textErrorStyle: textErrorStyle, contentStyle: contentStyle, height: height }));
     }
     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,
@@ -6466,6 +6479,26 @@ var Button = function (_a) {
                 ];
         }
     };
+    var renderButtonSize = function () {
+        switch (buttonSize) {
+            case "small":
+                return {
+                    height: 36,
+                };
+            case "normal":
+                return {
+                    height: 48,
+                };
+            case "large":
+                return {
+                    height: 56,
+                };
+            default:
+                return {
+                    height: 48,
+                };
+        }
+    };
     var renderTextColor = function () {
         switch (mode) {
             case "outlined":
@@ -6522,7 +6555,7 @@ var Button = function (_a) {
                     renderButtonStyle(),
                     borderColor && { borderColor: borderColor },
                     backgroundColor && { backgroundColor: backgroundColor },
-                    buttonSize === "small" && styles$b.small,
+                    renderButtonSize(),
                     disabled &&
                         !isLoading && [
                         styles$b.disabled,