@momo-kits/tab-view 0.92.6-rc.8 → 0.92.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/tab-view",
-    "version": "0.92.6-rc.8",
+    "version": "0.92.7",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/styles.ts

@@ -52,6 +52,9 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    paddingHorizontal: Spacing.S,
+    paddingTop: Spacing.S,
+    paddingBottom: Spacing.M,
   },
   cardTabOverlay: {
     flexDirection: 'row',
@@ -65,7 +68,8 @@ export default StyleSheet.create({
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: Spacing.XS,
+    paddingVertical: Spacing.M,
+    paddingHorizontal: Spacing.S,
     flexDirection: 'row',
   },
   dotSmall: {

package/tabBar/CardTabBar.tsx

@@ -65,6 +65,7 @@ const CardTabBar: FC<TabBarProps> = ({
               width: containerWidth / tabs.length,
               borderTopRightRadius: Radius.M,
               borderTopLeftRadius: Radius.M,
+              paddingHorizontal: tabs.length === 3 ? Spacing.S : Spacing.M,
             },
           ]}>
           {!!tabs[selectedIndex]?.renderIcon &&
@@ -90,7 +91,7 @@ const CardTabBar: FC<TabBarProps> = ({
           <Text
             color={selectedColor}
             numberOfLines={1}
-            style={styles.textCenter}
+            style={[styles.textCenter, {flexShrink: 1}]}
             typography={'header_s_semibold'}>
             {tabs[selectedIndex]?.title || ''}
           </Text>
@@ -104,7 +105,10 @@ const CardTabBar: FC<TabBarProps> = ({
           )}
           {!tabs[selectedIndex]?.showDot && tabs[selectedIndex]?.badgeValue && (
             <View>
-              <Badge label={tabs[selectedIndex]?.badgeValue} />
+              <Badge
+                label={tabs[selectedIndex]?.badgeValue}
+                style={{marginLeft: Spacing.XS}}
+              />
             </View>
           )}
         </View>

package/tabBar/SrollableTabBar.tsx

@@ -11,12 +11,14 @@ const ScrollableTabBar: FC<TabBarProps> = ({
   selectedIndex,
   selectedColor,
   unselectedColor,
+  direction,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [itemWidthMap, setItemWidthMap] = useState<
     {width: number; x: number}[]
   >([]);
   const animatedWidth = useRef(new Animated.Value(0)).current;
+  const animX = useRef(new Animated.Value(0)).current;
   const scrollViewRef = useRef<ScrollView>(null);
 
   useEffect(() => {
@@ -24,11 +26,18 @@ const ScrollableTabBar: FC<TabBarProps> = ({
     scrollToIndex(selectedIndex);
   }, [selectedIndex, itemWidthMap]);
   const moveIndicator = () => {
-    Animated.timing(animatedWidth, {
-      toValue: itemWidthMap[selectedIndex]?.width || 0,
-      duration: 250,
-      useNativeDriver: false,
-    }).start();
+    Animated.parallel([
+      Animated.timing(animatedWidth, {
+        toValue: itemWidthMap[selectedIndex]?.width || 0,
+        duration: 250,
+        useNativeDriver: false,
+      }),
+      Animated.timing(animX, {
+        toValue: itemWidthMap[selectedIndex]?.x || 0,
+        duration: 250,
+        useNativeDriver: false,
+      }),
+    ]).start();
   };
 
   const onLayout = (e: LayoutChangeEvent, index: number) => {
@@ -66,6 +75,7 @@ const ScrollableTabBar: FC<TabBarProps> = ({
           tab={item}
           selectedColor={selectedColor}
           unselectedColor={unselectedColor}
+          direction={direction}
         />
       </View>
     );
@@ -88,7 +98,7 @@ const ScrollableTabBar: FC<TabBarProps> = ({
         style={[
           styles.indicator,
           {
-            left: itemWidthMap[selectedIndex]?.x || 0,
+            left: animX,
             width: animatedWidth,
             backgroundColor: selectedColor,
           },

package/tabItem/CardTabItem.tsx

@@ -2,7 +2,7 @@ import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import styles from '../styles';
-import {Badge, BadgeDot, Icon, Spacing, Text,} from '@momo-kits/foundation';
+import {Badge, BadgeDot, Icon, Spacing, Text} from '@momo-kits/foundation';
 
 const CardTabItem: FC<TabItemProps> = ({
   tab,
@@ -42,7 +42,7 @@ const CardTabItem: FC<TabItemProps> = ({
       )}
       <Text
         numberOfLines={1}
-        style={styles.textCenter}
+        style={[styles.textCenter, {flexShrink: 1}]}
         typography={'body_default_regular'}>
         {title}
       </Text>
@@ -56,7 +56,7 @@ const CardTabItem: FC<TabItemProps> = ({
       )}
       {!showDot && badgeValue && (
         <View>
-          <Badge label={badgeValue} />
+          <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
         </View>
       )}
     </TouchableOpacity>

package/tabItem/TabItem.tsx

@@ -47,6 +47,8 @@ const TabItem: FC<TabItemProps> = ({
             height: scaleSize(48),
             flexDirection: 'row',
             overflow: 'hidden',
+            paddingVertical: Spacing.M,
+            paddingHorizontal: Spacing.M,
           },
         ]}
         onPress={onPressTabItem}>
@@ -56,19 +58,23 @@ const TabItem: FC<TabItemProps> = ({
               style={[
                 styles.icon,
                 styles.iconHolder,
-                {marginRight: Spacing.XS},
+                {marginRight: Spacing.S},
               ]}>
               {renderIcon}
             </View>
           )}
         {!renderIcon && !!icon && (
           <Icon
-            style={[styles.icon, {marginRight: Spacing.XS}]}
+            style={[styles.icon, {marginRight: Spacing.S}]}
             source={icon}
             color={color}
           />
         )}
-        <Text numberOfLines={1} typography={typography} color={color}>
+        <Text
+          numberOfLines={1}
+          typography={typography}
+          color={color}
+          style={{flexShrink: 1}}>
           {title}
         </Text>
         {showDot && (
@@ -76,7 +82,7 @@ const TabItem: FC<TabItemProps> = ({
         )}
         {!showDot && badgeValue && (
           <View>
-            <Badge label={badgeValue} />
+            <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
           </View>
         )}
       </TouchableOpacity>
@@ -93,6 +99,8 @@ const TabItem: FC<TabItemProps> = ({
             height: scaleSize(68),
             flexDirection: 'column',
             overflow: 'hidden',
+            paddingHorizontal: Spacing.M,
+            paddingVertical: Spacing.M,
           },
         ]}
         onPress={onPressTabItem}>