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

package/Application/BottomTab/index.tsx

@@ -17,10 +17,9 @@ const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
-  const {theme} = useContext(ApplicationContext);
   let options = {};
   if (route.params?.options) {
-    options = getOptions(route.params?.options, theme);
+    options = getOptions(route.params?.options);
   }
 
   if (route.params?.nested) {

package/Application/Components.tsx

@@ -1,8 +1,8 @@
 import React, {
-  Fragment,
   useCallback,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -29,7 +29,14 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
+import {HeaderType} from '../Layout/types';
+import Navigation from './Navigation';
+import {InputSearchProps} from '../Input';
+import AnimatedInputSearch from '../Layout/AnimatedInputSearch';
 
+/**
+ * default navigation button used header nav
+ */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
@@ -81,13 +88,18 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   );
 };
 
+/**
+ * default header title used for nav
+ */
 const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
-  const opacity = props.animatedValue?.interpolate({
-    inputRange: [0, 200],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
+  const opacity = props.animatedValue?.interpolate(
+    props.interpolate ?? {
+      inputRange: [0, 200],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    }
+  );
 
   return (
     <Animated.Text
@@ -101,6 +113,9 @@ const HeaderTitle: React.FC<any> = props => {
   );
 };
 
+/**
+ * default header left used for nav
+ */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
@@ -113,7 +128,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe,
+      goBackSafe
     );
 
     return () => backHandler.remove();
@@ -168,6 +183,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
@@ -181,6 +197,9 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   );
 };
 
+/**
+ * header background for default
+ */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   animatedValue,
@@ -229,6 +248,10 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   );
 };
 
+/**
+ * Header custom with image, title, subtitle
+ * @constructor
+ */
 const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
@@ -263,37 +286,42 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
 };
 
-const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
-  const validateType = (child: React.ReactElement) => {
-    const valid = child?.type === NavigationButton || child?.type === Fragment;
-    if (__DEV__ && !valid) {
-      console.warn(
-        'HeaderRightAction contains element type of NavigationButton, Please check again.',
-      );
-    }
-    return child;
-  };
-
-  const renderAction = () => {
-    if (Array.isArray(children)) {
-      return children.map((child, index) => {
-        return (
-          <View key={`HeaderRightAction ${index}`} style={styles.headerButton}>
-            {React.cloneElement(validateType(child), {...restProps})}
-          </View>
-        );
-      });
+/**
+ * main component for header right
+ */
+const HeaderRight: React.FC<any> = ({type, children, onLayout, ...props}) => {
+  if (type === 'icon') {
+    let buttons = props?.buttons || [];
+    if (buttons?.length > 3) {
+      buttons = buttons.slice(0, 3);
     }
-
     return (
-      <View style={styles.headerButton}>
-        {React.cloneElement(validateType(children), {...restProps})}
+      <View style={styles.headerRightButton} onLayout={onLayout}>
+        {buttons?.map?.((item: NavigationButtonProps, index: number) => {
+          return (
+            <View
+              key={`HeaderRightAction ${index}`}
+              style={{
+                marginLeft: index !== 0 ? Spacing.S : 0,
+              }}>
+              <NavigationButton {...item} tintColor={props?.tintColor} />
+            </View>
+          );
+        })}
       </View>
     );
-  };
-  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+  }
+
+  return (
+    <View style={styles.headerRightButton} onLayout={onLayout}>
+      {children ?? <HeaderToolkitAction {...props} />}
+    </View>
+  );
 };
 
+/**
+ * Header toolkit action
+ */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
@@ -327,7 +355,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      },
+      }
     );
   };
 
@@ -340,7 +368,7 @@ const HeaderToolkitAction: React.FC<any> = ({
         const {item} = res;
         navigator?.toolkitCallback?.(item);
         getToolkitConfig();
-      },
+      }
     );
   };
 
@@ -357,7 +385,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined,
+                  undefined
                 );
               },
             }}
