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

package/Application/Components.tsx

@@ -1,9 +1,8 @@
 import React, {
-  FC,
+  Fragment,
   useCallback,
   useContext,
   useEffect,
-  useRef,
   useState,
 } from 'react';
 import {
@@ -84,6 +83,11 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 
 const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
+  const opacity = props.animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
 
   return (
     <Animated.Text
@@ -91,11 +95,7 @@ const HeaderTitle: React.FC<any> = props => {
       accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
-        {
-          fontFamily: `${theme.font}-Bold`,
-          color: props.tintColor,
-          opacity: props.titleOpacity,
-        },
+        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
       ]}
     />
   );
@@ -113,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe
+      goBackSafe,
     );
 
     return () => backHandler.remove();
@@ -263,40 +263,35 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
 };
 
-const HeaderRight: FC<any> = ({type, ...props}) => {
-  let buttons = props?.buttons || [];
-  if (!type) {
-    return <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;
+  };
 
-  if (type === 'iconButton') {
-    if (buttons?.length > 3) {
-      buttons = buttons.slice(0, 3);
+  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>
+        );
+      });
     }
+
     return (
-      <View style={styles.headerRightButton}>
-        {buttons?.map?.(
-          ({icon, onPress}: NavigationButtonProps, index: number) => {
-            return (
-              <View
-                key={`HeaderRightAction ${index}`}
-                style={{
-                  marginLeft: index !== 0 ? Spacing.S : 0,
-                }}>
-                <NavigationButton
-                  icon={icon}
-                  onPress={onPress}
-                  tintColor={props?.tintColor}
-                />
-              </View>
-            );
-          }
-        )}
+      <View style={styles.headerButton}>
+        {React.cloneElement(validateType(children), {...restProps})}
       </View>
     );
-  }
-
-  return <HeaderToolkitAction {...props} />;
+  };
+  return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
 const HeaderToolkitAction: React.FC<any> = ({
@@ -332,7 +327,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      }
+      },
     );
   };
 
@@ -345,7 +340,7 @@ const HeaderToolkitAction: React.FC<any> = ({
         const {item} = res;
         navigator?.toolkitCallback?.(item);
         getToolkitConfig();
-      }
+      },
     );
   };
 
@@ -362,7 +357,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined
+                  undefined,
                 );
               },
             }}
@@ -393,7 +388,7 @@ const HeaderToolkitAction: React.FC<any> = ({
               [pinTool?.key],
               () => {
                 getToolkitConfig();
-              }
+              },
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}
@@ -410,7 +405,6 @@ const HeaderToolkitAction: React.FC<any> = ({
             {
               backgroundColor: backgroundColor ?? '#00000066',
               borderWidth: backgroundColor ? 0.5 : 0,
-              marginLeft: renderPinnedTool() ? Spacing.S : 0,
             },
           ]}>
           <TouchableOpacity
@@ -476,42 +470,6 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   );
 };
 
-const ExtendBackground: FC<{
-  headerBackground: string;
-  animatedValue: Animated.Value;
-  heightHeader: number;
-}> = ({headerBackground, animatedValue, heightHeader}) => {
-  const heightAnimated = useRef(new Animated.Value(0));
-  useEffect(() => {
-    const listener = animatedValue.addListener(({value}) => {
-      heightAnimated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, []);
-
-  return (
-    <>
-      <Image
-        source={{
-          uri: headerBackground,
-        }}
-        style={styles.extendedHeader}
-      />
-      <Animated.View
-        style={{
-          height: heightAnimated.current.interpolate({
-            inputRange: [0, 100],
-            outputRange: [heightHeader, heightHeader - 52],
-            extrapolate: 'clamp',
-          }),
-        }}
-      />
-    </>
-  );
-};
-
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -551,6 +509,7 @@ const styles = StyleSheet.create({
     paddingRight: Spacing.M,
   },
   toolkitContainer: {
+    marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
     borderRadius: 14,
@@ -582,12 +541,6 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
-  extendedHeader: {
-    aspectRatio: 1.75,
-    position: 'absolute',
-    width: '100%',
-    height: 210,
-  },
 });
 
 export {
@@ -595,9 +548,8 @@ export {
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,
+  HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
-  HeaderRight,
-  ExtendBackground,
 };

package/Application/Navigation.ts

@@ -1,6 +1,9 @@
+import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
 import {NavigationOptions, Theme} from './types';
+import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
+import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
@@ -16,6 +19,16 @@ 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;

package/Application/StackScreen.tsx

@@ -1,92 +1,11 @@
 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 {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>
-  );
-};
+import {useHeaderHeight} from '@react-navigation/stack';
+import {Alert, InteractionManager} from 'react-native';
 
-/**
- * container for stack screen
- * @param props
- * @constructor
- */
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
@@ -131,10 +50,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (['Invalid', 'screen'].includes(screenName) && context.enableAutoId) {
-      setTimeout(() => {
-        navigator?.showModal({screen: EmptyScreen});
-      }, 300);
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
     }
 
     navigator?.maxApi?.of?.({screenName});

package/Application/types.ts

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

package/Application/utils.tsx

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

package/Button/index.tsx

@@ -297,6 +297,7 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+
   return (
     <ComponentContext.Provider
       value={{

package/Input/InputMoney.tsx

@@ -44,7 +44,7 @@ const InputMoney = forwardRef(
       value: _value,
       ...props
     }: InputMoneyProps,
-    ref
+    ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -63,7 +63,7 @@ const InputMoney = forwardRef(
     };
 
     const [value, setValue] = useState(
-      defaultValue ? validateText(defaultValue) : ''
+      defaultValue ? validateText(defaultValue) : '',
     );
 
     const onClearText = () => {
@@ -198,7 +198,7 @@ const InputMoney = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  }
+  },
 );
 
 export default InputMoney;

package/Input/InputOTP.tsx

@@ -41,7 +41,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           duration: DURATION,
           useNativeDriver: true,
         }),
-      ])
+      ]),
     ).start();
   }, []);
   const spacingStyle = !isNaN(Number(length)) &&
@@ -81,7 +81,7 @@ const InputOTP = forwardRef(
       hintText,
       ...props
     }: InputOTPProps,
-    ref
+    ref,
   ) => {
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
@@ -143,7 +143,7 @@ const InputOTP = forwardRef(
                 {value[i] || '-'}
               </Text>
             )}
-          </View>
+          </View>,
         );
       }
       return TextInputs;
@@ -248,7 +248,7 @@ const InputOTP = forwardRef(
         </TouchableOpacity>
       </ComponentContext.Provider>
     );
-  }
+  },
 );
 
 export default InputOTP;