@hero-design/rn 8.12.3 → 8.12.5-alpha.0

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { TouchableWithoutFeedback, FlatList, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@emotion/react';
@@ -19,6 +19,11 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 import type { ItemType, TabsProps, TabType } from '.';
 import TabWithBadge from './TabWithBadge';
+import { noop } from '../../utils/functions';
+
+export type ScrollableTabsHandles = {
+  selectTabKey: (tabKey: string) => void;
+};
 
 const getTabItem = ({
   item,
@@ -55,179 +60,215 @@ const getTabItem = ({
   return item({ color });
 };
 
-const ScrollableTab = ({
-  onTabPress,
-  selectedTabKey,
-  tabs,
-  containerStyle,
-  barStyle,
-  lazy = false,
-  lazyPreloadDistance = 1,
-  swipeEnabled = true,
-  testID: componentTestID,
-}: TabsProps) => {
-  const flatListRef = React.useRef<FlatList>(null);
-  const pagerViewRef = React.useRef<PagerView>(null);
-  const insets = useSafeAreaInsets();
-  const theme = useTheme();
-  const selectedTabIndex = tabs.findIndex(
-    (item) => item.key === selectedTabKey
-  );
-  const tabsAnims = useAnimatedValueArray(
-    tabs.map((_, i) => (i === selectedTabIndex ? 1 : 0))
-  );
-
-  React.useEffect(() => {
-    let timeoutHandle: number | null = null;
-    if (selectedTabIndex !== -1) {
-      flatListRef.current?.scrollToIndex({
-        index: selectedTabIndex,
-        viewPosition: 0.5,
-      });
-      // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
-      // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
-      timeoutHandle = setTimeout(() => {
-        // use no animation to prevent unexpected behavior if users select tab too quickly
-        pagerViewRef.current?.setPageWithoutAnimation(selectedTabIndex);
-      }, 200);
-    }
-
-    const animation = Animated.parallel([
-      ...tabs.map((_, i) =>
-        Animated.timing(tabsAnims[i], {
-          toValue: i === selectedTabIndex ? 1 : 0,
-          duration: 150,
-          useNativeDriver: true,
-        })
-      ),
-    ]);
-    animation.start();
-
-    return () => {
-      animation.stop();
-      if (timeoutHandle) {
-        clearTimeout(timeoutHandle);
+export interface ScrollableTabsProps extends TabsProps {
+  ref?: React.Ref<ScrollableTabsHandles>;
+}
+
+const ScrollableTab = forwardRef<ScrollableTabsHandles, ScrollableTabsProps>(
+  (
+    {
+      onTabPress = noop,
+      selectedTabKey,
+      tabs,
+      containerStyle,
+      barStyle,
+      lazy = false,
+      lazyPreloadDistance = 1,
+      swipeEnabled = true,
+      testID: componentTestID,
+    },
+    ref?
+  ) => {
+    const flatListRef = React.useRef<FlatList>(null);
+    const pagerViewRef = React.useRef<PagerView>(null);
+    const insets = useSafeAreaInsets();
+    const theme = useTheme();
+    const selectedTabIndex = tabs.findIndex(
+      (item) => item.key === selectedTabKey
+    );
+    const tabsAnims = useAnimatedValueArray(
+      tabs.map((_, i) => (i === selectedTabIndex ? 1 : 0))
+    );
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        selectTabKey: (tabKey: string) => {
+          const index = tabs.findIndex((item) => item.key === tabKey);
+          if (index !== -1) {
+            flatListRef.current?.scrollToIndex({
+              index,
+              viewPosition: 0.5,
+            });
+            pagerViewRef.current?.setPage(index);
+            if (onTabPress) {
+              onTabPress(tabKey);
+            }
+          }
+        },
+        getFlatListRef: () => {
+          return flatListRef.current;
+        },
+        getPagerViewRef: () => {
+          return pagerViewRef.current;
+        },
+      }),
+
+      [pagerViewRef, flatListRef, tabs]
+    );
+
+    React.useEffect(() => {
+      let timeoutHandle: number | null = null;
+      if (selectedTabIndex !== -1) {
+        flatListRef.current?.scrollToIndex({
+          index: selectedTabIndex,
+          viewPosition: 0.5,
+        });
+        // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
+        // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
+        timeoutHandle = setTimeout(() => {
+          // use no animation to prevent unexpected behavior if users select tab too quickly
+          pagerViewRef.current?.setPageWithoutAnimation(selectedTabIndex);
+        }, 200);
       }
-    };
-  }, [selectedTabIndex, pagerViewRef]);
-
-  return (
-    <TabContainer style={containerStyle} testID={componentTestID}>
-      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
-        <FlatList<TabType>
-          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-          ref={flatListRef}
-          horizontal
-          data={tabs}
-          keyExtractor={(tab) => String(tab.key)}
-          showsHorizontalScrollIndicator={false}
-          onScrollToIndexFailed={({ index }) => {
-            setTimeout(
-              () =>
-                flatListRef.current?.scrollToIndex({
-                  index,
-                  viewPosition: 0.5,
-                }),
-              100
-            );
-          }}
-          contentContainerStyle={{
-            paddingHorizontal:
-              theme.__hd__.tabs.space.flatListHorizontalPadding,
+
+      const animation = Animated.parallel([
+        ...tabs.map((_, i) =>
+          Animated.timing(tabsAnims[i], {
+            toValue: i === selectedTabIndex ? 1 : 0,
+            duration: 150,
+            useNativeDriver: true,
+          })
+        ),
+      ]);
+      animation.start();
+
+      return () => {
+        animation.stop();
+        if (timeoutHandle) {
+          clearTimeout(timeoutHandle);
+        }
+      };
+    }, [selectedTabIndex, selectedTabKey, pagerViewRef]);
+
+    return (
+      <TabContainer style={containerStyle} testID={componentTestID}>
+        <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+          <FlatList<TabType>
+            testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+            ref={flatListRef}
+            horizontal
+            data={tabs}
+            keyExtractor={(tab) => String(tab.key)}
+            showsHorizontalScrollIndicator={false}
+            onScrollToIndexFailed={({ index }) => {
+              setTimeout(
+                () =>
+                  flatListRef.current?.scrollToIndex({
+                    index,
+                    viewPosition: 0.5,
+                  }),
+                100
+              );
+            }}
+            contentContainerStyle={{
+              paddingHorizontal:
+                theme.__hd__.tabs.space.flatListHorizontalPadding,
+            }}
+            renderItem={({ item: tab, index }) => {
+              const {
+                key,
+                testID,
+                activeItem,
+                inactiveItem: originalInactiveItem,
+                badge,
+              } = tab;
+              const active = selectedTabKey === key;
+              const activeAnimated = tabsAnims[index];
+              const outlineScale = active
+                ? activeAnimated.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0.5, 1],
+                  })
+                : 0;
+
+              const inactiveItem = originalInactiveItem ?? activeItem;
+              const tabItem = getTabItem({
+                item: active ? activeItem : inactiveItem,
+                color: active
+                  ? theme.__hd__.tabs.colors.active
+                  : theme.__hd__.tabs.colors.inactive,
+                active,
+              });
+
+              return (
+                <TouchableWithoutFeedback
+                  key={key}
+                  onPress={() => {
+                    onTabPress(key);
+                  }}
+                  testID={testID}
+                >
+                  <HeaderTabItem isFirstItem={index === 0}>
+                    <HeaderTabItemOutlineWrapper>
+                      <HeaderTabItemOutline
+                        themeActive={active}
+                        style={{
+                          flex: 1,
+                          transform: [
+                            {
+                              scaleX: outlineScale,
+                            },
+                          ],
+                        }}
+                      />
+                    </HeaderTabItemOutlineWrapper>
+                    <HeaderTabItemWrapper>
+                      <TabWithBadge config={badge} tabItem={tabItem} />
+                    </HeaderTabItemWrapper>
+                  </HeaderTabItem>
+                </TouchableWithoutFeedback>
+              );
+            }}
+          />
+        </HeaderTabWrapper>
+        <ContentWrapper
+          initialPage={selectedTabIndex}
+          ref={pagerViewRef}
+          onPageSelected={(e) => {
+            const index = e.nativeEvent.position;
+            const selectedItem = tabs[index];
+            if (selectedItem && selectedItem.key !== selectedTabKey) {
+              onTabPress(selectedItem.key);
+            }
           }}
-          renderItem={({ item: tab, index }) => {
-            const {
-              key,
-              testID,
-              activeItem,
-              inactiveItem: originalInactiveItem,
-              badge,
-            } = tab;
+          scrollEnabled={swipeEnabled}
+        >
+          {tabs.map((tab, index) => {
+            const { key, component, testID } = tab;
             const active = selectedTabKey === key;
-            const activeAnimated = tabsAnims[index];
-            const outlineScale = active
-              ? activeAnimated.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0.5, 1],
-                })
-              : 0;
-
-            const inactiveItem = originalInactiveItem ?? activeItem;
-            const tabItem = getTabItem({
-              item: active ? activeItem : inactiveItem,
-              color: active
-                ? theme.__hd__.tabs.colors.active
-                : theme.__hd__.tabs.colors.inactive,
-              active,
-            });
+            const isLazyScreen =
+              lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
 
             return (
-              <TouchableWithoutFeedback
+              <TabScreen
                 key={key}
-                onPress={() => {
-                  onTabPress(key);
-                }}
-                testID={testID}
+                testID={testID ? `tab-screen-${testID}` : undefined}
+                pointerEvents={active ? 'auto' : 'none'}
+                accessibilityElementsHidden={!active}
+                importantForAccessibility={
+                  active ? 'auto' : 'no-hide-descendants'
+                }
+                collapsable={false}
               >
-                <HeaderTabItem isFirstItem={index === 0}>
-                  <HeaderTabItemOutlineWrapper>
-                    <HeaderTabItemOutline
-                      themeActive={active}
-                      style={{
-                        flex: 1,
-                        transform: [
-                          {
-                            scaleX: outlineScale,
-                          },
-                        ],
-                      }}
-                    />
-                  </HeaderTabItemOutlineWrapper>
-                  <HeaderTabItemWrapper>
-                    <TabWithBadge config={badge} tabItem={tabItem} />
-                  </HeaderTabItemWrapper>
-                </HeaderTabItem>
-              </TouchableWithoutFeedback>
+                {isLazyScreen ? null : component}
+              </TabScreen>
             );
-          }}
-        />
-      </HeaderTabWrapper>
-      <ContentWrapper
-        initialPage={selectedTabIndex}
-        ref={pagerViewRef}
-        onPageSelected={(e) => {
-          const index = e.nativeEvent.position;
-          const selectedItem = tabs[index];
-          if (selectedItem) {
-            onTabPress(selectedItem.key);
-          }
-        }}
-        scrollEnabled={swipeEnabled}
-      >
-        {tabs.map((tab, index) => {
-          const { key, component, testID } = tab;
-          const active = selectedTabKey === key;
-          const isLazyScreen =
-            lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
-
-          return (
-            <TabScreen
-              key={key}
-              testID={testID ? `tab-screen-${testID}` : undefined}
-              pointerEvents={active ? 'auto' : 'none'}
-              accessibilityElementsHidden={!active}
-              importantForAccessibility={
-                active ? 'auto' : 'no-hide-descendants'
-              }
-              collapsable={false}
-            >
-              {isLazyScreen ? null : component}
-            </TabScreen>
-          );
-        })}
-      </ContentWrapper>
-    </TabContainer>
-  );
-};
+          })}
+        </ContentWrapper>
+      </TabContainer>
+    );
+  }
+);
 
 export default ScrollableTab;

package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
-import { Text } from 'react-native';
-import { fireEvent } from '@testing-library/react-native';
+import { FlatList, Text } from 'react-native';
+import { fireEvent, waitFor } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import type { ComponentProps } from 'react';
+import PagerView from 'react-native-pager-view';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tabs from '..';
 import Button from '../../Button';
 import type { TabType } from '..';
+import { ScrollableTabsProps, ScrollableTabsHandles } from '../ScrollableTabs';
 
-const TestTabsComponent = (
-  props: Omit<
-    ComponentProps<typeof Tabs>,
-    'selectedTabKey' | 'onTabPress' | 'tabs'
-  >
-) => {
+type TestTabsProps = Omit<
+  ScrollableTabsProps,
+  'selectedTabKey' | 'onTabPress' | 'tabs'
+> & {
+  onTabPress?: (tabKey: string) => void;
+};
+const TestTabsComponent = React.forwardRef<
+  ScrollableTabsHandles,
+  TestTabsProps
+>((props, ref) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('work');
   const tabs: TabType[] = [
     {
@@ -61,14 +66,20 @@ const TestTabsComponent = (
         icon="sync"
       />
       <Tabs.Scroll
+        ref={ref}
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
+        onTabPress={(newTabKey) => {
+          setSelectedTabKey(newTabKey);
+          if (props.onTabPress) {
+            props.onTabPress(newTabKey);
+          }
+        }}
       />
     </SafeAreaProvider>
   );
-};
+});
 
 describe('Tabs.Scroll', () => {
   it('renders correctly', () => {
@@ -106,4 +117,40 @@ describe('Tabs.Scroll', () => {
     expect(getByText('Home Screen')).toBeDefined();
     expect(queryByText('Work Screen')).toBeNull();
   });
+
+  describe('selectTabKey', () => {
+    it('should render correctly', () => {
+      const ref = React.createRef<
+        ScrollableTabsHandles & {
+          getFlatListRef: () => FlatList;
+          getPagerViewRef: () => PagerView;
+        }
+      >();
+      const onTabPressSpye = jest.fn();
+      renderWithTheme(
+        <TestTabsComponent
+          ref={ref}
+          lazy
+          lazyPreloadDistance={1}
+          onTabPress={onTabPressSpye}
+          swipeEnabled={false}
+        />
+      );
+
+      const flatListRef = ref.current!.getFlatListRef()!;
+      const pagerViewRef = ref.current!.getPagerViewRef()!;
+      const scrollToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
+      const setPageSpy = jest.spyOn(pagerViewRef, 'setPage');
+      ref.current?.selectTabKey('personal');
+      waitFor(() => expect(scrollToIndexSpy).toHaveBeenCalled());
+      waitFor(() => expect(setPageSpy).toHaveBeenCalled());
+
+      expect(scrollToIndexSpy).toHaveBeenCalledWith({
+        index: 1,
+        viewPosition: 0.5,
+      });
+      expect(setPageSpy).toHaveBeenCalledWith(1);
+      expect(onTabPressSpye).toHaveBeenCalledWith('personal');
+    });
+  });
 });

package/src/types.ts

@@ -15,6 +15,7 @@ import type {
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
+import { ScrollableTabsHandles } from './components/Tabs/ScrollableTabs';
 
 export type {
   BottomNavigationTabType,
@@ -27,6 +28,7 @@ export type {
   RichTextEditorProps,
   RichTextEditorRef,
   TabType,
+  ScrollableTabsHandles,
   TextInputProps,
   TextProps,
   TextInputHandles,