sapo-components-ui-rn 1.1.71 → 1.1.73

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import { StyleProp, ViewStyle, TextStyle, TextInput as TextInputNative } from "react-native";
 interface SearchInputProps {
     style?: StyleProp<ViewStyle>;
     value?: string;
@@ -15,6 +15,7 @@ interface SearchInputProps {
     height?: number;
     debounceTime?: number;
     autoFocus?: boolean;
+    ref?: React.RefObject<TextInputNative | null>;
 }
-declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, height, debounceTime, autoFocus, textStyle, }: SearchInputProps) => React.JSX.Element;
+declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, height, debounceTime, autoFocus, textStyle, ref, }: SearchInputProps) => React.JSX.Element;
 export default SearchInput;

package/dist/components/Switch/Switch.d.ts

@@ -8,10 +8,11 @@ export type Props = {
      * Value of the switch, true means 'on', false means 'off'.
      */
     value?: boolean;
+    size?: "small" | "normal";
     /**
      * Callback called with the new value when it changes.
      */
     onValueChange?: (value: boolean) => void;
 };
-declare const Switch: React.MemoExoticComponent<({ value, disabled, onValueChange }: Props) => React.JSX.Element>;
+declare const Switch: React.MemoExoticComponent<({ value, disabled, onValueChange, size }: Props) => React.JSX.Element>;
 export default Switch;

package/dist/index.esm.js

