@momo-kits/tab-view 0.0.55-alpha.31 → 0.74.2-react-native.1

package/assets/Path.tsx

@@ -0,0 +1,16 @@
+import React, {FC} from 'react';
+import {ViewProps} from 'react-native';
+import Svg, {Path} from 'react-native-svg';
+
+const PathSvg: FC<ViewProps> = ({style}) => {
+  return (
+    <Svg width="28" height="44" viewBox="0 0 28 44" fill="none" style={style}>
+      <Path
+        d="M0 0H0.60765C6.47582 0 11.4819 4.23831 12.4602 10.0244C13.9248 18.6872 15.9294 30.37 16.6925 34C17.9536 40 22.259 44 27.9996 44H0V0Z"
+        fill="white"
+      />
+    </Svg>
+  );
+};
+
+export default PathSvg;

package/index.tsx

@@ -1,15 +1,85 @@
-export { default as TabBar } from './TabBar';
-export type { Props as TabBarProps } from './TabBar';
+import React, {FC, useCallback, useRef, useState} from 'react';
+import {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';
 
-export { default as TabView } from './TabView';
-export type { Props as TabViewProps } from './TabView';
+const TabView: FC<TabViewProps> = ({
+  scrollable = false,
+  tabs = [],
+  onPressTabItem,
+  type = 'default',
+  initialPage = 0,
+  pagerProps,
+}) => {
+  const startPage =
+    initialPage > tabs.length - 1 ? tabs.length - 1 : initialPage;
+  const [selectedIndex, setSelectedIndex] = useState(startPage);
+  const [tabBarWidth, setTabBarWidth] = useState(0);
+  const isCardTab = type === 'card';
+  const pagerRef = useRef<PagerView>(null);
+  const [scrollX, setScrollX] = useState(0);
+  const _onPressTabItem = (index: number) => {
+    pagerRef.current?.setPage(index);
+    onPressTabItem?.(index);
+    setSelectedIndex(index);
+  };
 
-export { default as TabBarIndicator } from './TabBarIndicator';
-export type { Props as TabBarIndicatorProps } from './TabBarIndicator';
+  const onLayout = (e: LayoutChangeEvent) => {
+    setTabBarWidth(e.nativeEvent.layout.width);
+  };
 
-export { default as TabBarItem } from './TabBarItem';
-export type { Props as TabBarItemProps } from './TabBarItem';
+  const onPageSelected = (e: {
+    nativeEvent: {position: React.SetStateAction<number>};
+  }) => {
+    setSelectedIndex(e.nativeEvent.position);
+  };
 
-export { default as SceneMap } from './SceneMap';
+  let TabBarComponent = scrollable ? ScrollableTabBar : TabBar;
 
-export type { Route, NavigationState, SceneRendererProps } from './types';
+  if (isCardTab) {
+    TabBarComponent = CardTabBar;
+  }
+
+  const onPageScroll = (e: {nativeEvent: {position: any; offset: any}}) => {
+    const {position, offset} = e.nativeEvent;
+    setScrollX(position + offset);
+  };
+
+  const renderScreen = useCallback(
+    (tab: Tab) => {
+      return <View>{tab.component}</View>;
+    },
+    [tabs],
+  );
+
+  return (
+    <View onLayout={onLayout} style={[styles.tabView, {flex: 1}]}>
+      <View>
+        <TabBarComponent
+          onPressTabItem={_onPressTabItem}
+          selectedIndex={selectedIndex}
+          tabs={tabs}
+          containerWidth={tabBarWidth}
+          scrollX={scrollX}
+        />
+      </View>
+
+      <PagerView
+        {...pagerProps}
+        onPageScroll={onPageScroll}
+        ref={pagerRef}
+        onPageSelected={onPageSelected}
+        style={styles.pagerView}
+        initialPage={startPage}>
+        {tabs.map(tab => renderScreen(tab))}
+      </PagerView>
+    </View>
+  );
+};
+
+export {CardTabBar, ScrollableTabBar, TabBar, TabView};
+export type {TabViewProps, Tab};

package/package.json

@@ -1,19 +1,17 @@
 {
     "name": "@momo-kits/tab-view",
-    "version": "0.0.55-alpha.31",
+    "version": "0.74.2-react-native.1",
     "private": false,
     "main": "index.tsx",
-    "dependencies": {
-        "@momo-platform/versions": "4.0.2"
-    },
     "peerDependencies": {
-        "@momo-kits/core": ">=0.0.5-beta",
-        "@momo-kits/core-v2": ">=0.0.5-beta",
-        "lodash": "^4.17.15",
-        "prop-types": "^15.7.2",
-        "react": "16.9.0",
-        "react-native": ">=0.55"
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
     },
-    "devDependencies": {},
-    "license": "MoMo"
-}
+    "license": "MoMo",
+    "dependencies": {}
+}

