@momo-kits/foundation 0.81.36 → 0.81.37-tracking.2

package/Application/Components.tsx

@@ -183,7 +183,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const canGoBack = navigator?.ref.current?.canGoBack();
     if (!canGoBack && navigator?.trackingInfo) {
       const currentRoute = navigator?.ref?.current.getCurrentRoute();
-      navigator?.maxApi?.trackEvent('service_icon_clicked', {
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
         feature_code: navigator.trackingInfo.code,
         app_id: navigator.trackingInfo.appId,
         miniapp_version: navigator.trackingInfo.buildNumber,
@@ -242,9 +242,8 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useBorder = false,
 }) => {
-  const {theme, config} = useContext(ApplicationContext);
-  let headerImage =
-    config?.navigationBar?.headerBar ?? theme.assets?.headerBackground;
+  const {theme} = useContext(ApplicationContext);
+  let headerImage = theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }

package/Application/ModalScreen.tsx

@@ -95,7 +95,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
   const [keyboardSnap, setKeyboardSnap] = useState(0);
-  const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
+  const {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
+    props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -167,14 +168,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>
-          <View
-            style={[
-              styles.sheetContainer,
-              {
-                backgroundColor,
-                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-              },
-            ]}>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View
                 style={[
@@ -233,6 +227,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                 ),
               }}
             />
+            <View
+              style={{
+                height: Math.min(insets.bottom, 20),
+                backgroundColor: indicatorColor ?? backgroundColor,
+              }}
+            />
           </View>
         </BottomSheetView>
       </BottomSheetModal>

package/Application/NavigationContainer.tsx

@@ -29,7 +29,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
   const [language, setLanguage] = useState<'vi' | 'en'>('vi');
-  const [config, setConfig] = useState(undefined);
+  const [config, setConfig] = useState<any>(undefined);
+  let assets = theme.assets;
+  if (config) {
+    assets = {...assets, headerBackground: config.navigationBar?.headerBar};
+  }
 
   /**
    * handle mini language & listen change
@@ -83,7 +87,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
           value={{
-            theme,
+            theme: {
+              ...theme,
+              assets: assets,
+            },
             navigator: navigator.current,
             showGrid,
             language,

package/Application/StackScreen.tsx

@@ -5,6 +5,10 @@ import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
@@ -47,14 +51,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
         pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
 
-      navigator?.maxApi?.trackEvent('service_frame_displayed', {
+      navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
         ...tracking,
         pre_screen_name,
         trigger_id: '111378000000000000',
       });
 
       return props.navigation.addListener('beforeRemove', () => {
-        navigator?.maxApi?.trackEvent('service_icon_clicked', {
+        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
           ...tracking,
           trigger_id: '111154000000000000',
           icon_name: 'back',
@@ -64,10 +68,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
   }, []);
 
   return (
-    <>
+    <ScreenContext.Provider
+      value={{
+        screenName: Component.name,
+        elementTracking: navigator?.maxApi?.elementTracking,
+      }}>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/index.ts

@@ -1,20 +1,21 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
 import {
-  NavigationButton,
-  HeaderTitle,
-  HeaderLeft,
+  HeaderAnimated,
   HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
   HeaderRightAction,
+  HeaderTitle,
   HeaderToolkitAction,
-  HeaderCustom,
-  HeaderAnimated,
+  NavigationButton,
 } from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
 
 const ApplicationContext = createContext(defaultContext);
+
 export {
   NavigationContainer,
   ApplicationContext,

package/Application/types.ts

@@ -119,6 +119,7 @@ export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
   snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
+  indicatorColor?: string;
 }
 
 export type NavigationButtonProps = {

package/Button/index.tsx

@@ -6,7 +6,6 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -16,6 +15,10 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -94,6 +97,8 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
+
+  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -291,20 +296,28 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`Button/${title}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-      {gradientPros && (
-        <AnimationLinear {...gradientPros} style={styles.gradientView} />
-      )}
-      {gradientPros && <View style={styles.strokeView} />}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params: {
+          title,
+        },
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -6,6 +6,10 @@ import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const CheckBox: FC<CheckBoxProps> = ({
   value,
   disabled,
@@ -19,6 +23,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
   let backgroundColor = theme.colors.background.surface;
+  const screenInfo = useContext<any>(ScreenContext);
 
   if (haveValue) {
     borderColor = theme.colors.primary;
@@ -35,27 +40,35 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={`CheckBox/${label}/${value}`}
-      activeOpacity={0.8}
-      onPress={() => onChange?.(!value)}
-      disabled={disabled}
-      style={[style, styles.container]}>
-      <View
-        style={[
-          {borderColor, backgroundColor, borderWidth: 1},
-          styles.checkbox,
-        ]}>
-        {haveValue && (
-          <Icon
-            color={theme.colors.background.surface}
-            size={20}
-            source={iconSource}
-          />
-        )}
-      </View>
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'CheckBox',
+        params: {
+          value,
+        },
+      }}>
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={() => onChange?.(!value)}
+        disabled={disabled}
+        style={[style, styles.container]}>
+        <View
+          style={[
+            {borderColor, backgroundColor, borderWidth: 1},
+            styles.checkbox,
+          ]}>
+          {haveValue && (
+            <Icon
+              color={theme.colors.background.surface}
+              size={20}
+              source={iconSource}
+            />
+          )}
+        </View>
+        {!!label && <Text typography={'description_default'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/IconButton/index.tsx

@@ -10,6 +10,10 @@ import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
    * Represents the name or key of the icon to be displayed on the IconButton.
@@ -36,6 +40,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -121,14 +126,22 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`IconButton/${icon}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      <Icon size={iconSize} source={icon} color={getIconColor()} />
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'IconButton',
+        params: {
+          icon,
+        },
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Image/index.tsx

@@ -47,6 +47,7 @@ const Image: React.FC<ImageProps> = ({
       source={source}
       style={[styles.container, style]}
       onProgress={() => {
+        error.current = false;
         if (status !== 'loading' && loading) {
           setStatus('loading');
         }

package/Input/styles.ts

@@ -7,7 +7,6 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    height: '100%',
     fontSize: scaleSize(15),
   },
   wrapper: {

package/Layout/Card.tsx

@@ -27,6 +27,7 @@ const Card: React.FC<CardProps> = ({
   style,
   backgroundImage,
   useShadow = false,
+  ...props
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -141,6 +142,7 @@ const Card: React.FC<CardProps> = ({
   return (
     <GridContext.Provider value={gridContext}>
       <View
+        {...props}
         accessibilityLabel={`Card`}
         style={[
           style,

package/Layout/Screen.tsx

@@ -12,6 +12,7 @@ import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import React, {
   forwardRef,
+  Fragment,
   ReactNode,
   useContext,
   useEffect,
@@ -101,7 +102,7 @@ const Screen = forwardRef(
     ref,
   ) => {
     const animatedValue = useRef<Animated.Value | undefined>(undefined);
-    const {theme, config} = useContext(ApplicationContext);
+    const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const currentTint = useRef(Colors.black_01);
@@ -117,8 +118,7 @@ const Screen = forwardRef(
     }
 
     if (headerType == 'extended') {
-      headerBackground =
-        config?.navigationBar?.headerBar ?? theme.assets?.headerBackground;
+      headerBackground = theme.assets?.headerBackground;
     }
 
     useEffect(() => {
@@ -260,25 +260,33 @@ const Screen = forwardRef(
     /**
      * build content for screen
      */
-    const renderContent = () => {
-      const results = validateChildren(children, [Section, Card]);
+    const renderContent = (children: any): any => {
+      const results = validateChildren(children, [Section, Card, undefined]);
       if (Array.isArray(results)) {
         return results.map((item, index) => {
-          const space = item.props?.useMargin === false ? 0 : Spacing.M;
-          return (
-            <View
-              key={`ScreenItem${index}`}
-              style={{
-                marginTop: space,
-                flex: item.props?.expanded ? 1 : undefined,
-              }}>
-              {item}
-            </View>
-          );
+          const space = item?.props?.useMargin === false ? 0 : Spacing.M;
+          if (item?.type == Fragment) {
+            return renderContent(item?.props?.children);
+          }
+          if (item) {
+            return (
+              <View
+                key={`ScreenItem${index}`}
+                style={{
+                  marginTop: space,
+                  flex: item.props?.expanded ? 1 : undefined,
+                }}>
+                {item}
+              </View>
+            );
+          }
         });
       } else {
         const item: any = children;
         const space = item?.props?.useMargin === false ? 0 : Spacing.M;
+        if (item?.type == Fragment) {
+          return renderContent(item?.props?.children);
+        }
         return (
           <View
             key={`ScreenItem`}
@@ -327,7 +335,7 @@ const Screen = forwardRef(
               style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
               {renderHeader()}
             </View>
-            {renderContent()}
+            {renderContent(children)}
           </Component>
           {Footer && (
             <View

package/Layout/Section.tsx

@@ -33,6 +33,7 @@ const Section: React.FC<SectionProps> = ({
   useMargin = true,
   backgroundImage,
   style,
+  ...props
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -148,6 +149,7 @@ const Section: React.FC<SectionProps> = ({
         },
       }}>
       <View
+        {...props}
         accessibilityLabel={`Section`}
         style={[
           style,

package/Popup/PopupNotify.tsx

@@ -51,12 +51,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         component_name: id,
         error_code: error ? error : undefined,
       };
-      navigator?.maxApi?.trackEvent('service_component_displayed', {
+      navigator?.maxApi?.trackEvent?.('service_component_displayed', {
         ...tracking,
         trigger_id: '111012100000000000',
       });
       return () => {
-        navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+        navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
           ...tracking,
           trigger_id: '111154100000000001',
           action_type: closeAction.current,

package/Popup/PopupPromotion.tsx

@@ -34,12 +34,12 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
         component_type: 'popup',
         component_name: id,
       };
-      navigator?.maxApi?.trackEvent('service_component_displayed', {
+      navigator?.maxApi?.trackEvent?.('service_component_displayed', {
         ...tracking,
         trigger_id: '111012100000000000',
       });
       return () => {
-        navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+        navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
           ...tracking,
           trigger_id: '111154100000000001',
           action_type: closeAction.current,

package/Radio/index.tsx

@@ -7,6 +7,10 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const Radio: FC<RadioProps> = ({
   value,
   groupValue,
@@ -37,28 +41,38 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
+  const screenInfo = useContext<any>(ScreenContext);
+
   return (
-    <TouchableOpacity
-      accessibilityLabel={`Radio/${label}/${value}`}
-      onPress={onChange}
-      disabled={disabled}
-      style={[
-        style,
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Radio',
+        params: {
+          value,
         },
-      ]}>
-      <View
+      }}>
+      <TouchableOpacity
+        onPress={onChange}
+        disabled={disabled}
         style={[
-          styles.radio,
-          checkBoxStyle,
-          disabledStyle,
-          {marginRight: label ? Spacing.XS : 0},
-        ]}
-      />
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
-    </TouchableOpacity>
+          style,
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        ]}>
+        <View
+          style={[
+            styles.radio,
+            checkBoxStyle,
+            disabledStyle,
+            {marginRight: label ? Spacing.XS : 0},
+          ]}
+        />
+        {!!label && <Text typography={'description_default'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Switch/index.tsx

@@ -1,13 +1,18 @@
-import React, {FC} from 'react';
+import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const Switch: FC<SwitchProps> = props => {
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
+  const screenInfo = useContext<any>(ScreenContext);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -15,19 +20,27 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={'Switch'}
-      disabled={disabled}
-      onPress={() => onChange?.(!value)}
-      style={[
-        style,
-        styles.container,
-        {backgroundColor, alignItems: circleAlign},
-      ]}>
-      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-        <View style={[styles.circleSmall, {backgroundColor}]} />
-      </View>
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Switch',
+        params: {
+          value,
+        },
+      }}>
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={() => onChange?.(!value)}
+        style={[
+          style,
+          styles.container,
+          {backgroundColor, alignItems: circleAlign},
+        ]}>
+        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+          <View style={[styles.circleSmall, {backgroundColor}]} />
+        </View>
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.36",
+    "version": "0.81.37-tracking.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {