@momo-kits/foundation 0.109.1-optimize.17 → 0.109.1-optimize.17-beta.19

package/Application/BottomTab/index.tsx

@@ -7,7 +7,7 @@ import {EventArg} from '@react-navigation/core';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
 import {Icon} from '../../Icon';
-import {Text} from '../../Text';
+import {exportFontFamily, Text} from '../../Text';
 import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
@@ -146,7 +146,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 lineHeight: Platform.OS === 'android' ? 17 : 14,
                 fontWeight: 'bold',
                 alignSelf: 'center',
-                fontFamily: `${theme.font}-Bold`,
+                fontFamily: exportFontFamily('bold'),
                 left: isDot ? 8 : 4,
                 top: isDot ? -2 : -6,
                 backgroundColor: isNum ? Colors.red_03 : Colors.orange_03,

package/Application/Components/HeaderTitle.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../index';
-import {scaleSize, Text} from '../../Text';
+import {exportFontFamily, scaleSize, Text} from '../../Text';
 import {Colors, Spacing, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
 import {Image} from '../../Image';
@@ -17,7 +17,6 @@ import {Icon} from '../../Icon';
  * default header title used for nav
  */
 const HeaderTitle: React.FC<any> = props => {
-  const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate(
     props.interpolate ?? {
       inputRange: [0, 200],
@@ -33,7 +32,11 @@ const HeaderTitle: React.FC<any> = props => {
         accessibilityLabel={'title_navigation_header'}
         style={[
           styles.title,
-          {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
+          {
+            fontFamily: exportFontFamily('bold', 'action_xs_bold'),
+            opacity,
+            color: props.tintColor,
+          },
         ]}
         numberOfLines={1}
       />
@@ -191,13 +194,18 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   tintColor,
   onPress,
 }) => {
+  const {width} = Dimensions.get('screen');
+  const startWidth = width * 0.25;
+  const endWidth = width * 0.75 - 212;
   return (
-    <TouchableOpacity
-      style={[styles.headerTitleContainer, {overflow: 'hidden'}]}
-      onPress={onPress}>
+    <TouchableOpacity style={styles.headerTitleContainer} onPress={onPress}>
       <View style={styles.rowJourney}>
         <View style={Styles.row}>
-          <Text typography="action_xs_bold" color={tintColor} numberOfLines={1}>
+          <Text
+            typography="action_xs_bold"
+            style={{maxWidth: startWidth}}
+            color={tintColor}
+            numberOfLines={1}>
             {start}
           </Text>
           <Icon
@@ -208,6 +216,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
           />
           {!!end && (
             <Text
+              style={{maxWidth: endWidth}}
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}>

package/Input/Input.tsx

@@ -17,7 +17,7 @@ import {
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {Text} from '../Text';
+import {exportFontFamily, Text} from '../Text';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import styles from './styles';
@@ -51,7 +51,7 @@ const Input = forwardRef(
       loading = false,
       leadingIcon,
       leadingIconColor,
-      fontWeight = 'Regular',
+      fontWeight,
       secureTextEntry,
       keyboardType,
       style,
@@ -223,7 +223,7 @@ const Input = forwardRef(
                 styles.input,
                 {
                   color: textColor,
-                  fontFamily: `${theme.font}-${fontWeight}`,
+                  fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
                 secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}

package/Input/index.tsx

@@ -110,7 +110,7 @@ export interface InputProps extends TextInputProps {
   /**
    * Optional. Represents the font weight of the text in the Input component.
    */
-  fontWeight?: 'Regular' | 'Bold';
+  fontWeight?: string;
 
   /**
    * Optional. params for element tracking.

package/Radio/index.tsx

@@ -64,10 +64,10 @@ const Radio: FC<RadioProps> = ({
             styles.radio,
             checkBoxStyle,
             disabledStyle,
-            {marginRight: label ? Spacing.XS : 0},
+            {marginRight: label ? Spacing.S : 0},
           ]}
         />
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+        {!!label && <Text typography={'body_default_regular'} style={styles.radioText}>{label}</Text>}
       </TouchableOpacity>
     </ComponentContext.Provider>
   );

package/Radio/styles.ts

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {Radius} from '../Consts';
+import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   radio: {
@@ -8,4 +8,7 @@ export default StyleSheet.create({
     borderRadius: Radius.M,
   },
   container: {flex: 1},
+  radioText: {
+    marginRight: Spacing.M,
+  }
 });

package/Text/index.tsx

@@ -33,6 +33,20 @@ const AlegreyaSans: TypographyWeight = {
   bold: 'Bold',
 };
 
+const MomoTrustSans: TypographyWeight = {
+  100: 'Light',
+  200: 'Light',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Medium',
+  800: 'Medium',
+  900: 'Medium',
+  normal: 'Regular',
+  bold: 'Medium',
+};
+
 const FontStyle: {[key: string]: string} = {
   italic: 'Italic',
   normal: '',
@@ -50,6 +64,12 @@ export interface TextProps extends RNTextProps {
    * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
    */
   color?: string;
+
+  /**
+   * Optional. Represents the font-family of the text in the Text component.
+   * Ex: MomoSignature, MomoTrustDisplay
+   */
+  fontFamily?: string;
 }
 
 const deprecatedValues: Typography[] = [
@@ -67,49 +87,61 @@ const deprecatedValues: Typography[] = [
   'action_s',
 ];
 
+const getTypoStyle = (typo: Typography, newFontFamily?: string) => {
+  const {theme} = useContext(ApplicationContext);
+  const styleSheet: {
+    [key: string]: any;
+  } = styles;
+  const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
+  const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
+  const style = FontStyle[fontStyle ?? 'normal'];
+  const font = newFontFamily ?? theme.font;
+  let fontFamily: string;
+
+  switch (font) {
+    case 'SFProText': {
+      fontFamily = `${font}-${SFProText[fontWeight]}${style}`;
+      break;
+    }
+    case 'AlegreyaSans': {
+      fontFamily = `${font}-${AlegreyaSans[fontWeight]}${style}`;
+      break;
+    }
+    case 'MomoTrustSans': {
+      fontFamily = `${font}-${MomoTrustSans[fontWeight]}${style}`;
+      break;
+    }
+    case 'MomoTrustDisplay':
+    case 'MomoSignature': {
+      fontFamily = font;
+      break;
+    }
+    default: {
+      fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
+    }
+  }
+
+  return {
+    ...typoStyle,
+    fontFamily,
+    fontSize: scaleSize(fontSize),
+    lineHeight: scaleSize(lineHeight),
+    fontStyle,
+    fontWeight,
+  };
+};
+
 const Text: React.FC<TextProps> = ({
   typography = 'body_default_regular',
   color,
   children,
   style,
+  fontFamily,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const getTypoStyle = (typo: Typography) => {
-    const styleSheet: {
-      [key: string]: any;
-    } = styles;
-    const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
-    const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
-    const style = FontStyle[fontStyle ?? 'normal'];
-    let fontFamily: string;
-
-    switch (theme.font) {
-      case 'SFProText': {
-        fontFamily = `${theme.font}-${SFProText[fontWeight]}${style}`;
-        break;
-      }
-      case 'AlegreyaSans': {
-        fontFamily = `${theme.font}-${AlegreyaSans[fontWeight]}${style}`;
-        break;
-      }
-      default: {
-        fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
-      }
-    }
-
-    return {
-      ...typoStyle,
-      fontFamily,
-      fontSize: scaleSize(fontSize),
-      lineHeight: scaleSize(lineHeight),
-      fontStyle,
-      fontWeight,
-    };
-  };
-
-  const textStyle = getTypoStyle(typography);
+  const textStyle = getTypoStyle(typography, fontFamily);
 
   if (deprecatedValues.includes(typography)) {
     console.warn(
@@ -121,10 +153,42 @@ const Text: React.FC<TextProps> = ({
     <RNText
       {...rest}
       {...getAccessibilityID(rest.accessibilityLabel)}
-      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
+      style={[
+        style,
+        textStyle,
+        {
+          color: color ?? theme.colors.text.default,
+        },
+      ]}>
       {children ?? ''}
     </RNText>
   );
 };
 
-export {Text, scaleSize};
+const exportFontFamily = (
+  fontWeight: string,
+  typography?: Typography,
+  fontFamily?: string
+): string => {
+  let newFontFamily;
+
+  switch (fontWeight) {
+    case 'bold': {
+      typography = 'action_xs_bold';
+      break;
+    }
+    case 'regular': {
+      typography = 'body_default_regular';
+      break;
+    }
+    default: {
+      typography = 'body_default_regular';
+    }
+  }
+
+  newFontFamily = getTypoStyle(typography, fontFamily).fontFamily;
+
+  return newFontFamily;
+};
+
+export {Text, scaleSize, exportFontFamily, getTypoStyle};

package/Title/index.tsx

@@ -38,7 +38,7 @@ const Title: FC<TitleProps> = ({
   const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
-  const flexStyle = showTrailingAction && {maxWidth: '70%'};
+  const flexStyle = showTrailingAction && {maxWidth: '95%'};
 
   const renderIcon = () => {
     if (!icon) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.109.1-optimize.17",
+  "version": "0.109.1-optimize.17-beta.19",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},