@momo-kits/foundation 0.81.1-beta.6 → 0.81.1-optimize.1

package/Title/index.tsx

@@ -1,5 +1,12 @@
-import React, {FC, useContext} from 'react';
-import {Text as RNText, TouchableOpacity, View} from 'react-native';
+import React, {FC, useContext, useState} from 'react';
+import {
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  Text as RNText,
+  TextLayoutEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {TitleProps} from './types';
 import {Icon} from '../Icon';
 import styles from './styles';
@@ -17,69 +24,106 @@ const Title: FC<TitleProps> = ({
   showAction = true,
   icon,
   description,
+  usePadding = true,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const flexStyle = titleFlex ? {flex: 1} : {};
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [textLines, setTextLines] = useState(0);
   const typeStyle =
     type === 'screen' ? styles.screen : styles[`${type}_${size}`];
-  const actionColor = titleFlex
-    ? theme.colors.primary
-    : theme.colors.text.default;
-  const actionBackground = titleFlex
-    ? theme.colors.primary + '0F'
-    : Colors.black_06;
-  const actionSize = titleFlex ? scaleSize(22) : scaleSize(18);
   const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
-  const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
+  const marginStyle =
+    type === 'section' && usePadding ? {marginTop: Spacing.S} : {};
+  const numberOfLines = type === 'section' ? 1 : 2;
 
   const renderAction = () => {
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s'} color={theme.colors.primary}>
+        <Text typography={'action_s_bold'} color={theme.colors.primary}>
           {actionTitle}
         </Text>
       </TouchableOpacity>
     ) : (
       <TouchableOpacity
         style={[
-          {backgroundColor: actionBackground},
+          {backgroundColor: theme.colors.primary + '0F'},
           styles.actionIcon,
-          {width: actionSize, height: actionSize},
+          {width: scaleSize(22), height: scaleSize(22)},
         ]}
         onPress={onPressAction}>
         <Icon
-          size={actionSize}
-          color={actionColor}
+          size={scaleSize(22)}
+          color={theme.colors.primary}
           source={'arrow_chevron_right_small'}
         />
       </TouchableOpacity>
     );
   };
 
+  const renderSemiAction = () => {
+    if (textLines > 1) return null;
+    return (
+      <TouchableOpacity
+        style={[
+          {backgroundColor: Colors.black_06},
+          styles.actionIcon,
+          {width: scaleSize(18), height: scaleSize(18)},
+        ]}
+        onPress={onPressAction}>
+        <Icon
+          size={scaleSize(18)}
+          color={theme.colors.text.default}
+          source={'arrow_chevron_right_small'}
+        />
+      </TouchableOpacity>
+    );
+  };
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
+  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
+    setTextLines(e.nativeEvent.lines.length);
+  };
+
   return (
-    <View style={styles.wrapper}>
-      <View style={[styles.container, marginStyle]}>
-        {!!icon && type !== 'screen' && (
-          <Icon style={styles.icon} source={icon} />
-        )}
-        <RNText
-          style={[
-            typeStyle,
-            flexStyle,
-            styles.title,
-            {
-              fontFamily: `${theme.font}-${titleWeight}`,
-            },
-          ]}>
-          {title}
-        </RNText>
-        {showAction && type !== 'screen' && renderAction()}
-      </View>
-      {!!description && type !== 'screen' && (
-        <Text typography={'description_s'} color={theme.colors.text.secondary}>
-          {description}
-        </Text>
+    <View onLayout={onLayout} style={[styles.wrapper, marginStyle]}>
+      {!!icon && type !== 'screen' && (
+        <Icon style={styles.icon} source={icon} />
       )}
+      <View style={{flex: 1, flexDirection: 'row'}}>
+        <View style={styles.textContent}>
+          <View
+            style={{
+              flexDirection: 'row',
+              maxWidth: containerWidth - scaleSize(22),
+            }}>
+            <RNText
+              onTextLayout={onTextLayout}
+              numberOfLines={numberOfLines}
+              style={[
+                typeStyle,
+                {
+                  fontFamily: `${theme.font}-${titleWeight}`,
+                  color: theme.colors.text.default,
+                  marginRight: Spacing.S,
+                },
+              ]}>
+              {title}
+            </RNText>
+            {!titleFlex && renderSemiAction()}
+          </View>
+          {!!description && type !== 'screen' && (
+            <Text
+              numberOfLines={1}
+              typography={'description_default_regular'}
+              color={theme.colors.text.secondary}>
+              {description}
+            </Text>
+          )}
+        </View>
+        {showAction && titleFlex && type !== 'screen' && renderAction()}
+      </View>
     </View>
   );
 };

package/Title/styles.ts

@@ -4,6 +4,10 @@ import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   card_small: {
+    fontSize: scaleSize(14),
+    lineHeight: scaleSize(20),
+  },
+  card_medium: {
     fontSize: scaleSize(16),
     lineHeight: scaleSize(22),
   },
@@ -11,10 +15,14 @@ export default StyleSheet.create({
     fontSize: scaleSize(18),
     lineHeight: scaleSize(26),
   },
-  section_small: {
+  section_medium: {
     fontSize: scaleSize(20),
     lineHeight: scaleSize(28),
   },
+  section_small: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
   section_large: {
     fontSize: scaleSize(24),
     lineHeight: scaleSize(34),
@@ -23,24 +31,22 @@ export default StyleSheet.create({
     fontSize: scaleSize(36),
     lineHeight: scaleSize(44),
   },
-  title: {
-    marginRight: Spacing.XS,
-  },
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-  },
   actionIcon: {
     borderRadius: Radius.M,
     alignItems: 'center',
     justifyContent: 'center',
   },
   icon: {
-    marginRight: Spacing.XS,
+    marginRight: Spacing.S,
     borderRadius: Radius.XS,
   },
   wrapper: {
     width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  textContent: {
+    marginRight: Spacing.S,
+    flex: 1,
   },
 });

package/Title/types.ts

@@ -22,7 +22,7 @@ export type TitleProps = {
    * 'large' - A larger, more prominent title.
    * 'small' - A smaller, less prominent title.
    */
-  size?: 'large' | 'small';
+  size?: 'large' | 'medium' | 'small';
 
   /**
    * Optional. Represents the name or key of the icon to be displayed alongside the title.
@@ -48,4 +48,5 @@ export type TitleProps = {
    * Optional. If `true`, an action button or icon is displayed alongside the title.
    */
   showAction?: boolean;
+  usePadding?: boolean;
 };

package/index.ts

@@ -47,3 +47,5 @@ export * from './Loader';
 export * from './Loader/types';
 export * from './Title';
 export * from './Title/types';
+export * from './Badge';
+export * from './Badge/types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.1-beta.6",
+    "version": "0.81.1-optimize.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,17 +10,17 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "git+https://gitlab.com/dung.huynh1/bottom-sheet.git#main",
+        "@gorhom/bottom-sheet": "git+https://gitlab.com/momo-platform/bottom-sheet.git#main",
         "react-native-safe-area-context": "3.1.4",
-        "react-native-linear-gradient": "2.5.6",
+        "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "1.10.3",
         "react-native-fast-image": "8.1.5",
-        "@react-navigation/bottom-tabs": "git+https://gitlab.com/dung.huynh1/react-navigation-bottom-tabs.git#main",
+        "@react-navigation/bottom-tabs": "git+https://gitlab.com/momo-platform/react-navigation-bottom-tabs.git#main",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
-        "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main"
+        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
     },
     "peerDependencies": {
         "react-native": "*"
@@ -43,4 +43,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}

package/verify.js

@@ -7,7 +7,9 @@ try {
   const packageVersion = parseInt(packageInfo?.version.split('.')?.[1]);
 
   const app = path.join(`${__dirname}/../../../`, 'app.json');
+  const miniJson = path.join(`${__dirname}/../../../`, 'package.json');
   const appInfo = JSON.parse(fs.readFileSync(app, 'utf8'));
+  const miniInfo = JSON.parse(fs.readFileSync(miniJson, 'utf8'));
   const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
   const androidAppTarget = appInfo?.client?.android.deploymentTarget;
 
@@ -23,6 +25,19 @@ try {
       `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`,
     );
   }
+
+  if (
+    miniInfo?.dependencies?.['@momo-platform/momo-core'] &&
+    miniInfo?.dependencies?.['@momo-platform/momo-core'] !==
+      packageInfo?.version
+  ) {
+    console.error(
+      `Package ${packageInfo.name} version: ${packageInfo.version} require install resolutions @momo-platform/momo-core ${packageInfo.version}`,
+    );
+    throw new Error(
+      `Package ${packageInfo.name} version: ${packageInfo.version} require install resolutions @momo-platform/momo-core ${packageInfo.version}`,
+    );
+  }
 } catch (error) {
   console.error(`Installation failed: ${error.message}`);
   process.exit(1);