@momo-kits/tab-view 0.92.6-rc.9 → 0.92.8-beta.0

package/index.tsx

@@ -30,6 +30,11 @@ const TabView: FC<TabViewProps> = ({
   const {theme} = useContext(ApplicationContext);
   const _onPressTabItem = (index: number) => {
     pagerRef.current?.setPage(index);
+
+    if (!lazy.includes(index)) {
+      lazy.push(index);
+    }
+
     onPressTabItem?.(index);
     setSelectedIndex(index);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/tab-view",
-    "version": "0.92.6-rc.9",
+    "version": "0.92.8-beta.0",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -14,4 +14,4 @@
         "@momo-platform/versions": "4.1.11"
     },
     "license": "MoMo"
-}
+}

package/publish.sh

@@ -1,29 +1,28 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-
-# #babel component to dist
-#babel ./dist -d dist --copy-files
-
-#copy option
-#cp -r ./src/ dist
-
-
-#npm login
-#publish dist to npm
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag beta --access=public
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/tab-view@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm version $(npm view @momo-kits/tab-view@latest version)
+  npm version prerelease --preid=rc
+  npm publish --tag latest --access=public
+else
+  npm version $(npm view @momo-kits/tab-view@beta version)
+  npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 cd ..
 rm -rf dist
-
-
-##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/tab-view new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/tab-view"}'

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,19 +65,18 @@ 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 &&
-            !['string', 'boolean', 'number'].includes(
-              typeof tabs[selectedIndex]?.renderIcon,
-            ) && (
+            typeof tabs[selectedIndex]?.renderIcon === 'function' && (
               <View
                 style={[
                   styles.icon,
                   styles.iconHolder,
                   {marginRight: Spacing.XS},
                 ]}>
-                {tabs[selectedIndex]?.renderIcon}
+                {tabs[selectedIndex]?.renderIcon?.(true)}
               </View>
             )}
           {!tabs[selectedIndex]?.renderIcon && !!tabs[selectedIndex]?.icon && (
@@ -90,7 +89,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 +103,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

@@ -1,8 +1,7 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import {
-  ApplicationContext,
   Badge,
   BadgeDot,
   Icon,
@@ -22,7 +21,6 @@ const TabItem: FC<TabItemProps> = ({
   selectedColor,
   unselectedColor,
 }) => {
-  const {theme} = useContext(ApplicationContext);
   const {
     title,
     icon,
@@ -47,28 +45,29 @@ const TabItem: FC<TabItemProps> = ({
             height: scaleSize(48),
             flexDirection: 'row',
             overflow: 'hidden',
+            paddingVertical: Spacing.M,
+            paddingHorizontal: Spacing.M,
           },
         ]}
         onPress={onPressTabItem}>
-        {renderIcon &&
-          !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
-            <View
-              style={[
-                styles.icon,
-                styles.iconHolder,
-                {marginRight: Spacing.XS},
-              ]}>
-              {renderIcon}
-            </View>
-          )}
+        {renderIcon && typeof renderIcon === 'function' && (
+          <View
+            style={[styles.icon, styles.iconHolder, {marginRight: Spacing.S}]}>
+            {renderIcon(active)}
+          </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 +75,7 @@ const TabItem: FC<TabItemProps> = ({
         )}
         {!showDot && badgeValue && (
           <View>
-            <Badge label={badgeValue} />
+            <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
           </View>
         )}
       </TouchableOpacity>
@@ -93,21 +92,22 @@ const TabItem: FC<TabItemProps> = ({
             height: scaleSize(68),
             flexDirection: 'column',
             overflow: 'hidden',
+            paddingHorizontal: Spacing.M,
+            paddingVertical: Spacing.M,
           },
         ]}
         onPress={onPressTabItem}>
         <View>
-          {renderIcon &&
-            !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
-              <View
-                style={[
-                  styles.icon,
-                  styles.iconHolder,
-                  {marginBottom: Spacing.XS},
-                ]}>
-                {renderIcon}
-              </View>
-            )}
+          {renderIcon && typeof renderIcon === 'function' && (
+            <View
+              style={[
+                styles.icon,
+                styles.iconHolder,
+                {marginBottom: Spacing.XS},
+              ]}>
+              {renderIcon(active)}
+            </View>
+          )}
           {!renderIcon && !!icon && (
             <Icon
               style={[

package/types.ts

@@ -1,4 +1,4 @@
-import {ReactElement, ReactNode} from 'react';
+import {ReactElement} from 'react';
 import {PagerViewProps} from 'react-native-pager-view';
 import {Animated} from 'react-native';
 
@@ -13,7 +13,7 @@ export type Tab = {
    */
   icon?: string;
 
-  renderIcon?: ReactNode;
+  renderIcon?: (active: boolean) => ReactElement;
 
   /**
    * The main component or content to be displayed when this tab is active.