@momo-kits/template 0.81.1 → 0.81.2-beta.2

package/{HeaderBanner → HeaderSliderBanner}/index.tsx

@@ -1,10 +1,10 @@
 import React, {FC} from 'react';
-import {Animated, TouchableOpacity} from 'react-native';
+import {Animated, TouchableOpacity, View} from 'react-native';
 import Carousel from '@momo-kits/carousel';
 import {Image, Pagination, Spacing} from '@momo-kits/foundation';
-import {HeaderBannerProps} from './types';
+import {HeaderSliderBannerProps} from './types';
 
-const HeaderBanner: FC<HeaderBannerProps> = ({
+const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
   animatedValue = new Animated.Value(0),
   paginationBottom = 56,
   data = [],
@@ -13,10 +13,11 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
   carouselProps,
   onSnapToItem,
   onPressItem,
+  paginationType = 'black_white',
 }) => {
   const scale = animatedValue.interpolate({
     inputRange: [-300, 0, 300],
-    outputRange: [2, 1, 1],
+    outputRange: [4, 1, 1],
     extrapolate: 'clamp',
   });
   const opacity = animatedValue.interpolate({
@@ -26,10 +27,15 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
   });
   const translateY = animatedValue.interpolate({
     inputRange: [-300, 0],
-    outputRange: [-160, -2],
+    outputRange: [-80, -2],
     extrapolate: 'clamp',
   });
 
+  const paginationOpacity = animatedValue.interpolate({
+    inputRange: [-40, 0],
+    outputRange: [0, 1],
+  });
+
   const renderItem = (info: {item: any; index: number}) => {
     const {item, index} = info;
     return (
@@ -47,31 +53,33 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
   return (
     <Animated.View
       style={{
-        aspectRatio: 1.75,
+        height: 210,
         opacity: opacity,
         transform: [{scale}, {translateY}],
       }}>
       <Carousel
         {...carouselProps}
-        autoplay
         full={true}
         data={data}
         onSnapToItem={onSnapToItem}
         renderItem={renderItem}
       />
-      <Pagination
-        {...paginationProps}
+      <Animated.View
         style={{
           position: 'absolute',
-          bottom: paginationBottom + Spacing.XS,
+          bottom: paginationBottom - Spacing.S,
           alignSelf: 'center',
-        }}
-        activeIndex={activeIndex}
-        dataLength={data.length}
-        type={'black_white'}
-      />
+          opacity: paginationOpacity,
+        }}>
+        <Pagination
+          {...paginationProps}
+          activeIndex={activeIndex}
+          dataLength={data.length}
+          type={paginationType}
+        />
+      </Animated.View>
     </Animated.View>
   );
 };
 
-export default HeaderBanner;
+export default HeaderSliderBanner;

package/{HeaderBanner → HeaderSliderBanner}/types.ts

@@ -3,7 +3,7 @@ import {CarouselProps} from '@momo-kits/carousel';
 import {Animated} from 'react-native';
 import AnimatedValue = Animated.AnimatedValue;
 
-export type HeaderBannerProps = {
+export type HeaderSliderBannerProps = {
   animatedValue: AnimatedValue;
   data: string[];
   onSnapToItem: (index: number) => void;
@@ -12,4 +12,5 @@ export type HeaderBannerProps = {
   carouselProps?: CarouselProps;
   paginationBottom?: 8 | 24 | 56;
   onPressItem?: () => void;
+  paginationType: 'black_white' | 'number';
 };

package/TrustBanner/CustomAvatar.tsx

@@ -0,0 +1,37 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import styles from './styles';
+import {ApplicationContext, Colors, Image, Text} from '@momo-kits/foundation';
+import {CustomAvatarProps} from './types';
+
+const CustomAvatar: FC<CustomAvatarProps> = ({image, text, style}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const renderContent = () => {
+    if (text) {
+      return (
+        <Text color={theme.colors.primary} typography={'description_xs'}>
+          {text}
+        </Text>
+      );
+    }
+
+    return <Image style={styles.avatarImage} source={{uri: image}} />;
+  };
+
+  return (
+    <View
+      style={[
+        styles.customAvatar,
+        {
+          backgroundColor: Colors.black_01,
+          borderColor: theme.colors.border.default,
+        },
+        style,
+      ]}>
+      {renderContent()}
+    </View>
+  );
+};
+
+export default CustomAvatar;

package/TrustBanner/index.tsx

@@ -0,0 +1,82 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {TrustBannerProps} from './types';
+import styles from './styles';
+import {ApplicationContext, Colors, Image, Text} from '@momo-kits/foundation';
+import CustomAvatar from './CustomAvatar';
+
+const defaultIcons = [
+  'https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png',
+  'https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png',
+  'https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png',
+  'https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png',
+];
+const TrustBanner: FC<TrustBannerProps> = ({
+  message = 'Bảo mật thông tin & An toàn tài sản của bạn là ưu tiên hàng đầu của MoMo.',
+  pciImage = 'https://static.momocdn.net/app/img/kits/trustBanner/pci.png',
+  sslImage = 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
+  icons = defaultIcons,
+  style,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const renderIconList = () => {
+    return (
+      <View style={styles.iconList}>
+        {icons.map(icon => {
+          return <CustomAvatar image={icon} />;
+        })}
+        <CustomAvatar
+          style={[
+            styles.customAvatar,
+            {
+              borderColor: theme.colors.border.default,
+              backgroundColor: Colors.pink_09,
+            },
+          ]}
+          text="+36"
+        />
+      </View>
+    );
+  };
+
+  const renderFooter = () => {
+    return (
+      <View style={styles.footer}>
+        <View style={styles.imageList}>
+          <Image
+            resizeMode={'contain'}
+            style={[styles.image, styles.pciImage]}
+            source={{uri: pciImage}}
+          />
+          <Image
+            resizeMode={'contain'}
+            style={styles.image}
+            source={{uri: sslImage}}
+          />
+        </View>
+        {renderIconList()}
+      </View>
+    );
+  };
+
+  return (
+    <View style={[style, styles.container]}>
+      <Image
+        style={styles.momoImage}
+        resizeMode={'contain'}
+        source={{
+          uri: 'https://static.momocdn.net/app/img/kits/trustBanner/ic_momo_secu.png',
+        }}
+      />
+      <View style={styles.flex}>
+        <Text style={styles.message} typography={'description_s'}>
+          {message}
+        </Text>
+        {renderFooter()}
+      </View>
+    </View>
+  );
+};
+
+export default TrustBanner;

package/TrustBanner/styles.ts

@@ -0,0 +1,46 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: Spacing.M,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.blue_10,
+    width: '100%',
+  },
+  flex: {flex: 1},
+  momoImage: {
+    width: scaleSize(64),
+    height: scaleSize(64),
+    marginRight: Spacing.S,
+  },
+  image: {
+    width: scaleSize(52),
+    height: scaleSize(20),
+  },
+  imageList: {
+    flexDirection: 'row',
+  },
+  pciImage: {
+    marginRight: Spacing.XS,
+  },
+  message: {marginBottom: Spacing.S},
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  customAvatar: {
+    width: scaleSize(24),
+    height: scaleSize(24),
+    borderWidth: 1,
+    borderRadius: Radius.L,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: scaleSize(-6),
+  },
+  iconList: {
+    flexDirection: 'row',
+  },
+  avatarImage: {width: '100%', height: '100%'},
+});

package/TrustBanner/types.ts

@@ -0,0 +1,15 @@
+import {ViewStyle} from 'react-native';
+
+export type TrustBannerProps = {
+  message?: string;
+  icons?: string[];
+  pciImage?: string;
+  sslImage?: string;
+  style?: ViewStyle | ViewStyle[];
+};
+
+export type CustomAvatarProps = {
+  image?: string;
+  text?: string;
+  style?: ViewStyle[] | ViewStyle;
+};

package/index.tsx

@@ -1,3 +1,3 @@
-import HeaderBanner from './HeaderBanner';
-
-export {HeaderBanner};
+import HeaderSliderBanner from './HeaderSliderBanner';
+import TrustBanner from './TrustBanner';
+export {HeaderSliderBanner, TrustBanner};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.81.1",
+    "version": "0.81.2-beta.2",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -11,6 +11,8 @@
         "react": "16.9.0",
         "react-native": ">=0.55"
     },
-    "devDependencies": {},
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
     "license": "MoMo"
 }