@momo-kits/foundation 0.81.43-beta.1 → 0.81.43-beta.12

package/Application/BottomTab.tsx

@@ -3,45 +3,29 @@ 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 (
-    <NavigationContainer independent={true}>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Stack"
-          component={StackScreen}
-          initialParams={{screen: route.params?.screen}}
-          options={{...getStackOptions(), ...route.params?.options}}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Stack"
+        component={StackScreen}
+        initialParams={{screen: route.params?.screen}}
+        options={{...getStackOptions(), ...route.params?.options}}
+      />
+    </Stack.Navigator>
   );
 };
 const BottomTab: React.FC<BottomTabProps> = ({
-  nested,
   tabs,
   listeners,
   navigation,
@@ -77,7 +61,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={item.name}
             name={item.name}
             component={TabScreen}
-            initialParams={{...item, nested}}
+            initialParams={item}
             listeners={listeners}
             options={{
               tabBarLabel: ({color, focused}) => {

package/Application/Components.tsx

@@ -95,7 +95,7 @@ const styles = StyleSheet.create({
   badge: {
     position: 'absolute',
     top: -8,
-    right: -8,
+    right: -6,
   },
 });
 
@@ -127,17 +127,19 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
-      style={[styles.navigationButton, buttonStyle]}
-      onPress={onPress}>
-      <Icon
-        source={icon}
-        color={tintColor ?? theme.colors.text.default}
-        size={20}
-      />
+    <View style={{width: scaleSize(28)}}>
+      <TouchableOpacity
+        accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
+        style={[styles.navigationButton, buttonStyle]}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          color={tintColor ?? theme.colors.text.default}
+          size={20}
+        />
+      </TouchableOpacity>
       {renderBadge()}
-    </TouchableOpacity>
+    </View>
   );
 };
 
@@ -347,10 +349,14 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
-const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+const HeaderToolkitAction: React.FC<any> = ({
+  tintColor,
+  pinnedTool = {key: '', badgeValue: undefined, badgeTye: undefined},
+  preventBack,
+}) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
-  const {appCode, hidden, type, onAction} = toolConfig ?? {};
+  const [toolConfig, setToolConfig] = useState<any>();
+  const {appCode, onAction} = toolConfig ?? {};
 
   let backgroundColor;
   if (tintColor != Colors.black_01) {
@@ -361,20 +367,21 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
     if (navigator?.toolkitConfig) {
       setToolConfig(navigator?.toolkitConfig);
     } else {
-      navigator?.requestApi('getToolkit', [undefined], (result: boolean) => {
-        if (result) {
-          navigator?.requestApi(
-            'getToolkitConfig',
-            [undefined],
-            (config: any) => {
-              navigator.toolkitConfig = {
-                ...config?.utilityToolConfig,
-                appCode: config?.appCode,
-              };
-              setToolConfig(navigator?.toolkitConfig);
-            },
-          );
-        }
+      navigator?.requestApi('getToolkitConfig', [undefined], (config: any) => {
+        navigator.toolkitConfig = {
+          configs: [
+            ...config?.miniappTools?.customTools,
+            ...config?.defaultTools,
+          ],
+          appCode: config?.appCode,
+        };
+        setToolConfig({
+          configs: [
+            ...config?.miniappTools?.customTools,
+            ...config?.defaultTools,
+          ],
+          appCode: config?.appCode,
+        });
       });
     }
   }, []);
@@ -417,39 +424,66 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
     };
   }, [appCode]);
 
-  const onUtilityTool = () => {
-    onAction?.('onUtilityTool');
-    navigator?.requestApi(type, undefined, undefined);
-  };
-
   const onMore = () => {
     onAction?.('onMore');
-    navigator?.requestApi('showToolkit', [toolConfig], undefined);
+    navigator?.requestApi(
+      'showTools',
+      [toolConfig],
+      (res: {item: {action?: string; key: string}}) => {
+        const {item} = res;
+        navigator?.toolkitCallback?.(item);
+      },
+    );
   };
 
   const onClose = () => {
-    onAction?.('onClose');
-    navigator?.requestApi('dismiss', undefined, undefined);
+    if (preventBack) {
+      navigator?.showModal({
+        screen: () => (
+          <PopupNotify
+            {...preventBack}
+            primary={{
+              title: preventBack.primary.title,
+              onPress: () => {
+                preventBack?.primary.onPress();
+                navigator?.requestApi('dismiss', undefined, undefined);
+              },
+            }}
+          />
+        ),
+      });
+    } else {
+      navigator?.requestApi('dismiss', undefined, undefined);
+    }
   };
 
-  const renderUtilityTool = () => {
-    if (hidden === false) {
+  const renderPinnedTool = () => {
+    const pinTool = toolConfig?.configs?.find(
+      (i: any) => i.key === pinnedTool.key,
+    );
+
+    const {badgeValue, badgeType} = pinnedTool;
+    const {icon} = pinTool || '';
+
+    if (pinTool && pinnedTool)
       return (
         <NavigationButton
           accessibilityLabel={'UtilityTool'}
-          icon={type as string}
+          icon={icon as string}
           tintColor={tintColor}
-          onPress={onUtilityTool}
+          badgeValue={badgeValue}
+          badgeType={badgeType}
+          onPress={() => {
+            navigator?.toolkitCallback?.(pinnedTool.key);
+          }}
         />
       );
-    }
-    return null;
   };
 
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
-        {renderUtilityTool()}
+        {renderPinnedTool()}
         <View
           style={[
             styles.toolkitContainer,

package/Application/Navigator.ts

@@ -13,6 +13,7 @@ class Navigator {
   maxApi?: any;
   trackingInfo?: TrackingInfo;
   dismissData?: any;
+  toolkitCallback?: (item: any) => void;
 
   constructor(navigation: any) {
     this.ref = navigation;
@@ -121,6 +122,12 @@ class Navigator {
       this.maxApi[func]?.(...args, callback);
     }
   };
+
+  setToolkitCallback = (
+    callback: (item: {key: string; action: string}) => void,
+  ) => {
+    this.toolkitCallback = callback;
+  };
 }
 
 export default Navigator;

package/Application/types.ts

@@ -128,8 +128,14 @@ export type NavigationButtonProps = {
   useBorder?: boolean;
   onPress: () => void;
   accessibilityLabel?: string;
-  badgeType?: 'dot' | 'number' | 'string';
-  badgeValue?: number | string;
+  badgeType?: 'dot' | 'number';
+  badgeValue?: number;
+};
+
+export type PinnedToolType = {
+  key: string;
+  badgeValue?: number;
+  badgeType?: 'number' | 'dot';
 };
 
 export interface NavigationOptions extends StackNavigationOptions {
@@ -138,6 +144,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
+  pinnedTool?: PinnedToolType;
 }
 
 export interface HeaderBackProps extends NavigationButtonProps {
@@ -166,9 +173,7 @@ export type TitleCustomProps = {
 export type HeaderToolkitProps = {
   [key: string]: any;
   appCode: string;
-  hidden: boolean;
-  type: string;
-  onAction?: (action: string) => void;
+  configs: any[];
 };
 
 export type HeaderAnimatedProps = {
@@ -188,7 +193,6 @@ export type BottomTabItemProps = {
 };
 
 export type BottomTabProps = {
-  nested?: boolean;
   tabs: BottomTabItemProps[];
   initialRouteName?: string;
   navigation: Navigation;

package/Application/utils.tsx

@@ -126,6 +126,21 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
+  if (params.pinnedTool) {
+    options = {
+      ...options,
+      headerRight: (props: any) => {
+        return (
+          <HeaderToolkitAction
+            preventBack={params.preventBack}
+            pinnedTool={params.pinnedTool}
+            {...props}
+          />
+        );
+      },
+    };
+  }
+
   return {
     ...params,
     ...options,

package/Badge/styles.ts

@@ -4,13 +4,16 @@ import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
   badge: {
+    paddingHorizontal: Spacing.XS,
     borderRadius: Radius.M,
     justifyContent: 'center',
+    alignItems: 'center',
     height: scaleSize(16),
+    minWidth: scaleSize(16),
     flexDirection: 'row',
+    borderWidth: 1,
     borderColor: Colors.black_01,
-    paddingHorizontal: Spacing.XS,
-    alignItems: 'center',
+    alignSelf: 'baseline',
   },
   dot: {
     width: 16,

package/Layout/Card.tsx

@@ -29,7 +29,7 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  const {showGrid, theme} = useContext(ApplicationContext);
+  const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -47,7 +47,6 @@ const Card: React.FC<CardProps> = ({
       return span * sizePerSpan + (span - 1) * gutterSize;
     },
   };
-
   /**
    * render overlay only dev mode
    */
@@ -108,9 +107,8 @@ const Card: React.FC<CardProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      const arrayChild = children.filter(item => !!item);
-      for (let i = 0; i < arrayChild.length; ++i) {
-        const item = arrayChild[i];
+      for (let i = 0; i < children.length; ++i) {
+        const item = children[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -126,7 +124,7 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == arrayChild.length - 1) {
+        if (i == children.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
@@ -140,21 +138,23 @@ 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, {forwardRef, useContext} from 'react';
+import React, {FC, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
 import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
@@ -11,45 +11,39 @@ export interface ItemListProps extends FlatListProps<any> {
   widthSpan?: SpanNumber;
 }
 
-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>
-      );
-    };
-
+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>;
+    }
     return (
-      <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]}
-      />
+      <View style={{paddingLeft: gutterSize}}>
+        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
+      </View>
     );
-  },
-);
+  };
+
+  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,9 +107,8 @@ const Section: React.FC<SectionProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      const arrayChild = children.filter(item => !!item);
-      for (let i = 0; i < arrayChild.length; ++i) {
-        const item = arrayChild[i];
+      for (let i = 0; i < children.length; ++i) {
+        const item = children[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -125,7 +124,7 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i == arrayChild.length - 1) {
+        if (i == children.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }

package/package.json

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