@momo-kits/tab-view 0.92.3-tracking.1 → 0.92.6-rc.3

package/index.tsx

@@ -1,11 +1,12 @@
-import React, {FC, useCallback, useRef, useState} from 'react';
-import {LayoutChangeEvent, View} from 'react-native';
+import React, {FC, useCallback, useContext, useRef, useState} from 'react';
+import {Animated, LayoutChangeEvent, View} from 'react-native';
 import {Tab, TabViewProps} from './types';
 import TabBar from './tabBar/TabBar';
 import styles from './styles';
 import CardTabBar from './tabBar/CardTabBar';
 import ScrollableTabBar from './tabBar/SrollableTabBar';
 import PagerView from 'react-native-pager-view';
+import {ApplicationContext} from '@momo-kits/foundation';
 
 const TabView: FC<TabViewProps> = ({
   scrollable = false,
@@ -14,6 +15,9 @@ const TabView: FC<TabViewProps> = ({
   type = 'default',
   initialPage = 0,
   pagerProps,
+  direction,
+  selectedColor,
+  unselectedColor,
 }) => {
   const startPage =
     initialPage > tabs.length - 1 ? tabs.length - 1 : initialPage;
@@ -21,7 +25,9 @@ const TabView: FC<TabViewProps> = ({
   const [tabBarWidth, setTabBarWidth] = useState(0);
   const isCardTab = type === 'card';
   const pagerRef = useRef<PagerView>(null);
-  const [scrollX, setScrollX] = useState(0);
+  const scrollX = useRef(new Animated.Value(0));
+  const lazy = useRef([selectedIndex]).current;
+  const {theme} = useContext(ApplicationContext);
   const _onPressTabItem = (index: number) => {
     pagerRef.current?.setPage(index);
     onPressTabItem?.(index);
@@ -32,10 +38,12 @@ const TabView: FC<TabViewProps> = ({
     setTabBarWidth(e.nativeEvent.layout.width);
   };
 
-  const onPageSelected = (e: {
-    nativeEvent: {position: React.SetStateAction<number>};
-  }) => {
-    setSelectedIndex(e.nativeEvent.position);
+  const onPageSelected = (e: {nativeEvent: {position: number}}) => {
+    const {position} = e.nativeEvent;
+    if (!lazy.includes(position)) {
+      lazy.push(position);
+    }
+    setSelectedIndex(position);
   };
 
   let TabBarComponent = scrollable ? ScrollableTabBar : TabBar;
@@ -46,11 +54,12 @@ const TabView: FC<TabViewProps> = ({
 
   const onPageScroll = (e: {nativeEvent: {position: any; offset: any}}) => {
     const {position, offset} = e.nativeEvent;
-    setScrollX(position + offset);
+    scrollX.current.setValue(position + offset);
   };
 
   const renderScreen = useCallback(
-    (tab: Tab) => {
+    (tab: Tab, index: number) => {
+      if (!lazy.includes(index)) return <View />;
       return <View>{tab.component}</View>;
     },
     [tabs],
@@ -64,7 +73,10 @@ const TabView: FC<TabViewProps> = ({
           selectedIndex={selectedIndex}
           tabs={tabs}
           containerWidth={tabBarWidth}
-          scrollX={scrollX}
+          scrollX={scrollX.current}
+          direction={direction}
+          selectedColor={selectedColor ?? theme.colors.primary}
+          unselectedColor={unselectedColor ?? theme.colors.text.default}
         />
       </View>
 
@@ -75,7 +87,7 @@ const TabView: FC<TabViewProps> = ({
         onPageSelected={onPageSelected}
         style={styles.pagerView}
         initialPage={startPage}>
-        {tabs.map(tab => renderScreen(tab))}
+        {tabs.map((tab, index) => renderScreen(tab, index))}
       </PagerView>
     </View>
   );

package/package.json

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

package/styles.ts

@@ -14,7 +14,6 @@ export default StyleSheet.create({
     borderBottomWidth: 1,
   },
   tabItem: {
-    padding: Spacing.M,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -26,9 +25,15 @@ export default StyleSheet.create({
     bottom: 0,
   },
   icon: {
+    borderRadius: Radius.XS,
+  },
+  iconHolder: {
+    marginRight: Spacing.XS,
     width: 24,
     height: 24,
-    borderRadius: Radius.XS,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
   },
   tabItemWrapper: {
     paddingHorizontal: Spacing.XS,
@@ -65,14 +70,20 @@ export default StyleSheet.create({
   },
   dotSmall: {
     position: 'absolute',
-    top: -Spacing.XXS,
-    right: -Spacing.XXS,
+    top: -Spacing.XS,
+    right: -Spacing.XS,
     zIndex: 2,
   },
   dot: {
     position: 'absolute',
     top: -Spacing.S,
-    right: -Spacing.XS,
+    right: -Spacing.S,
+    zIndex: 2,
+  },
+  badge: {
+    position: 'absolute',
+    top: -Spacing.S,
+    left: Spacing.S,
     zIndex: 2,
   },
 });

package/tabBar/CardTabBar.tsx

@@ -4,6 +4,8 @@ import {TabBarProps} from '../types';
 import styles from '../styles';
 import {
   ApplicationContext,
+  Badge,
+  BadgeDot,
   Icon,
   Radius,
   Shadow,
@@ -18,6 +20,8 @@ const CardTabBar: FC<TabBarProps> = ({
   onPressTabItem,
   containerWidth,
   selectedIndex,
+  selectedColor,
+  unselectedColor,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const itemWidth = containerWidth / tabs.length;
@@ -36,6 +40,8 @@ const CardTabBar: FC<TabBarProps> = ({
               onPressTabItem?.(index);
             }}
             width={itemWidth}
+            selectedColor={selectedColor}
+            unselectedColor={unselectedColor}
           />
         );
       })}
@@ -61,19 +67,46 @@ const CardTabBar: FC<TabBarProps> = ({
               borderTopLeftRadius: Radius.M,
             },
           ]}>
-          {!!tabs[selectedIndex]?.icon && (
+          {!!tabs[selectedIndex]?.renderIcon &&
+            !['string', 'boolean', 'number'].includes(
+              typeof tabs[selectedIndex]?.renderIcon,
+            ) && (
+              <View
+                style={[
+                  styles.icon,
+                  styles.iconHolder,
+                  {marginRight: Spacing.XS},
+                ]}>
+                {tabs[selectedIndex]?.renderIcon}
+              </View>
+            )}
+          {!tabs[selectedIndex]?.renderIcon && !!tabs[selectedIndex]?.icon && (
             <Icon
-              source={tabs[selectedIndex]?.icon}
+              color={selectedColor}
+              source={tabs[selectedIndex]?.icon as string}
               style={[styles.icon, {marginRight: Spacing.XS}]}
             />
           )}
           <Text
-            color={theme.colors.primary}
+            color={selectedColor}
             numberOfLines={1}
             style={styles.textCenter}
             typography={'header_s_semibold'}>
             {tabs[selectedIndex]?.title || ''}
           </Text>
+          {tabs[selectedIndex]?.showDot && (
+            <BadgeDot
+              size={tabs[selectedIndex]?.dotSize ?? 'small'}
+              style={{
+                marginLeft: Spacing.XS,
+              }}
+            />
+          )}
+          {!tabs[selectedIndex]?.showDot && tabs[selectedIndex]?.badgeValue && (
+            <View>
+              <Badge label={tabs[selectedIndex]?.badgeValue} />
+            </View>
+          )}
         </View>
         {!isLast && <PathSvg style={{right: 8}} />}
       </View>

package/tabBar/SrollableTabBar.tsx

@@ -9,6 +9,8 @@ const ScrollableTabBar: FC<TabBarProps> = ({
   tabs = [],
   onPressTabItem,
   selectedIndex,
+  selectedColor,
+  unselectedColor,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [itemWidthMap, setItemWidthMap] = useState<
@@ -62,6 +64,8 @@ const ScrollableTabBar: FC<TabBarProps> = ({
           }}
           active={isActive}
           tab={item}
+          selectedColor={selectedColor}
+          unselectedColor={unselectedColor}
         />
       </View>
     );
@@ -86,7 +90,7 @@ const ScrollableTabBar: FC<TabBarProps> = ({
           {
             left: itemWidthMap[selectedIndex]?.x || 0,
             width: animatedWidth,
-            backgroundColor: theme.colors.primary,
+            backgroundColor: selectedColor,
           },
         ]}
       />

package/tabBar/TabBar.tsx

@@ -11,9 +11,11 @@ const TabBar: FC<TabBarProps> = ({
   onPressTabItem,
   containerWidth = 0,
   scrollX,
+  direction,
+  selectedColor,
+  unselectedColor,
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const itemWidth = containerWidth / tabs.length;
 
   return (
@@ -35,6 +37,9 @@ const TabBar: FC<TabBarProps> = ({
             }}
             active={selectedIndex === index}
             tab={tab}
+            direction={direction}
+            selectedColor={selectedColor}
+            unselectedColor={unselectedColor}
           />
         );
       })}
@@ -42,9 +47,16 @@ const TabBar: FC<TabBarProps> = ({
         style={[
           styles.indicator,
           {
-            left: scrollX * itemWidth + Spacing.XS,
+            left: scrollX.interpolate({
+              inputRange: [0, tabs.length - 1],
+              outputRange: [
+                Spacing.XS,
+                (tabs.length - 1) * itemWidth + Spacing.XS,
+              ],
+              extrapolate: 'clamp',
+            }),
             width: itemWidth - Spacing.XS * 2,
-            backgroundColor: theme.colors.primary,
+            backgroundColor: selectedColor,
           },
         ]}
       />

package/tabItem/CardTabItem.tsx

@@ -1,27 +1,41 @@
-import React, {FC, useContext} from 'react';
-import {TouchableOpacity} from 'react-native';
+import React, {FC} from 'react';
+import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import styles from '../styles';
-import {ApplicationContext, Icon, Spacing, Text} from '@momo-kits/foundation';
+import {Badge, BadgeDot, Icon, Spacing, Text,} from '@momo-kits/foundation';
 
 const CardTabItem: FC<TabItemProps> = ({
   tab,
   active,
   onPressTabItem,
   width,
+  selectedColor,
+  unselectedColor,
 }) => {
-  const {title, icon} = tab;
-  const {theme} = useContext(ApplicationContext);
-  const color = active ? theme.colors.primary : theme.colors.text.default;
-  const tintColor = icon?.includes('http') ? null : color;
+  const {
+    title,
+    icon,
+    renderIcon,
+    showDot = false,
+    dotSize = 'small',
+    badgeValue,
+  } = tab;
+  const color = active ? selectedColor : unselectedColor;
 
   return (
     <TouchableOpacity
       onPress={onPressTabItem}
       style={[styles.cardTabItem, {width}]}>
-      {!!icon && (
+      {renderIcon &&
+        !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
+          <View
+            style={[styles.icon, styles.iconHolder, {marginRight: Spacing.XS}]}>
+            {renderIcon}
+          </View>
+        )}
+      {!renderIcon && !!icon && (
         <Icon
-          color={tintColor}
+          color={color}
           style={[styles.icon, {marginRight: Spacing.XS}]}
           source={icon}
         />
@@ -32,6 +46,19 @@ const CardTabItem: FC<TabItemProps> = ({
         typography={'body_default_regular'}>
         {title}
       </Text>
+      {showDot && (
+        <BadgeDot
+          size={dotSize}
+          style={{
+            marginLeft: Spacing.XS,
+          }}
+        />
+      )}
+      {!showDot && badgeValue && (
+        <View>
+          <Badge label={badgeValue} />
+        </View>
+      )}
     </TouchableOpacity>
   );
 };

package/tabItem/TabItem.tsx

@@ -1,60 +1,140 @@
 import React, {FC, useContext} from 'react';
-import {ImageStyle} from 'react-native-fast-image';
-import {TouchableOpacity, View, ViewStyle} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import {
   ApplicationContext,
+  Badge,
   BadgeDot,
   Icon,
+  scaleSize,
   Spacing,
   Text,
   Typography,
 } from '@momo-kits/foundation';
 import styles from '../styles';
 
-const TabItem: FC<TabItemProps> = ({tab, active, onPressTabItem, width}) => {
+const TabItem: FC<TabItemProps> = ({
+  tab,
+  active,
+  onPressTabItem,
+  width,
+  direction,
+  selectedColor,
+  unselectedColor,
+}) => {
   const {theme} = useContext(ApplicationContext);
   const {
     title,
     icon,
-    direction = 'row',
     showDot = false,
     dotSize = 'small',
+    badgeValue,
+    renderIcon,
   } = tab;
   const typography: Typography = active
     ? 'header_s_semibold'
     : 'body_default_regular';
-  const color = active ? theme.colors.primary : theme.colors.text.default;
-  const tintColor = icon?.includes('http') ? null : color;
+  const color = active ? selectedColor : unselectedColor;
   const dotStyle = dotSize === 'large' ? styles.dot : styles.dotSmall;
-  const iconStyle: ViewStyle =
-    direction === 'row'
-      ? {marginRight: Spacing.XS}
-      : {marginBottom: Spacing.XS};
 
-  return (
-    <TouchableOpacity
-      onPress={onPressTabItem}
-      style={[styles.tabItem, {width, flexDirection: direction}]}>
-      {!!icon && (
-        <View>
-          {showDot && <BadgeDot style={dotStyle} size={dotSize} />}
+  const renderRowItem = () => {
+    return (
+      <TouchableOpacity
+        style={[
+          styles.tabItem,
+          {
+            width,
+            height: scaleSize(48),
+            flexDirection: 'row',
+            overflow: 'hidden',
+          },
+        ]}
+        onPress={onPressTabItem}>
+        {renderIcon &&
+          !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
+            <View
+              style={[
+                styles.icon,
+                styles.iconHolder,
+                {marginRight: Spacing.XS},
+              ]}>
+              {renderIcon}
+            </View>
+          )}
+        {!renderIcon && !!icon && (
           <Icon
-            color={tintColor}
-            style={[styles.icon, iconStyle as ImageStyle]}
+            style={[styles.icon, {marginRight: Spacing.XS}]}
             source={icon}
+            color={color}
           />
+        )}
+        <Text numberOfLines={1} typography={typography} color={color}>
+          {title}
+        </Text>
+        {showDot && (
+          <BadgeDot size={dotSize} style={{marginLeft: Spacing.XS}} />
+        )}
+        {!showDot && badgeValue && (
+          <View>
+            <Badge label={badgeValue} />
+          </View>
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  const renderColumnItem = () => {
+    return (
+      <TouchableOpacity
+        style={[
+          styles.tabItem,
+          {
+            width,
+            height: scaleSize(68),
+            flexDirection: 'column',
+            overflow: 'hidden',
+          },
+        ]}
+        onPress={onPressTabItem}>
+        <View>
+          {renderIcon &&
+            !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
+              <View
+                style={[
+                  styles.icon,
+                  styles.iconHolder,
+                  {marginBottom: Spacing.XS},
+                ]}>
+                {renderIcon}
+              </View>
+            )}
+          {!renderIcon && !!icon && (
+            <Icon
+              style={[
+                styles.icon,
+                {
+                  marginBottom: Spacing.XS,
+                },
+              ]}
+              source={icon}
+              color={color}
+            />
+          )}
+          {(renderIcon || !!icon) && showDot && (
+            <BadgeDot style={dotStyle} size={dotSize} />
+          )}
+          {(renderIcon || !!icon) && !showDot && badgeValue && (
+            <Badge label={badgeValue} style={styles.badge} />
+          )}
         </View>
-      )}
-      <Text
-        style={styles.textCenter}
-        numberOfLines={1}
-        color={color}
-        typography={typography}>
-        {title}
-      </Text>
-    </TouchableOpacity>
-  );
+        <Text numberOfLines={1} typography={typography} color={color}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return direction === 'row' ? renderRowItem() : renderColumnItem();
 };
 
 export default TabItem;

package/types.ts

@@ -1,5 +1,6 @@
-import {ReactElement} from 'react';
+import {ReactElement, ReactNode} from 'react';
 import {PagerViewProps} from 'react-native-pager-view';
+import {Animated} from 'react-native';
 
 export type Tab = {
   /**
@@ -12,10 +13,7 @@ export type Tab = {
    */
   icon?: string;
 
-  /**
-   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
-   */
-  direction?: 'row' | 'column';
+  renderIcon?: ReactNode;
 
   /**
    * The main component or content to be displayed when this tab is active.
@@ -31,6 +29,8 @@ export type Tab = {
    * Optional. Specifies the size of the dot indicator, either 'small' or 'large'.
    */
   dotSize?: 'small' | 'large';
+
+  badgeValue?: string | number;
 };
 
 export type TabItemProps = {
@@ -53,6 +53,15 @@ export type TabItemProps = {
    * Optional. Specifies the width of the tab item. Useful for customizing layout and appearance.
    */
   width?: number;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
 };
 
 export type TabViewProps = {
@@ -85,6 +94,15 @@ export type TabViewProps = {
    * Optional. Additional properties to pass to the underlying pager view component.
    */
   pagerProps?: PagerViewProps;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
 };
 
 /**
@@ -114,5 +132,14 @@ export type TabBarProps = {
   /**
    * Represents the horizontal scroll position in a scrollable tab bar.
    */
-  scrollX: number;
+  scrollX: Animated.Value;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  selectedColor?: string;
+
+  unselectedColor?: string;
 };