@momo-kits/foundation 0.81.8 → 0.81.9-beta.1

package/Application/BottomTab.tsx

@@ -8,7 +8,12 @@ import {ApplicationContext} from './index';
 
 const Tab = createBottomTabNavigator();
 
-const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners, navigation}) => {
+const BottomTab: React.FC<BottomTabProps> = ({
+  tabs,
+  listeners,
+  navigation,
+  initialRouteName,
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   const defaultListener = {
@@ -21,7 +26,9 @@ const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners, navigation}) => {
   };
 
   return (
-    <Tab.Navigator backBehavior={'firstRoute'}>
+    <Tab.Navigator
+      initialRouteName={initialRouteName}
+      backBehavior={'firstRoute'}>
       {tabs.map(item => {
         return (
           <Tab.Screen

package/Application/Components.tsx

@@ -165,6 +165,16 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const currentRoute = navigator?.ref?.current.getCurrentRoute();
 
     if (navigator?.trackingInfo) {
+      alert(
+        JSON.stringify({
+          feature_code: navigator.trackingInfo.code,
+          app_id: navigator.trackingInfo.appId,
+          miniapp_version: navigator.trackingInfo.buildNumber,
+          screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+          trigger_id: '111154000000000000',
+          icon_name: 'back',
+        }),
+      );
       navigator?.maxApi?.trackEvent('service_icon_clicked', {
         feature_code: navigator.trackingInfo.code,
         app_id: navigator.trackingInfo.appId,

package/Application/ModalScreen.tsx

@@ -65,6 +65,18 @@ const Modal: React.FC<ModalParams> = props => {
         screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
       }
       const error_code = (screen as Function)?.()?.props?.information;
+      alert(
+        JSON.stringify({
+          feature_code: navigator.trackingInfo.code,
+          app_id: navigator.trackingInfo.appId,
+          miniapp_version: navigator.trackingInfo.buildNumber,
+          screen_name,
+          trigger_id: '111012100000000000',
+          component_type: 'popup',
+          component_name: modalName,
+          error_code,
+        }),
+      );
       navigator?.maxApi?.trackEvent('service_component_displayed', {
         feature_code: navigator.trackingInfo.code,
         app_id: navigator.trackingInfo.appId,
@@ -77,6 +89,19 @@ const Modal: React.FC<ModalParams> = props => {
       });
 
       return () => {
+        alert(
+          JSON.stringify({
+            feature_code: navigator?.trackingInfo?.code,
+            app_id: navigator?.trackingInfo?.appId,
+            miniapp_version: navigator?.trackingInfo?.buildNumber,
+            screen_name,
+            trigger_id: '111154100000000001',
+            component_type: 'popup',
+            component_name: modalName,
+            error_code,
+            icon_name: 'close',
+          }),
+        );
         navigator?.maxApi?.trackEvent('service_icon_clicked', {
           feature_code: navigator?.trackingInfo?.code,
           app_id: navigator?.trackingInfo?.appId,

package/Application/NavigationContainer.tsx

@@ -56,7 +56,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       setLanguage(lang);
     });
     return () => {
-      listener?.();
+      listener?.remove?.();
     };
   }, []);
 

package/Application/StackScreen.tsx

@@ -3,11 +3,13 @@ import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
+import {useHeaderHeight} from '@react-navigation/stack';
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
+  const heightHeader = useHeaderHeight();
 
   const params = {
     ...props.route.params,
@@ -37,6 +39,16 @@ const StackScreen: React.FC<ScreenParams> = props => {
         pre_screen_name =
           navigationRoutes[routesLength - 2]?.params?.screen?.name;
       }
+      alert(
+        JSON.stringify({
+          feature_code: navigator.trackingInfo.code,
+          app_id: navigator.trackingInfo.appId,
+          miniapp_version: navigator.trackingInfo.buildNumber,
+          screen_name: Component.name,
+          pre_screen_name,
+          trigger_id: '111378000000000000',
+        }),
+      );
       navigator?.maxApi?.trackEvent('service_frame_displayed', {
         feature_code: navigator.trackingInfo.code,
         app_id: navigator.trackingInfo.appId,
@@ -50,7 +62,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   return (
     <>
-      <Component {...params} />
+      <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
     </>
   );

package/Application/types.ts

@@ -186,6 +186,7 @@ export type BottomTabItemProps = {
 
 export type BottomTabProps = {
   tabs: BottomTabItemProps[];
+  initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
     tabPress?: any;

package/Image/index.tsx

@@ -20,13 +20,12 @@ const Image: React.FC<ImageProps> = ({
   style,
   source,
   accessibilityLabel,
+  loading,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
   const error = useRef(false);
-  const [status, setStatus] = useState<Status>(
-    rest.loading ? 'loading' : 'success',
-  );
+  const [status, setStatus] = useState<Status>('success');
 
   /**
    * render content loading | fail | rendered
@@ -65,16 +64,18 @@ const Image: React.FC<ImageProps> = ({
       <FastImage
         {...rest}
         source={source}
+        fallback={false}
         style={styles.image}
+        onProgress={() => {
+          if (status != 'loading' && loading) setStatus('loading');
+        }}
         onLoadStart={() => {
           error.current = false;
         }}
         onLoadEnd={() => {
-          if (error.current) {
-            setStatus('error');
-          } else {
-            setStatus('success');
-          }
+          let current: Status = 'success';
+          if (error.current) current = 'error';
+          if (status != current) setStatus(current);
         }}
         onError={() => {
           error.current = true;

package/Input/Input.tsx

@@ -35,6 +35,7 @@ const Input = forwardRef(
       loading,
       leadingIcon,
       leadingIconColor,
+      fontWeight = 'normal',
       style,
       ...props
     }: InputProps,
@@ -80,6 +81,7 @@ const Input = forwardRef(
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
+      const inputTextWeight = fontWeight === 'bold' ? 'Bold' : 'Regular';
 
       if (disabled) {
         textColor = disabledColor;
@@ -122,7 +124,7 @@ const Input = forwardRef(
                 styles.input,
                 {
                   color: textColor,
-                  fontFamily: `${theme.font}-Regular`,
+                  fontFamily: `${theme.font}-${inputTextWeight}`,
                 },
               ]}
               textBreakStrategy="highQuality"

package/Input/InputSearch.tsx

@@ -64,7 +64,7 @@ const InputSearch = forwardRef(
         <TextInput
           {...props}
           accessibilityLabel={accessibilityLabel}
-          textAlignVertical="top"
+          textAlignVertical="center"
           ref={inputRef}
           style={[
             styles.searchInput,

package/Input/index.tsx

@@ -76,6 +76,8 @@ export interface InputProps extends TextInputProps {
    * Optional. Represents the color of the leading icon in the Input component.
    */
   leadingIconColor?: string;
+
+  fontWeight?: 'normal' | 'bold';
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<

package/Layout/Card.tsx

@@ -41,7 +41,6 @@ const Card: React.FC<CardProps> = ({
   const gridContext: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
@@ -149,7 +148,7 @@ const Card: React.FC<CardProps> = ({
           styles.card,
           {
             width: widthSection,
-            marginHorizontal: gridContext.margin,
+            marginHorizontal: margin,
             backgroundColor: theme.colors.background.surface,
           },
           useShadow && Shadow.Light,

package/Layout/GridSystem.tsx

@@ -24,7 +24,6 @@ const GridSystem: React.FC<any> = ({
   const grid: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
@@ -46,7 +45,7 @@ const GridSystem: React.FC<any> = ({
           screenGrid && insets,
           {
             borderColor: theme.colors.error.primary,
-            marginHorizontal: grid.margin,
+            marginHorizontal: margin,
             top: Spacing.M,
             bottom: Spacing.M,
           },

package/Layout/Screen.tsx

@@ -275,7 +275,6 @@ const Screen = forwardRef(
           <Component
             {...scrollViewProps}
             ref={ref}
-            heightHeader={heightHeader}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
             style={Styles.flex}>

package/Layout/Section.tsx

@@ -50,7 +50,6 @@ const Section: React.FC<SectionProps> = ({
   const gridContext: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
@@ -143,7 +142,6 @@ const Section: React.FC<SectionProps> = ({
       value={{
         numberOfColumns,
         gutterSize,
-        margin,
         sizePerSpan,
         getSizeSpan: span => {
           return span * sizePerSpan + (span - 1) * gutterSize;
@@ -156,7 +154,7 @@ const Section: React.FC<SectionProps> = ({
           styles.protectedStyle,
           {
             width: widthSection,
-            marginHorizontal: gridContext.margin,
+            marginHorizontal: margin,
             flexDirection: 'row',
             flexWrap: 'wrap',
           },

package/Layout/index.ts

@@ -11,7 +11,6 @@ import ItemSectionList from './ItemSectionList';
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
   gutterSize: 12,
-  margin: 12,
   sizePerSpan: 0,
   getSizeSpan: () => 0,
 });

package/Layout/types.ts

@@ -9,11 +9,6 @@ export type GridContextProps = {
    */
   gutterSize: number;
 
-  /**
-   * Optional. Represents the margin around the grid.
-   */
-  margin?: number;
-
   /**
    * Represents the size (width or height) per span number.
    */

package/Popup/PopupNotify.tsx

@@ -1,5 +1,5 @@
-import React, {useContext} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import React, {useContext, useState} from 'react';
+import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
@@ -19,6 +19,14 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   onIconClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
+  const [scrollContent, setScrollContent] = useState(false);
+
+  let descriptionStyle = {};
+  let Description: any = View;
+  if (scrollContent) {
+    Description = ScrollView;
+    descriptionStyle = {height: 80};
+  }
 
   /**
    * on action popup
@@ -143,11 +151,19 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         <Text typography={'title_xs'} numberOfLines={1}>
           {title}
         </Text>
-        <View style={styles.description}>
-          <Text typography={'paragraph_default'} numberOfLines={3}>
+        <Description style={[styles.description, descriptionStyle]}>
+          <Text
+            typography={'paragraph_default'}
+            numberOfLines={4}
+            onTextLayout={({nativeEvent: {lines}}) => {
+              const enableScroll = lines.length > 3;
+              if (enableScroll != scrollContent) {
+                setScrollContent(enableScroll);
+              }
+            }}>
             {description}
           </Text>
-        </View>
+        </Description>
         {!!information && (
           <View style={styles.information}>
             <Text

package/Title/index.tsx

@@ -1,5 +1,10 @@
-import React, {FC, useContext} from 'react';
-import {Text as RNText, TouchableOpacity, View} from 'react-native';
+import React, {FC, useContext, useState} from 'react';
+import {
+  LayoutChangeEvent,
+  Text as RNText,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {TitleProps} from './types';
 import {Icon} from '../Icon';
 import styles from './styles';
@@ -19,6 +24,7 @@ const Title: FC<TitleProps> = ({
   description,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const [containerWidth, setContainerWidth] = useState(0);
   const flexStyle = titleFlex ? {flex: 1} : {};
   const typeStyle =
     type === 'screen' ? styles.screen : styles[`${type}_${size}`];
@@ -31,7 +37,7 @@ const Title: FC<TitleProps> = ({
   const actionSize = titleFlex ? scaleSize(22) : scaleSize(18);
   const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
   const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
-
+  const numberOfLines = type === 'section' ? 1 : 2;
   const renderAction = () => {
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
@@ -56,13 +62,18 @@ const Title: FC<TitleProps> = ({
     );
   };
 
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
   return (
-    <View style={styles.wrapper}>
+    <View onLayout={onLayout} style={styles.wrapper}>
       <View style={[styles.container, marginStyle]}>
         {!!icon && type !== 'screen' && (
           <Icon style={styles.icon} source={icon} />
         )}
         <RNText
+          numberOfLines={numberOfLines}
           style={[
             typeStyle,
             flexStyle,
@@ -70,6 +81,7 @@ const Title: FC<TitleProps> = ({
             {
               fontFamily: `${theme.font}-${titleWeight}`,
               color: theme.colors.text.default,
+              maxWidth: containerWidth - scaleSize(22),
             },
           ]}>
           {title}

package/Title/styles.ts

@@ -36,7 +36,7 @@ export default StyleSheet.create({
   },
   container: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'baseline',
     width: '100%',
   },
   actionIcon: {

package/package.json

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