@hero-design/rn 7.2.0 → 7.3.0

package/src/components/Tabs/ActiveTabIndicator.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { StyledIndicator } from './StyledTabs';
+
+const ActiveTabIndicator = ({
+  scrollOffsetAnimatedValue,
+  positionAnimatedValue,
+  tabsLength,
+  tabsWidth,
+}: {
+  scrollOffsetAnimatedValue: Animated.Value;
+  positionAnimatedValue: Animated.Value;
+  tabsLength: number;
+  tabsWidth: number;
+}) => {
+  const inputRange = [0, tabsLength];
+  const indicatorWidth = tabsWidth / tabsLength;
+
+  const translateX = Animated.add(
+    scrollOffsetAnimatedValue,
+    positionAnimatedValue
+  ).interpolate({
+    inputRange,
+    outputRange: [0, tabsLength * indicatorWidth],
+  });
+
+  return (
+    <StyledIndicator
+      themeWidth={indicatorWidth}
+      style={{
+        transform: [{ translateX }],
+      }}
+    />
+  );
+};
+
+export default ActiveTabIndicator;

package/src/components/Tabs/ScrollableTabs.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { TouchableWithoutFeedback, FlatList, Animated } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@emotion/react';
+import PagerView from 'react-native-pager-view';
+import {
+  HeaderTabItem,
+  HeaderTabWrapper,
+  TabContainer,
+  TabScreen,
+  ContentWrapper,
+  HeaderTabItemOutline,
+  HeaderTabItemWrapper,
+  HeaderTabItemOutlineWrapper,
+} from './StyledScrollableTabs';
+import { useAnimatedValueArray } from './utils';
+import { ItemType, TabsProps, TabType } from '.';
+import { isHeroIcon } from '../Icon/utils';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import Badge from '../Badge';
+
+const getTabItem = ({
+  item,
+  color,
+  active,
+}: {
+  item: ItemType;
+  color: string;
+  active: boolean;
+}) => {
+  if (isHeroIcon(item)) {
+    return (
+      <Icon
+        icon={item}
+        testID={`hero-icon-${item}`}
+        size="small"
+        intent={active ? 'info' : 'text'}
+      />
+    );
+  }
+
+  if (typeof item === 'string') {
+    return (
+      <Typography.Text
+        fontWeight={active ? 'semi-bold' : 'regular'}
+        numberOfLines={1}
+        style={{ color }}
+      >
+        {item}
+      </Typography.Text>
+    );
+  }
+
+  return item({ color });
+};
+
+const ScrollableTab = ({
+  onTabPress,
+  selectedTabKey,
+  tabs,
+  containerStyle,
+  barStyle,
+  lazy = false,
+  lazyPreloadDistance = 1,
+}: 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(() => {
+    if (selectedTabIndex !== -1) {
+      flatListRef.current?.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5,
+      });
+    }
+
+    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();
+  }, [selectedTabIndex]);
+
+  return (
+    <TabContainer style={containerStyle}>
+      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+        <FlatList<TabType>
+          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,
+              showBadge = false,
+            } = 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);
+                  pagerViewRef.current?.setPage(index);
+                }}
+                testID={testID}
+              >
+                <HeaderTabItem>
+                  <HeaderTabItemOutlineWrapper>
+                    <HeaderTabItemOutline
+                      themeActive={active}
+                      style={{
+                        flex: 1,
+                        transform: [
+                          {
+                            scaleX: outlineScale,
+                          },
+                        ],
+                      }}
+                    />
+                  </HeaderTabItemOutlineWrapper>
+                  <HeaderTabItemWrapper>
+                    <Badge.Status visible={showBadge}>{tabItem}</Badge.Status>
+                  </HeaderTabItemWrapper>
+                </HeaderTabItem>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </HeaderTabWrapper>
+      <ContentWrapper
+        initialPage={selectedTabIndex}
+        ref={pagerViewRef}
+        onPageSelected={e => {
+          const index = e.nativeEvent.position;
+          const selectedItem = tabs[index];
+          if (selectedItem) {
+            onTabPress(selectedItem.key);
+          }
+        }}
+      >
+        {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/StyledScrollableTabs.tsx

@@ -0,0 +1,60 @@
+import { Animated, StyleSheet, View } from 'react-native';
+import styled from '@emotion/native';
+import PagerView from 'react-native-pager-view';
+
+const TabScreen = styled(View)({
+  flex: 1,
+});
+
+const TabContainer = styled(View)({
+  flex: 1,
+  overflow: 'hidden',
+});
+
+const ContentWrapper = styled(PagerView)({
+  flex: 1,
+});
+
+const HeaderTabWrapper = styled(View)<{
+  themeInsets: { top: number; right: number; bottom: number; left: number };
+}>(({ theme, themeInsets }) => ({
+  paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
+  borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+  borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom,
+}));
+
+const HeaderTabItem = styled(Animated.View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
+  paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
+}));
+
+const HeaderTabItemOutlineWrapper = styled(View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
+  paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
+  ...StyleSheet.absoluteFillObject,
+}));
+
+const HeaderTabItemOutline = styled(Animated.View)<{ themeActive: boolean }>(
+  ({ theme, themeActive }) => ({
+    borderRadius: theme.__hd__.tabs.radii.outline,
+    backgroundColor: themeActive
+      ? theme.__hd__.tabs.colors.activeBackground
+      : undefined,
+  })
+);
+
+const HeaderTabItemWrapper = styled(View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
+  paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding,
+}));
+
+export {
+  HeaderTabItem,
+  TabScreen,
+  TabContainer,
+  HeaderTabWrapper,
+  ContentWrapper,
+  HeaderTabItemOutlineWrapper,
+  HeaderTabItemOutline,
+  HeaderTabItemWrapper,
+};

