@momo-kits/foundation 0.92.1-rc.11 → 0.92.1-rc.12

package/Application/BottomTab/BottomTabBar.tsx

@@ -28,6 +28,7 @@ import {Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {FloatingButtonProps} from '../types';
+import {getAccessibilityID} from '../utils';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
@@ -316,6 +317,7 @@ export default function BottomTabBar({
                 labelStyle={labelStyle}
                 iconStyle={iconStyle}
                 style={tabStyle}
+                {...getAccessibilityID(`btn_tabbar_${route.name}`)}
               />
             </NavigationRouteContext.Provider>
           </NavigationContext.Provider>

package/Application/BottomTab/index.tsx

@@ -63,11 +63,14 @@ const BottomTab: React.FC<BottomTabProps> = ({
 
   return (
     <Tab.Navigator
-      {...getAccessibilityID('tbr_main_bottom')}
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBar={props => (
-        <BottomTabBar {...props} floatingButton={floatingButton} />
+        <BottomTabBar
+          {...getAccessibilityID('tbr_main_bottom')}
+          {...props}
+          floatingButton={floatingButton}
+        />
       )}
       tabBarOptions={{
         style: {
@@ -81,7 +84,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
       {tabs.map(item => {
         return (
           <Tab.Screen
-            {...getAccessibilityID(`btn_tabbar_${item.name}`)}
             key={item.name}
             name={item.name}
             component={TabScreen}

package/Input/Input.tsx

@@ -133,7 +133,9 @@ const Input = forwardRef(
         : getAccessibilityID(
             `${appId}/${code}/${
               screenInfo.screenName
-            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder ?? value,
+            )}`,
           );
 
       if (disabled) {

package/Radio/index.tsx

@@ -54,7 +54,7 @@ const Radio: FC<RadioProps> = ({
   const accessibilityID = getAccessibilityID?.(
     `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
       label,
-    )}_${value}`,
+    )}_${selected}`,
   );
 
   return (

package/Title/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, {FC, useContext, useState} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
 import styles from './styles';
 import {Icon} from '../Icon';
@@ -24,7 +24,8 @@ const Title: FC<TitleProps> = ({
   buttonSize = 'small',
 }) => {
   const {theme} = useContext(ApplicationContext);
-
+  const [badgeWidth, setBadgeWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
   const styleSheet: {
     [key: string]: any;
   } = styles;
@@ -33,6 +34,7 @@ const Title: FC<TitleProps> = ({
   const numberOfLines = showLeftAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
+  const flexStyle = showLeftAction && {maxWidth: '70%'};
 
   const renderIcon = () => {
     if (!icon) return null;
@@ -59,16 +61,31 @@ const Title: FC<TitleProps> = ({
   const renderContent = () => {
     return (
       <View style={styles.contentView}>
-        <View style={[styles.iconLeftView]}>
+        <View
+          onLayout={e => {
+            setContentWidth(e.nativeEvent.layout.width);
+          }}
+          style={[styles.iconLeftView, flexStyle]}>
           <RNText
             numberOfLines={numberOfLines}
-            style={[styleSheet[typography], styles.title]}>
+            style={[
+              styleSheet[typography],
+              styles.title,
+              {maxWidth: contentWidth - badgeWidth},
+            ]}>
             {title}
           </RNText>
-
-          <View style={{alignItems: 'center'}}>
-            {badgeLabel && <Badge style={styles.badge} label={badgeLabel} />}
-          </View>
+          {badgeLabel && (
+            <View
+              onLayout={e => {
+                setBadgeWidth(e.nativeEvent.layout.width);
+              }}
+              style={{
+                alignItems: 'center',
+              }}>
+              <Badge style={styles.badge} label={badgeLabel} />
+            </View>
+          )}
           {renderActionLeft()}
         </View>
         <Text

package/Title/styles.ts

@@ -70,7 +70,6 @@ export default StyleSheet.create({
   title: {
     fontWeight: 'bold',
     marginBottom: Spacing.XS,
-    flex: 1,
   },
   badge: {
     marginLeft: Spacing.XS,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-rc.11",
+    "version": "0.92.1-rc.12",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {