@momo-kits/foundation 0.167.1-beta.5 → 0.167.1-beta.7

package/Application/Components/HeaderTitle.tsx

@@ -7,7 +7,13 @@ import Animated, {
 } from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
-import { Colors, Radius, Spacing, Styles } from '../../Consts';
+import {
+  Colors,
+  Radius,
+  Spacing,
+  Styles,
+  useHeaderFontFamily,
+} from '../../Consts';
 import {
   TitleJourneyProps,
   TitleLocationProps,
@@ -37,6 +43,7 @@ const HeaderTitle: React.FC<
   HeaderTitleExtraProps & { [key: string]: any }
 > = props => {
   const context = useContext<any>(MiniAppContext);
+  const headerFontFamily = useHeaderFontFamily();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -85,7 +92,7 @@ const HeaderTitle: React.FC<
             fontFamily: exportFontFamily(
               'bold',
               'action_xs_bold',
-              'MoMoTrustDisplay',
+              headerFontFamily,
             ),
             color: props.tintColor,
           },
@@ -130,6 +137,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
   isLoading,
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const headerFontFamily = useHeaderFontFamily();
   const maxWidth = Dimensions.get('window').width - 172;
   const getShortName = (name: string) => {
     const words = name.split(' ');
@@ -378,7 +386,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
           <View style={Styles.row}>
             <Text
               typography="action_xs_bold"
-              fontFamily='MoMoTrustDisplay'
+              fontFamily={headerFontFamily}
               color={tintColor}
               numberOfLines={1}
             >
@@ -412,6 +420,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   onPress,
   isLoading,
 }) => {
+  const headerFontFamily = useHeaderFontFamily();
   const maxWidth = Dimensions.get('window').width - 172;
   const renderShimmer = () => {
     return (
@@ -449,7 +458,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
       )}
       <View style={Styles.row}>
         <Text typography="action_xs_bold" 
-          fontFamily='MoMoTrustDisplay'
+          fontFamily={headerFontFamily}
          color={tintColor} numberOfLines={1}>
           {location}
         </Text>
@@ -477,6 +486,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   onPress,
   isLoading,
 }) => {
+  const headerFontFamily = useHeaderFontFamily();
   const { width } = Dimensions.get('screen');
   const maxWidth = Dimensions.get('window').width - 172;
   const startWidth = width * 0.25;
@@ -512,7 +522,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
             style={{ maxWidth: startWidth }}
             color={tintColor}
             numberOfLines={1}
-          fontFamily='MoMoTrustDisplay'
+          fontFamily={headerFontFamily}
 
           >
             {start}
@@ -529,7 +539,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}
-          fontFamily='MoMoTrustDisplay'
+          fontFamily={headerFontFamily}
 
             >
               {end}

package/Application/NavigationContainer.tsx

@@ -20,7 +20,10 @@ import Navigator from './Navigator';
 import { getModalOptions, getStackOptions, useNativeCanGoBack } from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
