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

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { TouchableWithoutFeedback, FlatList, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@emotion/react';
@@ -19,11 +19,6 @@ 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,
@@ -60,215 +55,179 @@ const getTabItem = ({
   return item({ color });
 };
 
-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);
+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);
       }
-
-      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);
-            }
+    };
+  }, [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,
           }}
-          scrollEnabled={swipeEnabled}
-        >
-          {tabs.map((tab, index) => {
-            const { key, component, testID } = tab;
+          renderItem={({ item: tab, index }) => {
+            const {
+              key,
+              testID,
+              activeItem,
+              inactiveItem: originalInactiveItem,
+              badge,
+            } = tab;
             const active = selectedTabKey === key;
-            const isLazyScreen =
-              lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
+            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 (
-              <TabScreen
+              <TouchableWithoutFeedback
                 key={key}
-                testID={testID ? `tab-screen-${testID}` : undefined}
-                pointerEvents={active ? 'auto' : 'none'}
-                accessibilityElementsHidden={!active}
-                importantForAccessibility={
-                  active ? 'auto' : 'no-hide-descendants'
-                }
-                collapsable={false}
+                onPress={() => {
+                  onTabPress(key);
+                }}
+                testID={testID}
               >
-                {isLazyScreen ? null : component}
-              </TabScreen>
+                <HeaderTabItem isFirstItem={index === 0}>
+                  <HeaderTabItemOutlineWrapper>
+                    <HeaderTabItemOutline
+                      themeActive={active}
+                      style={{
+                        flex: 1,
+                        transform: [
+                          {
+                            scaleX: outlineScale,
+                          },
+                        ],
+                      }}
+                    />
+                  </HeaderTabItemOutlineWrapper>
+                  <HeaderTabItemWrapper>
+                    <TabWithBadge config={badge} tabItem={tabItem} />
+                  </HeaderTabItemWrapper>
+                </HeaderTabItem>
+              </TouchableWithoutFeedback>
             );
-          })}
-        </ContentWrapper>
-      </TabContainer>
-    );
-  }
-);
+          }}
+        />
+      </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>
+  );
+};
 
 export default ScrollableTab;

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

@@ -1,24 +1,19 @@
 import React from 'react';
-import { FlatList, Text } from 'react-native';
-import { fireEvent, waitFor } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import PagerView from 'react-native-pager-view';
+import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tabs from '..';
 import Button from '../../Button';
 import type { TabType } from '..';
-import { ScrollableTabsProps, ScrollableTabsHandles } from '../ScrollableTabs';
 
-type TestTabsProps = Omit<
-  ScrollableTabsProps,
-  'selectedTabKey' | 'onTabPress' | 'tabs'
-> & {
-  onTabPress?: (tabKey: string) => void;
-};
-const TestTabsComponent = React.forwardRef<
-  ScrollableTabsHandles,
-  TestTabsProps
->((props, ref) => {
+const TestTabsComponent = (
+  props: Omit<
+    ComponentProps<typeof Tabs>,
+    'selectedTabKey' | 'onTabPress' | 'tabs'
+  >
+) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('work');
   const tabs: TabType[] = [
     {
@@ -66,20 +61,14 @@ const TestTabsComponent = React.forwardRef<
         icon="sync"
       />
       <Tabs.Scroll
-        ref={ref}
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onTabPress={(newTabKey) => {
-          setSelectedTabKey(newTabKey);
-          if (props.onTabPress) {
-            props.onTabPress(newTabKey);
-          }
-        }}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );
-});
+};
 
 describe('Tabs.Scroll', () => {
   it('renders correctly', () => {
@@ -117,40 +106,4 @@ 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/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -63,6 +63,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
       />
     </View>
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -265,6 +266,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
               >
                 <View>
                   <Text
+                    allowFontScaling={false}
                     numberOfLines={1}
                     style={
                       Array [
@@ -633,19 +635,34 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     themePadding="wideContent"
                   >
                     <Text
+                      allowFontScaling={false}
                       style={
                         Array [
                           Object {
-                            "color": "#ffffff",
-                            "fontFamily": "BeVietnamPro-SemiBold",
-                            "fontSize": 12,
-                            "includeFontPadding": false,
-                            "textAlign": "center",
-                            "textAlignVertical": "center",
+                            "color": "#001f23",
+                            "fontFamily": "BeVietnamPro-Regular",
+                            "fontSize": 14,
+                            "letterSpacing": 0.42,
+                            "lineHeight": 22,
                           },
-                          undefined,
+                          Array [
+                            Object {
+                              "color": "#ffffff",
+                              "fontFamily": "BeVietnamPro-SemiBold",
+                              "fontSize": 12,
+                              "includeFontPadding": false,
+                              "lineHeight": 20,
+                              "textAlign": "center",
+                              "textAlignVertical": "center",
+                            },
+                            undefined,
+                          ],
                         ]
                       }
+                      themeFontSize="medium"
+                      themeFontWeight="regular"
+                      themeIntent="body"
+                      themeTypeface="neutral"
                     >
                       50
                     </Text>

package/src/components/Tabs/__tests__/__snapshots__/TabWithBadge.spec.tsx.snap

@@ -37,19 +37,34 @@ exports[`TabWithBadge renders correctly with counter badge config 1`] = `
     themePadding="wideContent"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
-            "includeFontPadding": false,
-            "textAlign": "center",
-            "textAlignVertical": "center",
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 12,
+              "includeFontPadding": false,
+              "lineHeight": 20,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
     >
       10
     </Text>

package/src/components/Tabs/__tests__/__snapshots__/index.spec.tsx.snap

@@ -63,6 +63,7 @@ exports[`Tabs renders correctly 1`] = `
       />
     </View>
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -157,6 +158,7 @@ exports[`Tabs renders correctly 1`] = `
           >
             <View>
               <Text
+                allowFontScaling={false}
                 numberOfLines={1}
                 style={
                   Array [
@@ -204,6 +206,7 @@ exports[`Tabs renders correctly 1`] = `
           >
             <View>
               <Text
+                allowFontScaling={false}
                 numberOfLines={1}
                 style={
                   Array [
@@ -257,6 +260,7 @@ exports[`Tabs renders correctly 1`] = `
               }
             >
               <Text
+                allowFontScaling={false}
                 numberOfLines={1}
                 style={
                   Array [
@@ -335,6 +339,7 @@ exports[`Tabs renders correctly 1`] = `
               }
             >
               <Text
+                allowFontScaling={false}
                 numberOfLines={1}
                 style={
                   Array [
@@ -381,19 +386,34 @@ exports[`Tabs renders correctly 1`] = `
                 themePadding="wideContent"
               >
                 <Text
+                  allowFontScaling={false}
                   style={
                     Array [
                       Object {
-                        "color": "#ffffff",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 12,
-                        "includeFontPadding": false,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
-                      undefined,
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 12,
+                          "includeFontPadding": false,
+                          "lineHeight": 20,
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        undefined,
+                      ],
                     ]
                   }
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
+                  themeIntent="body"
+                  themeTypeface="neutral"
                 >
                   50
                 </Text>