@momo-kits/foundation 0.81.5-beta.1 → 0.81.6

package/Application/Components.tsx

@@ -2,13 +2,11 @@ import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
   Animated,
   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,9 +22,6 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
-const Touchable =
-  Platform.OS === 'android' ? TouchableGesture : TouchableOpacity;
-
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -106,7 +101,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }
 
   return (
-    <Touchable
+    <TouchableOpacity
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
       style={[
         styles.navigationButton,
@@ -121,7 +116,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         color={tintColor ?? theme.colors.text.default}
         size={20}
       />
-    </Touchable>
+    </TouchableOpacity>
   );
 };
 
@@ -397,17 +392,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>
     );

package/Application/ModalScreen.tsx

@@ -160,7 +160,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             navigator?.pop();
           }
         }}
-        bottomInset={bottomInset}
+        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>

package/Application/NavigationContainer.tsx

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

package/Application/StackScreen.tsx

@@ -1,18 +1,12 @@
-import React, {useContext, useEffect, useLayoutEffect} from 'react';
+import React, {useContext, 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,
-    tracking,
-  }: ScreenParams = props.route.params;
-  const {theme, showGrid, navigator, appInfo} = useContext(ApplicationContext);
+  const {screen: Component, options}: ScreenParams = props.route.params;
+  const {theme, showGrid} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -22,25 +16,6 @@ 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,
-        flow_partner_id: tracking?.flow_partner_id,
-        pre_screen_name,
-        trigger_id: TRIGGER_ID,
-      });
-    }
-  }, []);
-
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);

package/Application/types.ts

@@ -68,7 +68,6 @@ export type Context = {
   showGrid?: boolean;
   language?: 'vi' | 'en';
   translate?: (key: string) => string;
-  appInfo: MiniAppInfo;
 };
 
 export type LocalizationObject = {
@@ -80,19 +79,12 @@ export type LocalizationObject = {
   };
 };
 
-export type MiniAppInfo = {
-  feature_code: string;
-  app_id: string;
-  miniapp_version: number;
-};
-
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi: any;
+  maxApi?: any;
   localization?: LocalizationObject;
-  miniAppInfo: MiniAppInfo;
 };
 
 export type NavigationScreenProps = {
@@ -105,7 +97,6 @@ export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
   options?: NavigationOptions;
-  tracking?: any;
 };
 
 export interface ModalParams extends ScreenParams {

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

@@ -1,39 +1,40 @@
-import React, {FC, ReactElement, useContext} from 'react';
+import React, {FC, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
-import Item from './Item';
+import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
 import styles from './styles';
 
-const ItemList: FC<FlatListProps<any>> = ({
+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,
-  numColumns = 1,
+  widthSpan,
   style,
   contentContainerStyle,
   ...props
 }) => {
-  const {gutterSize} = useContext(GridContext);
-
-  const _renderItem = (info: any) => {
-    const {item, index, separators} = info;
-
-    const children = renderItem?.({
-      item,
-      index,
-      separators,
-    }) as ReactElement;
-
-    if (children?.type !== Item) {
-      console.warn('Wrong children type for this component, expected are Item');
+  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={
-          numColumns > 1 && {
-            marginRight: gutterSize,
-          }
-        }>
-        {children}
+      <View style={{paddingLeft: gutterSize}}>
+        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
       </View>
     );
   };
@@ -41,6 +42,7 @@ const ItemList: FC<FlatListProps<any>> = ({
   return (
     <FlatList
       {...props}
+      key={`${key ?? 'ItemList'}${numColumns}}`}
       numColumns={numColumns}
       renderItem={_renderItem}
       horizontal={false}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.5-beta.1",
+    "version": "0.81.6",
     "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",
@@ -42,4 +42,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}

package/tsconfig.json

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