@momo-kits/foundation 1.0.11 → 1.0.13

package/Assets/icon.json

@@ -3934,5 +3934,14 @@
   },
   "ic_error": {
     "uri": "https://img.mservice.com.vn/app/img/kits/error_mess_icon.png"
+  },
+  "media_fail": {
+    "uri": "https://static.momocdn.net/app/img/kits/media_fail.png"
+  },
+  "ic_checked": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/checked_ic.png"
+  },
+  "ic_minus": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/minus.png"
   }
 }

package/Button/index.tsx

@@ -11,6 +11,7 @@ import {Typography} from '../Text/types';
 import {Colors} from '../Consts';
 import styles from './styles';
 import {Image} from '../Image';
+import {Icon} from '../Icon';
 
 export interface ButtonProps extends TouchableOpacityProps {
   type?:
@@ -179,11 +180,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Image
-            tintColor={color}
-            source={{uri: iconLeft}}
-            style={{width: iconSize, height: iconSize}}
-          />
+          <Icon color={color} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -203,11 +200,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Image
-            tintColor={color}
-            source={{uri: iconRight}}
-            style={{width: iconSize, height: iconSize}}
-          />
+          <Icon color={color} source={iconRight} size={iconSize} />
         </View>
       );
     }

package/CheckBox/index.tsx

@@ -2,13 +2,10 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import Image from 'react-native-fast-image';
 import {ApplicationContext} from '../Navigation';
 import {Text} from '../Text';
+import {Icon} from '../Icon';
 
