@hero-design/rn 8.23.0 → 8.24.0-alpha.0

package/src/components/Tabs/ScrollableTabsV2/ScrollableTabsV2.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import PagerView from 'react-native-pager-view';
+import { TabContainer, ContentWrapper } from '../StyledScrollableTabs';
+import type { TabsProps } from '..';
+import { SceneView } from './SceneView';
+import ScrollableTabHeader from '../ScrollableTabsHeader';
+
+export const TabContext = React.createContext<{
+  selectedTabKey: string;
+} | null>(null);
+
+export const ScreenContext = React.createContext<string | null>(null);
+
+export const useIsFocused = () => {
+  const context = React.useContext(TabContext);
+  const key = React.useContext(ScreenContext);
+  if (!context || !key) {
+    return;
+  }
+
+  const isFocused = context.selectedTabKey === key;
+
+  return isFocused;
+};
+
+const ScrollableTab = ({
+  onTabPress,
+  selectedTabKey,
+  tabs,
+  containerStyle,
+  barStyle,
+  lazy = false,
+  lazyPreloadDistance = 1,
+  swipeEnabled = true,
+  testID: componentTestID,
+}: TabsProps) => {
+  const pagerViewRef = React.useRef<PagerView>(null);
+  const insets = useSafeAreaInsets();
+  const selectedTabIndex = tabs.findIndex(
+    (item) => item.key === selectedTabKey
+  );
+
+  React.useEffect(() => {
+    let timeoutHandle: number | null = null;
+    if (selectedTabIndex !== -1) {
+      // 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);
+    }
+
+    return () => {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
+
+  const indexRef = React.useRef(selectedTabIndex);
+  const tabContextProviderValue = React.useMemo(
+    () => ({
+      selectedTabKey,
+    }),
+    [selectedTabKey]
+  );
+
+  return (
+    <TabContext.Provider value={tabContextProviderValue}>
+      <TabContainer style={containerStyle} testID={componentTestID}>
+        <ScrollableTabHeader
+          tabs={tabs}
+          selectedIndex={selectedTabIndex}
+          onTabPress={onTabPress}
+          barStyle={barStyle}
+          insets={insets}
+          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+        />
+        <ContentWrapper
+          initialPage={selectedTabIndex}
+          ref={pagerViewRef}
+          onPageSelected={(e) => {
+            const index = e.nativeEvent.position;
+            const selectedItem = tabs[index];
+            if (selectedItem) {
+              setTimeout(() => {
+                onTabPress(selectedItem.key);
+              });
+            }
+            indexRef.current = index;
+          }}
+          scrollEnabled={swipeEnabled}
+        >
+          {tabs.map((tab, index) => {
+            const { key, component, testID } = tab;
+
+            return (
+              <ScreenContext.Provider value={key}>
+                <SceneView
+                  testID={testID}
+                  key={key}
+                  index={index}
+                  selectedIndex={indexRef.current}
+                  lazy={lazy}
+                  lazyPreloadDistance={lazyPreloadDistance}
+                >
+                  {component}
+                </SceneView>
+              </ScreenContext.Provider>
+            );
+          })}
+        </ContentWrapper>
+      </TabContainer>
+    </TabContext.Provider>
+  );
+};
+
+export default ScrollableTab;

package/src/components/Tabs/ScrollableTabsV2/__tests__/SceneView.spec.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ScenceView from '../SceneView';
+import Typography from '../../../Typography';
+import { theme } from '../../../../index';
+
+describe('ScenceView', () => {
+  describe('lazy', () => {
+    it('renders child correctly when the scence is focused and should not unmount if selected index changed to index which is out of lazyPreloadDistance', () => {
+      const { getByText, toJSON, queryByText, rerender } = renderWithTheme(
+        <ScenceView
+          testID="scene-view"
+          index={0}
+          selectedIndex={0}
+          lazy
+          lazyPreloadDistance={1}
+        >
+          <Typography.Text>Scene 1</Typography.Text>
+        </ScenceView>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText('Scene 1')).toBeDefined();
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ScenceView
+            testID="scene-view"
+            index={0}
+            selectedIndex={2}
+            lazy
+            lazyPreloadDistance={1}
+          >
+            <Typography.Text>Scene 1</Typography.Text>
+          </ScenceView>
+        </ThemeProvider>
+      );
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryByText('Scene 1')).toBeDefined();
+    });
+
+    it('not renders child correctly when the scence is lazy and renders when selectedIndex change to 1', () => {
+      const { rerender, queryByText, toJSON } = renderWithTheme(
+        <ScenceView
+          testID="scene-view"
+          index={2}
+          selectedIndex={0}
+          lazy
+          lazyPreloadDistance={1}
+        >
+          <Typography.Text>Scene 1</Typography.Text>
+        </ScenceView>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryByText('Scene 1')).toBeNull();
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ScenceView
+            testID="scene-view"
+            index={2}
+            selectedIndex={1}
+            lazy
+            lazyPreloadDistance={1}
+          >
+            <Typography.Text>Scene 1</Typography.Text>
+          </ScenceView>
+        </ThemeProvider>
+      );
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryByText('Scene 1')).toBeDefined();
+    });
+  });
+});

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

