sapo-components-ui-rn 1.0.32 → 1.0.34

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

@@ -19,7 +19,6 @@ export interface SelectionFieldProps extends TouchableOpacityProps {
     disabled?: boolean;
     onPress?: (res?: any) => void;
     theme?: ThemeProp;
-    required?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, size, theme: themeOverrides, required, ...props }: SelectionFieldProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, size, theme: themeOverrides, ...props }: SelectionFieldProps) => React.JSX.Element>;
 export default _default;

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

@@ -13,6 +13,7 @@ interface TagProps {
     ellipsizeMode?: "head" | "middle" | "tail" | "clip";
     numberOfLines?: number;
     hideRightIcon?: boolean;
+    height?: number;
 }
-declare const Tag: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, isActive, ellipsizeMode, numberOfLines, hideRightIcon, }: TagProps) => React.JSX.Element;
+declare const Tag: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, isActive, ellipsizeMode, numberOfLines, hideRightIcon, height, }: TagProps) => React.JSX.Element;
 export default Tag;

package/dist/index.esm.js

@@ -6741,22 +6741,12 @@ var styles$2 = StyleSheet.create({
 });
 
 var SelectionField = function (_a) {
-    var style = _a.style, _b = _a.content, content = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.error, error = _d === void 0 ? "" : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle; _a.labelStyle; var textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor, _f = _a.size, size = _f === void 0 ? 16 : _f; _a.theme; var _g = _a.required, required = _g === void 0 ? false : _g, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "size", "theme", "required"]);
+    var style = _a.style, _b = _a.content, content = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.error, error = _d === void 0 ? "" : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle; _a.labelStyle; var textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor, _f = _a.size, size = _f === void 0 ? 14 : _f; _a.theme; var props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "size", "theme"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
         color: colors.textSecondary,
     };
-    var getColor = function () {
-        if (disabled)
-            return colors.textPlaceholder;
-        if (error.length > 0)
-            return colors.textErrorDefault;
-        if (content.toString() === "") {
-            return textColor || colors.textSecondary;
-        }
-        return textColor || colors.textDefault;
-    };
     return (React__default.createElement(View, null,
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
@@ -6783,27 +6773,22 @@ var SelectionField = function (_a) {
                 ] },
                 React__default.createElement(Spacer, { width: SPACE_12 }),
                 React__default.createElement(View, { full: true },
-                    content.toString() !== "" && label.toString() !== "" && (React__default.createElement(Text$1, { color: labelColor || colors.textSecondary, style: [
-                            styles$1.text12,
+                    content.toString() !== "" && label.toString() !== "" && (React__default.createElement(Text$1, { size: 12, color: labelColor || colors.textSecondary, style: [
                             disabled && {
                                 color: colors.textPlaceholder,
                             },
                             error.length > 0 && {
                                 color: colors.textErrorDefault,
                             },
-                        ] },
-                        label,
-                        required && React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *"))),
-                    React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: getColor(), size: size, style: [disabled && disabledTextStyle, textStyle] }, textProps),
-                        content.toString() === "" ? label : content,
-                        required && content.toString() === "" && (React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
+                        ] }, label)),
+                    React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: textColor || colors.textDefault, size: size, style: [disabled && disabledTextStyle, textStyle] }, textProps), content.toString() === "" ? label : content)),
                 right || React__default.createElement(Icon$1, { name: "IconArrowDown", type: "Svg", size: 24 }),
                 React__default.createElement(Spacer, { width: SPACE_12 }))),
         error.length > 0 && (React__default.createElement(View, { paddingHorizontal: SPACE_12, paddingVertical: SPACE_4 },
             React__default.createElement(Text$1, { style: styles$1.text12, color: colors.textErrorDefault }, error)))));
 };
 var styles$1 = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
