sapo-components-ui-rn 1.0.31 → 1.0.33

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/index.esm.js

@@ -2608,7 +2608,7 @@ var InputLabel = function (props) {
     var commonStyles = [
         placeholderStyle,
         {
-            top: topPosition,
+            top: topPosition - (Platform.OS === "android" ? 3 : 2),
         },
         {
             maxWidth: labelWidth,
@@ -2701,6 +2701,21 @@ var Spacer = function (_a) {
     return React__default.createElement(View, { width: width, height: height, style: [style] });
 };
 
+Dimensions.get("window").height;
+Dimensions.get("window").width;
+var BUTTON_HEIGHT = 48;
+var BUTTON_HEIGHT_SMALL = 40;
+var SPACE_4 = 4;
+var SPACE_6 = 6;
+var SPACE_8 = 8;
+var SPACE_12 = 12;
+var SPACE_16 = 16;
+//MARK: Border radius
+var BORDER_RADIUS_6 = 6;
+//MARK: Border width
+StyleSheet.hairlineWidth; //0.3-0.5
+var BORDER_WIDTH_1 = 1;
+
 var SvgIcon = function (_a) {
     var name = _a.name, _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.height, height = _c === void 0 ? 24 : _c, _d = _a.color, color = _d === void 0 ? colors.ink.INK40 : _d, style = _a.style, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
     // Kiểm tra kỹ hơn
@@ -2819,7 +2834,7 @@ var TextInputFlat = function (_a) {
     var font = theme.fonts.bodyLarge;
     var hasActiveOutline = parentState.focused || error;
     var _h = getConstants(), LABEL_PADDING_TOP = _h.LABEL_PADDING_TOP, FLAT_INPUT_OFFSET = _h.FLAT_INPUT_OFFSET, MIN_HEIGHT = _h.MIN_HEIGHT;
-    var _j = (StyleSheet.flatten(style) || {}), fontSizeStyle = _j.fontSize, lineHeightStyle = _j.lineHeight, fontWeight = _j.fontWeight, height = _j.height, paddingHorizontal = _j.paddingHorizontal, textAlign = _j.textAlign, viewStyle = __rest(_j, ["fontSize", "lineHeight", "fontWeight", "height", "paddingHorizontal", "textAlign"]);
+    var _j = (StyleSheet.flatten(style) || {}), fontSizeStyle = _j.fontSize, lineHeightStyle = _j.lineHeight, fontWeight = _j.fontWeight, height = _j.height, paddingHorizontal = _j.paddingHorizontal, textAlign = _j.textAlign; __rest(_j, ["fontSize", "lineHeight", "fontWeight", "height", "paddingHorizontal", "textAlign"]);
     var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
     var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
     var isPaddingHorizontalPassed = paddingHorizontal !== undefined && typeof paddingHorizontal === "number";
@@ -2843,11 +2858,11 @@ var TextInputFlat = function (_a) {
         error: error,
         theme: theme,
     }), inputTextColor = _l.inputTextColor, activeColor = _l.activeColor, placeholderColor = _l.placeholderColor, errorColor = _l.errorColor, backgroundColor = _l.backgroundColor, selectionColor = _l.selectionColor;
-    var containerStyle = {
+    ({
         backgroundColor: backgroundColor,
         borderTopLeftRadius: theme.roundness,
         borderTopRightRadius: theme.roundness,
-    };
+    });
     var labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
     var fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
     var labelWidth = parentState.labelLayout.width;
@@ -2955,18 +2970,18 @@ var TextInputFlat = function (_a) {
     return (React$3.createElement(View$1, { style: {
             flexDirection: "row",
             alignItems: "center",
-            borderRadius: CONSTANTS.BORDER_RADIUS_6,
+            borderRadius: BORDER_RADIUS_6,
             borderWidth: 1,
             borderColor: getBorderColor(),
-            height: 48,
+            height: 44,
             overflow: "hidden",
             backgroundColor: disabled
                 ? theme.colors.surfacePrimaryDisabled
                 : theme.colors.surfacePrimaryDefault,
         } },
         React$3.createElement(View$1, { style: { flexDirection: "row" } },
-            left && (React$3.createElement(View$1, { style: { paddingLeft: CONSTANTS.SPACE_12 } }, left)),
-            left ? (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 })) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 }))),
+            left && React$3.createElement(View$1, { style: { paddingLeft: SPACE_12 } }, left),
+            left ? React$3.createElement(Spacer, { width: SPACE_8 }) : React$3.createElement(Spacer, { width: SPACE_12 })),
         React$3.createElement(Outline, { style: outlineStyle, label: label, roundness: roundness, hasActiveOutline: hasActiveOutline, focused: parentState.focused, activeColor: activeColor, outlineColor: outlineColor, backgroundColor: backgroundColor }),
         React$3.createElement(View$1, { onLayout: onInputLayout, style: [
                 styles$c.labelContainer,
@@ -2975,31 +2990,21 @@ var TextInputFlat = function (_a) {
                     flex: 1,
                 },
             ] },
-            !isAndroid && multiline && !!label && !disabled && (React$3.createElement(View$1, { pointerEvents: "none", style: [
-                    StyleSheet.absoluteFill,
-                    dense ? styles$c.densePatchContainer : styles$c.patchContainer,
-                    {
-                        backgroundColor: viewStyle.backgroundColor || containerStyle.backgroundColor,
-                        left: paddingLeft,
-                        right: paddingRight,
-                    },
-                ] })),
             label ? (React$3.createElement(InputLabel$1, __assign({ labeled: parentState.labeled, error: parentState.error, focused: parentState.focused, scaledLabel: scaledLabel, wiggle: Boolean(parentState.value && labelProps.labelError), labelLayoutMeasured: parentState.labelLayout.measured, labelLayoutWidth: parentState.labelLayout.width, labelLayoutHeight: parentState.labelLayout.height }, labelProps))) : null, render === null || render === void 0 ? void 0 :
             render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
                     styles$c.input,
-                    __assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: CONSTANTS.SPACE_12 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
+                    __assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: parentState.focused || parentState.value ? SPACE_12 : 0 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
                             ? textAlign
                             : I18nManager.getConstants().isRTL
                                 ? "right"
-                                : "left" }),
-                    Platform.OS === "web" && { outline: "none" },
+                                : "left", marginTop: Platform.OS === "android" ? SPACE_8 : 0 }),
                     contentStyle,
                 ] }))),
         !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$c.clearButton },