package/publish.sh

@@ -9,7 +9,7 @@ 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' --exclude 'web.js' ./* dist
+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
@@ -26,4 +26,4 @@ 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"}'
+##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

@@ -0,0 +1,78 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  pagerView: {flex: 1},
+  textCenter: {
+    textAlign: 'center',
+  },
+  tabView: {
+    width: '100%',
+  },
+  tabBar: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+  },
+  tabItem: {
+    padding: Spacing.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indicator: {
+    height: 2,
+    borderTopLeftRadius: Radius.XXS,
+    borderTopRightRadius: Radius.XXS,
+    position: 'absolute',
+    bottom: 0,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    borderRadius: Radius.XS,
+  },
+  tabItemWrapper: {
+    paddingHorizontal: Spacing.XS,
+    alignItems: 'center',
+  },
+  cardTabBar: {
+    flexDirection: 'row',
+    marginTop: Spacing.XS,
+    alignItems: 'flex-end',
+  },
+  cardTabItem: {
+    borderTopLeftRadius: Spacing.M,
+    borderTopRightRadius: Spacing.M,
+    height: 40,
+    backgroundColor: Colors.black_02,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cardTabOverlay: {
+    flexDirection: 'row',
+    height: 44,
+    position: 'absolute',
+    top: -Spacing.XS,
+    borderTopLeftRadius: Spacing.M,
+    borderTopRightRadius: Spacing.M,
+  },
+  overlayTextWrapper: {
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: Spacing.XS,
+    flexDirection: 'row',
+  },
+  dotSmall: {
+    position: 'absolute',
+    top: -Spacing.XXS,
+    right: -Spacing.XXS,
+    zIndex: 2,
+  },
+  dot: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -Spacing.XS,
+    zIndex: 2,
+  },
+});

package/tabBar/CardTabBar.tsx