-const IC_INDETERMINATED = 'https://img.mservice.com.vn/app/img/kits/minus.png';
-const IC_CHECKED_DEFAULT =
-  'https://img.mservice.com.vn/app/img/kits/checked_ic.png';
 const CheckBox: FC<CheckBoxProps> = props => {
   const {theme} = useContext(ApplicationContext);
   const {value, disabled, onChange, style, label, indeterminated} = props;
@@ -21,11 +18,7 @@ const CheckBox: FC<CheckBoxProps> = props => {
     ? theme.colors.primary
     : theme.colors.background.surface;
 
-  let iconSource = value ? IC_CHECKED_DEFAULT : undefined;
-
-  if (indeterminated) {
-    iconSource = IC_INDETERMINATED;
-  }
+  let iconSource = indeterminated ? 'ic_minus' : 'ic_checked';
 
   if (disabled) {
     borderColor = haveValue
@@ -47,7 +40,13 @@ const CheckBox: FC<CheckBoxProps> = props => {
       disabled={disabled}
       style={[style, styles.container]}>
       <View style={[checkboxStyle, styles.checkbox]}>
-        <Image style={styles.icon} source={{uri: iconSource}} />
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
       </View>
       <Text typography={'description_default'}>{label}</Text>
     </TouchableOpacity>

package/CheckBox/styles.ts

@@ -12,5 +12,4 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   container: {flexDirection: 'row'},
-  icon: {width: 20, height: 20},
 });

package/Icon/index.tsx

@@ -20,6 +20,7 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
 
   return (
     <Image
+      loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
       tintColor={color ?? theme.colors.text.default}

package/Image/index.tsx

@@ -10,11 +10,12 @@ import {FastImagePropsWithoutStyle} from './types';
 
 export interface ImageProps extends FastImagePropsWithoutStyle {
   style?: StyleProp<ViewStyle>;
+  loading?: boolean;
 }
 
 const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
   const {theme} = useContext(ApplicationContext);
-  const [loading, setLoading] = useState(typeof source === 'object');
+  const [loading, setLoading] = useState(rest.loading);
   const [fail, setFail] = useState(false);
 
   /**
@@ -29,7 +30,7 @@ const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
       if (fail) {
         content = (
           <View style={Styles.flexCenter}>
-            <Icon source="error-outline" />
+            <Icon source="media_fail" color={theme.colors.text.disable} />
           </View>
         );
       }
@@ -54,7 +55,7 @@ const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
         style={styles.image}
         onLoad={() => {
           setFail(false);
-          setLoading(true);
+          setLoading(rest.loading);
         }}
         onLoadEnd={() => setLoading(false)}
         onError={() => setFail(true)}
@@ -64,4 +65,7 @@ const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
   );
 };
 
+Image.defaultProps = {
+  loading: true,
+};
 export {Image};

package/Input/Input.tsx

@@ -113,11 +113,7 @@ const Input: FC<InputProps> = ({
             </TouchableOpacity>
           )}
           {icon && (
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.icon}
-            />
+            <Icon icon={iconTintColor} source={icon} style={styles.icon} />
           )}
         </View>
       </View>

package/Input/InputMoney.tsx

@@ -116,13 +116,7 @@ const InputMoney: FC<InputMoneyProps> = ({
               />
             </TouchableOpacity>
           )}
-          {icon && (
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.icon}
-            />
-          )}
+          {icon && <Icon color={iconTintColor} source={icon} />}
         </View>
       </View>
     );

package/Input/InputSearch.tsx

@@ -7,16 +7,12 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} 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 InputSearch: FC<InputSearchProps> = ({
-  errorMessage,
-  disabled,
   placeholder,
   onFocus,
   onBlur,
@@ -27,6 +23,7 @@ const InputSearch: FC<InputSearchProps> = ({
   buttonText = 'Hủy',
   showButtonText = true,
   showIcon = true,
+  showBorder = true,
   style,
   ...props
 }) => {
@@ -54,20 +51,25 @@ const InputSearch: FC<InputSearchProps> = ({
     onChangeText?.(text);
   };
 
+  const getBorderColor = () => {
+    let borderColor = showBorder
+      ? theme.colors.border.default
+      : theme.colors.background.surface;
+
+    if (focused) {
+      borderColor = theme.colors.primary;
+    }
+
+    return {borderColor};
+  };
+
   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 (
       <TextInput
         {...props}
-        editable={!disabled}
         textAlignVertical="top"
         ref={inputRef}
         style={[
@@ -112,9 +114,9 @@ const InputSearch: FC<InputSearchProps> = ({
                 },
               ]}
             />
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
+            <Icon
+              color={iconTintColor}
+              source={icon}
               style={styles.iconSearchInput}
             />
           </View>
@@ -126,9 +128,11 @@ const InputSearch: FC<InputSearchProps> = ({
     <View style={[style, styles.searchInputContainer]}>
       <View
         style={[
-          getBorderColor(focused, errorMessage, disabled),
+          getBorderColor(),
           styles.searchInputWrapper,
-          {backgroundColor: theme.colors.background.surface},
+          {
+            backgroundColor: theme.colors.background.surface,
+          },
         ]}>
         <Icon
           source={'navigation_search'}

package/Input/common.tsx

@@ -100,9 +100,10 @@ export const FloatingView: FC<FloatingViewProps> = ({
           )}
         </Text>
         {floatingIcon && (
-          <Image
-            tintColor={floatingIconTintColor}
-            source={{uri: floatingIcon}}
+          <Icon
+            color={floatingIconTintColor}
+            source={floatingIcon}
+            size={16}
             style={styles.floatingIcon}
           />
         )}

package/Input/index.tsx

@@ -20,17 +20,21 @@ type InputPropsWithoutSizeAndIcon = Omit<
   InputProps,
   'size' | 'icon' | 'iconColor'
 >;
-type InputPropsWithoutRequiredAndSize = Omit<InputProps, 'required' | 'size'>;
+type InputPropsOmitForSearch = Omit<
+  InputProps,
+  'required' | 'size' | 'errorMessage' | 'disabled'
+>;
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
 export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface InputSearchProps extends InputPropsWithoutRequiredAndSize {
+export interface InputSearchProps extends InputPropsOmitForSearch {
   buttonText?: string;
   showButtonText?: boolean;
   showIcon?: boolean;
+  showBorder?: boolean;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Input/styles.ts

@@ -25,7 +25,7 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.S,
     flexDirection: 'row',
   },
-  floatingIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
+  floatingIcon: {marginLeft: Spacing.XS},
   errorIcon: {marginRight: Spacing.XS},
   errorView: {
     flexDirection: 'row',
@@ -104,8 +104,6 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   iconSearchInput: {
-    width: 24,
-    height: 24,
     marginLeft: Spacing.S,
   },
   searchInputContainer: {flexDirection: 'row', alignItems: 'center'},

package/Layout/ScreenContainer.tsx

@@ -1,10 +1,11 @@
-import {KeyboardAvoidingView, Platform, ScrollView, View} from 'react-native';
+import {Animated, KeyboardAvoidingView, Platform, View} from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import React from 'react';
 import {ScreenContainerProps} from '../Navigation/types';
 import {Spacing, Styles} from '../Consts';
 import {ScreenSection, validateChildren} from './index';
+import {Image} from '../Image';
 
 const ScreenContainer: React.FC<ScreenContainerProps> = ({
   children,
@@ -12,11 +13,12 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
   enableKeyboardAvoidingView,
   scrollable,
   scrollViewProps,
+  headerImage,
 }) => {
   let Component: any = View;
   const headerHeight = useHeaderHeight();
   if (scrollable) {
-    Component = ScrollView;
+    Component = Animated.ScrollView;
   }
 
   /**
@@ -52,6 +54,14 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
           android: undefined,
         })}>
         <Component {...scrollViewProps} style={Styles.flex}>
+          {headerImage && (
+            <Image
+              source={{
+                uri: headerImage,
+              }}
+              style={{width: '100%', height: 300}}
+            />
+          )}
           {renderContent()}
         </Component>
       </KeyboardAvoidingView>

package/Navigation/BottomTab.tsx

@@ -1,8 +1,7 @@
 import React, {FC} from 'react';
-import {View} from 'react-native';
-import {BottomTabItemProps, BottomTabProps} from './types';
+import {BottomTabProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {Icon} from '@momo-kits/foundation';
+import {Icon} from '../Icon';
 
 const Tab = createBottomTabNavigator();
 
@@ -11,11 +10,10 @@ const BottomTab: FC<BottomTabProps> = ({tabs}) => {
     <Tab.Navigator>
       {tabs.map((item, index) => {
         return (
-          // @ts-ignore
           <Tab.Screen
             key={`${item.label}-${index}`}
             name={item.label}
-            component={item.component}
+            component={item.screen}
             options={{
               tabBarLabel: item.label,
               tabBarBadge: item?.badgeLabel,

package/Navigation/Components.tsx

@@ -1,5 +1,6 @@
 import React, {useContext} from 'react';
 import {
+  Animated,
   DeviceEventEmitter,
   StatusBar,
   StyleSheet,
@@ -47,7 +48,6 @@ const styles = StyleSheet.create({
     marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
-    borderWidth: 0.5,
     borderRadius: 14,
     borderColor: '#00000066',
     justifyContent: 'center',
@@ -62,15 +62,19 @@ const styles = StyleSheet.create({
   headerLeft: {
     marginLeft: 12,
   },
+  title: {fontSize: 15, lineHeight: 22, fontWeight: '600'},
 });
 
-const HeaderTitle = (props: any) => {
+const HeaderTitle: React.FC<any> = props => {
+  const opacity = props.animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
   return (
-    <Text
+    <Animated.Text
       {...props}
-      typography="header_default"
-      weight="bold"
-      color={props.tintColor}
+      style={[styles.title, {opacity, color: props.tintColor}]}
     />
   );
 };
@@ -98,19 +102,28 @@ const HeaderLeft: React.FC<any> = ({tintColor}) => {
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   backgroundColor,
+  animatedValue,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }
+  const opacity = animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
   return (
-    <View
+    <Animated.View
       style={[
         Styles.flex,
         {
           backgroundColor: backgroundColor ?? theme.colors.background.default,
           overflow: 'hidden',
+          borderBottomWidth: headerImage ? 0 : 1,
+          borderColor: theme.colors.border.default,
+          opacity,
         },
       ]}>
       <StatusBar
@@ -119,7 +132,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       {headerImage && (
         <Image style={styles.headerBackground} source={{uri: headerImage}} />
       )}
-    </View>
+    </Animated.View>
   );
 };
 
@@ -193,15 +206,13 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
 
   return (
     <View style={styles.headerRightButton}>
-      <NavigationButton
-        icon="addFavorite"
-        tintColor={tintColor}
-        onPress={() => {}}
-      />
       <View
         style={[
           styles.toolkitContainer,
-          {backgroundColor: backgroundColor ?? '#00000066'},
+          {
+            backgroundColor: backgroundColor ?? '#00000066',
+            borderWidth: backgroundColor ? 0.5 : 0,
+          },
         ]}>
         <TouchableOpacity>
           <Icon color={tintColor} source="navigation_more_horiz" size={20} />

package/Navigation/NavigationButton.tsx

@@ -23,7 +23,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         styles.container,
         {
           backgroundColor: backgroundColor ?? '#00000066',
-          borderWidth: useBorder ? 0.5 : 0,
+          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
         },
       ]}
       onPress={onPress}>

package/Navigation/StackScreen.tsx

@@ -22,8 +22,9 @@ const StackScreen: React.FC<any> = props => {
     if (options) {
       params.navigation.setOptions(options);
     }
-  }, [navigation, options]);
+  }, [options]);
 
+  console.log(params);
   return <Component {...params} />;
 };
 

package/Navigation/types.ts

@@ -1,5 +1,5 @@
-import {ScrollViewProps, ViewProps} from 'react-native';
-import React, {ComponentType, ReactElement} from 'react';
+import {Animated, ScrollViewProps, ViewProps} from 'react-native';
+import React from 'react';
 import Navigator from './Navigator';
 
 export type Theme = {
@@ -73,6 +73,7 @@ export interface ScreenContainerProps extends ViewProps {
   enableKeyboardAvoidingView?: boolean;
   scrollable: boolean;
   scrollViewProps?: ScrollViewProps;
+  headerImage?: string;
 }
 
 export type ScreenParams = {
@@ -107,11 +108,13 @@ export type NavigationOptions = {
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
   headerRight?: (props?: any) => React.ReactElement;
+  animatedValue?: Animated.Value;
 };
 
 export type HeaderBackgroundProps = {
   image?: string | null;
   backgroundColor?: string | null;
+  animatedValue?: Animated.Value;
 };
 
 export type TitleCustomProps = {
@@ -128,7 +131,7 @@ export type BottomTabItemProps = {
   icon: string;
   showDot?: boolean;
   badgeLabel?: string;
-  component: ComponentType<any> | undefined;
+  screen: React.ComponentType<any>;
 };
 
 export type BottomTabProps = {

package/Navigation/utils.tsx

@@ -73,43 +73,58 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let surfaceTheme: {};
-  let titleTheme: {};
+  let backgroundProps = {};
+  let titleProps = {};
+  let options = {};
 
   if (params.surface == true) {
-    surfaceTheme = {
-      headerBackground: () => (
-        <HeaderBackground
-          image={null}
-          backgroundColor={theme.colors.background.surface}
-        />
-      ),
+    options = {
+      ...options,
       ...getTintColor({
         ...theme,
         assets: {...theme.assets, headerBackground: undefined},
       }),
     };
-  } else {
-    surfaceTheme = {
-      headerBackground: HeaderBackground,
-      ...getTintColor(theme),
+    backgroundProps = {
+      ...backgroundProps,
+      image: null,
+      backgroundColor: theme.colors.background.surface,
     };
+  } else {
+    backgroundProps = {};
+    options = {...options, ...getTintColor(theme)};
+  }
+
+  if (params.animatedValue) {
+    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
+    titleProps = {...titleProps, animatedValue: params.animatedValue};
+    options = {...options, headerTransparent: true};
+  } else {
+    options = {...options, headerTransparent: false};
   }
 
   if (params.customTitle) {
-    titleTheme = {
+    options = {
+      ...options,
       headerTitleAlign: 'left',
       headerTitle: (props: any) => {
         return <HeaderCustom {...params.customTitle} {...props} />;
       },
     };
   } else {
-    titleTheme = {
-      headerTitle: HeaderTitle,
+    options = {
+      ...options,
+      headerTitle: (props: any) => {
+        return <HeaderTitle {...titleProps} {...props} />;
+      },
     };
   }
 
-  return {...params, ...surfaceTheme, ...titleTheme};
+  return {
+    ...params,
+    ...options,
+    headerBackground: () => <HeaderBackground {...backgroundProps} />,
+  };
 };
 
 export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Popup/PopupPromotion.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Image} from '../Image';
-import {Radius} from '../Consts';
+import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
@@ -55,11 +55,10 @@ const styles = StyleSheet.create({
     aspectRatio: 0.72,
   },
   iconCloseContainer: {
-    position: 'absolute',
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
-    bottom: -36,
+    marginTop: Spacing.L,
   },
   iconClose: {
     width: 20,

package/Skeleton/index.tsx

@@ -1,31 +1,29 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
-import {Animated, Platform, useWindowDimensions, View} from 'react-native';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {SkeletonTypes} from './types';
-import {ApplicationContext} from '../Navigation';
 import {Styles} from '../Consts';
 import styles from './styles';
+import {Colors} from '@momo-kits/foundation';
+
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
-  const {width} = useWindowDimensions();
-  const {theme} = useContext(ApplicationContext);
-  const beginShimmerPosition = useRef(new Animated.Value(-1)).current;
+  const [width, setWidth] = useState(0);
+  const PRIMARY_COLOR = Colors.black_05;
+  const HIGHLIGHT_COLOR1 = Colors.black_05;
+  const HIGHLIGHT_COLOR2 = Colors.black_03;
+  const beginShimmerPosition = useRef(new Animated.Value(0)).current;
 
-  const shimmerColors = [
-    theme.colors.text.disable + '40',
-    theme.colors.text.disable + '80',
-    theme.colors.text.disable,
-  ];
-  const location = [0.3, 0.5, 0.7];
+  const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
   const linearTranslate = beginShimmerPosition.interpolate({
-    inputRange: [-1, 1],
-    outputRange: [0, width],
+    inputRange: [0, 1],
+    outputRange: [-width, width],
   });
   const animatedValue = useMemo(() => {
     return Animated.loop(
       Animated.timing(beginShimmerPosition, {
         toValue: 1,
-        delay: 0,
         duration: 1000,
+        easing: Easing.linear,
         useNativeDriver: Platform.OS !== 'web',
       }),
     );
@@ -38,23 +36,33 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
     };
   }, [animatedValue]);
 
+  const onLayout = (newWidth: number) => {
+    if (newWidth !== width) {
+      setWidth(newWidth);
+    }
+  };
   return (
     <View style={[styles.container, style]}>
-      <View style={[Styles.flex, {backgroundColor: shimmerColors[0]}]}>
+      <View
+        onLayout={e => onLayout(e.nativeEvent.layout.width)}
+        style={[Styles.flex, {backgroundColor: PRIMARY_COLOR}]}>
         <Animated.View
-          style={[Styles.flex, {transform: [{translateX: linearTranslate}]}]}>
+          style={{
+            transform: [{translateX: linearTranslate}],
+            width: '60%',
+            height: '100%',
+          }}>
           <LinearGradient
+            style={[StyleSheet.absoluteFill]}
             colors={shimmerColors}
-            style={[Styles.flex, {width: width}]}
             start={{
-              x: -1,
-              y: 0.5,
+              x: 0,
+              y: 0,
             }}
             end={{
-              x: 2,
-              y: 0.5,
+              x: 1,
+              y: 0,
             }}
-            locations={location}
           />
         </Animated.View>
       </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {