sapo-components-ui-rn 1.0.4 → 1.0.5

package/README.md

@@ -42,20 +42,24 @@ function MyComponent() {
 
 Thư viện bao gồm các components sau:
 
-- [Button](Button.md)
-- [ButtonIcon](ButtonIcon.md)
-- [Text](Text.md)
-- [TextInput](TextInput.md)
 - [Avatar](Avatar.md)
 - [Badge](Badge.md)
+- [Button](Button.md)
+- [ButtonIcon](ButtonIcon.md)
 - [Checkbox](Checkbox.md)
 - [ChipBar](ChipBar.md)
-- [RadioButton](RadioButton.md)
-- [Switch](Switch.md)
 - [CountingDot](CountingDot.md)
 - [FloatingButton](FloatingButton.md)
 - [Image](Image.md)
+- [RadioButton](RadioButton.md)
+- [SearchInput](SearchInput.md)
+- [SelectionField](SelectionField.md)
 - [Spacer](Spacer.md)
+- [Switch](Switch.md)
+- [Text](Text.md)
+- [TextInput](TextInput.md)
+- [TextArea](TextArea.md)
+- [Toast](Toast.md)
 - [View](View.md)
 <!-- 
 ## Đóng góp

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

@@ -1,8 +1,10 @@
 import React from "react";
 import { StyleProp, ViewStyle, TouchableOpacityProps, TextStyle } from "react-native";
+import { IText } from "../Text";
 import { ThemeProp } from "../../types";
 export interface ButtonProps extends TouchableOpacityProps {
     style?: StyleProp<ViewStyle>;
+    border?: boolean;
     borderColor?: string;
     title?: string;
     backgroundColor?: string;
@@ -10,14 +12,17 @@ export interface ButtonProps extends TouchableOpacityProps {
     left?: React.ReactNode;
     right?: React.ReactNode;
     small?: boolean;
+    margin?: Number;
+    textProps?: IText;
     textColor?: string;
     bold?: boolean;
     size?: number;
     textStyle?: TextStyle;
     medium?: boolean;
     mode?: "outlined" | "contained" | "transparent";
+    transparent?: boolean;
     onPress?: (res?: any) => void;
     theme?: ThemeProp;
 }
-declare const _default: React.MemoExoticComponent<({ style, title, borderColor, isLoading, left, right, small, textStyle, onPress, disabled, backgroundColor, textColor, bold, size, medium, mode, theme: themeOverrides, ...props }: ButtonProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, title, border, borderColor, isLoading, left, right, small, margin, textStyle, textProps, onPress, disabled, backgroundColor, textColor, bold, size, medium, mode, transparent, theme: themeOverrides, ...props }: ButtonProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -5524,13 +5524,14 @@ var Text = function (props) {
 var Text$1 = memoDeepEqual(Text);
 
 var TextInputDefault = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, 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, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, 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, _g = _a.clearButton, clearButton = _g === void 0 ? false : _g, contentStyle = _a.contentStyle, value = _a.value, 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 _b;
+    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, value = _a.value, 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 _h = (StyleSheet.flatten(style) || {}), fontSizeStyle = _h.fontSize, fontWeight = _h.fontWeight, lineHeightStyle = _h.lineHeight, height = _h.height, _j = _h.backgroundColor; _j === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _j; var textAlign = _h.textAlign, viewStyle = __rest(_h, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign"]);
+    var _j = (StyleSheet.flatten(style) || {}), fontSizeStyle = _j.fontSize, fontWeight = _j.fontWeight, lineHeightStyle = _j.lineHeight, height = _j.height, _k = _j.backgroundColor; _k === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _k; var textAlign = _j.textAlign, viewStyle = __rest(_j, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign"]);
     var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
     var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
-    var _k = getOutlinedInputColors({
+    var _l = getOutlinedInputColors({
         activeOutlineColor: activeOutlineColor,
         customOutlineColor: customOutlineColor,
         customSelectionColor: customSelectionColor,
@@ -5538,8 +5539,8 @@ var TextInputDefault = function (_a) {
         disabled: disabled,
         error: error,
         theme: theme,
-    }), inputTextColor = _k.inputTextColor, activeColor = _k.activeColor, selectionColor = _k.selectionColor;
-    var _l = React$3.useState(value || ""), inputValue = _l[0], setInputValue = _l[1];
+    }), inputTextColor = _l.inputTextColor, activeColor = _l.activeColor, selectionColor = _l.selectionColor;
+    var _m = React$3.useState(value || ""), inputValue = _m[0], setInputValue = _m[1];
     React$3.useEffect(function () {
         setInputValue(value || "");
     }, [value]);
@@ -5601,7 +5602,11 @@ var TextInputDefault = function (_a) {
             left && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
             React$3.createElement(View, { full: true },
                 multiline && renderLabel(), 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: [
+                render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: ((_b = parentState.value) === null || _b === void 0 ? void 0 : _b.toString()) == ""
+                        ? parentState.focused
+                            ? rest.placeholder
+                            : label
+                        : 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$a.input,
                         __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
                                 ? textAlign
@@ -5623,6 +5628,8 @@ var styles$a = StyleSheet.create({
     },
     clearButton: {
         padding: CONSTANTS.SPACE_8,
+        height: "100%",
+        paddingTop: CONSTANTS.SPACE_16,
     },
 });
 
@@ -5887,7 +5894,7 @@ var ScaleButton = function (_a) {
 var ScaleButton$1 = React__default.memo(ScaleButton);
 
 var Button = function (_a) {
-    var style = _a.style, title = _a.title, borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right, small = _a.small, textStyle = _a.textStyle, onPress = _a.onPress, disabled = _a.disabled, backgroundColor = _a.backgroundColor, textColor = _a.textColor, _b = _a.bold, bold = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 16 : _c, _d = _a.medium, medium = _d === void 0 ? false : _d, _e = _a.mode, mode = _e === void 0 ? "contained" : _e; _a.theme; var props = __rest(_a, ["style", "title", "borderColor", "isLoading", "left", "right", "small", "textStyle", "onPress", "disabled", "backgroundColor", "textColor", "bold", "size", "medium", "mode", "theme"]);
+    var style = _a.style, title = _a.title; _a.border; var borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right, small = _a.small; _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.size, size = _c === void 0 ? 16 : _c, _d = _a.medium, medium = _d === void 0 ? false : _d, _e = _a.mode, mode = _e === void 0 ? "contained" : _e; _a.transparent; _a.theme; var props = __rest(_a, ["style", "title", "border", "borderColor", "isLoading", "left", "right", "small", "margin", "textStyle", "textProps", "onPress", "disabled", "backgroundColor", "textColor", "bold", "size", "medium", "mode", "transparent", "theme"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
@@ -5906,6 +5913,16 @@ var Button = function (_a) {
                 ];
         }
     };
+    var renderTextColor = function () {
+        switch (mode) {
+            case "outlined":
+                return colors.textBrandDefault;
+            case "contained":
+                return colors.textOnFillDefault;
+            case "transparent":
+                return colors.textBrandDefault;
+        }
+    };
     return (React__default.createElement(View, { style: styles$9.container },
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
@@ -5933,7 +5950,7 @@ var Button = function (_a) {
                 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$1, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || colors.borderBrandDefault })) : (React__default.createElement(Text$1, { numberOfLines: 1, color: textColor || colors.textOnFillDefault, size: size, bold: bold, medium: medium, style: [disabled && disabledTextStyle, textStyle] }, title)),
+                isLoading ? (React__default.createElement(ActivityIndicator$1, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || colors.borderBrandDefault })) : (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 }),
                 !isLoading && right,
                 React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))));
@@ -6040,6 +6057,7 @@ var styles$7 = StyleSheet.create({
         shadowOpacity: 0.25,
         shadowRadius: 3.84,
         elevation: 5,
+        zIndex: 99,
     },
 });
 var index$1 = memoDeepEqual(FloatingButton);
@@ -6369,10 +6387,18 @@ var Badge = function (_a) {
 
 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 containerStyles = StyleSheet.create({
     container: { flex: 1 },
@@ -6682,9 +6708,9 @@ var SelectionField = function (_a) {
             React__default.createElement(View, { style: [
                     styles.container,
                     {
-                        borderRadius: CONSTANTS.BORDER_RADIUS_6,
+                        borderRadius: BORDER_RADIUS_6,
                     },
-                    [styles.border, { borderColor: colors.borderBrandDefault }],
+                    [styles.border, { borderColor: colors.borderPrimaryDefault }],
                     borderColor && { borderColor: borderColor },
                     disabled && [
                         styles.disabled,
@@ -6701,9 +6727,9 @@ var SelectionField = function (_a) {
                     ],
                     style,
                 ] },
-                React__default.createElement(Spacer, { width: CONSTANTS.SPACE_12 }),
+                React__default.createElement(Spacer, { width: SPACE_12 }),
                 React__default.createElement(View, { full: true },
-                    label.toString() !== "" && (React__default.createElement(Text$1, { color: labelColor || colors.textSecondary, style: [
+                    content.toString() !== "" && label.toString() !== "" && (React__default.createElement(Text$1, { color: labelColor || colors.textSecondary, style: [
                             styles.text12,
                             disabled && {
                                 color: colors.textPlaceholder,
@@ -6712,22 +6738,22 @@ var SelectionField = function (_a) {
                                 color: colors.textErrorDefault,
                             },
                         ] }, label)),
-                    React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: textColor || colors.textDefault, size: size, style: [disabled && disabledTextStyle, textStyle] }, textProps), content)),
+                    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: CONSTANTS.SPACE_12 }))),
-        error.length > 0 && (React__default.createElement(View, { paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_4 },
+                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.text12, color: colors.textErrorDefault }, error)))));
 };
 var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
-        minHeight: CONSTANTS.BUTTON_HEIGHT,
+        minHeight: BUTTON_HEIGHT,
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        paddingVertical: CONSTANTS.SPACE_6,
+        paddingVertical: SPACE_6,
     }, border: {
-        borderWidth: CONSTANTS.BORDER_WIDTH_1,
+        borderWidth: BORDER_WIDTH_1,
     }, small: {
-        height: CONSTANTS.BUTTON_HEIGHT_SMALL,
+        height: BUTTON_HEIGHT_SMALL,
     } }));
 var index = React__default.memo(SelectionField);