@@ -388,7 +416,7 @@ const HeaderToolkitAction: React.FC<any> = ({
               [pinTool?.key],
               () => {
                 getToolkitConfig();
-              },
+              }
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}
@@ -397,7 +425,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   };
   if (toolConfig) {
     return (
-      <View style={styles.headerRightButton}>
+      <View style={Styles.row}>
         {renderPinnedTool()}
         <View
           style={[
@@ -405,6 +433,7 @@ const HeaderToolkitAction: React.FC<any> = ({
             {
               backgroundColor: backgroundColor ?? '#00000066',
               borderWidth: backgroundColor ? 0.5 : 0,
+              marginLeft: renderPinnedTool() ? Spacing.S : 0,
             },
           ]}>
           <TouchableOpacity
@@ -430,6 +459,9 @@ const HeaderToolkitAction: React.FC<any> = ({
   return <View />;
 };
 
+/**
+ * default header banner for header animated
+ */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
@@ -470,6 +502,150 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   );
 };
 
+/**
+ * Header extended with background image
+ * @constructor
+ */
+const HeaderExtendBackground: React.FC<{
+  headerType?: HeaderType;
+  animatedValue: Animated.Value;
+  heightHeader: number;
+  inputSearchProps?: InputSearchProps;
+  navigation?: Navigation;
+}> = ({
+  headerType = 'default',
+  animatedValue,
+  heightHeader,
+  inputSearchProps,
+  navigation,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const heightAnimated = useRef(new Animated.Value(0));
+
+  useEffect(() => {
+    const listener = animatedValue.addListener(({value}) => {
+      heightAnimated.current.setValue(value);
+    });
+    return () => {
+      animatedValue?.removeListener(listener);
+    };
+  }, []);
+
+  if (inputSearchProps) {
+    if (headerType === 'surface') {
+      return (
+        <View
+          style={{
+            backgroundColor: theme.colors.background.surface,
+            borderBottomWidth: 1,
+            borderColor: theme.colors.border.default,
+          }}>
+          <Animated.View
+            style={{
+              justifyContent: 'flex-end',
+              height: heightAnimated.current.interpolate({
+                inputRange: [0, 100],
+                outputRange: [heightHeader + 52, heightHeader],
+                extrapolate: 'clamp',
+              }),
+            }}>
+            <AnimatedInputSearch
+              hasColorBG
+              animatedValue={animatedValue}
+              navigation={navigation}
+              {...inputSearchProps}
+            />
+          </Animated.View>
+        </View>
+      );
+    }
+
+    if (headerType === 'extended') {
+      return (
+        <>
+          <Image
+            source={{
+              uri: theme.assets?.headerBackground,
+            }}
+            style={styles.extendedHeader}
+          />
+          <Animated.View
+            style={{
+              justifyContent: 'flex-end',
+              height: heightAnimated.current.interpolate({
+                inputRange: [0, 100],
+                outputRange: [heightHeader + 52, heightHeader],
+                extrapolate: 'clamp',
+              }),
+            }}>
+            <AnimatedInputSearch
+              animatedValue={animatedValue}
+              navigation={navigation}
+              {...inputSearchProps}
+            />
+          </Animated.View>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <View
+          style={{
+            height: heightHeader + 52,
+            width: '100%',
+            position: 'absolute',
+            overflow: 'hidden',
+          }}>
+          <Image
+            source={{
+              uri: theme.assets?.headerBackground,
+            }}
+            style={{
+              width: '100%',
+              height: undefined,
+              position: 'absolute',
+              aspectRatio: 1.75,
+            }}
+          />
+        </View>
+
+        <Animated.View
+          style={{
+            justifyContent: 'flex-end',
+            height: heightAnimated.current.interpolate({
+              inputRange: [0, 100],
+              outputRange: [heightHeader + 52, heightHeader],
+              extrapolate: 'clamp',
+            }),
+          }}>
+          <AnimatedInputSearch
+            animatedValue={animatedValue}
+            navigation={navigation}
+            {...inputSearchProps}
+          />
+        </Animated.View>
+      </>
+    );
+  }
+
+  if (headerType === 'extended') {
+    return (
+      <View style={{minHeight: heightHeader}}>
+        <Image
+          source={{
+            uri: theme.assets?.headerBackground,
+          }}
+          style={styles.extendedHeader}
+        />
+      </View>
+    );
+  }
+
+  return <View />;
+};
+
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -509,7 +685,6 @@ const styles = StyleSheet.create({
     paddingRight: Spacing.M,
   },
   toolkitContainer: {
-    marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
     borderRadius: 14,
@@ -541,6 +716,12 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
 });
 
 export {
@@ -548,8 +729,9 @@ export {
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,
-  HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
+  HeaderRight,
+  HeaderExtendBackground,
 };

package/Application/ModalScreen.tsx

@@ -21,10 +21,10 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {navigator} = useContext(ApplicationContext);
   const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const params = {
     ...props.route.params,
     navigation,

package/Application/Navigation.ts

@@ -1,17 +1,13 @@
-import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions, Theme} from './types';
-import {HeaderRightAction} from './index';
+import {NavigationOptions} from './types';
 import {getOptions} from './utils';
-import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
-  readonly theme: Theme;
+  rightHeaderWidth?: number;
 
-  constructor(instance: any, theme: Theme) {
+  constructor(instance: any) {
     this.instance = instance;
-    this.theme = theme;
   }
 
   /**
@@ -19,16 +15,6 @@ class Navigation {
    * @param params
    */
   private filterParams = (params: NavigationOptions) => {
-    if (params.headerRight) {
-      const headerRight = params.headerRight?.({}) as React.ReactElement;
-      const type = headerRight?.type;
-      if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
-        console.warn(
-          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
-        );
-      }
-    }
-
     if (params.headerLeft) {
       console.warn('headerLeft not allow override render by design system!');
       delete params.headerLeft;
@@ -42,7 +28,7 @@ class Navigation {
    * @param params
    */
   setOptions = (params: NavigationOptions) => {
-    params = getOptions(this.filterParams(params), this.theme);
+    params = getOptions(this.filterParams(params), this);
     this.instance.setOptions(params);
   };
 }

package/Application/StackScreen.tsx

@@ -1,13 +1,94 @@
 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 {showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
   const endTime = useRef(Date.now());
   const timeLoad = useRef(0);
@@ -23,7 +104,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const context = useContext<any>(MiniAppContext);
 
   const {screen: Component, options, initialParams} = props.route.params;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const heightHeader = useHeaderHeight();
 
   const data = {
@@ -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/index.ts

@@ -5,7 +5,6 @@ import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
-  HeaderRightAction,
   HeaderTitle,
   NavigationButton,
 } from './Components';
@@ -31,7 +30,6 @@ export {
   NavigationButton,
   HeaderTitle,
   HeaderBackground,
-  HeaderRightAction,
   HeaderCustom,
   HeaderAnimated,
 };

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';
@@ -144,19 +145,29 @@ export type RuntimeToolType = {
   key: string;
 };
 
-export interface NavigationOptions extends StackNavigationOptions {
+export interface NavigationOptions
+  extends Omit<StackNavigationOptions, 'headerRight'> {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  toolkitParams?: {
-    pinnedTool?: PinnedToolType;
-    runtimeTools?: RuntimeToolType[];
-    preventClose?: PopupNotifyProps;
-  };
+  headerRight?: HeaderRightToolkit | HeaderRightActions | any;
 }
 
+export type HeaderRightToolkit = {
+  type?: 'toolkit';
+  pinnedTool?: PinnedToolType;
+  runtimeTools?: RuntimeToolType[];
+  preventClose?: PopupNotifyProps;
+  useMore?: boolean;
+};
+
+export type HeaderRightActions = {
+  type?: 'icon';
+  buttons: NavigationButtonProps[];
+};
+
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
@@ -198,6 +209,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 +222,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;
 };