@momo-kits/foundation 0.81.8 → 0.81.9

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/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,
@@ -50,7 +52,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/Screen.tsx

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

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",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {