@momo-kits/template 0.81.15 → 0.81.16-cns.1

package/TrustBanner/CustomAvatar.tsx

@@ -1,19 +1,12 @@
-import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+import React, {FC} from 'react';
+import {Image, Text, 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 <Text style={styles.description_xs}>{text}</Text>;
     }
 
     return <Image style={styles.avatarImage} source={{uri: image}} />;
@@ -24,8 +17,8 @@ const CustomAvatar: FC<CustomAvatarProps> = ({image, text, style}) => {
       style={[
         styles.customAvatar,
         {
-          backgroundColor: Colors.black_01,
-          borderColor: theme.colors.border.default,
+          backgroundColor: '#fff',
+          borderColor: '#E8E8E8',
         },
         style,
       ]}>

package/TrustBanner/index.tsx

@@ -1,8 +1,7 @@
-import React, {FC, useContext, useEffect, useState} from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import React, {FC, useEffect, useState} from 'react';
+import {Image, Text, TouchableOpacity, View} from 'react-native';
 import {TrustBannerCallbackParams, TrustBannerProps} from './types';
 import styles from './styles';
-import {ApplicationContext, Colors, Image, Text} from '@momo-kits/foundation';
 import CustomAvatar from './CustomAvatar';
 
 const dataJsonUrl =
@@ -35,8 +34,8 @@ const TrustBanner: FC<TrustBannerProps> = ({
   serviceName = '',
   onPress,
   trackEvent,
+  language = 'vi',
 }) => {
-  const {theme, language} = useContext(ApplicationContext);
   const [data, setData] = useState(defaultData);
   const {
     icons,
@@ -86,8 +85,8 @@ const TrustBanner: FC<TrustBannerProps> = ({
           style={[
             styles.customAvatar,
             {
-              borderColor: theme.colors.border.default,
-              backgroundColor: Colors.pink_09,
+              borderColor: '#E8E8E8',
+              backgroundColor: '#FDEAF4',
             },
           ]}
           text="+36"
@@ -134,7 +133,7 @@ const TrustBanner: FC<TrustBannerProps> = ({
         }}
       />
       <View style={styles.flex}>
-        <Text style={styles.message} typography={'description_s'}>
+        <Text style={[styles.message, styles.description_s]}>
           {content?.[language || 'vi'] || defaultData.content.vi}
         </Text>
         {renderFooter()}

package/TrustBanner/styles.ts

@@ -1,19 +1,30 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+import {Dimensions, StyleSheet} from 'react-native';
+
+const deviceWidth = Dimensions.get('window').width;
+const DEFAULT_SCREEN_SIZE = 375;
+const scaleSize = (size: number) => {
+  const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
+
+  if (scaleRate > 1) {
+    return Math.min(Math.round(size * scaleRate), size + 3);
+  }
+
+  return size;
+};
 
 export default StyleSheet.create({
   container: {
     flexDirection: 'row',
-    padding: Spacing.M,
-    borderRadius: Radius.S,
-    backgroundColor: Colors.blue_10,
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: '#F2F8FF',
     width: '100%',
   },
   flex: {flex: 1},
   momoImage: {
     width: scaleSize(64),
     height: scaleSize(64),
-    marginRight: Spacing.S,
+    marginRight: 8,
   },
   image: {
     width: scaleSize(52),
@@ -23,9 +34,9 @@ export default StyleSheet.create({
     flexDirection: 'row',
   },
   pciImage: {
-    marginRight: Spacing.XS,
+    marginRight: 4,
   },
-  message: {marginBottom: Spacing.S},
+  message: {marginBottom: 8},
   footer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -34,7 +45,7 @@ export default StyleSheet.create({
     width: scaleSize(24),
     height: scaleSize(24),
     borderWidth: 1,
-    borderRadius: Radius.L,
+    borderRadius: 16,
     alignItems: 'center',
     justifyContent: 'center',
     marginLeft: scaleSize(-6),
@@ -43,4 +54,14 @@ export default StyleSheet.create({
     flexDirection: 'row',
   },
   avatarImage: {width: '100%', height: '100%'},
+  description_s: {
+    fontSize: scaleSize(12),
+    lineHeight: scaleSize(16),
+    color: '#484848',
+  },
+  description_xs: {
+    fontSize: scaleSize(10),
+    lineHeight: scaleSize(14),
+    color: '#EB2F96',
+  },
 });

package/TrustBanner/types.ts

@@ -42,6 +42,8 @@ export type TrustBannerProps = {
    * Optional. instance of maxApi trackEvent function.
    */
   trackEvent?: (eventName: string, params: TrustBannerCallbackParams) => void;
+
+  language?: 'vi' | 'en';
 };
 
 export type CustomAvatarProps = {

package/index.tsx

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

package/package.json

@@ -1,18 +1,13 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.81.15",
+    "version": "0.81.16-cns.1",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
     "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "@momo-kits/carousel": "0.81.6-beta.12",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55"
     },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11"
-    },
     "license": "MoMo"
 }

package/HeaderSliderBanner/index.tsx

@@ -1,85 +0,0 @@
-import React, {FC} from 'react';
-import {Animated, TouchableOpacity, View} from 'react-native';
-import Carousel from '@momo-kits/carousel';
-import {Image, Pagination, Spacing} from '@momo-kits/foundation';
-import {HeaderSliderBannerProps} from './types';
-
-const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
-  animatedValue = new Animated.Value(0),
-  paginationBottom = 56,
-  data = [],
-  activeIndex = 0,
-  paginationProps,
-  carouselProps,
-  onSnapToItem,
-  onPressItem,
-  paginationType = 'black_white',
-}) => {
-  const scale = animatedValue.interpolate({
-    inputRange: [-300, 0, 300],
-    outputRange: [4, 1, 1],
-    extrapolate: 'clamp',
-  });
-  const opacity = animatedValue.interpolate({
-    inputRange: [0, 150, 300],
-    outputRange: [1, 0.5, 0],
-    extrapolate: 'clamp',
-  });
-  const translateY = animatedValue.interpolate({
-    inputRange: [-300, 0],
-    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 (
-      <TouchableOpacity disabled={!onPressItem} onPress={onPressItem}>
-        <Image
-          key={`Header banner ${item}_${index}`}
-          source={{
-            uri: item,
-          }}
-        />
-      </TouchableOpacity>
-    );
-  };
-
-  return (
-    <Animated.View
-      style={{
-        height: 210,
-        opacity: opacity,
-        transform: [{scale}, {translateY}],
-      }}>
-      <Carousel
-        {...carouselProps}
-        full={true}
-        data={data}
-        onSnapToItem={onSnapToItem}
-        renderItem={renderItem}
-      />
-      <Animated.View
-        style={{
-          position: 'absolute',
-          bottom: paginationBottom - Spacing.S,
-          alignSelf: 'center',
-          opacity: paginationOpacity,
-        }}>
-        <Pagination
-          {...paginationProps}
-          activeIndex={activeIndex}
-          dataLength={data.length}
-          type={paginationType}
-        />
-      </Animated.View>
-    </Animated.View>
-  );
-};
-
-export default HeaderSliderBanner;

package/HeaderSliderBanner/types.ts

@@ -1,16 +0,0 @@
-import {PaginationProps} from '@momo-kits/foundation';
-import {CarouselProps} from '@momo-kits/carousel';
-import {Animated} from 'react-native';
-import AnimatedValue = Animated.AnimatedValue;
-
-export type HeaderSliderBannerProps = {
-  animatedValue: AnimatedValue;
-  data: string[];
-  onSnapToItem: (index: number) => void;
-  activeIndex: number;
-  paginationProps?: PaginationProps;
-  carouselProps?: CarouselProps;
-  paginationBottom?: 8 | 24 | 56;
-  onPressItem?: () => void;
-  paginationType: 'black_white' | 'number';
-};