sapo-components-ui-rn 1.0.0 → 1.0.2

package/dist/index.js

@@ -259,7 +259,7 @@ var ref = {
                 gray: ink.INK60,
                 backgroundLight: ink.INK80,
                 //new theme colors
-                backgroundPrimary: ink.INK100,
+                backgroundPrimary: ink.INK5,
                 backgroundSecondary: white.WHITE100,
                 borderBrandDefault: blue.BLUE100,
                 borderCriticalDefault: red.RED100,
@@ -340,7 +340,7 @@ var ref = {
                 surfaceWarningInverseHover: yellow.YELLOW20,
                 surfaceWarningInversePressed: yellow.YELLOW40,
                 surfaceWarningPressed: yellow.YELLOW120,
-                textDefault: ink.INK5,
+                textDefault: ink.INK100,
                 textDisabled: ink.INK20,
                 textPlaceholder: ink.INK40,
                 textSecondary: ink.INK60,
@@ -1301,7 +1301,7 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
             level5: "rgb(52, 49, 63)",
         },
         //new theme colors
-        backgroundPrimary: ink.INK100,
+        backgroundPrimary: ink.INK5,
         backgroundSecondary: white.WHITE100,
         borderBrandDefault: blue.BLUE100,
         borderCriticalDefault: red.RED100,
@@ -1382,7 +1382,7 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         surfaceWarningInverseHover: yellow.YELLOW20,
         surfaceWarningInversePressed: yellow.YELLOW40,
         surfaceWarningPressed: yellow.YELLOW120,
-        textDefault: ink.INK5,
+        textDefault: ink.INK100,
         textDisabled: ink.INK20,
         textPlaceholder: ink.INK40,
         textSecondary: ink.INK60,
@@ -1940,7 +1940,7 @@ var styles$g = reactNative.StyleSheet.create({
 });
 
 var ViewCustom = function (_a) {
-    var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, activeOpacity = _a.activeOpacity, children = _a.children;
+    var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, activeOpacity = _a.activeOpacity, children = _a.children, disabled = _a.disabled;
     var getStyle = function () {
         var styleCustom = {};
         if (row) {
@@ -2023,7 +2023,7 @@ var ViewCustom = function (_a) {
     };
     var defaultStyle = getStyle();
     var Component = onPress ? reactNative.TouchableOpacity : reactNative.View;
-    return (React__default["default"].createElement(Component, { activeOpacity: activeOpacity, onPress: onPress, style: [defaultStyle, style] }, children));
+    return (React__default["default"].createElement(Component, { activeOpacity: activeOpacity, onPress: onPress, disabled: disabled, style: [defaultStyle, style] }, children));
 };
 var View = React__default["default"].memo(ViewCustom);
 
@@ -2756,6 +2756,9 @@ var IconArrowDown = function (props) { return (React__namespace.createElement(Sv
 var IconClearText = function (props) { return (React__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React__namespace.createElement(Svg.Path, { d: "M12 2.00043C17.53 2.00043 22 6.47046 22 12.0004C21.9997 17.5302 17.5298 22.0004 12 22.0004C6.47016 22.0004 2.00026 17.5302 2 12.0004C2.00004 6.47046 6.47003 2.00043 12 2.00043ZM12 10.5903L9.41016 8.00043L8 9.40961L10.5898 12.0004L8 14.5903L9.41016 16.0004L12 13.4096L14.5898 16.0004L16 14.5903L13.4102 12.0004L16 9.40961L14.5898 8.00043L12 10.5903Z", fill: "currentColor" }))); };
 
+var IconSearch = function (props) { return (React__namespace.createElement(Svg__default["default"], __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" }, props),
+    React__namespace.createElement(Svg.Path, { d: "M15.7 14.3L11.5 10.1C11.3 9.9 11 9.8 10.7 9.8C11.5 8.8 12 7.4 12 6C12 2.7 9.3 0 6 0C2.7 0 0 2.7 0 6C0 9.3 2.7 12 6 12C7.4 12 8.8 11.5 9.8 10.6C9.8 10.9 9.8 11.2 10.1 11.4L14.3 15.6C14.5 15.8 14.8 15.9 15 15.9C15.2 15.9 15.5 15.8 15.7 15.6C16.1 15.3 16.1 14.7 15.7 14.3ZM6 10.5C3.5 10.5 1.5 8.5 1.5 6C1.5 3.5 3.5 1.5 6 1.5C8.5 1.5 10.5 3.5 10.5 6C10.5 8.5 8.5 10.5 6 10.5Z", fill: "currentColor" }))); };
+
 var getIconComponent = function (type) {
     switch (type) {
         case "MaterialIcons":
@@ -2788,6 +2791,8 @@ var Icon = function (_a) {
                 return IconArrowDown;
             case "IconClearText":
                 return IconClearText;
+            case "IconSearch":
+                return IconSearch;
             default:
                 return IconCheckbox;
         }
@@ -6529,11 +6534,11 @@ var ChipBar = function (_a) {
     }, [isActive]);
     return (React__default["default"].createElement(View, { row: true },
         React__default["default"].createElement(View, { row: true, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, borderWidth: 1, alignCenter: true, style: [
-                style,
                 disabled && {
                     backgroundColor: colors.surfaceSecondaryDefault,
                     borderColor: colors.surfaceSecondaryDefault,
                 },
+                style,
             ], onPress: handlePressChipBar, borderColor: active ? colors.borderBrandDefault : colors.borderPrimaryDefault, backgroundColor: active
                 ? colors.surfaceBrandInverseDefault
                 : colors.backgroundSecondary },
@@ -6738,6 +6743,17 @@ var styles = reactNative.StyleSheet.create(__assign(__assign({}, containerStyles
     } }));
 var index = React__default["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;
+    return (React__default["default"].createElement(TextInput, { left: React__default["default"].createElement(View, { paddingRight: SPACE_8 },
+            React__default["default"].createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 24 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", placeholder: placeholder, right: rightIcon, onFocus: onFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: onChangeText, contentStyle: [
+            {
+                height: 36,
+            },
+            style,
+        ] }));
+};
+
 var toastRef = React__default["default"].createRef();
 var showToast = function (_a) {
     var message = _a.message, _b = _a.duration, duration = _b === void 0 ? 5000 : _b, _c = _a.position, position = _c === void 0 ? "top" : _c, _d = _a.type, type = _d === void 0 ? "success" : _d, _e = _a.onPress, onPress = _e === void 0 ? function () { } : _e, title = _a.title;
@@ -6803,6 +6819,7 @@ exports.Image = Image$1;
 exports.LightTheme = LightTheme;
 exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;
+exports.SearchInput = SearchInput;
 exports.SelectionField = index;
 exports.Spacer = Spacer;
 exports.Switch = Switch;