@momo-kits/template 0.169.4 → 0.169.5

package/HeaderSliderBanner/index.tsx

@@ -1,10 +1,14 @@
-import React, {FC} from 'react';
-import {Animated, TouchableOpacity} from 'react-native';
-import {Carousel} from '@momo-kits/carousel';
-import {Image, Pagination, Spacing} from '@momo-kits/foundation';
-import {HeaderSliderBannerProps} from './types';
+import React, { FC } from 'react';
+import { Animated, TouchableOpacity } from 'react-native';
+import { Carousel } from '@momo-kits/carousel';
+import { Image, Pagination, Spacing } from '@momo-kits/foundation';
+import { HeaderSliderBannerProps } from './types';
 import styles from './styles';
 
+/**
+ * Full-width image carousel for a screen header. Driven by the scroll offset
+ * `animatedValue`: zooms on pull-down, fades and lifts on scroll-up.
+ */
 const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
   animatedValue = new Animated.Value(0),
   paginationBottom = 56,
@@ -37,8 +41,8 @@ const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
     outputRange: [0, 1],
   });
 
-  const renderItem = (info: {item: any; index: number}) => {
-    const {item, index} = info;
+  const renderItem = (info: { item: any; index: number }) => {
+    const { item, index } = info;
     return (
       <TouchableOpacity disabled={!onPressItem} onPress={onPressItem}>
         <Image
@@ -58,9 +62,10 @@ const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
         styles.container,
         {
           opacity: opacity,
-          transform: [{scale}, {translateY}],
+          transform: [{ scale }, { translateY }],
         },
-      ]}>
+      ]}
+    >
       <Carousel
         {...carouselProps}
         full={true}
@@ -75,7 +80,8 @@ const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
             bottom: paginationBottom - Spacing.S,
             opacity: paginationOpacity,
           },
-        ]}>
+        ]}
+      >
         <Pagination
           {...paginationProps}
           activeIndex={activeIndex}

package/TrustBanner/CustomAvatar.tsx

@@ -1,24 +1,26 @@
-import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+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';
+import { ApplicationContext, Colors, Image, Text } from '@momo-kits/foundation';
+import { CustomAvatarProps } from './types';
 
-const CustomAvatar: FC<CustomAvatarProps> = ({image, text, style}) => {
-  const {theme} = useContext(ApplicationContext);
+/** Bordered circle showing `text` when set, else `image`. */
+const CustomAvatar: FC<CustomAvatarProps> = ({ image, text, style }) => {
+  const { theme } = useContext(ApplicationContext);
 
   const renderContent = () => {
     if (text) {
       return (
         <Text
           color={theme.colors.primary}
-          typography={'description_xs_regular'}>
+          typography={'description_xs_regular'}
+        >
           {text}
         </Text>
       );
     }
 
-    return <Image style={styles.avatarImage} source={{uri: image}} />;
+    return <Image style={styles.avatarImage} source={{ uri: image }} />;
   };
 
   return (
@@ -30,7 +32,8 @@ const CustomAvatar: FC<CustomAvatarProps> = ({image, text, style}) => {
           borderColor: theme.colors.border.default,
         },
         style,
-      ]}>
+      ]}
+    >
       {renderContent()}
     </View>
   );

package/TrustBanner/index.tsx

@@ -37,6 +37,11 @@ const defaultData = {
   },
 };
 
+/**
+ * MoMo security banner with content from the remote design-system config, else
+ * defaults. A press is tracked, then opens `urlConfig` as a web page or a
+ * feature code.
+ */
 const TrustBanner: FC<TrustBannerProps> = ({
   style,
   screenName = '',

package/TrustBanner/types.ts

@@ -1,4 +1,4 @@
-import {ViewStyle} from 'react-native';
+import { ViewStyle } from 'react-native';
 
 export type TrustBannerCallbackParams = {
   service_name: string;
@@ -15,30 +15,25 @@ export type TrustBannerProps = {
   style?: ViewStyle | ViewStyle[];
 
   /**
-   * Optional. The name of the screen where the banner is displayed. This can be
-   * used to identify the context in which the banner appears.
+   * Optional. The name of the screen where the banner is displayed, sent as
+   * `screen_name` in the display and click tracking events.
    */
   screenName?: string;
 
   /**
-   * Optional. The name of the service or feature the banner is associated with.
-   * This helps in providing contextual information within the banner content.
+   * Optional. The name of the service or feature the banner is associated with,
+   * sent as `service_name` in the display and click tracking events.
    */
   serviceName?: string;
 
   /**
-   * Optional. A callback function can be openWeb or startFeatureCode,
-   * return params:
-   *   service_name,
-   *   screen_name,
-   *   component_name,
-   *   url_config,
-   *   feature_code,
+   * Optional. Not called: the banner opens `urlConfig` itself through
+   * `navigator.maxApi` (openWeb or startFeatureCode).
    */
   onPress?: (params: TrustBannerCallbackParams) => void;
 
   /**
-   * Optional. instance of maxApi trackEvent function.
+   * Optional. Not called: the banner tracks via `navigator.maxApi.trackEvent`.
    */
   trackEvent?: (eventName: string, params: TrustBannerCallbackParams) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/template",
-    "version": "0.169.4",
+    "version": "0.169.5",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {