@momo-kits/tab-view 0.103.2-rc.8 → 0.104.1

package/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useContext,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -13,8 +14,15 @@ 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';
+import PagerView, {
+  PagerViewOnPageScrollEvent,
+  PagerViewOnPageSelectedEvent,
+} from 'react-native-pager-view';
+import {
+  ApplicationContext,
+  MiniAppContext,
+  ScreenContext,
+} from '@momo-kits/foundation';
 
 const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   {
@@ -27,6 +35,9 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
     direction,
     selectedColor,
     unselectedColor,
+    style,
+    accessibilityLabel,
+    accessibilityLabelForSelectedCard,
   },
   ref
 ) => {
@@ -39,6 +50,18 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   const scrollX = useRef(new Animated.Value(startPage));
   const lazy = useRef([selectedIndex]).current;
   const {theme} = useContext(ApplicationContext);
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+  const componentName = 'TabView';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+    return id;
+  }, [componentName, accessibilityLabel, app, screen]);
+
   const _onPressTabItem = (index: number) => {
     onPressTabItem?.(index);
     pagerRef.current?.setPage(index);
@@ -53,12 +76,13 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
     setTabBarWidth(e.nativeEvent.layout.width);
   };
 
-  const onPageSelected = (e: {nativeEvent: {position: number}}) => {
+  const onPageSelected = (e: PagerViewOnPageSelectedEvent) => {
     const {position} = e.nativeEvent;
     if (!lazy.includes(position)) {
       lazy.push(position);
     }
     setSelectedIndex(position);
+    pagerProps?.onPageSelected?.(e);
   };
 
   let TabBarComponent = scrollable ? ScrollableTabBar : TabBar;
@@ -67,9 +91,10 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
     TabBarComponent = CardTabBar;
   }
 
-  const onPageScroll = (e: {nativeEvent: {position: any; offset: any}}) => {
+  const onPageScroll = (e: PagerViewOnPageScrollEvent) => {
     const {position, offset} = e.nativeEvent;
     scrollX.current.setValue(position + offset);
+    pagerProps?.onPageScroll?.(e);
   };
 
   const renderScreen = useCallback(
@@ -87,8 +112,11 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   }));
 
   return (
-    <View onLayout={onLayout} style={[styles.tabView, {flex: 1}]}>
-      <View>
+    <View
+      onLayout={onLayout}
+      style={[styles.tabView, {flex: 1}]}
+      accessibilityLabel={componentId}>
+      <Animated.View style={style}>
         <TabBarComponent
           onPressTabItem={_onPressTabItem}
           selectedIndex={selectedIndex}
@@ -98,8 +126,9 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
           direction={direction}
           selectedColor={selectedColor ?? theme.colors.primary}
           unselectedColor={unselectedColor ?? theme.colors.text.default}
+          accessibilityLabelForSelectedCard={accessibilityLabelForSelectedCard}
         />
-      </View>
+      </Animated.View>
 
       <PagerView
         {...pagerProps}
@@ -117,4 +146,4 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
 const TabView = forwardRef(TabComponent);
 
 export {CardTabBar, ScrollableTabBar, TabBar, TabView};
-export type {TabViewProps, Tab};
+export type {TabViewProps, TabViewRef, Tab};

package/package.json

@@ -1,17 +1,20 @@
 {
-    "name": "@momo-kits/tab-view",
-    "version": "0.103.2-rc.8",
-    "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"
+  "name": "@momo-kits/tab-view",
+  "version": "0.104.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/"
+  }
 }

package/publish.sh

@@ -6,6 +6,7 @@ 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

package/tabBar/CardTabBar.tsx

@@ -22,6 +22,7 @@ const CardTabBar: FC<TabBarProps> = ({
   selectedIndex,
   selectedColor,
   unselectedColor,
+  accessibilityLabelForSelectedCard,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const itemWidth = containerWidth / tabs.length;
@@ -58,7 +59,10 @@ const CardTabBar: FC<TabBarProps> = ({
           <PathSvg style={{transform: [{rotateY: '180deg'}], left: 8}} />
         )}
         <View
-          accessibilityLabel={tabs[selectedIndex]?.accessibilityLabel}
+          accessibilityLabel={
+            accessibilityLabelForSelectedCard ??
+            tabs[selectedIndex]?.accessibilityLabel
+          }
           style={[
             styles.overlayTextWrapper,
             {

package/tabItem/CardTabItem.tsx

@@ -1,8 +1,16 @@
-import React, {FC} from 'react';
+import React, {FC, useContext, useMemo} 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,
+  MiniAppContext,
+  ScreenContext,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
 
 const CardTabItem: FC<TabItemProps> = ({
   tab,
@@ -23,18 +31,31 @@ const CardTabItem: FC<TabItemProps> = ({
   } = tab;
   const color = active ? selectedColor : unselectedColor;
 
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+
+  const componentName = 'CardTabItem';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
+    return id;
+  }, [componentName, accessibilityLabel, app, screen]);
+
   return (
     <TouchableOpacity
       onPress={onPressTabItem}
       style={[styles.cardTabItem, {width}]}
-      accessibilityLabel={accessibilityLabel}>
-      {renderIcon &&
-        !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
-          <View
-            style={[styles.icon, styles.iconHolder, {marginRight: Spacing.XS}]}>
-            {renderIcon}
-          </View>
-        )}
+      accessibilityLabel={componentId}
+      accessibilityState={{checked: active}}>
+      {typeof renderIcon === 'function' && (
+        <View
+          style={[styles.icon, styles.iconHolder, {marginRight: Spacing.XS}]}>
+          {renderIcon(active)}
+        </View>
+      )}
       {!renderIcon && !!icon && (
         <Icon
           color={color}
@@ -45,7 +66,8 @@ const CardTabItem: FC<TabItemProps> = ({
       <Text
         numberOfLines={1}
         style={[styles.textCenter, {flexShrink: 1}]}
-        typography={'body_default_regular'}>
+        typography={'body_default_regular'}
+        accessibilityLabel={`${componentId}|text`}>
         {title}
       </Text>
       {showDot && (
@@ -58,7 +80,11 @@ const CardTabItem: FC<TabItemProps> = ({
       )}
       {!showDot && badgeValue && (
         <View>
-          <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
+          <Badge
+            label={badgeValue}
+            style={{marginLeft: Spacing.XS}}
+            accessibilityLabel={`${componentId}|badge`}
+          />
         </View>
       )}
     </TouchableOpacity>

package/tabItem/TabItem.tsx

@@ -1,11 +1,13 @@
-import React, {FC} from 'react';
+import React, {FC, useContext, useMemo} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import {
   Badge,
   BadgeDot,
   Icon,
+  MiniAppContext,
   scaleSize,
+  ScreenContext,
   Spacing,
   Text,
   Typography,
@@ -35,11 +37,24 @@ const TabItem: FC<TabItemProps> = ({
     : 'body_default_regular';
   const color = active ? selectedColor : unselectedColor;
   const dotStyle = dotSize === 'large' ? styles.dot : styles.dotSmall;
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+
+  const componentName = 'TabItem';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
+    return id;
+  }, [componentName, accessibilityLabel, app, screen]);
 
   const renderRowItem = () => {
     return (
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={componentId}
+        accessibilityState={{checked: active}}
         style={[
           styles.tabItem,
           {
@@ -69,7 +84,8 @@ const TabItem: FC<TabItemProps> = ({
           numberOfLines={1}
           typography={typography}
           color={color}
-          style={{flexShrink: 1}}>
+          style={{flexShrink: 1}}
+          accessibilityLabel={`${componentId}|text`}>
           {title}
         </Text>
         {showDot && (
@@ -77,7 +93,11 @@ const TabItem: FC<TabItemProps> = ({
         )}
         {!showDot && badgeValue && (
           <View>
-            <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
+            <Badge
+              label={badgeValue}
+              style={{marginLeft: Spacing.XS}}
+              accessibilityLabel={`${componentId}|badge`}
+            />
           </View>
         )}
       </TouchableOpacity>
@@ -99,7 +119,8 @@ const TabItem: FC<TabItemProps> = ({
           },
         ]}
         onPress={onPressTabItem}
-        accessibilityLabel={accessibilityLabel}>
+        accessibilityLabel={componentId}
+        accessibilityState={{checked: active}}>
         <View>
           {renderIcon && typeof renderIcon === 'function' && (
             <View
@@ -127,10 +148,18 @@ const TabItem: FC<TabItemProps> = ({
             <BadgeDot style={dotStyle} size={dotSize} />
           )}
           {(renderIcon || !!icon) && !showDot && badgeValue && (
-            <Badge label={badgeValue} style={styles.badge} />
+            <Badge
+              label={badgeValue}
+              style={styles.badge}
+              accessibilityLabel={`${componentId}|badge`}
+            />
           )}
         </View>
-        <Text numberOfLines={1} typography={typography} color={color}>
+        <Text
+          numberOfLines={1}
+          typography={typography}
+          color={color}
+          accessibilityLabel={`${componentId}|text`}>
           {title}
         </Text>
       </TouchableOpacity>

package/types.ts

@@ -1,6 +1,6 @@
 import {ReactElement} from 'react';
 import {PagerViewProps} from 'react-native-pager-view';
-import {Animated} from 'react-native';
+import {Animated, ViewStyle} from 'react-native';
 
 export type Tab = {
   /**
@@ -95,7 +95,7 @@ export type TabViewProps = {
   /**
    * Optional. Additional properties to pass to the underlying pager view component.
    */
-  pagerProps?: PagerViewProps;
+  pagerProps?: Omit<PagerViewProps, 'children'>;
 
   /**
    * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
@@ -105,6 +105,12 @@ export type TabViewProps = {
   selectedColor?: string;
 
   unselectedColor?: string;
+
+  style?: ViewStyle;
+
+  accessibilityLabel?: string;
+
+  accessibilityLabelForSelectedCard?: string;
 };
 
 /**
@@ -144,6 +150,8 @@ export type TabBarProps = {
   selectedColor?: string;
 
   unselectedColor?: string;
+
+  accessibilityLabelForSelectedCard?: string;
 };
 
 export type TabViewRef = {