sapo-components-ui-rn 1.0.4 → 1.0.6

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);
@@ -6164,17 +6182,26 @@ var Toast = memoWithRef(function (_props, ref) {
     var viewVisibleAnimatedRef = useRef(null);
     var _b = useSafeAreaInsets(), bottom = _b.bottom, top = _b.top;
     var _c = useState({
-        position: POSITION.TOP,
+        position: POSITION.BOTTOM,
         type: "success",
         title: "Thông báo",
+        spacer: "normal",
     }), options = _c[0], setOptions = _c[1];
     var theme = useInternalTheme();
     var colors = theme.colors;
     var TIME_OUT = useRef(null);
     var show = function (_a) {
-        var message = _a.message, _b = _a.duration, duration = _b === void 0 ? 1000 : _b, _c = _a.position, position = _c === void 0 ? POSITION.TOP : _c, _d = _a.type, type = _d === void 0 ? "success" : _d, onPress = _a.onPress, _e = _a.title, title = _e === void 0 ? "Thông báo" : _e;
+        var message = _a.message, _b = _a.duration, duration = _b === void 0 ? 1000 : _b, _c = _a.position, position = _c === void 0 ? POSITION.BOTTOM : _c, _d = _a.type, type = _d === void 0 ? "success" : _d, onPress = _a.onPress, _e = _a.title, title = _e === void 0 ? "Thông báo" : _e, _f = _a.spacer, spacer = _f === void 0 ? "normal" : _f;
         if (!TIME_OUT.current) {
-            handleShow({ message: message, position: position, type: type, onPress: onPress, title: title, duration: duration });
+            handleShow({
+                message: message,
+                position: position,
+                type: type,
+                onPress: onPress,
+                title: title,
+                duration: duration,
+                spacer: spacer,
+            });
             return;
         }
         clearTimeout(TIME_OUT.current);
@@ -6194,9 +6221,9 @@ var Toast = memoWithRef(function (_props, ref) {
     }); }, []);
     var handleShow = function (_a) {
         var _b, _c;
-        var message = _a.message, _d = _a.position, position = _d === void 0 ? POSITION.TOP : _d, _e = _a.type, type = _e === void 0 ? "success" : _e, onPress = _a.onPress, _f = _a.title, title = _f === void 0 ? "Thông báo" : _f, _g = _a.duration, duration = _g === void 0 ? 1000 : _g;
+        var message = _a.message, _d = _a.position, position = _d === void 0 ? POSITION.TOP : _d, _e = _a.type, type = _e === void 0 ? "success" : _e, onPress = _a.onPress, _f = _a.title, title = _f === void 0 ? "Thông báo" : _f, _g = _a.duration, duration = _g === void 0 ? 1000 : _g, _h = _a.spacer, spacer = _h === void 0 ? "normal" : _h;
         setMessage(message || "");
-        setOptions({ position: position, type: type, onPress: onPress, title: title });
+        setOptions({ position: position, type: type, onPress: onPress, title: title, spacer: spacer });
         (_c = (_b = viewVisibleAnimatedRef.current) === null || _b === void 0 ? void 0 : _b.show) === null || _c === void 0 ? void 0 : _c.call(_b, function () {
             TIME_OUT.current = setTimeout(function () {
                 hide(function () { }, false);
@@ -6245,10 +6272,28 @@ var Toast = memoWithRef(function (_props, ref) {
                 return require("./assets/images/success.png");
         }
     };
+    var handleToastBottomHeight = function () {
+        var spacer = options.spacer;
+        if (typeof spacer === "number") {
+            return spacer;
+        }
+        switch (spacer) {
+            case "normal":
+                return 64;
+            case "medium":
+                return 100;
+            case "large":
+                return 120;
+            default:
+                return 64;
+        }
+    };
     return (React__default.createElement(ViewVisibleAnimated, { ref: viewVisibleAnimatedRef, autoShow: false, scaleEnable: true, style: [
             styles$6.container,
             options.position === POSITION.BOTTOM && {
-                bottom: bottom ? bottom : CONSTANTS.SPACE_16,
+                bottom: bottom
+                    ? bottom + handleToastBottomHeight()
+                    : CONSTANTS.SPACE_16 + handleToastBottomHeight(),
             },
             options.position === POSITION.TOP && {
                 top: top ? top : CONSTANTS.SPACE_16,
@@ -6369,10 +6414,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 +6735,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 +6754,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 +6765,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);