@momo-kits/foundation 0.92.21-beta.3 → 0.92.21-beta.4

package/Application/BottomTab/BottomTabBar.tsx

@@ -125,7 +125,7 @@ export default function BottomTabBar({
         );
       });
     },
-    [JSON.stringify(routes), state, descriptors, focusedTab],
+    [JSON.stringify(routes), state, descriptors, focusedTab]
   );
 
   /**
@@ -153,7 +153,7 @@ export default function BottomTabBar({
           </View>
           <View
             style={{
-              top: -6,
+              top: -4,
               backgroundColor: activeTintColor ?? theme.colors.primary,
               borderRadius: Radius.XL,
               paddingHorizontal: 6,

package/Application/BottomTab/index.tsx

@@ -101,7 +101,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             name={item.name}
             component={TabScreen}
             initialParams={{...item, nested}}
-            listeners={listeners}
+            listeners={item.listeners ?? listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (

package/Application/StackScreen.tsx

@@ -1,11 +1,92 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {InteractionManager, Linking, View} from 'react-native';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
-import {useHeaderHeight} from '@react-navigation/stack';
-import {Alert, InteractionManager} from 'react-native';
+import {Text} from '../Text';
+import {Colors, Radius, Spacing} from '../Consts';
+
+/**
+ * Empty screen for unvalidated screen name
+ * @constructor
+ */
+const EmptyScreen: React.FC = () => {
+  return (
+    <View
+      style={{
+        backgroundColor: Colors.black_01,
+        padding: Spacing.M,
+        borderRadius: Radius.M,
+      }}>
+      <Text typography={'header_m_bold'}>Unvalidated screen name</Text>
+      <Text
+        typography={'description_default_regular'}
+        style={{paddingVertical: Spacing.S}}>
+        Your screen has not been rendered because Platform has not detected the
+        screen name. Please migrate to support this feature.
+      </Text>
+      <Text typography={'header_default'} style={{width: '100%'}}>
+        Possible fixes:
+      </Text>
+      <View style={{marginLeft: Spacing.S}}>
+        <Text typography={'body_default_regular'}>1. Off webpack config</Text>
+        <Text typography={'body_default_regular'}>
+          2. Screen name refactoring
+        </Text>
+        <View style={{marginLeft: Spacing.S}}>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen push/import dạng arrow function ={'>'} đổi thành
+            named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen import dạng High Order Component ={'>'} rename
+            generic function thành named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với Tab Navigator, Platform sẽ lấy Tab Container làm screen name.
+            Trong trường hợp miniapp muốn track riêng action cho từng tab, tham
+            khảo theo docs
+          </Text>
+        </View>
+      </View>
+      <Text typography={'header_s_semibold'}>More information: </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://gitlab.mservice.com.vn/momo-platform/mini-app/-/tree/vn.momo.uikits/dev/app'
+          );
+        }}>
+        Mini App: vn.momo.uikits/dev
+      </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing'
+          );
+        }}>
+        https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing
+      </Text>
+    </View>
+  );
+};
 
+/**
+ * container for stack screen
+ * @param props
+ * @constructor
+ */
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
@@ -50,8 +131,10 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
-      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    if (['Invalid', 'screen'].includes(screenName) && context.enableAutoId) {
+      setTimeout(() => {
+        navigator?.showModal({screen: EmptyScreen});
+      }, 300);
     }
 
     navigator?.maxApi?.of?.({screenName});

package/Application/types.ts

@@ -1,4 +1,5 @@
 import {StackNavigationOptions} from '@react-navigation/stack';
+import {EventArg} from '@react-navigation/core';
 import React from 'react';
 import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
@@ -198,6 +199,11 @@ export type BottomTabItemProps = {
   screen: Screen;
   options: NavigationOptions;
   initialParams?: any;
+  listeners?: {
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
+  };
 };
 
 export type BottomTabProps = {
@@ -206,8 +212,9 @@ export type BottomTabProps = {
   initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
-    tabPress?: any;
-    focus?: any;
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
 };

package/Icon/types.ts

@@ -16,7 +16,6 @@ export type IconProps = {
 
   /**
    *  Optional. Represents the color of the icon.
-   * It can be any valid color in @momo-kits/foundation.
    */
   color?: string | null;
 

package/Input/InputDropDown.tsx

@@ -4,7 +4,7 @@ import {ApplicationContext, ComponentContext} from '../Application';
 import {Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {ErrorView, FloatingView, getSizeStyle} from './common';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import styles from './styles';
 
@@ -61,7 +61,7 @@ const InputDropDown = ({
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
           getSizeStyle(size),
-          // getBorderColor(theme, false, errorMessage, disabled),
+          getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}

package/Layout/FloatingButton.tsx

@@ -84,7 +84,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     });
 
     return () => {
-      if (listener !== null) {
+      if (listener) {
         animatedValue?.removeListener(listener);
       }
     };

package/Layout/GridSystem.tsx

@@ -53,7 +53,7 @@ const GridSystem: React.FC<any> = ({
         {list.map((_, index) => {
           return (
             <View style={{flexDirection: 'row'}} key={index.toString()}>
-              {index !== -0 && <View style={{width: grid.gutterSize}} />}
+              {index !== 0 && <View style={{width: grid.gutterSize}} />}
               <View
                 key={`Grid${index.toString()}`}
                 pointerEvents="none"

package/Title/index.tsx

@@ -1,16 +1,13 @@
 import React, {FC, useContext, useState} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
-import {
-  Typography,
-  Colors,
-  Icon,
-  Badge,
-  ApplicationContext,
-  scaleSize,
-  Text,
-} from '@momo-kits/foundation';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {Badge} from '../Badge';
+import {Colors} from '../Consts';
 import styles from './styles';
 import {TitleProps} from './types';
+import {Typography} from '../Text/types';
 
 const Title: FC<TitleProps> = ({
   title = 'Title',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.21-beta.3",
+    "version": "0.92.21-beta.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -18,7 +18,7 @@
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
-        "lottie-react-native": "3.3.2",
+        "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
         "@react-navigation/stack": "https://oauth2:eX-jVhzQdLc343AjD3Sc@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {