@hero-design/rn 8.24.0-alpha.1 → 8.25.0

package/src/components/Success/__tests__/index.spec.tsx

@@ -61,6 +61,7 @@ describe('Success', () => {
   });
   it('handles CTA press correctly', () => {
     const onCtaPress = jest.fn();
+    const onSecondCtaPress = jest.fn();
     const { getByText } = renderWithTheme(
       <Success
         title={title}
@@ -68,11 +69,16 @@ describe('Success', () => {
         image="path_to_image"
         ctaText="CTA Text"
         onCtaPress={onCtaPress}
+        secondaryCtaText="Second CTA Text"
+        onSecondaryCtaPress={onSecondCtaPress}
       />
     );
 
     const CTA = getByText('CTA Text');
     fireEvent.press(CTA);
+    const secondCTA = getByText('Second CTA Text');
+    fireEvent.press(secondCTA);
     expect(onCtaPress).toBeCalledTimes(1);
+    expect(onSecondCtaPress).toBeCalledTimes(1);
   });
 });

package/src/components/Success/index.tsx

@@ -47,6 +47,14 @@ export interface SuccessProps extends ViewProps {
    * Callback when the action button is pressed.
    */
   onCtaPress?: () => void;
+  /**
+   * Secondary button text.
+   */
+  secondaryCtaText?: string;
+  /**
+   * Callback when the secondary button is pressed.
+   */
+  onSecondaryCtaPress?: () => void;
   /**
    * Testing id of the component.
    */
@@ -78,8 +86,12 @@ const SuccessPage = ({
   testID,
   ctaText,
   onCtaPress = noop,
+  secondaryCtaText,
+  onSecondaryCtaPress,
   ...nativeProps
 }: SuccessProps): ReactElement => {
+  const showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
+
   return (
     <StyledSuccessContainer
       testID={testID}
@@ -102,6 +114,13 @@ const SuccessPage = ({
       {!!ctaText && (
         <StyledSuccessButtonContainer>
           <StyledSuccessButtonPrimary text={ctaText} onPress={onCtaPress} />
+          {!!showSecondaryButton && (
+            <StyledSuccessButtonPrimary
+              variant="text"
+              text={secondaryCtaText}
+              onPress={onSecondaryCtaPress}
+            />
+          )}
         </StyledSuccessButtonContainer>
       )}
     </StyledSuccessContainer>

package/src/components/Tabs/{ScrollableTabsV2/SceneView.tsx → SceneView.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import { TabScreen } from '../StyledScrollableTabs';
+import { TabScreen } from './StyledScrollableTabs';
 
-export const SceneView = ({
+const SceneView = ({
   lazy = false,
   lazyPreloadDistance = 1,
   children,

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PagerView from 'react-native-pager-view';
-import {
-  TabContainer,
-  TabScreen,
-  ContentWrapper,
-} from './StyledScrollableTabs';
+import { TabContainer, ContentWrapper } from './StyledScrollableTabs';
 import type { TabsProps } from '.';
+import SceneView from './SceneView';
 import ScrollableTabHeader from './ScrollableTabsHeader';
+import { ScreenContext, TabContext } from './useIsFocused';
 
 const ScrollableTab = ({
   onTabPress,
@@ -25,6 +23,7 @@ const ScrollableTab = ({
   const selectedTabIndex = tabs.findIndex(
     (item) => item.key === selectedTabKey
   );
+
   React.useEffect(() => {
     let timeoutHandle: number | null = null;
     if (selectedTabIndex !== -1) {
@@ -43,51 +42,58 @@ const ScrollableTab = ({
     };
   }, [selectedTabIndex, pagerViewRef]);
 
+  const tabContextProviderValue = React.useMemo(
+    () => ({
+      selectedTabKey,
+    }),
+    [selectedTabKey]
+  );
+
   return (
-    <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) {
-            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;
+    <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);
+              });
+            }
+          }}
+          scrollEnabled={swipeEnabled}
+        >
+          {tabs.map((tab, index) => {
+            const { key, component, testID } = tab;
 
-          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>
+            return (
+              <ScreenContext.Provider value={key} key={key}>
+                <SceneView
+                  testID={testID}
+                  index={index}
+                  selectedIndex={selectedTabIndex}
+                  lazy={lazy}
+                  lazyPreloadDistance={lazyPreloadDistance}
+                >
+                  {component}
+                </SceneView>
+              </ScreenContext.Provider>
+            );
+          })}
+        </ContentWrapper>
+      </TabContainer>
+    </TabContext.Provider>
   );
 };
 

package/src/components/Tabs/{ScrollableTabsV2/__tests__ → __tests__}/SceneView.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ThemeProvider } from '@emotion/react';
-import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import ScenceView from '../SceneView';
-import Typography from '../../../Typography';
-import { theme } from '../../../../index';
+import Typography from '../../Typography';
+import { theme } from '../../../index';
 
 describe('ScenceView', () => {
   describe('lazy', () => {

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

@@ -1,16 +1,25 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { fireEvent } from '@testing-library/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 Tabs from '..';
+import ScrollableTabs from '../ScrollableTabs';
 import Button from '../../Button';
 import type { TabType } from '..';
+import { useIsFocused } from '../useIsFocused';
 
+const CustomScreen = ({ title }: { title: string }) => {
+  const isFocused = useIsFocused();
+  return (
+    <Text>
+      {title} {isFocused ? 'focused' : 'unfocused'}
+    </Text>
+  );
+};
 const TestTabsComponent = (
   props: Omit<
-    ComponentProps<typeof Tabs>,
+    ComponentProps<typeof ScrollableTabs>,
     'selectedTabKey' | 'onTabPress' | 'tabs'
   >
 ) => {
@@ -19,19 +28,19 @@ const TestTabsComponent = (
     {
       key: 'work',
       activeItem: 'Work',
-      component: <Text>Work Screen</Text>,
+      component: <CustomScreen title="Work Screen" />,
     },
     {
       key: 'personal',
       activeItem: 'speaker',
       inactiveItem: 'speaker-outlined',
-      component: <Text>Personal Screen</Text>,
+      component: <CustomScreen title="Personal Screen" />,
     },
     {
       key: 'home',
       activeItem: 'home',
       inactiveItem: 'home-outlined',
-      component: <Text>Home Screen</Text>,
+      component: <CustomScreen title="Home Screen" />,
       badge: {
         type: 'status',
       },
@@ -40,7 +49,7 @@ const TestTabsComponent = (
       key: 'calendar',
       activeItem: 'calendar',
       inactiveItem: 'calendar-dates-outlined',
-      component: <Text>Calendar Screen</Text>,
+      component: <CustomScreen title="Calendar Screen" />,
       badge: {
         type: 'counter',
         value: 50,
@@ -60,7 +69,7 @@ const TestTabsComponent = (
         onPress={() => setSelectedTabKey('work')}
         icon="sync"
       />
-      <Tabs.Scroll
+      <ScrollableTabs
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
@@ -71,7 +80,7 @@ const TestTabsComponent = (
 };
 
 describe('Tabs.Scroll', () => {
-  it('renders correctly', () => {
+  it('renders correctly', async () => {
     const { getByTestId, getByText, toJSON } = renderWithTheme(
       <TestTabsComponent />
     );
@@ -80,30 +89,79 @@ describe('Tabs.Scroll', () => {
     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();
-    fireEvent.press(getByTestId('hero-icon-calendar-dates-outlined'));
-    expect(getByText('Calendar Screen')).toBeDefined();
-    expect(getByText('50')).toBeDefined();
-    fireEvent.press(getByText('Move to Work'));
-    expect(getByText('Work Screen')).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();
+    });
   });
+});
 
-  it('renders correctly with lazy preloaded', () => {
-    const { getByText, queryByText, getByTestId } = renderWithTheme(
-      <TestTabsComponent lazy lazyPreloadDistance={1} swipeEnabled={false} />
+describe('useIsFocused', () => {
+  it('renders correctly', async () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent />
     );
 
-    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();
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Work')).toBeDefined();
+    expect(getByTestId('hero-icon-speaker-outlined')).toBeDefined();
+    expect(getByTestId('hero-icon-home-outlined')).toBeDefined();
+    await waitFor(() => expect(getByText('Work Screen focused')).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('Home Screen')).toBeDefined();
-    expect(queryByText('Work Screen')).toBeNull();
+    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();
   });
 });