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

package/Application/Components.tsx

@@ -1,14 +1,13 @@
 import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
   Animated,
+  BackHandler,
   DeviceEventEmitter,
-  Platform,
   StatusBar,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
 import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
@@ -24,8 +23,7 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
-const Touchable =
-  Platform.OS === 'android' ? TouchableGesture : TouchableOpacity;
+const TRIGGER_ID = "'111154000000000000";
 
 const styles = StyleSheet.create({
   navigationButton: {
@@ -106,7 +104,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }
 
   return (
-    <Touchable
+    <TouchableOpacity
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
       style={[
         styles.navigationButton,
@@ -121,7 +119,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         color={tintColor ?? theme.colors.text.default}
         size={20}
       />
-    </Touchable>
+    </TouchableOpacity>
   );
 };
 
@@ -153,9 +151,30 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   backgroundColor,
   accessibilityLabel = '',
 }) => {
-  const {navigator} = useContext(ApplicationContext);
+  const {navigator, appInfo} = useContext(ApplicationContext);
+  const screen_name = navigator?.ref?.current?.getCurrentRoute().name;
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBack,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
+
+    if (appInfo) {
+      navigator?.maxApi?.trackEvent('service_icon_clicked', {
+        ...appInfo,
+        screen_name,
+        trigger_id: TRIGGER_ID,
+        icon_name: 'back',
+      });
+    }
+
     if (canGoBack) {
       if (preventBack) {
         navigator?.showModal({
@@ -181,6 +200,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
     onPressLeftHeader?.();
+    return true;
   };
 
   return (
@@ -397,17 +417,21 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <Touchable accessibilityLabel={'Toolkit/More'} onPress={onMore}>
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/More'}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-          </Touchable>
+          </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <Touchable accessibilityLabel={`Toolkit/Close`} onPress={onClose}>
+          <TouchableOpacity
+            accessibilityLabel={`Toolkit/Close`}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
               size={20}
             />
-          </Touchable>
+          </TouchableOpacity>
         </View>
       </View>
     );
@@ -441,7 +465,7 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
     <TouchableOpacity onPress={onPress}>
       <Animated.View
         style={{
-          aspectRatio: 1.75,
+          height: 210,
           opacity: opacity,
           transform: [{scale}, {translateY}],
         }}>

package/Application/ModalScreen.tsx

@@ -39,8 +39,10 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible}: ModalParams = props.route.params;
+  const TRIGGER_ID = '111012100000000000';
+  const {theme, navigator, appInfo} = useContext(ApplicationContext);
+  const {screen, barrierDismissible, modalName}: ModalParams =
+    props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -50,6 +52,37 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
+  const navigationRoutes = props.navigation.getState()?.routes || [];
+  const routesLength = navigationRoutes.length;
+  let screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+  if (routesLength > 1) {
+    screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
+  }
+  const error_code = (screen as Function)?.()?.props?.information;
+
+  useEffect(() => {
+    navigator?.maxApi?.trackEvent('service_component_displayed', {
+      ...appInfo,
+      screen_name,
+      trigger_id: TRIGGER_ID,
+      component_type: 'popup',
+      component_name: modalName,
+      error_code,
+    });
+
+    return () => {
+      navigator?.maxApi?.trackEvent('service_icon_clicked', {
+        ...appInfo,
+        screen_name,
+        trigger_id: '111154100000000001',
+        component_type: 'popup',
+        component_name: modalName,
+        error_code,
+        icon_name: 'close',
+      });
+    };
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -90,7 +123,7 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {theme, navigator, appInfo} = useContext(ApplicationContext);
   const [keyboardSnap, setKeyboardSnap] = useState(0);
   const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
@@ -160,7 +193,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             navigator?.pop();
           }
         }}
-        bottomInset={bottomInset}
+        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>
@@ -181,6 +214,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
+              appInfo={appInfo}
+              maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
                 assets: {...theme.assets, headerBackground: undefined},

package/Application/NavigationContainer.tsx

@@ -23,6 +23,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  appInfo,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
@@ -73,6 +74,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             showGrid,
             language,
             translate,
+            appInfo,
           }}>
           <ReactNavigationContainer
             theme={{

package/Application/StackScreen.tsx

@@ -1,12 +1,14 @@
-import React, {useContext, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 
+const TRIGGER_ID = '111378000000000000';
+
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator, appInfo} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -16,6 +18,24 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
+  const navigationRoutes = props.navigation.getState()?.routes || [];
+  const routesLength = navigationRoutes.length;
+  let pre_screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+  if (routesLength > 1) {
+    pre_screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
+  }
+
+  useEffect(() => {
+    if (appInfo) {
+      navigator?.maxApi?.trackEvent('service_frame_displayed', {
+        ...appInfo,
+        screen_name: Component.name,
+        pre_screen_name,
+        trigger_id: TRIGGER_ID,
+      });
+    }
+  }, []);
+
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);

package/Application/types.ts

@@ -68,6 +68,7 @@ export type Context = {
   showGrid?: boolean;
   language?: 'vi' | 'en';
   translate?: (key: string) => string;
+  appInfo: MiniAppInfo;
 };
 
 export type LocalizationObject = {
@@ -79,12 +80,20 @@ export type LocalizationObject = {
   };
 };
 
+export type MiniAppInfo = {
+  feature_code: string;
+  app_id: string;
+  build_number: number;
+  flow_partner_id?: string;
+};
+
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi?: any;
+  maxApi: any;
   localization?: LocalizationObject;
+  appInfo: MiniAppInfo;
 };
 
 export type NavigationScreenProps = {
@@ -97,10 +106,12 @@ export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
   options?: NavigationOptions;
+  tracking?: any;
 };
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
+  modalName?: string;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 }
@@ -125,9 +136,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
-  headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
-  animatedValue?: Animated.Value;
 }
 
 export interface HeaderBackProps extends NavigationButtonProps {

package/Consts/colors+spacing+radius.ts

@@ -152,6 +152,10 @@ const Spacing = {
   M: 12,
   L: 16,
   XL: 24,
+  XXL: 32,
+  Size48: 48,
+  Size56: 56,
+  Size64: 64,
 };
 
 const Radius = {

package/Input/InputOTP.tsx

@@ -103,7 +103,7 @@ const InputOTP: FC<InputOTPProps> = ({
   };
 
   const renderInputs = (length: number) => {
-    const TextInputs = [];
+    const TextInputs: React.ReactNode[] = [];
     for (let i = 0; i < length; i++) {
       TextInputs.push(
         <View>

package/Layout/Card.tsx

@@ -8,6 +8,7 @@ import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Colors, Shadow, Spacing} from '../Consts';
+import ItemList from './ItemList';
 
 export interface CardProps extends ViewProps {
   /**
@@ -15,6 +16,9 @@ export interface CardProps extends ViewProps {
    */
   backgroundImage?: string;
 
+  /**
+   * Optional. Use shadow for the card.
+   */
   useShadow?: boolean;
 }
 
@@ -155,7 +159,7 @@ const Card: React.FC<CardProps> = ({
             style={styles.imageBackground}
           />
         )}
-        {renderView(validateChildren(children, [Item]))}
+        {renderView(validateChildren(children, [Item, ItemList]))}
         {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>

package/Layout/Item.tsx

@@ -5,7 +5,7 @@ import {GridContext} from './index';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 
-type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 export interface ItemProps extends ViewProps {
   /**

package/Layout/ItemList.tsx

@@ -0,0 +1,56 @@
+import React, {FC, useContext} from 'react';
+import {FlatList, FlatListProps, View} from 'react-native';
+import Item, {SpanNumber} from './Item';
+import {GridContext} from './index';
+import styles from './styles';
+
+export interface ItemListProps extends FlatListProps<any> {
+  /**
+   * Require key support number columns change grid system
+   */
+
+  key: string;
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemList: FC<ItemListProps> = ({
+  key,
+  renderItem,
+  widthSpan,
+  style,
+  contentContainerStyle,
+  ...props
+}) => {
+  const {gutterSize, numberOfColumns} = useContext(GridContext);
+  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+  const numColumns = Math.floor(numberOfColumns / widthItem);
+  const indexBegin = props?.data?.map((_i, index) => index * numColumns);
+  const _renderItem = (item: any) => {
+    if (indexBegin?.includes(item?.index)) {
+      return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+    }
+    return (
+      <View style={{paddingLeft: gutterSize}}>
+        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
+      </View>
+    );
+  };
+
+  return (
+    <FlatList
+      {...props}
+      key={`${key ?? 'ItemList'}${numColumns}}`}
+      numColumns={numColumns}
+      renderItem={_renderItem}
+      horizontal={false}
+      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+      style={[style, styles.protectedStyle]}
+      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+    />
+  );
+};
+
+export default ItemList;

package/Layout/Screen.tsx

@@ -1,6 +1,5 @@
 import {
   Animated,
-  Image,
   KeyboardAvoidingView,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -28,6 +27,7 @@ import {
 import Navigation from '../Application/Navigation';
 import styles from './styles';
 import {AnimatedHeader, NavigationOptions} from '../Application/types';
+import {Image} from '../Image';
 
 export interface ScreenProps extends ViewProps {
   children: React.ReactNode;
@@ -259,6 +259,7 @@ const Screen = forwardRef(
                 uri: headerBackground,
               }}
               style={styles.extendedHeader}
+              loading={false}
             />
             <View style={{height: heightHeader}} />
           </>

package/Layout/Section.tsx

@@ -7,6 +7,7 @@ import Item from './Item';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Image} from '../Image';
+import ItemList from './ItemList';
 
 export interface SectionProps extends ViewProps {
   /**
@@ -168,7 +169,7 @@ const Section: React.FC<SectionProps> = ({
             style={styles.imageBackground}
           />
         )}
-        {renderView(validateChildren(children, [Item]))}
+        {renderView(validateChildren(children, [Item, ItemList]))}
         {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>

package/Layout/index.ts

@@ -5,6 +5,7 @@ import {validateChildren} from './utils';
 import {createContext} from 'react';
 import {GridContextProps} from './types';
 import Item from './Item';
+import ItemList from './ItemList';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -14,4 +15,12 @@ const GridContext = createContext<GridContextProps>({
   getSizeSpan: () => 0,
 });
 
-export {GridContext, Card, Section, GridSystem, validateChildren, Item};
+export {
+  GridContext,
+  Card,
+  Section,
+  GridSystem,
+  validateChildren,
+  Item,
+  ItemList,
+};

package/Layout/styles.ts

@@ -77,4 +77,20 @@ export default StyleSheet.create({
     right: 0,
     borderRadius: Spacing.M,
   },
+  protectedStyle: {
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    paddingTop: undefined,
+    paddingBottom: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+    padding: undefined,
+    margin: undefined,
+    marginHorizontal: undefined,
+    marginVertical: undefined,
+    paddingHorizontal: undefined,
+    paddingVertical: undefined,
+  },
 });

package/Layout/utils.ts

@@ -8,7 +8,7 @@ import React, {Fragment, ReactElement, useEffect, useState} from 'react';
  */
 const validateChildren = (
   children: React.ReactNode | React.ReactNode[],
-  childrenTypes: Array<React.FC>,
+  childrenTypes: Array<React.ReactNode>,
 ) => {
   const validateType = (child: React.ReactElement) => {
     const valid = childrenTypes.some(
@@ -17,7 +17,7 @@ const validateChildren = (
     if (!valid) {
       console.warn(
         `Wrong children type for this component, expected are ${childrenTypes
-          .map(type => type.displayName)
+          .map(item => item)
           .join(', ')}.`,
       );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.1",
+    "version": "0.81.2-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,7 +10,7 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "2.4.1",
+        "@gorhom/bottom-sheet": "git+https://gitlab.com/dung.huynh1/bottom-sheet.git#main",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.5.6",
         "react-native-gesture-handler": "1.10.3",
@@ -38,6 +38,7 @@
         "metro-react-native-babel-preset": "^0.64.0",
         "react-test-renderer": "17.0.1",
         "typescript": "^4.0.3",
+        "@momo-platform/versions": "4.1.11",
         "react-scanner": "^1.1.0"
     },
     "author": "@momo-kits/foundation",

package/tsconfig.json

@@ -20,6 +20,5 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
-    "verbatimModuleSyntax": false
   }
 }