@@ -249,6 +249,7 @@ var ref = {
                 borderCriticalPressed: red.RED120,
                 borderErrorDefault: red.RED100,
                 borderInfoDefault: blue.BLUE100,
+                borderInfoInverseDefault: blue.BLUE40,
                 borderPrimaryDefault: ink.INK10,
                 borderPrimaryDisabled: ink.INK20,
                 borderPrimaryHovered: ink.INK40,
@@ -410,6 +411,7 @@ var ref = {
                 borderCriticalPressed: red.RED120,
                 borderErrorDefault: red.RED100,
                 borderInfoDefault: blue.BLUE100,
+                borderInfoInverseDefault: blue.BLUE40,
                 borderPrimaryDefault: ink.INK10,
                 borderPrimaryDisabled: ink.INK20,
                 borderPrimaryHovered: ink.INK40,
@@ -652,72 +654,7 @@ var CONSTANTS = {
     FONT_WEIGHT_BLACK: "900",
 };
 
-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;
-var SPACE_40 = 40;
-//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 },
-    center: {
-        paddingHorizontal: SPACE_16,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    end: { alignItems: "flex-end" },
-    start: { alignItems: "flex-start" },
-    centerHorizontal: { justifyContent: "center" },
-    icon: {
-        backgroundColor: blue.BLUE100,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    row: {
-        flexDirection: "row",
-    },
-    txtSmallBold: {
-        fontSize: 12,
-        color: ink.INK80,
-        fontWeight: "600",
-    },
-    button: {
-        borderRadius: 20,
-        justifyContent: "center",
-        alignItems: "center",
-        width: 40,
-        height: 40,
-        backgroundColor: white.WHITE100,
-        marginHorizontal: SPACE_8,
-    },
-    shadow: {
-        shadowColor: "black",
-        shadowOffset: {
-            width: 1,
-            height: 2,
-        },
-        shadowOpacity: 0.3,
-        shadowRadius: 5,
-    },
-    hitSlop: {
-        top: 10,
-        right: 10,
-        bottom: 10,
-        left: 10,
-    },
-    transparent: {
-        backgroundColor: "transparent",
-    },
     //MARK: text size
     text10: {
         fontSize: 11,
@@ -1594,7 +1531,7 @@ var ViewCustom = forwardRef$1(function (_a, ref) {
 var View = React__default.memo(ViewCustom);
 
 var Switch = memo(function (_a) {
-    var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange;
+    var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "normal" : _b;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var progress = useSharedValue(value ? 1 : 0);
@@ -1634,26 +1571,42 @@ var Switch = memo(function (_a) {
             }));
         }
     }, [value]);
+    var getSizeSwitch = useCallback(function () {
+        switch (size) {
+            case "small":
+                return {
+                    width: 48,
+                    height: 28,
+                };
+            default:
+                return {
+                    width: 52,
+                    height: 32,
+                };
+        }
+    }, [size]);
+    var getSizeCircle = useCallback(function () {
+        switch (size) {
+            case "small":
+                return {
+                    width: 24,
+                    height: 24,
+                    borderRadius: 12,
+                    backgroundColor: colors.surfacePrimaryDefault,
+                };
+            default:
+                return {
+                    width: 28,
+                    height: 28,
+                    borderRadius: 14,
+                    backgroundColor: colors.surfacePrimaryDefault,
+                };
+        }
+    }, [size, colors]);
     return (React$3.createElement(View, { row: true },
         React$3.createElement(TouchableOpacity, { activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
-            React$3.createElement(Animated.View, { style: [
-                    styles$j.vSegment,
-                    backgroundColor,
-                    {
-                        width: 52,
-                        height: 32,
-                    },
-                ] },
-                React$3.createElement(Animated.View, { style: [
-                        styles$j.animated,
-                        animatedStyle,
-                        {
-                            width: 28,
-                            height: 28,
-                            borderRadius: 14,
-                            backgroundColor: colors.surfacePrimaryDefault,
-                        },
-                    ] })))));
+            React$3.createElement(Animated.View, { style: [styles$j.vSegment, backgroundColor, getSizeSwitch()] },
+                React$3.createElement(Animated.View, { style: [styles$j.animated, animatedStyle, getSizeCircle()] })))));
 });
 var styles$j = StyleSheet.create({
     vSegment: {
@@ -4779,6 +4732,22 @@ var Spacer = function (_a) {
     return (React__default.createElement(View, { backgroundColor: backgroundColor || "transparent", 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;
+var SPACE_40 = 40;
+//MARK: Border radius
+var BORDER_RADIUS_6 = 6;
+//MARK: Border width
+StyleSheet.hairlineWidth; //0.3-0.5
+var BORDER_WIDTH_1 = 1;
+
 var ICON100 = "#46515F";
 var ICON50 = "#A1A5AB";
 var icon = {
@@ -5161,14 +5130,14 @@ var styles$e = StyleSheet.create({
 });
 
 var TextInputDefault = function (_a) {
-    var _b, _c;
-    var _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.editable, editable = _e === void 0 ? true : _e, label = _a.label, _f = _a.error, error = _f === void 0 ? false : _f, 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, _g = _a.render, render = _g === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _g, _h = _a.multiline, multiline = _h === void 0 ? false : _h, 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, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, _j = _a.clearButton, clearButton = _j === void 0 ? false : _j, contentStyle = _a.contentStyle, _k = _a.value, value = _k === void 0 ? "" : _k, textError = _a.textError, required = _a.required, 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", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "value", "textError", "required"]);
+    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, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, contentStyle = _a.contentStyle, _j = _a.value, value = _j === void 0 ? "" : _j, textError = _a.textError, required = _a.required, 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", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "value", "textError", "required"]);
     var colors = theme.colors;
     var font = theme.fonts.bodyLarge;
-    var _l = (StyleSheet.flatten(style) || {}), fontSizeStyle = _l.fontSize, fontWeight = _l.fontWeight, lineHeightStyle = _l.lineHeight, height = _l.height, _m = _l.backgroundColor; _m === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _m; var textAlign = _l.textAlign; _l.minHeight; var viewStyle = __rest(_l, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign", "minHeight"]);
+    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 _o = getOutlinedInputColors({
+    var _m = getOutlinedInputColors({
         activeOutlineColor: activeOutlineColor,
         customOutlineColor: customOutlineColor,
         customSelectionColor: customSelectionColor,
@@ -5176,8 +5145,8 @@ var TextInputDefault = function (_a) {
         disabled: disabled,
         error: error,
         theme: theme,
-    }), inputTextColor = _o.inputTextColor, activeColor = _o.activeColor, selectionColor = _o.selectionColor;
-    var _p = React$3.useState(value || ""), inputValue = _p[0], setInputValue = _p[1];
+    }), inputTextColor = _m.inputTextColor, activeColor = _m.activeColor, selectionColor = _m.selectionColor;
+    var _o = React$3.useState(value || ""), inputValue = _o[0], setInputValue = _o[1];
     React$3.useEffect(function () {
         if (value === undefined) {
             setInputValue("");
@@ -5344,22 +5313,15 @@ var TextInputDefault = function (_a) {
                     ] }))) : (React$3.createElement(View, { style: {
                         flexDirection: "row",
                     } },
-                    !multiline &&
-                        prefix &&
-                        (prefix === null || prefix === void 0 ? void 0 : prefix.toString()) !== "" &&
-                        renderPrefix(), render === null || render === void 0 ? void 0 :
-                    render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: ((_c = parentState.value) === null || _c === void 0 ? void 0 : _c.toString()) == ""
-                            ? parentState.focused
-                                ? rest.placeholder
-                                : label
-                            : rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined"
+                    prefix && (prefix === null || prefix === void 0 ? void 0 : prefix.toString()) !== "" && renderPrefix(), 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$d.input,
-                            __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", height: height ? height : 48, paddingTop: getPaddingTopValue(), paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
+                            __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: "center", height: height ? height : 48, paddingTop: getPaddingTopValue(), paddingBottom: 0 }),
                             contentStyle,
                         ] })),
-                    !multiline && renderSuffix()))),
+                    renderSuffix()))),
             !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$d.clearButtonMultiline : styles$d.clearButton },
                 React$3.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
             checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: colors.borderPrimaryDefault, style: {
@@ -7236,14 +7198,14 @@ var styles$2 = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
 var index$1 = 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, _f = _a.debounceTime, debounceTime = _f === void 0 ? 500 : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, textStyle = _a.textStyle;
+    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, _f = _a.debounceTime, debounceTime = _f === void 0 ? 500 : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, textStyle = _a.textStyle, ref = _a.ref;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var debouncedOnChangeText = useDebouncedCallback(function (text) {
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
     }, debounceTime);
     return (React__default.createElement(TextInput, { left: React__default.createElement(View, null,
-            React__default.createElement(SvgIcon, { name: "IconSearch", width: 24, height: 24 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, placeholderTextColor: colors.textPlaceholder, right: rightIcon, onFocus: onFocus, autoFocus: autoFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: debouncedOnChangeText, style: [
+            React__default.createElement(SvgIcon, { name: "IconSearch", width: 24, height: 24 })), ref: ref, disabled: disabled, value: value, clearButton: clearButton, mode: "default", numberOfLines: 1, textBreakStrategy: "simple", multiline: false, placeholder: placeholder, placeholderTextColor: colors.textPlaceholder, right: rightIcon, onFocus: onFocus, autoFocus: autoFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: debouncedOnChangeText, style: [
             {
                 height: height || 36,
             },