-            React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
+            React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
         React$3.createElement(View$1, { style: { flexDirection: "row" } },
-            right && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
-            right && (React$3.createElement(View$1, { style: { paddingRight: CONSTANTS.SPACE_12 } }, right)))));
+            right && React$3.createElement(Spacer, { width: SPACE_8 }),
+            right && React$3.createElement(View$1, { style: { paddingRight: SPACE_12 } }, right))));
 };
 var styles$c = StyleSheet.create({
     placeholder: {
@@ -3014,7 +3019,7 @@ var styles$c = StyleSheet.create({
     input: {
         // margin: 0,
         flex: 1,
-        height: 48,
+        height: 44,
     },
     inputFlat: {
         paddingTop: 24,
@@ -3033,7 +3038,7 @@ var styles$c = StyleSheet.create({
         zIndex: 2,
     },
     clearButton: {
-        padding: CONSTANTS.SPACE_8,
+        padding: SPACE_8,
     },
 });
 
@@ -6046,21 +6051,6 @@ var styles$9 = StyleSheet.create({
 });
 var index$2 = memoDeepEqual(ButtonIcon);
 
-Dimensions.get("window").height;
-Dimensions.get("window").width;
-var BUTTON_HEIGHT = 48;
-var BUTTON_HEIGHT_SMALL = 40;
-var SPACE_4 = 4;
-var SPACE_6 = 6;
-var SPACE_8 = 8;
-var SPACE_12 = 12;
-var SPACE_16 = 16;
-//MARK: Border radius
-var BORDER_RADIUS_6 = 6;
-//MARK: Border width
-StyleSheet.hairlineWidth; //0.3-0.5
-var BORDER_WIDTH_1 = 1;
-
 var FloatingButton = function (_a) {
     var isLoading = _a.isLoading, disabled = _a.disabled, onPress = _a.onPress, style = _a.style, _b = _a.hiddenBackground, hiddenBackground = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? BUTTON_HEIGHT : _c, children = _a.children, backgroundColor = _a.backgroundColor, props = _a.props, _d = _a.top, top = _d === void 0 ? 0 : _d, _e = _a.right, right = _e === void 0 ? 0 : _e, _f = _a.left, left = _f === void 0 ? 0 : _f, _g = _a.bottom, bottom = _g === void 0 ? 0 : _g;
     var colors = useInternalTheme().colors;
@@ -6751,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: [
@@ -6793,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",
@@ -6827,14 +6802,15 @@ 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;