package/src/components/Tabs/StyledTabs.tsx

@@ -1,70 +1,56 @@
-import { View, FlatList } from 'react-native';
 import styled from '@emotion/native';
-import Icon from '../Icon';
-import Typography from '../Typography';
+import { Animated, View } from 'react-native';
+import PagerView from 'react-native-pager-view';
 
-const TabScreen = styled(View)<{ themeVisibility?: boolean }>(
-  ({ themeVisibility }) => ({
-    flex: 1,
-    display: themeVisibility === false ? 'none' : 'flex',
-  })
-);
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 const TabContainer = styled(View)({
   flex: 1,
   overflow: 'hidden',
 });
 
-const ContentWrapper = styled(View)({
-  flex: 1,
-});
-
 const HeaderTabWrapper = styled(View)<{
   themeInsets: { top: number; right: number; bottom: number; left: number };
-}>(({ themeInsets, theme }) => ({
-  paddingLeft: Math.max(themeInsets.left, themeInsets.right),
-  paddingRight: Math.max(themeInsets.left, themeInsets.right),
-  backgroundColor: theme.__hd__.tabs.colors.background,
+}>(({ theme, themeInsets }) => ({
+  paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
+  borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+  borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom,
 }));
 
-const StyledFlatList = (styled(FlatList)(({ theme }) => ({
-  paddingLeft: theme.__hd__.tabs.space.flatListHorizontalPadding,
-  paddingRight: theme.__hd__.tabs.space.flatListHorizontalPadding,
-})) as unknown) as new <T>() => FlatList<T>;
+const HeaderTab = styled(View)({
+  flexDirection: 'row',
+});
 
 const HeaderTabItem = styled(View)(({ theme }) => ({
-  flexDirection: 'row',
+  flex: 1,
   alignItems: 'center',
-  paddingLeft: theme.__hd__.tabs.space.itemHorizontalPadding,
-  paddingRight: theme.__hd__.tabs.space.itemHorizontalPadding,
-  paddingTop: theme.__hd__.tabs.space.itemVerticalPadding,
-  paddingBottom: theme.__hd__.tabs.space.itemVerticalPadding,
+  paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
 }));
 
-const StyledHeaderTabIcon = styled(Icon)<{ themeActive: boolean }>(
-  ({ themeActive, theme }) => ({
-    color: themeActive
-      ? theme.__hd__.tabs.colors.active
-      : theme.__hd__.tabs.colors.inactive,
-  })
-);
+const ContentWrapper = styled(AnimatedPagerView)({
+  flex: 1,
+});
+
+const TabScreen = styled(View)({
+  flex: 1,
+});
 
-const StyledHeaderTabText = styled(Typography.Text)<{ themeActive: boolean }>(
-  ({ themeActive, theme }) => ({
-    marginLeft: theme.__hd__.tabs.space.titleMarginLeft,
-    color: themeActive
-      ? theme.__hd__.tabs.colors.active
-      : theme.__hd__.tabs.colors.inactive,
+const StyledIndicator = styled(Animated.View)<{ themeWidth: number }>(
+  ({ theme, themeWidth }) => ({
+    width: themeWidth,
+    height: theme.__hd__.tabs.sizes.indicator,
+    backgroundColor: theme.__hd__.tabs.colors.text,
+    position: 'absolute',
+    bottom: 0,
   })
 );
 
 export {
-  StyledFlatList,
-  HeaderTabItem,
-  TabScreen,
   TabContainer,
   HeaderTabWrapper,
+  HeaderTab,
+  HeaderTabItem,
   ContentWrapper,
-  StyledHeaderTabIcon,
-  StyledHeaderTabText,
+  TabScreen,
+  StyledIndicator,
 };

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

@@ -0,0 +1,84 @@
+import React, { ComponentProps } from 'react';
+import { Text } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Tabs, { TabType } from '..';
+
+const TestTabsComponent = (
+  props: Omit<
+    ComponentProps<typeof Tabs>,
+    'selectedTabKey' | 'onTabPress' | 'tabs'
+  >
+) => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('work');
+  const tabs: TabType[] = [
+    {
+      key: 'work',
+      activeItem: 'Work',
+      component: <Text>Work Screen</Text>,
+    },
+    {
+      key: 'personal',
+      activeItem: 'speaker',
+      inactiveItem: 'speaker-outlined',
+      component: <Text>Personal Screen</Text>,
+    },
+    {
+      key: 'home',
+      activeItem: 'home',
+      inactiveItem: 'home-outlined',
+      component: <Text>Home Screen</Text>,
+      showBadge: true,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      <Tabs.Scroll
+        {...props}
+        tabs={tabs}
+        selectedTabKey={selectedTabKey}
+        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
+      />
+    </SafeAreaProvider>
+  );
+};
+
+describe('Tabs.Scroll', () => {
+  it('renders correctly', () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Work')).toBeDefined();
+    expect(getByTestId('hero-icon-speaker-outlined')).toBeDefined();
+    expect(getByTestId('hero-icon-home-outlined')).toBeDefined();
+    expect(getByText('Work Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-speaker-outlined'));
+    expect(getByText('Personal Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-home-outlined'));
+    expect(getByText('Home Screen')).toBeDefined();
+  });
+
+  it('renders correctly with lazy preloaded', () => {
+    const { getByText, queryByText, getByTestId } = renderWithTheme(
+      <TestTabsComponent lazy lazyPreloadDistance={1} />
+    );
+
+    expect(getByText('Work Screen')).toBeDefined();
+    expect(getByText('Personal Screen')).toBeDefined();
+    // Preload distance is 1, so Home Screen is not rendered.
+    expect(queryByText('Home Screen')).toBeNull();
+
+    fireEvent.press(getByTestId('hero-icon-home-outlined'));
+    expect(getByText('Home Screen')).toBeDefined();
+    expect(queryByText('Work Screen')).toBeNull();
+  });
+});