@@ -0,0 +1,166 @@
+import React from 'react';
+import { 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 renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ScrollableTabsV2 from '..';
+import Button from '../../../Button';
+import type { TabType } from '../..';
+
+const CustomScreen = ({ title }: { title: string }) => {
+  const isFocused = ScrollableTabsV2.useIsFocused();
+  // console.error('render ' + title);
+  return (
+    <Text>
+      {title} {isFocused ? 'focused' : 'unfocused'}
+    </Text>
+  );
+};
+const TestTabsComponent = (
+  props: Omit<
+    ComponentProps<typeof ScrollableTabsV2>,
+    'selectedTabKey' | 'onTabPress' | 'tabs'
+  >
+) => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('work');
+  const tabs: TabType[] = [
+    {
+      key: 'work',
+      activeItem: 'Work',
+      component: <CustomScreen title="Work Screen" />,
+    },
+    {
+      key: 'personal',
+      activeItem: 'speaker',
+      inactiveItem: 'speaker-outlined',
+      component: <CustomScreen title="Personal Screen" />,
+    },
+    {
+      key: 'home',
+      activeItem: 'home',
+      inactiveItem: 'home-outlined',
+      component: <CustomScreen title="Home Screen" />,
+      badge: {
+        type: 'status',
+      },
+    },
+    {
+      key: 'calendar',
+      activeItem: 'calendar',
+      inactiveItem: 'calendar-dates-outlined',
+      component: <CustomScreen title="Calendar Screen" />,
+      badge: {
+        type: 'counter',
+        value: 50,
+      },
+    },
+  ];
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      <Button.Utility
+        text="Move to Work"
+        onPress={() => setSelectedTabKey('work')}
+        icon="sync"
+      />
+      <ScrollableTabsV2
+        {...props}
+        tabs={tabs}
+        selectedTabKey={selectedTabKey}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
+      />
+    </SafeAreaProvider>
+  );
+};
+
+describe('Tabs.ScrollV2', () => {
+  it('renders correctly', async () => {
+    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 focused')).toBeDefined();
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    await waitFor(() =>
+      expect(getByText('Home Screen unfocused')).toBeDefined()
+    );
+
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Calendar Screen unfocused')).toBeDefined();
+  });
+
+  describe('lazy', () => {
+    it('render all screens when lazy = false', async () => {
+      const { queryByText } = renderWithTheme(
+        <TestTabsComponent lazy={false} />
+      );
+      expect(queryByText('Work Screen focused')).toBeDefined();
+      expect(queryByText('Personal Screen unfocused')).toBeDefined();
+      await waitFor(() =>
+        expect(queryByText('Home Screen unfocused')).toBeDefined()
+      );
+      expect(queryByText('Home Screen unfocused')).toBeDefined();
+      expect(queryByText('Calendar Screen unfocused')).toBeDefined();
+    });
+
+    it('not render lazy screen', async () => {
+      const { toJSON, queryByText } = renderWithTheme(
+        <TestTabsComponent lazyPreloadDistance={1} lazy />
+      );
+      expect(queryByText('Work Screen focused')).toBeDefined();
+      expect(queryByText('Personal Screen unfocused')).toBeDefined();
+      await waitFor(() =>
+        expect(queryByText('Home Screen unfocused')).toBeDefined()
+      );
+      expect(toJSON()).toMatchSnapshot('xxx');
+      expect(queryByText('Home Screen unfocused')).toBeDefined();
+      expect(queryByText('Calendar Screen unfocused')).toBeNull();
+    });
+  });
+});
+
+describe('useIsFocused', () => {
+  it('renders correctly', () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent lazyPreloadDistance={4} />
+    );
+
+    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 focused')).toBeDefined();
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Calendar Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByTestId('hero-icon-speaker-outlined'));
+    expect(getByText('Personal Screen focused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Calendar Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByTestId('hero-icon-home-outlined'));
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen focused')).toBeDefined();
+    expect(getByText('Calendar Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByTestId('hero-icon-calendar-dates-outlined'));
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Calendar Screen focused')).toBeDefined();
+    expect(getByText('50')).toBeDefined();
+  });
+});

package/src/components/Tabs/ScrollableTabsV2/__tests__/__snapshots__/SceneView.spec.tsx.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScenceView lazy not renders child correctly when the scence is lazy and renders when selectedIndex change to 1 1`] = `
+<View
+  accessibilityElementsHidden={true}
+  importantForAccessibility="no-hide-descendants"
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        null,
+      ],
+    ]
+  }
+  testID="scene-view"
+/>
+`;
+
+exports[`ScenceView lazy not renders child correctly when the scence is lazy and renders when selectedIndex change to 1 2`] = `
+<View
+  accessibilityElementsHidden={true}
+  importantForAccessibility="no-hide-descendants"
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        null,
+      ],
+    ]
+  }
+  testID="scene-view"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Scene 1
+  </Text>
+</View>
+`;
+
+exports[`ScenceView lazy renders child correctly when the scence is focused and should not unmount if selected index changed to index which is out of lazyPreloadDistance 1`] = `
+<View
+  accessibilityElementsHidden={false}
+  importantForAccessibility="auto"
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+      ],
+    ]
+  }
+  testID="scene-view"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Scene 1
+  </Text>
+</View>
+`;
+
+exports[`ScenceView lazy renders child correctly when the scence is focused and should not unmount if selected index changed to index which is out of lazyPreloadDistance 2`] = `
+<View
+  accessibilityElementsHidden={true}
+  importantForAccessibility="no-hide-descendants"
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        null,
+      ],
+    ]
+  }
+  testID="scene-view"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Scene 1
+  </Text>
+</View>
+`;