@momo-kits/foundation 1.0.12 → 1.0.13

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);
 
   /**
@@ -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/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,7 +114,11 @@ const InputSearch: FC<InputSearchProps> = ({
                 },
               ]}
             />
-            <Icon color={iconTintColor} source={icon} />
+            <Icon
+              color={iconTintColor}
+              source={icon}
+              style={styles.iconSearchInput}
+            />
           </View>
         )}
       </View>
@@ -122,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/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

@@ -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

@@ -10,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/package.json

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