@momo-kits/foundation 1.0.4 → 1.0.5

package/CheckBox/index.tsx

@@ -29,10 +29,10 @@ const CheckBox: FC<CheckBoxProps> = props => {
 
   if (disabled) {
     borderColor = haveValue
-      ? theme.colors.background.disable
+      ? theme.colors.background.tonal
       : theme.colors.border.disable;
     backgroundColor = haveValue
-      ? theme.colors.background.disable
+      ? theme.colors.background.tonal
       : theme.colors.background.surface;
   }
   const checkboxStyle = {borderColor, backgroundColor, borderWidth: 1};

package/CheckBox/styles.ts

@@ -3,11 +3,13 @@ import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   checkbox: {
-    width: 24,
-    height: 24,
+    width: 20,
+    height: 20,
     borderRadius: Radius.XS,
     borderWidth: 2,
     marginRight: Spacing.S,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   container: {flexDirection: 'row'},
   icon: {width: 20, height: 20},

package/Input/Input.tsx

@@ -8,9 +8,8 @@ import {
 } from 'react-native';
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
-import {Text} from '../Text';
 import {Image} from '../Image';
-import {getBorderColor, renderFloatingView} from './common';
+import {ErrorView, FloatingView, getBorderColor} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
 
@@ -76,13 +75,14 @@ const Input: FC<InputProps> = ({
           getSizeStyle(),
           getBorderColor(focused, errorMessage, disabled),
           styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
         ]}>
-        {renderFloatingView(
-          floatingValue,
-          floatingIconColor,
-          disabled,
-          floatingIcon,
-        )}
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          floatingIcon={floatingIcon}
+        />
         <View style={styles.inputView}>
           <TextInput
             {...props}
@@ -126,35 +126,16 @@ const Input: FC<InputProps> = ({
     );
   };
 
-  const renderErrorView = () => {
-    if (errorMessage) {
-      return (
-        <View style={styles.errorView}>
-          <View style={styles.errorIcon}>
-            <Icon
-              source="ic_error"
-              size={16}
-              color={theme.colors.error.primary}
-            />
-          </View>
-          <Text color={theme.colors.error.primary} typography={'description_s'}>
-            {errorMessage}
-          </Text>
-        </View>
-      );
-    }
-  };
-
   return (
     <View style={styles.wrapper}>
       {renderInputView()}
-      {renderErrorView()}
+      <ErrorView errorMessage={errorMessage} />
     </View>
   );
 };
 
 Input.defaultProps = {
-  size: 'large',
+  size: 'small',
 };
 
 export default Input;

package/Input/SearchInput.tsx

@@ -0,0 +1,153 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SearchInputProps} from './index';
+import {getBorderColor} from './common';
+import {ApplicationContext} from '../Navigation';
+import styles from './styles';
+import {Icon} from '../Icon';
+import {Image} from '../Image';
+import {Text} from '../Text';
+
+const SearchInput: FC<SearchInputProps> = ({
+  errorMessage,
+  disabled,
+  placeholder,
+  onFocus,
+  onBlur,
+  iconColor,
+  value,
+  onChangeText,
+  icon,
+  buttonText = 'Hủy',
+  showButtonText,
+  showIcon = true,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<any>(null);
+  let iconTintColor = iconColor;
+
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const onClearText = () => {
+    inputRef?.current?.clear();
+  };
+
+  const _onChangeText = (text: string) => {
+    onChangeText?.(text);
+  };
+
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
+    }
+    return (
+      <View style={styles.searchInputView}>
+        <Icon
+          source={'navigation_search'}
+          size={24}
+          color={theme.colors.text.hint}
+        />
+        <TextInput
+          {...props}
+          editable={!disabled}
+          textAlignVertical="top"
+          ref={inputRef}
+          style={[
+            styles.searchInput,
+            {
+              color: textColor,
+            },
+          ]}
+          value={value}
+          onChangeText={_onChangeText}
+          onFocus={_onFocus}
+          onBlur={_onBlur}
+          placeholder={placeholder}
+          selectionColor={theme.colors.primary}
+          placeholderTextColor={placeholderColor}
+        />
+      </View>
+    );
+  };
+
+  const renderIconView = () => {
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+        }}>
+        {focused && (
+          <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+            <Icon
+              source="24_navigation_close_circle_full"
+              size={16}
+              color={theme.colors.text.hint}
+            />
+          </TouchableOpacity>
+        )}
+        {showIcon && icon && (
+          <View>
+            <View
+              style={[
+                styles.divider,
+                {
+                  backgroundColor: theme.colors.primary,
+                },
+              ]}
+            />
+
+            <Image
+              tintColor={iconTintColor}
+              source={{uri: icon}}
+              style={styles.iconSearchInput}
+            />
+          </View>
+        )}
+      </View>
+    );
+  };
+  return (
+    <View style={styles.searchInputContainer}>
+      <View
+        style={[
+          getBorderColor(focused, errorMessage, disabled),
+          styles.searchInputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+        ]}>
+        {renderInputView()}
+        {renderIconView()}
+      </View>
+      {showButtonText && (
+        <TouchableOpacity>
+          <Text typography={'action_default'} style={styles.textButton}>
+            {buttonText}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export default SearchInput;

package/Input/TextArea.tsx

@@ -9,13 +9,16 @@ import {
 import styles from './styles';
 import {Text} from '../Text';
 import {ApplicationContext} from '../Navigation';
-import {getBorderColor, renderFloatingView} from './common';
+import {
+  DEFAULT_HEIGHT,
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  MAX_LENGTH,
+} from './common';
 import {TextAreaProps} from './index';
 import {Icon} from '../Icon';
 
-const DEFAULT_HEIGHT = 112;
-const MAX_LENGTH = 300;
-
 const TextArea: FC<TextAreaProps> = props => {
   const {theme} = useContext(ApplicationContext);
   const {
@@ -86,12 +89,12 @@ const TextArea: FC<TextAreaProps> = props => {
             backgroundColor: theme.colors.background.surface,
           },
         ]}>
-        {renderFloatingView(
-          floatingValue,
-          floatingIconColor,
-          disabled,
-          floatingIcon,
-        )}
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          floatingIcon={floatingIcon}
+        />
         <View style={styles.rowArea}>
           <View style={styles.textAreaView}>
             <TextInput
@@ -130,28 +133,10 @@ const TextArea: FC<TextAreaProps> = props => {
     );
   };
 
-  const renderErrorView = () => {
-    if (errorMessage) {
-      return (
-        <View style={styles.errorView}>
-          <View style={styles.errorIcon}>
-            <Icon
-              source="ic_error"
-              size={16}
-              color={theme.colors.error.primary}
-            />
-          </View>
-          <Text color={theme.colors.error.primary} typography={'description_s'}>
-            {errorMessage}
-          </Text>
-        </View>
-      );
-    }
-  };
   return (
     <View style={styles.wrapper}>
       {renderInputView()}
-      {renderErrorView()}
+      <ErrorView errorMessage={errorMessage} />
     </View>
   );
 };

package/Input/common.tsx

@@ -2,8 +2,19 @@ import {View} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
 import {Image} from '../Image';
-import React, {useContext} from 'react';
+import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Navigation';
+import {Icon} from '../Icon';
+
+type FloatingViewProps = {
+  floatingValue?: string;
+  floatingIconColor?: string;
+  disabled?: boolean;
+  floatingIcon?: string;
+};
+
+export const DEFAULT_HEIGHT = 112;
+export const MAX_LENGTH = 300;
 
 export const getBorderColor = (
   focused: boolean,
@@ -29,12 +40,30 @@ export const getBorderColor = (
   return {borderColor};
 };
 
-export const renderFloatingView = (
-  floatingValue?: string,
-  floatingIconColor?: string,
-  disabled?: boolean,
-  floatingIcon?: string,
-) => {
+export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
+  const {theme} = useContext(ApplicationContext);
+  const errorColor = theme.colors.error.primary;
+  if (errorMessage) {
+    return (
+      <View style={styles.errorView}>
+        <View style={styles.errorIcon}>
+          <Icon color={errorColor} source="ic_error" size={16} />
+        </View>
+        <Text color={errorColor} typography={'description_s'}>
+          {errorMessage}
+        </Text>
+      </View>
+    );
+  }
+  return null;
+};
+
+export const FloatingView: FC<FloatingViewProps> = ({
+  floatingValue,
+  floatingIconColor,
+  disabled,
+  floatingIcon,
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   if (floatingValue) {
@@ -67,4 +96,5 @@ export const renderFloatingView = (
       </View>
     );
   }
+  return null;
 };

package/Input/index.tsx

@@ -1,5 +1,6 @@
 import Input from './Input';
 import TextArea from './TextArea';
+import SearchInput from './SearchInput';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -13,14 +14,18 @@ export interface InputProps extends TextInputProps {
   iconColor?: string;
 }
 
-export interface TextAreaProps extends TextInputProps {
-  errorMessage: string;
-  floatingValue: string;
-  floatingIcon: string;
-  disabled: boolean;
-  floatingIconColor: string;
-  placeholder: string;
-  height: number;
+type InputPropsWithoutSize = Omit<InputProps, 'size'>;
+
+export interface TextAreaProps extends TextInputProps, InputPropsWithoutSize {
+  height?: number;
+}
+
+export interface SearchInputProps
+  extends TextInputProps,
+    InputPropsWithoutSize {
+  buttonText?: string;
+  showButtonText?: boolean;
+  showIcon?: boolean;
 }
 
-export {Input, TextArea};
+export {Input, TextArea, SearchInput};

package/Input/styles.ts

@@ -5,7 +5,6 @@ export default StyleSheet.create({
   //input style
   input: {width: '100%', paddingLeft: Spacing.M, height: '100%'},
   wrapper: {
-    marginVertical: Spacing.M,
     width: '100%',
   },
   container: {
@@ -85,4 +84,35 @@ export default StyleSheet.create({
     flex: 1,
     marginBottom: Spacing.XS,
   },
+
+  //searchInput
+  searchInputWrapper: {
+    flexDirection: 'row',
+    borderRadius: Radius.XL,
+    borderWidth: 1,
+    paddingHorizontal: Spacing.S,
+    alignItems: 'center',
+    flex: 1,
+  },
+  searchInput: {
+    width: '100%',
+    height: 36,
+    marginLeft: Spacing.S,
+  },
+  searchInputView: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconSearchInput: {
+    width: 24,
+    height: 24,
+    marginLeft: Spacing.S,
+  },
+  searchInputContainer: {flexDirection: 'row', alignItems: 'center'},
+  textButton: {marginLeft: Spacing.L},
+  divider: {
+    width: 1,
+    marginLeft: Spacing.XS,
+  },
 });

package/Navigation/Components.tsx

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import {StatusBar, StyleSheet, View} from 'react-native';
+import {DeviceEventEmitter, StatusBar, StyleSheet, View} from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
 import {Colors, Styles} from '../Consts';
 import {Image} from '../Image';
@@ -31,6 +31,21 @@ const styles = StyleSheet.create({
   },
 });
 
+const HeaderLeft = (props: any) => {
+  const {navigator} = useContext(ApplicationContext);
+  const goBack = () => {
+    const canGoBack = navigator?.ref.current?.canGoBack();
+    if (canGoBack) {
+      navigator?.ref.current?.goBack();
+    } else {
+      const currentTime = new Date().getTime();
+      const requestId = `navigationBackPress#${currentTime}`;
+      DeviceEventEmitter.emit('dismiss', {requestId});
+    }
+  };
+  return <NavigationButton icon="ic_back" {...props} onPress={goBack} />;
+};
+
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
   const {theme} = useContext(ApplicationContext);
   return (
@@ -108,4 +123,4 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={Styles.headerRightButton}>{renderAction()}</View>;
 };
 
-export {HeaderBackground, HeaderRightAction, HeaderCustom};
+export {HeaderLeft, HeaderBackground, HeaderRightAction, HeaderCustom};

package/Navigation/utils.tsx

@@ -1,13 +1,12 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {HeaderBackground, HeaderCustom} from './Components';
+import {HeaderBackground, HeaderCustom, HeaderLeft} from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 import {Text} from '../Text';
-import {ApplicationContext, NavigationButton} from './index';
 
 const HeaderTitle = (props: any) => {
   return (
@@ -20,17 +19,6 @@ const HeaderTitle = (props: any) => {
   );
 };
 
-const HeaderLeft = (props: any) => {
-  const {navigator} = useContext(ApplicationContext);
-  const goBack = () => {
-    const canGoBack = navigator?.ref.current?.canGoBack();
-    if (canGoBack) {
-      navigator?.ref.current?.goBack();
-    }
-  };
-  return <NavigationButton icon="ic_back" {...props} onPress={goBack} />;
-};
-
 const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
     return {
@@ -93,9 +81,9 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backTheme = {};
-  let surfaceTheme = {};
-  let titleTheme = {};
+  let backTheme: {};
+  let surfaceTheme: {};
+  let titleTheme: {};
 
   if (params.hiddenBack == true) {
     backTheme = {
@@ -126,6 +114,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
 
   if (params.customTitle) {
     titleTheme = {
+      headerTitleAlign: 'left',
       headerTitle: (props: any) => {
         return <HeaderCustom {...params.customTitle} {...props} />;
       },

package/Playground/index.tsx

@@ -7,7 +7,7 @@ import {Colors, Radius, Spacing} from '../Consts';
 import {ApplicationContext} from '../Navigation';
 import {ScreenSection, SectionItem} from '../Layout';
 import {Icon, IconSources} from '../Icon';
-import {string} from 'prop-types';
+import {SearchInput} from '../Input';
 
 const ChooseOptionScreen = (
   data: string[] = [],
@@ -15,14 +15,22 @@ const ChooseOptionScreen = (
   onPress: (value: string) => void,
 ) => {
   const {theme} = useContext(ApplicationContext);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filteredData, setFilteredData] = useState<string[]>([]);
+
+  useEffect(() => {
+    let mapData = data;
+    if (optionType === 'color') {
+      mapData = Object.values(Colors);
+    }
+    if (optionType === 'icon') {
+      mapData = Object.keys(IconSources);
+    }
+
+    setFilteredData(mapData);
+    return () => {};
+  }, [filteredData]);
 
-  let mapData = data;
-  if (optionType === 'color') {
-    mapData = Object.values(Colors);
-  }
-  if (optionType === 'icon') {
-    mapData = Object.keys(IconSources);
-  }
   const renderItemView = (item: string) => {
     switch (optionType) {
       case 'color': {
@@ -44,6 +52,13 @@ const ChooseOptionScreen = (
     }
   };
 
+  const onSearch = (text: string) => {
+    let newData = filteredData.map(i => i.includes(text));
+    if (text === '') {
+      newData = mapData;
+    }
+  };
+
   const renderItem = ({item, index}) => {
     const iconSource: {[key: string]: {uri: string}} = IconSources;
     let key = item;
@@ -58,7 +73,7 @@ const ChooseOptionScreen = (
           flexDirection: 'row',
           alignItems: 'center',
           marginBottom: Spacing.M,
-          borderBottomWidth: index !== mapData.length - 1 ? 1 : 0,
+          borderBottomWidth: index !== filteredData.length - 1 ? 1 : 0,
           borderColor: theme.colors.border.default,
           paddingBottom: Spacing.M,
         }}>
@@ -70,8 +85,9 @@ const ChooseOptionScreen = (
   return (
     <ScreenSection>
       <SectionItem widthSpan={12}>
+        <SearchInput value={searchTerm} onChangeText={onSearch} />
         <FlatList
-          data={mapData}
+          data={filteredData}
           renderItem={renderItem}
           keyExtractor={(item, index) => `${item.toString()} ${index}`}
           showsVerticalScrollIndicator={false}
@@ -138,7 +154,11 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
                   value={option}
                   onChange={() => onChangeOptions(option, key)}
                   groupValue={compProps?.[key]}
-                  style={{marginBottom: Spacing.S}}
+                  style={{
+                    marginBottom: Spacing.S,
+                    marginRight: Spacing.M,
+                    width: '25%',
+                  }}
                 />
               );
             })}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {
@@ -11,6 +11,7 @@
   ],
   "dependencies": {
     "react-native-safe-area-context": "3.1.4",
+    "react-native-linear-gradient": "2.5.6",
     "@react-navigation/bottom-tabs": "git+https://gitlab.com/dung.huynh1/react-navigation-bottom-tabs.git#main",
     "@react-navigation/core": "5.16.1",
     "@react-navigation/native": "5.9.8",