@momo-kits/tab-view 0.125.5-beta.1 → 0.150.1-beta.2

package/index.tsx

@@ -38,9 +38,8 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
     style,
     accessibilityLabel,
     accessibilityLabelForSelectedCard,
-    autoHeight = false,
   },
-  ref
+  ref,
 ) => {
   const startPage =
     initialPage > tabs.length - 1 ? tabs.length - 1 : initialPage;
@@ -49,8 +48,6 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   const isCardTab = type === 'card';
   const pagerRef = useRef<PagerView>(null);
   const scrollX = useRef(new Animated.Value(startPage));
-  const heightsRef = useRef<number[]>([]);
-  const animatedHeight = useRef(new Animated.Value(0)).current;
   const lazy = useRef([selectedIndex]).current;
   const {theme} = useContext(ApplicationContext);
   const app = useContext<any>(MiniAppContext);
@@ -65,16 +62,6 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
     return id;
   }, [componentName, accessibilityLabel, app, screen]);
 
-  const selectedHeight = heightsRef.current[selectedIndex] || 0;
-  const hasMeasuredSelected = autoHeight && selectedHeight > 0;
-
-  const containerStyle = useMemo(() => {
-    if (hasMeasuredSelected) {
-      return [styles.tabView, {flex: 0}];
-    }
-    return styles.tabView;
-  }, [hasMeasuredSelected]);
-
   const _onPressTabItem = (index: number) => {
     onPressTabItem?.(index);
     pagerRef.current?.setPage(index);
@@ -95,10 +82,6 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
       lazy.push(position);
     }
     setSelectedIndex(position);
-    if (autoHeight) {
-      const h = heightsRef.current[position];
-      animatedHeight.setValue(h);
-    }
     pagerProps?.onPageSelected?.(e);
   };
 
@@ -111,33 +94,15 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   const onPageScroll = (e: PagerViewOnPageScrollEvent) => {
     const {position, offset} = e.nativeEvent;
     scrollX.current.setValue(position + offset);
-    if (autoHeight) {
-      const current = heightsRef.current[position] ?? 0;
-      const rawNext = heightsRef.current[position + 1];
-      const next =
-        typeof rawNext === 'number' && rawNext > 0 ? rawNext : current;
-      const value = current + (next - current) * offset;
-      animatedHeight.setValue(value);
-    }
     pagerProps?.onPageScroll?.(e);
   };
 