-        minHeight: BUTTON_HEIGHT,
+        height: 48,
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
@@ -6817,20 +6802,21 @@ var index = React__default.memo(SelectionField);
 
 var SearchInput = function (_a) {
     var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rightIcon = _a.rightIcon, _d = _a.clearButton, clearButton = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Tìm kiếm" : _e, onFocus = _a.onFocus, onBlur = _a.onBlur, onChangeText = _a.onChangeText, style = _a.style, height = _a.height;
-    return (React__default.createElement(TextInput, { left: React__default.createElement(View, null,
-            React__default.createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 20 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, right: rightIcon, onFocus: onFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: onChangeText, style: [
+    return (React__default.createElement(TextInput, { left: React__default.createElement(View, { center: true },
+            React__default.createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 18 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, right: rightIcon, onFocus: onFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: onChangeText, style: [
             {
                 height: height || 40,
             },
             style,
         ] }));
 };
+StyleSheet.create(__assign({}, containerStyles));
 
 var Tag = function (_a) {
-    var style = _a.style, _b = _a.borderRadius, borderRadius = _b === void 0 ? CONSTANTS.BORDER_RADIUS_ROUNDED : _b, _c = _a.title, title = _c === void 0 ? "content" : _c, textStyle = _a.textStyle, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.isActive, isActive = _e === void 0 ? false : _e, _f = _a.ellipsizeMode, ellipsizeMode = _f === void 0 ? "tail" : _f, _g = _a.numberOfLines, numberOfLines = _g === void 0 ? 1 : _g, _h = _a.hideRightIcon, hideRightIcon = _h === void 0 ? false : _h;
+    var style = _a.style, _b = _a.borderRadius, borderRadius = _b === void 0 ? CONSTANTS.BORDER_RADIUS_ROUNDED : _b, _c = _a.title, title = _c === void 0 ? "content" : _c, textStyle = _a.textStyle, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.isActive, isActive = _e === void 0 ? false : _e, _f = _a.ellipsizeMode, ellipsizeMode = _f === void 0 ? "tail" : _f, _g = _a.numberOfLines, numberOfLines = _g === void 0 ? 1 : _g, _h = _a.hideRightIcon, hideRightIcon = _h === void 0 ? false : _h, _j = _a.height, height = _j === void 0 ? 32 : _j;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var _j = useState(isActive), active = _j[0], setActive = _j[1];
+    var _k = useState(isActive), active = _k[0], setActive = _k[1];
     var handlePressTag = useCallback(function () {
         setActive(!active);
         onPress === null || onPress === void 0 ? void 0 : onPress();
@@ -6839,7 +6825,7 @@ var Tag = function (_a) {
         setActive(isActive);
     }, [isActive]);
     return (React__default.createElement(View, { row: true },
-        React__default.createElement(View, { row: true, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, alignCenter: true, style: [
+        React__default.createElement(View, { row: true, height: height, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, alignCenter: true, style: [
                 disabled && {
                     backgroundColor: colors.surfaceSecondaryDefault,
                     borderColor: colors.surfaceSecondaryDefault,
@@ -6850,8 +6836,7 @@ var Tag = function (_a) {
                 : colors.surfaceBrandInverseDefault },
             leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
             React__default.createElement(View, null,
-                React__default.createElement(Text$1, { numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, style: [
-                        styles.text14,
+                React__default.createElement(Text$1, { size: 14, numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, style: [
                         styles.textMedium,
                         disabled && {
                             color: colors.textSecondary,
@@ -6859,14 +6844,9 @@ var Tag = function (_a) {
                         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: 24, color: colors.iconBrandDefault }))))));
+                React__default.createElement(SvgIcon, { name: "IconClose" }))))));
 };
-var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { badgeContainer: {
-        position: "absolute",
-        right: 0,
-        top: -4,
-        zIndex: 999,
-    } }));
+var styles = StyleSheet.create(__assign({}, containerStyles));
 
 var toastRef = React__default.createRef();
 var showToast = function (_a) {