+import {
+  useDefaultRegularFontFamily,
+  useResolvedFontFamily,
+} from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -104,6 +107,7 @@ const Navigation: React.FC<any> = ({
   const [showGrid, setShowGrid] = useState(false);
   const insets = useSafeAreaInsets();
   const defaultRegularFontFamily = useDefaultRegularFontFamily();
+  const themeFont = useResolvedFontFamily(theme.font);
   const syncCanGoBack = useNativeCanGoBack();
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
@@ -156,6 +160,7 @@ const Navigation: React.FC<any> = ({
         navigator: navigator.current,
         theme: {
           ...theme,
+          font: themeFont,
           colors: {
             ...theme.colors,
             gradient: headerGradient,

package/Application/WidgetContainer.tsx

@@ -3,7 +3,10 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
+import {
+  resolveFontFamily,
+  useDefaultRegularFontFamily,
+} from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {
@@ -90,6 +93,11 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               navigator: navigator.current,
               theme: {
                 ...theme,
+                font: resolveFontFamily(
+                  theme.font,
+                  mergedContext?.designSystemConfig?.isWhiteListDesignSystem ===
+                    true,
+                ),
                 colors: {
                   ...theme.colors,
                   gradient: headerGradient,

package/Consts/designSystemFont.ts

@@ -3,36 +3,23 @@ import { MiniAppContext } from '../Context';
 
 export const NEW_DEFAULT_FONT_FAMILY = 'MomoTrustSans';
 export const LEGACY_DEFAULT_FONT_FAMILY = 'SFProText';
+const HEADER_FONT_FAMILY = 'MoMoTrustDisplay';
 
-/**
- * Font thuoc bo design system moi. Ngoai whitelist thi ha het ve font cu:
- * MoMoTrustDisplay chi duoc dung tu commit header title 5bfde6251 (DS-791),
- * truoc do header lay font theo theme.
- */
-const NEW_FONT_FAMILIES = [NEW_DEFAULT_FONT_FAMILY, 'MoMoTrustDisplay'];
-
-/**
- * Cờ whitelist design system, host đẩy xuống qua `decorateProps`
- * (`designSystemConfig.isWhiteListDesignSystem`). Ngoài whitelist thì kit giữ
- * nguyên font cũ.
- */
 export const useIsDesignSystemWhiteList = (): boolean => {
   const context = useContext<any>(MiniAppContext);
   return context?.designSystemConfig?.isWhiteListDesignSystem === true;
 };
 
-/**
- * Hạ font mặc định mới về font cũ khi user không nằm trong whitelist.
- * Font do caller chỉ định tường minh (MoMoSignature, AlegreyaSans...) giữ nguyên.
- */
-export const useResolvedFontFamily = (font: string): string => {
-  const isWhiteList = useIsDesignSystemWhiteList();
-  if (NEW_FONT_FAMILIES.includes(font) && !isWhiteList) {
-    return LEGACY_DEFAULT_FONT_FAMILY;
-  }
-  return font;
-};
+export const resolveFontFamily = (font: string, isWhiteList: boolean): string =>
+  isWhiteList ? NEW_DEFAULT_FONT_FAMILY : font;
+
+export const useResolvedFontFamily = (font: string): string =>
+  resolveFontFamily(font, useIsDesignSystemWhiteList());
 
-/** Tên file font Regular tương ứng với nhánh whitelist đang áp dụng. */
 export const useDefaultRegularFontFamily = (): string =>
-  `${useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY)}-Regular`;
+  `${useResolvedFontFamily(LEGACY_DEFAULT_FONT_FAMILY)}-Regular`;
+
+export const useHeaderFontFamily = (): string =>
+  useIsDesignSystemWhiteList()
+    ? HEADER_FONT_FAMILY
+    : LEGACY_DEFAULT_FONT_FAMILY;

package/Consts/theme.ts

@@ -51,7 +51,7 @@ const defaultTheme: Theme = {
       container: Colors.blue_08,
     },
   },
-  font: 'MomoTrustSans',
+  font: 'SFProText',
   assets: {},
 };
 
@@ -105,7 +105,7 @@ const defaultDarkTheme: Theme = {
       container: Colors.blue_08,
     },
   },
-  font: 'MomoTrustSans',
+  font: 'SFProText',
   assets: {},
 };
 

package/Text/index.tsx

@@ -8,6 +8,7 @@ import {
   SkeletonContext,
 } from '../Context';
 import {
+  LEGACY_DEFAULT_FONT_FAMILY,
   NEW_DEFAULT_FONT_FAMILY,
   useResolvedFontFamily,
 } from '../Consts/designSystemFont';
@@ -118,8 +119,11 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
   const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
   const { fontWeight, fontSize, fontStyle, lineHeight } = typoStyle;
   const style = FontStyle[fontStyle ?? 'normal'];
-  const font = useResolvedFontFamily(newFontFamily ?? theme.font);
-  const resolvedDefaultFamily = useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY);
+  const defaultFontFamily = useResolvedFontFamily(theme.font);
+  const font = newFontFamily ?? defaultFontFamily;
+  const resolvedDefaultFamily = useResolvedFontFamily(
+    LEGACY_DEFAULT_FONT_FAMILY,
+  );
   let fontFamily: string;
 
   switch (font) {
@@ -162,9 +166,6 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
     fontSize: useScaleSize(fontSize),
     lineHeight: useScaleSize(lineHeight),
     fontStyle,
-    // fontFamily da mang san weight. Tren Android, ReactFontManager doi
-    // `fonts/<family>_bold.ttf` khi fontWeight >= 700; file do khong ton tai nen
-    // font se roi ve font he thong. Bo fontWeight de Android dung dung file.
     fontWeight: undefined,
   };
 };

package/package.json

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