sapo-components-ui-rn 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapo-components-ui-rn",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React Native UI Components Library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/ChipBar/index.tsx

@@ -56,11 +56,11 @@ const ChipBar = ({
         borderWidth={1}
         alignCenter
         style={[
-          style,
           disabled && {
             backgroundColor: colors.surfaceSecondaryDefault,
             borderColor: colors.surfaceSecondaryDefault,
           },
+          style,
         ]}
         onPress={handlePressChipBar}
         borderColor={

package/src/components/Icon/index.tsx

@@ -13,6 +13,7 @@ import IconRadioActive from "../../icons/IconRadioActive";
 import IconRadioDisable from "../../icons/IconRadioDisable";
 import IconArrowDown from "../../icons/IconArrowDown";
 import IconClearText from "../../icons/IconClearText";
+import IconSearch from "@/icons/IconSearch";
 
 export type IconType =
   | "FontAwesome"
@@ -30,7 +31,8 @@ export interface IconProps {
     | "IconRadioActive"
     | "IconRadioDisable"
     | "IconArrowDown"
-    | "IconClearText";
+    | "IconClearText"
+    | "IconSearch";
   backgroundColor?: string;
   size?: number;
   color?: string;
@@ -87,6 +89,8 @@ const Icon: React.FC<IconProps> = ({
         return IconArrowDown;
       case "IconClearText":
         return IconClearText;
+      case "IconSearch":
+        return IconSearch;
       default:
         return IconCheckbox;
     }

package/src/components/SearchInput/index.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import View from "../View";
+import { SPACE_8 } from "../../theme/dimensions";
+import Icon from "../Icon";
+import TextInput from "../TextInput/TextInput";
+
+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;
+}
+
+const SearchInput = ({
+  value = "",
+  disabled = false,
+  rightIcon,
+  clearButton = false,
+  placeholder = "Tìm kiếm",
+  onFocus,
+  onBlur,
+  onChangeText,
+  style,
+}: SearchInputProps) => {
+  return (
+    <TextInput
+      left={
+        <View paddingRight={SPACE_8}>
+          <Icon name={"IconSearch"} type="Svg" size={24} />
+        </View>
+      }
+      disabled={disabled}
+      value={value}
+      clearButton={clearButton}
+      mode="default"
+      placeholder={placeholder}
+      right={rightIcon}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      allowFontScaling={false}
+      onChangeText={onChangeText}
+      contentStyle={[
+        {
+          height: 36,
+        },
+        style,
+      ]}
+    />
+  );
+};
+
+export default SearchInput;

package/src/components/View/index.tsx

@@ -71,6 +71,7 @@ const ViewCustom = ({
   onPress,
   activeOpacity,
   children,
+  disabled,
 }: ViewProps) => {
   const getStyle = () => {
     const styleCustom: any = {};
@@ -165,6 +166,7 @@ const ViewCustom = ({
     <Component
       activeOpacity={activeOpacity}
       onPress={onPress}
+      disabled={disabled}
       style={[defaultStyle, style]}
     >
       {children}

package/src/icons/IconSearch.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+
+const IconSearch = (props: SvgProps) => (
+  <Svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}>
+    <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"
+    />
+  </Svg>
+);
+
+export default IconSearch;

package/src/index.ts

@@ -30,7 +30,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";
 // Types
 export type { Props as ActivityIndicatorProps } from "./components/ActivityIndicator";
 export type { Props as SwitchProps } from "./components/Switch/Switch";

package/src/index.tsx

@@ -30,6 +30,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";
 // Types
 export type { Props as ActivityIndicatorProps } from "./components/ActivityIndicator";
 export type { Props as SwitchProps } from "./components/Switch/Switch";

package/src/styles/themes/DarkTheme.tsx

@@ -23,7 +23,7 @@ export const DarkTheme: AppTheme = {
       level5: "rgb(52, 49, 63)",
     },
     //new theme colors
-    backgroundPrimary: ink.INK100,
+    backgroundPrimary: ink.INK5,
     backgroundSecondary: white.WHITE100,
     borderBrandDefault: blue.BLUE100,
     borderCriticalDefault: red.RED100,
@@ -104,7 +104,7 @@ export const DarkTheme: AppTheme = {
     surfaceWarningInverseHover: yellow.YELLOW20,
     surfaceWarningInversePressed: yellow.YELLOW40,
     surfaceWarningPressed: yellow.YELLOW120,
-    textDefault: ink.INK5,
+    textDefault: ink.INK100,
     textDisabled: ink.INK20,
     textPlaceholder: ink.INK40,
     textSecondary: ink.INK60,

package/src/styles/themes/tokens.tsx

@@ -20,7 +20,7 @@ const 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,
@@ -101,7 +101,7 @@ const 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,