sapo-components-ui-rn 1.0.0 → 1.0.1

package/README.md

@@ -29,13 +29,11 @@ Thư viện này yêu cầu các peer dependencies sau:
 ## Sử dụng
 
 ```tsx
-import { Button, Text } from 'sapo-components-ui-rn';
+import { Button } from '@sapo/components-ui-rn';
 
 function MyComponent() {
   return (
-    <Button onPress={() => console.log('Pressed')}>
-      <Text>Click me</Text>
-    </Button>
+    <Button disabled textStyle={{...}}  title="My Button" onPress={()=> {}}/>
   );
 }
 ```

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

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleProp, TextStyle } from "react-native";
 export type IconType = "FontAwesome" | "Image" | "MaterialIcons" | "Feather" | "MaterialCommunityIcons" | "Svg";
 export interface IconProps {
-    name: "IconCheckboxActive" | "IconCheckbox" | "IconRadio" | "IconRadioActive" | "IconRadioDisable" | "IconArrowDown" | "IconClearText";
+    name: "IconCheckboxActive" | "IconCheckbox" | "IconRadio" | "IconRadioActive" | "IconRadioDisable" | "IconArrowDown" | "IconClearText" | "IconSearch";
     backgroundColor?: string;
     size?: number;
     color?: string;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+interface SearchInputProps {
+    style?: StyleProp<ViewStyle>;
+    value?: string;
+    placeholder?: string;
+    textStyle?: StyleProp<TextStyle>;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    clearButton?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChangeText?: (text: string) => void;
+}
+declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, }: SearchInputProps) => React.JSX.Element;
+export default SearchInput;

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

@@ -34,5 +34,5 @@ interface ViewProps {
     borderWidth?: number;
     borderColor?: string;
 }
-declare const _default: React.MemoExoticComponent<({ row, full, justifyCenter, justifyBetween, alignCenter, center, color, backgroundColor, width, height, padding, paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, paddingLeft, paddingRight, paddingTop, alignEnd, wrap, borderBottomWidth, borderBottomColor, borderRadius, borderWidth, borderColor, style, onPress, activeOpacity, children, }: ViewProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ row, full, justifyCenter, justifyBetween, alignCenter, center, color, backgroundColor, width, height, padding, paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, paddingLeft, paddingRight, paddingTop, alignEnd, wrap, borderBottomWidth, borderBottomColor, borderRadius, borderWidth, borderColor, style, onPress, activeOpacity, children, disabled, }: ViewProps) => React.JSX.Element>;
 export default _default;

package/dist/icons/IconSearch.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { SvgProps } from "react-native-svg";
+declare const IconSearch: (props: SvgProps) => React.JSX.Element;
+export default IconSearch;

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { default as Checkbox } from "./components/Checkbox";
 export { default as RadioButton } from "./components/RadioButton";
 export { default as Avatar } from "./components/Avatar";
 export { default as SelectionField } from "./components/SelectionField";
+export { default as SearchInput } from "./components/SearchInput";
 export type { Props as ActivityIndicatorProps } from "./components/ActivityIndicator";
 export type { Props as SwitchProps } from "./components/Switch/Switch";
 export type { Props as TextInputProps } from "./components/TextInput/TextInput";

package/dist/index.esm.js

@@ -226,7 +226,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,
@@ -307,7 +307,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,
@@ -1268,7 +1268,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,
@@ -1349,7 +1349,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,
@@ -1907,7 +1907,7 @@ var styles$g = 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) {
@@ -1990,7 +1990,7 @@ var ViewCustom = function (_a) {
     };
     var defaultStyle = getStyle();
     var Component = onPress ? TouchableOpacity : View$1;
-    return (React__default.createElement(Component, { activeOpacity: activeOpacity, onPress: onPress, style: [defaultStyle, style] }, children));
+    return (React__default.createElement(Component, { activeOpacity: activeOpacity, onPress: onPress, disabled: disabled, style: [defaultStyle, style] }, children));
 };
 var View = React__default.memo(ViewCustom);
 
@@ -2723,6 +2723,9 @@ var IconArrowDown = function (props) { return (React$3.createElement(Svg, __assi
 var IconClearText = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(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$3.createElement(Svg, __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" }, props),
+    React$3.createElement(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":
@@ -2755,6 +2758,8 @@ var Icon = function (_a) {
                 return IconArrowDown;
             case "IconClearText":
                 return IconClearText;
+            case "IconSearch":
+                return IconSearch;
             default:
                 return IconCheckbox;
         }
@@ -6496,11 +6501,11 @@ var ChipBar = function (_a) {
     }, [isActive]);
     return (React__default.createElement(View, { row: true },
         React__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 },
@@ -6705,6 +6710,17 @@ var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { disable
     } }));
 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;
+    return (React__default.createElement(TextInput, { left: React__default.createElement(View, { paddingRight: SPACE_8 },
+            React__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.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;
@@ -6754,5 +6770,5 @@ var ToastProvider = forwardRef$1(function (_a, ref) {
         renderToast()));
 });
 
-export { ActivityIndicator, Avatar, Badge, index$3 as Button, index$2 as ButtonIcon, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$1 as FloatingButton, Image$1 as Image, LightTheme, ProgressBar, RadioButton, index as SelectionField, Spacer, Switch, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, configureFonts, overlay, shadow, showToast, toastRef, useTheme };
+export { ActivityIndicator, Avatar, Badge, index$3 as Button, index$2 as ButtonIcon, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$1 as FloatingButton, Image$1 as Image, LightTheme, ProgressBar, RadioButton, SearchInput, index as SelectionField, Spacer, Switch, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, configureFonts, overlay, shadow, showToast, toastRef, useTheme };
 //# sourceMappingURL=index.esm.js.map