-  const onLayoutPage = (index: number) => (e: LayoutChangeEvent) => {
-    const height = e.nativeEvent.layout.height;
-    heightsRef.current[index] = height;
-    if (autoHeight) {
-      if (index === selectedIndex) {
-        animatedHeight.setValue(height);
-      }
-    }
-  };
-
   const renderScreen = useCallback(
     (tab: Tab, index: number) => {
-      if (!lazy.includes(index)) return <View />;
-      return <View onLayout={onLayoutPage(index)}>{tab.component}</View>;
+      if (!lazy.includes(index)) return <View key={`TabView-page-${index}`} />;
+      return <View key={`TabView-page-${index}`}>{tab.component}</View>;
     },
-    [tabs, lazy, selectedIndex, autoHeight]
+    [lazy],
   );
 
   useImperativeHandle(ref, () => ({
@@ -149,7 +114,7 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   return (
     <View
       onLayout={onLayout}
-      style={containerStyle}
+      style={[styles.tabView, {flex: 1}]}
       accessibilityLabel={componentId}>
       <Animated.View style={style}>
         <TabBarComponent
@@ -165,24 +130,15 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
         />
       </Animated.View>
 
-      <Animated.View
-        style={
-          autoHeight
-            ? hasMeasuredSelected
-              ? [{height: animatedHeight, overflow: 'hidden'}]
-              : [{flex: 1}]
-            : [{flex: 1}]
-        }>
-        <PagerView
-          {...pagerProps}
-          onPageScroll={onPageScroll}
-          ref={pagerRef}
-          onPageSelected={onPageSelected}
-          style={styles.pagerView}
-          initialPage={startPage}>
-          {tabs.map((tab, index) => renderScreen(tab, index))}
-        </PagerView>
-      </Animated.View>
+      <PagerView
+        {...pagerProps}
+        onPageScroll={onPageScroll}
+        ref={pagerRef}
+        onPageSelected={onPageSelected}
+        style={styles.pagerView}
+        initialPage={startPage}>
+        {tabs.map((tab, index) => renderScreen(tab, index))}
+      </PagerView>
     </View>
   );
 };

package/package.json

@@ -1,20 +1,19 @@
 {
-  "name": "@momo-kits/tab-view",
-  "version": "0.125.5-beta.1",
-  "private": false,
-  "main": "index.tsx",
-  "dependencies": {},
-  "peerDependencies": {
-    "@momo-kits/foundation": "latest",
-    "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "react-native": ">=0.55"
-  },
-  "devDependencies": {
-    "@momo-platform/versions": "4.1.11"
-  },
-  "license": "MoMo",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+    "name": "@momo-kits/tab-view",
+    "version": "0.150.1-beta.2",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {}
+}

package/publish.sh

@@ -1,12 +1,5 @@
 #!/bin/bash
 
-# Prepare dist files
-rm -rf dist
-mkdir dist
-rsync -r --exclude=/dist ./* dist
-cd dist
-
-
 if [ "$1" == "stable" ]; then
   npm version $(npm view @momo-kits/foundation@stable version)
   npm version patch
@@ -14,15 +7,13 @@ if [ "$1" == "stable" ]; then
 elif [ "$1" == "latest" ]; then
   npm version $(npm view @momo-kits/foundation@latest version)
   npm publish --tag latest --access=public
-else
+elif [ "$1" == "beta" ]; then
   npm version $(npm view @momo-kits/tab-view@beta version)
   npm version prerelease --preid=beta
   npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
 fi
 
 PACKAGE_NAME=$(npm pkg get name)
 NEW_PACKAGE_VERSION=$(npm pkg get version)
-
-# Clean up
-cd ..
-rm -rf dist

package/styles.ts

@@ -8,7 +8,6 @@ export default StyleSheet.create({
   },
   tabView: {
     width: '100%',
-    flex: 1,
   },
   tabBar: {
     flexDirection: 'row',

package/tabBar/CardTabBar.tsx

@@ -61,6 +61,7 @@ const CardTabBar: FC<TabBarProps> = ({
       {tabs.map((tab, index) => {
         return (
           <CardTabItem
+            key={`card-tab-item-${tab?.title ?? index}`}
             tab={tab}
             active={selectedIndex === index}
             onPressTabItem={() => {

package/tabBar/SrollableTabBar.tsx

@@ -6,10 +6,10 @@ import React, {
   useState,
   useCallback,
 } from 'react';
-import {Animated, LayoutChangeEvent, ScrollView, View} from 'react-native';
-import {Tab, TabBarProps} from '../types';
+import { Animated, LayoutChangeEvent, ScrollView, View } from 'react-native';
+import { Tab, TabBarProps } from '../types';
 import styles from '../styles';
-import {ApplicationContext} from '@momo-kits/foundation';
+import { ApplicationContext } from '@momo-kits/foundation';
 import TabItem from '../tabItem/TabItem';
 
 const ScrollableTabBar: FC<TabBarProps> = ({
@@ -20,9 +20,9 @@ const ScrollableTabBar: FC<TabBarProps> = ({
   unselectedColor,
   direction,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const [itemWidthMap, setItemWidthMap] = useState<
-    {width: number; x: number}[]
+    { width: number; x: number }[]
   >([]);
   const animatedWidth = useRef(new Animated.Value(0)).current;
   const animX = useRef(new Animated.Value(0)).current;
@@ -34,7 +34,7 @@ const ScrollableTabBar: FC<TabBarProps> = ({
   const setMeasured = useCallback((index: number, width: number, x: number) => {
     setItemWidthMap(prev => {
       const next = prev.slice();
-      next[index] = {width, x};
+      next[index] = { width, x };
       return next;
     });
   }, []);
@@ -59,27 +59,27 @@ const ScrollableTabBar: FC<TabBarProps> = ({
                 _y: number,
                 w: number,
                 _h: number,
-                pageX: number
+                pageX: number,
               ) => {
                 container?.measure?.(
                   (
-                    // _cx: number,
-                    // _cy: number,
-                    // _cw: number,
-                    // _ch: number,
-                    cPageX: number
+                    _cx: number,
+                    _cy: number,
+                    _cw: number,
+                    _ch: number,
+                    cPageX: number,
                   ) => {
                     setMeasured(index, w, pageX - cPageX);
                     done?.();
-                  }
+                  },
                 );
-              }
+              },
             );
-          }
+          },
         );
       }
     },
-    [setMeasured]
+    [setMeasured],
   );
 
   const ensureMeasured = useCallback(
@@ -90,7 +90,7 @@ const ScrollableTabBar: FC<TabBarProps> = ({
       }
       measureIndex(index, callback);
     },
-    [itemWidthMap, measureIndex]
+    [itemWidthMap, measureIndex],
   );
 
   const moveIndicator = useCallback(() => {
@@ -112,10 +112,10 @@ const ScrollableTabBar: FC<TabBarProps> = ({
 
   const onLayout = useCallback(
     (e: LayoutChangeEvent, index: number) => {
-      const {width, x} = e.nativeEvent.layout;
+      const { width, x } = e.nativeEvent.layout;
       if (width != null && x != null) setMeasured(index, width, x);
     },
-    [setMeasured]
+    [setMeasured],
   );
 
   const scrollToIndex = useCallback(
@@ -123,9 +123,9 @@ const ScrollableTabBar: FC<TabBarProps> = ({
       const targetIndex = Math.max(0, index - 1);
       const pos = itemWidthMap[targetIndex];
       if (!pos) return;
-      scrollViewRef.current?.scrollTo({x: pos.x, animated: true});
+      scrollViewRef.current?.scrollTo({ x: pos.x, animated: true });
     },
-    [itemWidthMap]
+    [itemWidthMap],
   );
 
   const _onPressTabItem = useCallback(
@@ -135,7 +135,7 @@ const ScrollableTabBar: FC<TabBarProps> = ({
         onPressTabItem?.(index);
       });
     },
-    [ensureMeasured, scrollToIndex, onPressTabItem]
+    [ensureMeasured, scrollToIndex, onPressTabItem],
   );
 
   useEffect(() => {
@@ -152,8 +152,8 @@ const ScrollableTabBar: FC<TabBarProps> = ({
     });
   }, [selectedIndex, ensureMeasured, moveIndicator, scrollToIndex]);
 
-  const renderItem = (params: {item: Tab; index: number}) => {
-    const {item, index} = params;
+  const renderItem = (params: { item: Tab; index: number }) => {
+    const { item, index } = params;
     const isActive = selectedIndex === index;
 
     return (
@@ -162,7 +162,8 @@ const ScrollableTabBar: FC<TabBarProps> = ({
         ref={el => (itemRefs.current[index] = el)}
         collapsable={false}
         onLayout={e => onLayout(e, index)}
-        style={styles.tabItemWrapper}>
+        style={styles.tabItemWrapper}
+      >
         <TabItem
           key={`Tab View Item ${item.title}-${index}`}
           onPressTabItem={() => {
@@ -183,19 +184,21 @@ const ScrollableTabBar: FC<TabBarProps> = ({
       ref={scrollViewRef}
       horizontal
       showsHorizontalScrollIndicator={false}
-      contentContainerStyle={{position: 'relative'}}
+      contentContainerStyle={{ position: 'relative' }}
       style={[
         styles.tabBar,
         {
           borderColor: theme.colors.border.default,
           backgroundColor: theme.colors.background.surface,
         },
-      ]}>
+      ]}
+    >
       <View
         ref={contentRef}
         collapsable={false}
-        style={{position: 'relative', flexDirection: 'row'}}>
-        {tabs.map((item, index) => renderItem({item, index}))}
+        style={{ position: 'relative', flexDirection: 'row' }}
+      >
+        {tabs.map((item, index) => renderItem({ item, index }))}
         <Animated.View
           style={[
             styles.indicator,

package/tabItem/CardTabItem.tsx

@@ -42,7 +42,7 @@ const CardTabItem: FC<TabItemProps> = ({
     }
     let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
     return id;
-  }, [componentName, accessibilityLabel, app, screen]);
+  }, [accessibilityLabel, app.appId, app.code, screen.screenName, title]);
 
   const renderIconTabItem = () => {
     return (

package/tabItem/TabItem.tsx

@@ -1,6 +1,6 @@
-import React, {FC, useContext, useMemo} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import {TabItemProps} from '../types';
+import React, { FC, useContext, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { TabItemProps } from '../types';
 import {
   Badge,
   BadgeDot,
@@ -46,9 +46,9 @@ const TabItem: FC<TabItemProps> = ({
     if (accessibilityLabel) {
       return accessibilityLabel;
     }
-    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
-    return id;
-  }, [componentName, accessibilityLabel, app, screen]);
+
+    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
+  }, [accessibilityLabel, app.appId, app.code, screen.screenName, title]);
 
   const renderRowItem = () => {
     return (

package/types.ts

@@ -111,13 +111,6 @@ export type TabViewProps = {
   accessibilityLabel?: string;
 
   accessibilityLabelForSelectedCard?: string;
-
-  /**
-   * Optional. If `true`, automatically adjusts the height of the pager to match
-   * the currently visible tab's content height. When swiping between tabs, the
-   * height smoothly interpolates between the two pages' heights.
-   */
-  autoHeight?: boolean;
 };
 
 /**