@hero-design/rn 8.52.2-rc2.0 → 8.53.0

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

@@ -0,0 +1,413 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BottomNavigation renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flex": 1,
+            "overflow": "hidden",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          collapsable={false}
+          importantForAccessibility="auto"
+          pointerEvents="auto"
+          removeClippedSubviews={false}
+          style={
+            [
+              {
+                "display": "flex",
+                "flex": 1,
+              },
+              undefined,
+            ]
+          }
+          themeVisibility={true}
+        >
+          <Text>
+            Home Screen
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "elevation": 10,
+              "height": 72,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "shadowColor": "#401960",
+              "shadowOffset": {
+                "height": 3,
+                "width": 0,
+              },
+              "shadowOpacity": 0.27,
+              "shadowRadius": 4.65,
+            },
+            undefined,
+          ]
+        }
+        themeInsets={
+          {
+            "bottom": 0,
+            "left": 0,
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "overflow": "hidden",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <HeroIcon
+              name="home"
+              style={
+                [
+                  {
+                    "color": "#401960",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              testID="hero-icon-home"
+              themeIntent="primary"
+              themeSize="medium"
+            />
+            <Text
+              allowFontScaling={false}
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "color": "#401960",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 12,
+                    "letterSpacing": 0.24,
+                    "lineHeight": 16,
+                  },
+                  [
+                    {
+                      "marginTop": 4,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeFontWeight="semi-bold"
+              themeIntent="primary"
+            >
+              Home
+            </Text>
+          </View>
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <HeroIcon
+              name="speaker-outlined"
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              testID="hero-icon-speaker-outlined"
+              themeIntent="text"
+              themeSize="medium"
+            />
+            <Text
+              allowFontScaling={false}
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 12,
+                    "letterSpacing": 0.24,
+                    "lineHeight": 16,
+                  },
+                  [
+                    {
+                      "marginTop": 4,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeFontWeight="semi-bold"
+              themeIntent="body"
+            >
+              Feed
+            </Text>
+          </View>
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <HeroIcon
+              name="bell-outlined"
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              testID="hero-icon-bell-outlined"
+              themeIntent="text"
+              themeSize="medium"
+            />
+            <Text
+              allowFontScaling={false}
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 12,
+                    "letterSpacing": 0.24,
+                    "lineHeight": 16,
+                  },
+                  [
+                    {
+                      "marginTop": 4,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeFontWeight="semi-bold"
+              themeIntent="body"
+            >
+              Alerts
+            </Text>
+          </View>
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <HeroIcon
+              name="user-outlined"
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              testID="hero-icon-user-outlined"
+              themeIntent="text"
+              themeSize="medium"
+            />
+            <Text
+              allowFontScaling={false}
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 12,
+                    "letterSpacing": 0.24,
+                    "lineHeight": 16,
+                  },
+                  [
+                    {
+                      "marginTop": 4,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeFontWeight="semi-bold"
+              themeIntent="body"
+            >
+              Profile
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RNCSafeAreaProvider>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { ComponentProps } from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import BottomNavigation from '..';
+import type { BottomNavigationTabType } from '..';
+
+const TestComponent = (
+  props: Omit<
+    ComponentProps<typeof BottomNavigation>,
+    'selectedTabKey' | 'onTabPress' | 'tabs'
+  >
+) => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('home');
+  const tabs: BottomNavigationTabType[] = [
+    {
+      key: 'home',
+      title: 'Home',
+      icon: 'home',
+      component: <Text>Home Screen</Text>,
+    },
+    {
+      key: 'feed',
+      title: 'Feed',
+      icon: 'speaker-outlined',
+      component: <Text>Feed Screen</Text>,
+    },
+    {
+      key: 'alerts',
+      title: 'Alerts',
+      icon: 'bell-outlined',
+      component: <Text>Alerts Screen</Text>,
+    },
+    {
+      key: 'profile',
+      title: 'Profile',
+      icon: 'user-outlined',
+      component: <Text>Profile Screen</Text>,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      <BottomNavigation
+        {...props}
+        tabs={tabs}
+        selectedTabKey={selectedTabKey}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
+      />
+    </SafeAreaProvider>
+  );
+};
+
+describe('BottomNavigation', () => {
+  it('renders correctly', () => {
+    const { getByText, toJSON } = renderWithTheme(<TestComponent />);
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Home')).toBeDefined();
+    fireEvent.press(getByText('Feed'));
+    fireEvent.press(getByText('Alerts'));
+    fireEvent.press(getByText('Profile'));
+
+    // All screens are rendered and component is not unmounted when switching screen.
+    expect(getByText('Home Screen')).toBeDefined();
+    expect(getByText('Feed Screen')).toBeDefined();
+    expect(getByText('Alerts Screen')).toBeDefined();
+    expect(getByText('Profile Screen')).toBeDefined();
+  });
+
+  it('renders correctly with renderActiveTabOnly is true', () => {
+    const { getByText, queryByText, getByTestId } = renderWithTheme(
+      <TestComponent renderActiveTabOnly />
+    );
+
+    // Can switch tab by clicking icon.
+    expect(getByText('Home Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-speaker-outlined'));
+    expect(getByText('Feed Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-bell-outlined'));
+    expect(getByText('Alerts Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-user-outlined'));
+    expect(getByText('Profile Screen')).toBeDefined();
+
+    // Only render selected screen, others are unmounted.
+    expect(queryByText('Home Screen')).toBeNull();
+    expect(queryByText('Feed Screen')).toBeNull();
+    expect(queryByText('Alerts Screen')).toBeNull();
+  });
+});

package/src/components/BottomNavigation/index.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import Icon from '../Icon';
+import { isHeroIcon } from '../Icon/utils';
+import {
+  BottomBar,
+  BottomBarItem,
+  BottomBarWrapper,
+  BottomNavigationContainer,
+  BottomNavigationTab,
+  ContentWrapper,
+  StyledBottomBarText,
+} from './StyledBottomNavigation';
+import { isIOS } from '../../utils/helpers';
+import type { IconName } from '../Icon';
+import { useDeprecation } from '../../utils/hooks';
+
+export type BottomNavigationTabType = {
+  key: string;
+  title?: string;
+  icon: IconName;
+  component: ReactNode;
+  testID?: string;
+};
+
+interface BottomNavigationProps extends ViewProps {
+  /**
+   * Callback which is called on tab press, receiving key of upcoming active Tab.
+   */
+  onTabPress: (key: string) => void;
+  /**
+   * Whether inactive tabs should be removed and unmounted in React.
+   * Defaults to `false`.
+   */
+  renderActiveTabOnly?: boolean;
+  /**
+   * Current selected tab key.
+   */
+  selectedTabKey: string;
+  /**
+   * List of Tabs to be rendered. Each Tab must have an unique key.
+   */
+  tabs: {
+    key: string;
+    title?: string;
+    icon: IconName;
+    component: ReactNode;
+    testID?: string;
+  }[];
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const getInactiveIcon = (icon: IconName): IconName => {
+  const inactiveIcon = `${icon}-outlined`;
+  return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
+};
+
+const BottomNavigation = ({
+  onTabPress,
+  renderActiveTabOnly = false,
+  selectedTabKey,
+  tabs,
+  ...nativeProps
+}: BottomNavigationProps): JSX.Element => {
+  useDeprecation(
+    'BottomNavigation is deprecated and will be removed in the next major release. Please remove it.'
+  );
+  const insets = useSafeAreaInsets();
+
+  /**
+   * List of loaded tabs, tabs will be loaded when navigated to.
+   */
+  const [loaded, setLoaded] = React.useState([selectedTabKey]);
+
+  if (!loaded.includes(selectedTabKey)) {
+    // Set the current tab to be loaded if it was not loaded before
+    setLoaded((loadedState) => [...loadedState, selectedTabKey]);
+  }
+
+  return (
+    <BottomNavigationContainer {...nativeProps}>
+      <ContentWrapper>
+        {tabs.map((tab) => {
+          const { key, component, testID } = tab;
+          const active = selectedTabKey === key;
+
+          if (renderActiveTabOnly && !active) {
+            return null;
+          }
+
+          if (!loaded.includes(key)) {
+            // Don't render a screen if we've never navigated to it
+            return null;
+          }
+
+          return (
+            <BottomNavigationTab
+              key={key}
+              testID={testID ? `route-screen-${testID}` : undefined}
+              pointerEvents={active ? 'auto' : 'none'}
+              accessibilityElementsHidden={!active}
+              importantForAccessibility={
+                active ? 'auto' : 'no-hide-descendants'
+              }
+              collapsable={false}
+              removeClippedSubviews={
+                // On iOS, set removeClippedSubviews to true only when not focused
+                // This is an workaround for a bug where the clipped view never re-appears.
+                isIOS ? selectedTabKey !== key : true
+              }
+              themeVisibility={active}
+            >
+              {component}
+            </BottomNavigationTab>
+          );
+        })}
+      </ContentWrapper>
+      <BottomBarWrapper themeInsets={insets}>
+        <BottomBar>
+          {tabs.map((tab) => {
+            const { key, icon, title, testID } = tab;
+            const active = selectedTabKey === key;
+            const inactiveIcon = getInactiveIcon(icon);
+
+            return (
+              <TouchableWithoutFeedback
+                key={key}
+                onPress={() => onTabPress(key)}
+                testID={testID}
+              >
+                <BottomBarItem>
+                  <Icon
+                    icon={active ? icon : inactiveIcon}
+                    intent={active ? 'primary' : 'text'}
+                    testID={`hero-icon-${icon}`}
+                  />
+                  {!!title && (
+                    <StyledBottomBarText
+                      fontWeight="semi-bold"
+                      intent={active ? 'primary' : 'body'}
+                      numberOfLines={1}
+                    >
+                      {title}
+                    </StyledBottomBarText>
+                  )}
+                </BottomBarItem>
+              </TouchableWithoutFeedback>
+            );
+          })}
+        </BottomBar>
+      </BottomBarWrapper>
+    </BottomNavigationContainer>
+  );
+};
+
+export default BottomNavigation;