sapo-components-ui-rn 1.0.41 → 1.0.43

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

@@ -23,6 +23,10 @@ interface ViewProps {
     paddingLeft?: number;
     paddingRight?: number;
     paddingTop?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
     style?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     alignEnd?: boolean;
@@ -33,5 +37,5 @@ interface ViewProps {
     borderWidth?: number;
     borderColor?: string;
 }
-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, }: 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, }: ViewProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -1920,7 +1920,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;
+    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;
     var getStyle = function () {
         var styleCustom = {};
         if (row) {
@@ -1975,6 +1975,21 @@ var ViewCustom = function (_a) {
         if (paddingTop) {
             styleCustom.paddingTop = paddingTop;
         }
+        if (paddingBottom) {
+            styleCustom.paddingBottom = paddingBottom;
+        }
+        if (marginLeft) {
+            styleCustom.marginLeft = marginLeft;
+        }
+        if (marginRight) {
+            styleCustom.marginRight = marginRight;
+        }
+        if (marginTop) {
+            styleCustom.marginTop = marginTop;
+        }
+        if (marginBottom) {
+            styleCustom.marginBottom = marginBottom;
+        }
         if (paddingRight) {
             styleCustom.paddingRight = paddingRight;
         }
@@ -5551,7 +5566,7 @@ var TextInputDefault = function (_a) {
     var _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.editable, editable = _d === void 0 ? true : _d, label = _a.label, _e = _a.error, error = _e === void 0 ? false : _e, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, customOutlineColor = _a.outlineColor, activeOutlineColor = _a.activeOutlineColor; _a.outlineStyle; var textColor = _a.textColor; _a.dense; var style = _a.style, theme = _a.theme, _f = _a.render, render = _f === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _f, _g = _a.multiline, multiline = _g === void 0 ? false : _g, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText; _a.onLayout; var left = _a.left, right = _a.right, placeholderTextColor = _a.placeholderTextColor, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, contentStyle = _a.contentStyle, _j = _a.value, value = _j === void 0 ? "" : _j, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "outlineColor", "activeOutlineColor", "outlineStyle", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayout", "left", "right", "placeholderTextColor", "clearButton", "contentStyle", "value"]);
     var colors = theme.colors;
     var font = theme.fonts.bodyLarge;
-    var _k = (StyleSheet.flatten(style) || {}), fontSizeStyle = _k.fontSize, fontWeight = _k.fontWeight, lineHeightStyle = _k.lineHeight, height = _k.height, _l = _k.backgroundColor; _l === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _l; var textAlign = _k.textAlign, viewStyle = __rest(_k, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign"]);
+    var _k = (StyleSheet.flatten(style) || {}), fontSizeStyle = _k.fontSize, fontWeight = _k.fontWeight, lineHeightStyle = _k.lineHeight, height = _k.height, _l = _k.backgroundColor; _l === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _l; var textAlign = _k.textAlign; _k.minHeight; var viewStyle = __rest(_k, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign", "minHeight"]);
     var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
     var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
     var _m = getOutlinedInputColors({
@@ -5611,7 +5626,10 @@ var TextInputDefault = function (_a) {
         return React$3.createElement(View, null);
     };
     return (React$3.createElement(View, { style: viewStyle },
-        React$3.createElement(View, { row: true, alignCenter: true, justifyCenter: true, style: [
+        React$3.createElement(View, { row: true, 
+            // full
+            // alignCenter
+            justifyCenter: true, style: [
                 {
                     borderRadius: CONSTANTS.BORDER_RADIUS_6,
                     borderWidth: 1,
@@ -5623,11 +5641,14 @@ var TextInputDefault = function (_a) {
                 },
                 contentStyle,
             ] },
-            React$3.createElement(View, { paddingLeft: CONSTANTS.SPACE_12 }, left),
+            React$3.createElement(View, { center: true, paddingLeft: CONSTANTS.SPACE_12 }, left),
             left && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
-            React$3.createElement(View, { full: true, style: {
-                    height: height || 48,
-                } },
+            React$3.createElement(View, { full: true, style: [
+                    {
+                        height: height || 48,
+                        minHeight: height || 48,
+                    },
+                ] },
                 multiline && renderLabel(), render === null || render === void 0 ? void 0 :
                 render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: ((_b = parentState.value) === null || _b === void 0 ? void 0 : _b.toString()) == ""
                         ? parentState.focused
@@ -5643,13 +5664,13 @@ var TextInputDefault = function (_a) {
                                 ? multiline
                                     ? CONSTANTS.SPACE_2
                                     : CONSTANTS.SPACE_8
-                                : CONSTANTS.SPACE_4 }),
+                                : CONSTANTS.SPACE_4, paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
                         contentStyle,
                     ] }))),
             !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$b.clearButtonMultiline : styles$b.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
             right && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
-            right && React$3.createElement(View, { paddingRight: CONSTANTS.SPACE_12 }, right))));
+            right && (React$3.createElement(View, { center: true, paddingRight: CONSTANTS.SPACE_12 }, right)))));
 };
 var styles$b = StyleSheet.create({
     input: {
@@ -6642,7 +6663,7 @@ var Checkbox = function (_a) {
     var _f = useState(checked), isActive = _f[0], setActive = _f[1];
     var checkboxColor = useCheckboxColor(isActive, disabled);
     var handlePressChipBar = useCallback(function () {
-        setActive(!isActive);
+        // setActive(!isActive);
         onPress === null || onPress === void 0 ? void 0 : onPress();
     }, [isActive, onPress]);
     useEffect(function () {
@@ -6846,29 +6867,30 @@ var Tag = function (_a) {
     useEffect(function () {
         setActive(isActive);
     }, [isActive]);
-    return (React__default.createElement(View, { row: true, height: height, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, center: true, style: [
-            disabled && {
-                backgroundColor: colors.surfaceSecondaryDefault,
-                borderColor: colors.surfaceSecondaryDefault,
-            },
-            style,
-        ], onPress: handlePressTag, backgroundColor: active
-            ? colors.surfaceBrandInversePressed
-            : colors.surfaceBrandInverseDefault },
-        leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
-        React__default.createElement(View, null,
-            React__default.createElement(Text$1, { size: 14, numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, style: [
-                    styles.textMedium,
-                    {
-                        lineHeight: 16,
-                    },
-                    disabled && {
-                        color: colors.textSecondary,
-                    },
-                    textStyle,
-                ] }, title)),
-        rightIcon ? (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)) : hideRightIcon ? (React__default.createElement(View, null)) : (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 },
-            React__default.createElement(Icon$1, { name: "IconClose", type: "Svg", size: 20, color: colors.iconBrandDefault })))));
+    return (React__default.createElement(View, { row: true },
+        React__default.createElement(View, { row: true, height: height, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, center: true, style: [
+                disabled && {
+                    backgroundColor: colors.surfaceSecondaryDefault,
+                    borderColor: colors.surfaceSecondaryDefault,
+                },
+                style,
+            ], onPress: handlePressTag, backgroundColor: active
+                ? colors.surfaceBrandInversePressed
+                : colors.surfaceBrandInverseDefault },
+            leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
+            React__default.createElement(View, null,
+                React__default.createElement(Text$1, { size: 14, numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, style: [
+                        styles.textMedium,
+                        {
+                            lineHeight: 16,
+                        },
+                        disabled && {
+                            color: colors.textSecondary,
+                        },
+                        textStyle,
+                    ] }, title)),
+            rightIcon ? (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)) : hideRightIcon ? (React__default.createElement(View, null)) : (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 },
+                React__default.createElement(Icon$1, { name: "IconClose", type: "Svg", size: 20, color: colors.iconBrandDefault }))))));
 };
 var styles = StyleSheet.create(__assign({}, containerStyles));