@@ -0,0 +1,84 @@
+import React, {FC, useContext} from 'react';
+import {Platform, View} from 'react-native';
+import {TabBarProps} from '../types';
+import styles from '../styles';
+import {
+  ApplicationContext,
+  Image,
+  Radius,
+  Shadow,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+import CardTabItem from '../tabItem/CardTabItem';
+import PathSvg from '../assets/Path';
+
+const CardTabBar: FC<TabBarProps> = ({
+  tabs,
+  onPressTabItem,
+  containerWidth,
+  selectedIndex,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const itemWidth = containerWidth / tabs.length;
+  const isFirst = selectedIndex === 0;
+  const isLast = selectedIndex === tabs.length - 1;
+  const backSpace = isFirst ? 0 : 28;
+
+  return (
+    <View style={styles.cardTabBar}>
+      {tabs.map((tab, index) => {
+        return (
+          <CardTabItem
+            tab={tab}
+            active={selectedIndex === index}
+            onPressTabItem={() => {
+              onPressTabItem?.(index);
+            }}
+            width={itemWidth}
+          />
+        );
+      })}
+      <View
+        style={[
+          styles.cardTabOverlay,
+          Platform.OS === 'ios' && Shadow.Light,
+          {
+            width: containerWidth / tabs.length,
+            left: itemWidth * selectedIndex - backSpace,
+          },
+        ]}>
+        {!isFirst && (
+          <PathSvg style={{transform: [{rotateY: '180deg'}], left: 8}} />
+        )}
+        <View
+          style={[
+            styles.overlayTextWrapper,
+            {
+              backgroundColor: theme.colors.background.surface,
+              width: containerWidth / tabs.length,
+              borderTopRightRadius: Radius.M,
+              borderTopLeftRadius: Radius.M,
+            },
+          ]}>
+          {!!tabs[selectedIndex]?.icon && (
+            <Image
+              source={{uri: tabs[selectedIndex]?.icon}}
+              style={[styles.icon, {marginRight: Spacing.XS}]}
+            />
+          )}
+          <Text
+            color={theme.colors.primary}
+            numberOfLines={1}
+            style={styles.textCenter}
+            typography={'header_s_semibold'}>
+            {tabs[selectedIndex]?.title || ''}
+          </Text>
+        </View>
+        {!isLast && <PathSvg style={{right: 8}} />}
+      </View>
+    </View>
+  );
+};
+
+export default CardTabBar;

package/tabBar/SrollableTabBar.tsx

@@ -0,0 +1,97 @@
+import React, {FC, useContext, useEffect, useRef, useState} from 'react';
+import {Animated, LayoutChangeEvent, ScrollView, View} from 'react-native';
+import {Tab, TabBarProps} from '../types';
+import styles from '../styles';
+import {ApplicationContext} from '@momo-kits/foundation';
+import TabItem from '../tabItem/TabItem';
+
+const ScrollableTabBar: FC<TabBarProps> = ({
+  tabs = [],
+  onPressTabItem,
+  selectedIndex,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [itemWidthMap, setItemWidthMap] = useState<
+    {width: number; x: number}[]
+  >([]);
+  const animatedWidth = useRef(new Animated.Value(0)).current;
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    moveIndicator();
+    scrollToIndex(selectedIndex);
+  }, [selectedIndex, itemWidthMap]);
+  const moveIndicator = () => {
+    Animated.timing(animatedWidth, {
+      toValue: itemWidthMap[selectedIndex]?.width || 0,
+      duration: 250,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const onLayout = (e: LayoutChangeEvent, index: number) => {
+    const {width, x} = e.nativeEvent.layout;
+
+    const newMap: Array<any> = [...itemWidthMap];
+    newMap[index] = {width, x};
+    setItemWidthMap(newMap);
+  };
+
+  const scrollToIndex = (index: number) => {
+    scrollViewRef.current?.scrollTo({
+      x: itemWidthMap[index]?.x || 0,
+      animated: true,
+    });
+  };
+
+  const _onPressTabItem = (index: number) => {
+    scrollToIndex(index);
+    onPressTabItem?.(index);
+  };
+
+  const renderItem = (params: {item: Tab; index: number}) => {
+    const {item, index} = params;
+    const isActive = selectedIndex === index;
+
+    return (
+      <View onLayout={e => onLayout(e, index)} style={styles.tabItemWrapper}>
+        <TabItem
+          key={`Tab View Item ${item.title}-${index}`}
+          onPressTabItem={() => {
+            _onPressTabItem(index);
+          }}
+          active={isActive}
+          tab={item}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <ScrollView
+      ref={scrollViewRef}
+      showsHorizontalScrollIndicator={false}
+      style={[
+        styles.tabBar,
+        {
+          borderColor: theme.colors.border.default,
+          backgroundColor: theme.colors.background.surface,
+        },
+      ]}
+      horizontal>
+      {tabs.map((item, index) => renderItem({item, index}))}
+      <Animated.View
+        style={[
+          styles.indicator,
+          {
+            left: itemWidthMap[selectedIndex]?.x || 0,
+            width: animatedWidth,
+            backgroundColor: theme.colors.primary,
+          },
+        ]}
+      />
+    </ScrollView>
+  );
+};
+
+export default ScrollableTabBar;

package/tabBar/TabBar.tsx

@@ -0,0 +1,55 @@
+import React, {FC, useContext} from 'react';
+import {Animated, View} from 'react-native';
+import {TabBarProps} from '../types';
+import TabItem from '../tabItem/TabItem';
+import styles from '../styles';
+import {ApplicationContext, Spacing} from '@momo-kits/foundation';
+
+const TabBar: FC<TabBarProps> = ({
+  tabs = [],
+  selectedIndex,
+  onPressTabItem,
+  containerWidth = 0,
+  scrollX,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const itemWidth = containerWidth / tabs.length;
+
+  return (
+    <View
+      style={[
+        styles.tabBar,
+        {
+          borderColor: theme.colors.border.default,
+          backgroundColor: theme.colors.background.surface,
+        },
+      ]}>
+      {tabs.map((tab, index) => {
+        return (
+          <TabItem
+            key={`Tab View Item ${tab.title}-${index}`}
+            width={itemWidth}
+            onPressTabItem={() => {
+              onPressTabItem?.(index);
+            }}
+            active={selectedIndex === index}
+            tab={tab}
+          />
+        );
+      })}
+      <Animated.View
+        style={[
+          styles.indicator,
+          {
+            left: scrollX * itemWidth + Spacing.XS,
+            width: itemWidth - Spacing.XS * 2,
+            backgroundColor: theme.colors.primary,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+export default TabBar;

package/tabItem/CardTabItem.tsx

@@ -0,0 +1,30 @@
+import React, {FC} from 'react';
+import {TouchableOpacity} from 'react-native';
+import {TabItemProps} from '../types';
+import styles from '../styles';
+import {Image, Spacing, Text} from '@momo-kits/foundation';
+
+const CardTabItem: FC<TabItemProps> = ({tab, onPressTabItem, width}) => {
+  const {title, icon} = tab;
+
+  return (
+    <TouchableOpacity
+      onPress={onPressTabItem}
+      style={[styles.cardTabItem, {width}]}>
+      {!!icon && (
+        <Image
+          source={{uri: icon}}
+          style={[styles.icon, {marginRight: Spacing.XS}]}
+        />
+      )}
+      <Text
+        numberOfLines={1}
+        style={styles.textCenter}
+        typography={'body_default_regular'}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export default CardTabItem;

package/tabItem/TabItem.tsx

@@ -0,0 +1,58 @@
+import React, {FC, useContext} from 'react';
+import {ImageStyle} from 'react-native-fast-image';
+import {TouchableOpacity, View, ViewStyle} from 'react-native';
+import {TabItemProps} from '../types';
+import {
+  ApplicationContext,
+  BadgeDot,
+  Image,
+  Spacing,
+  Text,
+  Typography,
+} from '@momo-kits/foundation';
+import styles from '../styles';
+
+const TabItem: FC<TabItemProps> = ({tab, active, onPressTabItem, width}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {
+    title,
+    icon,
+    direction = 'row',
+    showDot = false,
+    dotSize = 'small',
+  } = tab;
+  const typography: Typography = active
+    ? 'header_s_semibold'
+    : 'body_default_regular';
+  const color = active ? theme.colors.primary : theme.colors.text.default;
+  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} />}
+          <Image
+            style={[styles.icon, iconStyle as ImageStyle]}
+            source={{uri: icon}}
+          />
+        </View>
+      )}
+      <Text
+        style={styles.textCenter}
+        numberOfLines={1}
+        color={color}
+        typography={typography}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export default TabItem;

package/types.ts

@@ -0,0 +1,118 @@
+import {ReactElement} from 'react';
+import {PagerViewProps} from 'react-native-pager-view';
+
+export type Tab = {
+  /**
+   * The title of the tab.
+   */
+  title: string;
+
+  /**
+   * Optional. The icon associated with the tab, usually represented by a string referencing the icon's name or path.
+   */
+  icon?: string;
+
+  /**
+   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
+   */
+  direction?: 'row' | 'column';
+
+  /**
+   * The main component or content to be displayed when this tab is active.
+   */
+  component: ReactElement;
+
+  /**
+   * Optional. If `true`, shows a dot indicator on the tab, often used to signal notifications or updates.
+   */
+  showDot?: boolean;
+
+  /**
+   * Optional. Specifies the size of the dot indicator, either 'small' or 'large'.
+   */
+  dotSize?: 'small' | 'large';
+};
+
+export type TabItemProps = {
+  /**
+   * The Tab object containing the details and content of this tab item.
+   */
+  tab: Tab;
+
+  /**
+   * Indicates if this tab item is currently active or selected.
+   */
+  active: boolean;
+
+  /**
+   * Optional. A callback function that is triggered when this tab item is pressed.
+   */
+  onPressTabItem?: () => void;
+
+  /**
+   * Optional. Specifies the width of the tab item. Useful for customizing layout and appearance.
+   */
+  width?: number;
+};
+
+export type TabViewProps = {
+  /**
+   * Optional. If `true`, allows the tab bar to be scrollable, useful for a large number of tabs.
+   */
+  scrollable?: boolean;
+
+  /**
+   * An array of Tab objects representing each tab in the view.
+   */
+  tabs: Tab[];
+
+  /**
+   * Optional. A callback function that is triggered when a tab item is pressed, receiving the index of the tab as a parameter.
+   */
+  onPressTabItem?: (index: number) => void;
+
+  /**
+   * Optional. Specifies the visual style of the tab view, such as 'default' or 'card'.
+   */
+  type?: 'default' | 'card';
+
+  /**
+   * Optional. Specifies the initial page or tab to be displayed.
+   */
+  initialPage?: number;
+
+  /**
+   * Optional. Additional properties to pass to the underlying pager view component.
+   */
+  pagerProps?: PagerViewProps;
+};
+
+/**
+ * Properties for the TabBar component, which displays the navigation tabs.
+ */
+export type TabBarProps = {
+  /**
+   * An array of Tab objects representing each tab in the tab bar.
+   */
+  tabs: Tab[];
+
+  /**
+   * The index of the currently selected or active tab.
+   */
+  selectedIndex: number;
+
+  /**
+   * Optional. A callback function that is triggered when a tab item is pressed, receiving the index of the tab as a parameter.
+   */
+  onPressTabItem?: (index: number) => void;
+
+  /**
+   * The width of the container in which the tab bar is placed. Useful for layout calculations.
+   */
+  containerWidth: number;
+
+  /**
+   * Represents the horizontal scroll position in a scrollable tab bar.
+   */
+  scrollX: number;
+};

package/Pager.android.tsx

@@ -1 +0,0 @@
-export { default } from './PagerViewAdapter';

package/Pager.ios.tsx

@@ -1 +0,0 @@
-export { default } from './PagerViewAdapter';

package/Pager.tsx

@@ -1 +0,0 @@
-export { default } from './PanResponderAdapter';