@momo-kits/foundation 1.0.3 → 1.0.5

package/Button/index.tsx

@@ -41,7 +41,6 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];

package/CheckBox/index.tsx

@@ -1,12 +1,10 @@
 import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
-
 import {CheckBoxProps} from './types';
-import {Text} from '@momo-kits/foundation';
 import styles from './styles';
 import Image from 'react-native-fast-image';
 import {ApplicationContext} from '../Navigation';
-import {Colors} from '../Consts';
+import {Text} from '../Text';
 
 const IC_INDETERMINATED = 'https://img.mservice.com.vn/app/img/kits/minus.png';
 const IC_CHECKED_DEFAULT =
@@ -31,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/ContentLoader/index.tsx

@@ -1,8 +1,8 @@
 import React, {useContext, useEffect, useMemo, useRef} from 'react';
 import {Animated, Platform, useWindowDimensions, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import {ContentLoaderTypes} from './types';
 import {ApplicationContext} from '../Navigation';
-import LinearGradient from 'react-native-linear-gradient';
 import {Styles} from '../Consts';
 import styles from './styles';
 const ContentLoader: React.FC<ContentLoaderTypes> = ({style}) => {

package/Icon/icon.json

@@ -3931,5 +3931,8 @@
   },
   "header_background": {
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation-bar.png"
+  },
+  "ic_error": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/error_mess_icon.png"
   }
 }

package/Icon/index.tsx

@@ -1,8 +1,10 @@
 import React, {useContext} from 'react';
-import {IconProps, Image, ApplicationContext} from '../index';
 import IconSources from './icon.json';
+import {IconProps} from './types';
+import {ApplicationContext} from '../Navigation';
+import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({source, size, color}) => {
+const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   const {theme} = useContext(ApplicationContext);
 
   /**
@@ -10,7 +12,7 @@ const Icon: React.FC<IconProps> = ({source, size, color}) => {
    */
   const getIconSource = (): any => {
     if (source && !source.includes('http')) {
-      let icon: {[key: string]: object} = IconSources;
+      let icon: {[key: string]: {uri: string}} = IconSources;
       return icon[source] ?? icon.ic_warning;
     }
     return {uri: source};
@@ -19,7 +21,7 @@ const Icon: React.FC<IconProps> = ({source, size, color}) => {
   return (
     <Image
       source={getIconSource()}
-      style={{width: size, height: size}}
+      style={[style, {width: size, height: size}]}
       tintColor={color ?? theme.colors.text.default}
     />
   );

package/Icon/types.ts

@@ -1,5 +1,8 @@
+import {ViewStyle} from 'react-native';
+
 export type IconProps = {
-  source?: string;
+  source: string;
   size?: number;
   color?: string;
+  style?: ViewStyle;
 };

package/Image/index.tsx

@@ -1,15 +1,18 @@
 import React, {useContext, useState} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';
-
 import styles from './styles';
-import {ImageProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {ContentLoader} from '../ContentLoader';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
+import {FastImagePropsWithoutStyle} from './types';
+
+export interface ImageProps extends FastImagePropsWithoutStyle {
+  style?: StyleProp<ViewStyle>;
+}
 
-const Image: React.FC<ImageProps> = ({style, placeholder, source, ...rest}) => {
+const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
   const {theme} = useContext(ApplicationContext);
   const [loading, setLoading] = useState(typeof source === 'object');
   const [fail, setFail] = useState(false);
@@ -20,7 +23,7 @@ const Image: React.FC<ImageProps> = ({style, placeholder, source, ...rest}) => {
    */
   const renderContent = () => {
     if (loading || fail) {
-      let content = placeholder ?? (
+      let content = (
         <ContentLoader style={[StyleSheet.absoluteFill, styles.image]} />
       );
       if (fail) {
@@ -61,8 +64,4 @@ const Image: React.FC<ImageProps> = ({style, placeholder, source, ...rest}) => {
   );
 };
 
-Image.defaultProps = {
-  style: {},
-};
-
 export {Image};

package/Image/types.ts

@@ -1,5 +1,3 @@
 import {FastImageProps} from 'react-native-fast-image';
 
-export interface ImageProps extends FastImageProps {
-  placeholder?: boolean;
-}
+export type FastImagePropsWithoutStyle = Omit<FastImageProps, 'style'>;

package/Input/Input.tsx

@@ -3,22 +3,15 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
-  TextInputProps,
   TouchableOpacity,
   View,
 } 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';
-
-const errorMessageIcon =
-  'https://img.mservice.com.vn/app/img/kits/error_mess_icon.png';
-const ic_clear =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_close_circle_full.png';
-const MAX_LENGTH = 100;
+import {Icon} from '../Icon';
 
 const Input: FC<InputProps> = ({
   value,
@@ -34,11 +27,11 @@ const Input: FC<InputProps> = ({
   disabled,
   floatingIconColor,
   iconColor,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const [focused, setFocused] = useState(false);
-  const inputRef = useRef(null);
+  const inputRef = useRef<any>(null);
 
   const onClearText = () => {
     inputRef?.current?.clear();
@@ -82,15 +75,17 @@ 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}
             editable={!disabled}
             textAlignVertical="top"
             ref={inputRef}
@@ -112,10 +107,10 @@ const Input: FC<InputProps> = ({
         <View style={styles.iconView}>
           {focused && (
             <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Image
-                tintColor={theme.colors.text.hint}
-                source={{uri: ic_clear}}
-                style={styles.iconClose}
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
               />
             </TouchableOpacity>
           )}
@@ -131,31 +126,16 @@ const Input: FC<InputProps> = ({
     );
   };
 
-  const renderErrorView = () => {
-    if (errorMessage) {
-      return (
-        <View style={styles.errorView}>
-          <Image style={styles.errorIcon} source={{uri: errorMessageIcon}} />
-          <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',
-  maxLength: MAX_LENGTH,
-  disabled: false,
+  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

@@ -3,23 +3,21 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
-  TextInputProps,
   TouchableOpacity,
   View,
 } from 'react-native';
 import styles from './styles';
-import {Image} from '../Image';
 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';
-
-const errorMessageIcon =
-  'https://img.mservice.com.vn/app/img/kits/error_mess_icon.png';
-const ic_clear =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_close_circle_full.png';
-const DEFAULT_HEIGHT = 112;
-const MAX_LENGTH = 300;
+import {Icon} from '../Icon';
 
 const TextArea: FC<TextAreaProps> = props => {
   const {theme} = useContext(ApplicationContext);
@@ -91,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
@@ -122,10 +120,10 @@ const TextArea: FC<TextAreaProps> = props => {
           </View>
           {focused && (
             <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Image
-                tintColor={theme.colors.text.hint}
-                source={{uri: ic_clear}}
-                style={styles.iconClose}
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
               />
             </TouchableOpacity>
           )}
@@ -135,22 +133,10 @@ const TextArea: FC<TextAreaProps> = props => {
     );
   };
 
-  const renderErrorView = () => {
-    if (errorMessage) {
-      return (
-        <View style={styles.errorView}>
-          <Image style={styles.errorIcon} source={{uri: errorMessageIcon}} />
-          <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: {
@@ -29,7 +28,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
   },
   floatingIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
-  errorIcon: {width: 16, height: 16, marginRight: Spacing.XS},
+  errorIcon: {marginRight: Spacing.XS},
   errorView: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -38,10 +37,6 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     flex: 1,
   },
-  iconClose: {
-    width: 16,
-    height: 16,
-  },
   iconView: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -89,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,
+  },
 });