@momo-kits/foundation 0.81.42 → 0.81.43-api.1

package/Application/BottomTab.tsx

@@ -3,29 +3,45 @@ import {Platform} from 'react-native';
 import {BottomTabProps, NavigationScreenProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {createStackNavigator} from '@react-navigation/stack';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {NavigationContainer} from '@react-navigation/native';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
 import {getStackOptions} from './utils';
 import StackScreen from './StackScreen';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
+  if (route.params?.nested) {
+    return (
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    );
+  }
   return (
-    <Stack.Navigator>
-      <Stack.Screen
-        name="Stack"
-        component={StackScreen}
-        initialParams={{screen: route.params?.screen}}
-        options={{...getStackOptions(), ...route.params?.options}}
-      />
-    </Stack.Navigator>
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 };
 const BottomTab: React.FC<BottomTabProps> = ({
+  nested,
   tabs,
   listeners,
   navigation,
@@ -61,7 +77,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={item.name}
             name={item.name}
             component={TabScreen}
-            initialParams={item}
+            initialParams={{...item, nested}}
             listeners={listeners}
             options={{
               tabBarLabel: ({color, focused}) => {

package/Application/types.ts

@@ -188,6 +188,7 @@ export type BottomTabItemProps = {
 };
 
 export type BottomTabProps = {
+  nested?: boolean;
   tabs: BottomTabItemProps[];
   initialRouteName?: string;
   navigation: Navigation;

package/Layout/Card.tsx

@@ -29,7 +29,7 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  const {showGrid} = useContext(ApplicationContext);
+  const {showGrid, theme} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -47,6 +47,7 @@ const Card: React.FC<CardProps> = ({
       return span * sizePerSpan + (span - 1) * gutterSize;
     },
   };
+
   /**
    * render overlay only dev mode
    */
@@ -107,8 +108,9 @@ const Card: React.FC<CardProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -124,7 +126,7 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
@@ -138,23 +140,21 @@ const Card: React.FC<CardProps> = ({
     return element;
   };
 
-  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
         accessibilityLabel={`Card`}
         style={[
+          {backgroundColor: theme.colors.background.surface},
           style,
           styles.protectedStyle,
           styles.card,
           {
             width: widthSection,
             marginHorizontal: margin,
-            backgroundColor: backgroundImage
-              ? undefined
-              : theme.colors.background.surface,
           },
+          !!backgroundImage && {backgroundColor: undefined},
           useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (

package/Layout/ItemList.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, {forwardRef, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
 import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
@@ -11,39 +11,45 @@ export interface ItemListProps extends FlatListProps<any> {
   widthSpan?: SpanNumber;
 }
 
-const ItemList: FC<ItemListProps> = ({
-  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>;
-    }
+const ItemList = forwardRef(
+  (
+    {
+      renderItem,
+      widthSpan,
+      style,
+      contentContainerStyle,
+      ...props
+    }: ItemListProps,
+    ref,
+  ) => {
+    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 (
-      <View style={{paddingLeft: gutterSize}}>
-        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
-      </View>
+      <FlatList
+        ref={ref as React.RefObject<FlatList>}
+        {...props}
+        numColumns={numColumns}
+        renderItem={_renderItem}
+        horizontal={false}
+        ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+        style={[style, styles.protectedStyle]}
+        contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+      />
     );
-  };
-
-  return (
-    <FlatList
-      {...props}
-      numColumns={numColumns}
-      renderItem={_renderItem}
-      horizontal={false}
-      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
-      style={[style, styles.protectedStyle]}
-      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
-    />
-  );
-};
+  },
+);
 
 export default ItemList;

package/Layout/Section.tsx

@@ -107,8 +107,9 @@ const Section: React.FC<SectionProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -124,7 +125,7 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.42",
+    "version": "0.81.43-api.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {

package/verify.js

@@ -27,8 +27,9 @@ try {
   }
 
   if (
-    miniInfo?.name !== '@momo-platform/momo-core' &&
-    miniInfo?.resolutions?.['@momo-platform/momo-core'] !== packageInfo?.version
+    miniInfo?.dependencies?.['@momo-platform/momo-core'] &&
+    miniInfo?.dependencies?.['@momo-platform/momo-core'] !==
+      packageInfo?.version
   ) {
     console.error(
       `Package ${packageInfo.name} version: ${packageInfo.version} require install resolutions @momo-platform/momo-core ${packageInfo.version}`,