sapo-components-ui-rn 1.0.84 → 1.0.86

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

@@ -11,7 +11,7 @@ export interface ButtonProps extends TouchableOpacityProps {
     isLoading?: boolean;
     left?: React.ReactNode;
     right?: React.ReactNode;
-    margin?: Number;
+    margin?: number;
     textProps?: IText;
     textColor?: string;
     bold?: boolean;
@@ -25,6 +25,7 @@ export interface ButtonProps extends TouchableOpacityProps {
     theme?: ThemeProp;
     buttonSize?: "normal" | "small";
     critical?: boolean;
+    width?: number;
 }
-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>;
+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, width, ...props }: ButtonProps) => React.JSX.Element>;
 export default _default;

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

@@ -27,6 +27,7 @@ interface ViewProps {
     marginBottom?: number;
     marginLeft?: number;
     marginRight?: number;
+    margin?: number;
     style?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     alignEnd?: boolean;
@@ -45,5 +46,5 @@ interface ViewProps {
     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, pointerEvents, gap, }: 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, margin, borderTopWidth, borderTopColor, borderLeftWidth, borderLeftColor, borderRightWidth, borderRightColor, pointerEvents, gap, }: ViewProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -1628,7 +1628,7 @@ function adaptNavigationTheme(themes) {
 }
 
 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, pointerEvents = _a.pointerEvents, gap = _a.gap;
+    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, margin = _a.margin, 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) {
@@ -1677,6 +1677,9 @@ var ViewCustom = function (_a) {
         if (marginVertical) {
             styleCustom.marginVertical = marginVertical;
         }
+        if (margin) {
+            styleCustom.margin = margin;
+        }
         if (paddingLeft) {
             styleCustom.paddingLeft = paddingLeft;
         }
@@ -5358,7 +5361,7 @@ var TextInputFlat = function (_a) {
                             contentStyle,
                         ] })),
                     renderSuffix())),
-            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$d.clearButton },
+            parentState.focused && !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 })),
             checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                     marginRight: SPACE_8,
@@ -5608,7 +5611,7 @@ var TextInputDefault = function (_a) {
                             contentStyle,
                         ] })),
                     !multiline && renderSuffix()))),
-            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$c.clearButtonMultiline : styles$c.clearButton },
+            parentState.focused && !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 })),
             checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: colors.borderPrimaryDefault, style: {
                     marginRight: CONSTANTS.SPACE_8,
@@ -6248,7 +6251,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.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 style = _a.style, title = _a.title; _a.border; var borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right, margin = _a.margin, 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, width = _a.width, 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", "width"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
@@ -6299,7 +6302,7 @@ var Button = function (_a) {
     };
     return (React__default.createElement(View, { row: !full },
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading }),
-            React__default.createElement(View, { style: [
+            React__default.createElement(View, { width: width, margin: margin, style: [
                     styles$a.button,
                     {
                         borderRadius: CONSTANTS.BORDER_RADIUS_6,
@@ -6321,24 +6324,28 @@ var Button = function (_a) {
                     ],
                     isLoading && { justifyContent: "center" },
                     style,
-                ], disabled: isLoading },
+                ], disabled: isLoading }, isLoading ? (React__default.createElement(ActivityIndicator, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || renderTextColor() })) : (React__default.createElement(View, { full: true, center: true, row: true },
                 React__default.createElement(Spacer, { width: left ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 }),
                 !isLoading && left,
-                left && React__default.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
-                isLoading ? (React__default.createElement(ActivityIndicator, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || renderTextColor() })) : (React__default.createElement(View, { full: true, center: true },
-                    React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: textColor || renderTextColor(), size: size, bold: bold, medium: medium, style: [disabled && disabledTextStyle, textStyle] }, textProps), title))),
-                right && React__default.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
+                left && (React__default.createElement(Spacer, { width: buttonSize === "small"
+                        ? CONSTANTS.SPACE_4
+                        : CONSTANTS.SPACE_8 })),
+                React__default.createElement(View, { full: true, center: true },
+                    React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: textColor || renderTextColor(), size: size, bold: bold, medium: medium, style: [disabled && disabledTextStyle, textStyle] }, textProps), title)),
+                right && (React__default.createElement(Spacer, { width: buttonSize === "small"
+                        ? CONSTANTS.SPACE_4
+                        : CONSTANTS.SPACE_8 })),
                 !isLoading && right,
-                React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))));
+                React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))))));
 };
 var styles$a = StyleSheet.create({
     disabled: { opacity: 0.6 },
     button: {
         height: CONSTANTS.BUTTON_HEIGHT,
-        flexDirection: "row",
+        // flexDirection: "row",
         alignItems: "center",
-        justifyContent: "space-between",
-        minWidth: CONSTANTS.DEVICE_WIDTH / 4.5,
+        justifyContent: "center",
+        minWidth: CONSTANTS.DEVICE_WIDTH / 4,
     },
     border: {
         borderWidth: CONSTANTS.BORDER_WIDTH_1,