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

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

@@ -1,413 +0,0 @@
-// 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

@@ -1,97 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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;

package/src/theme/components/bottomNavigation.ts

@@ -1,27 +0,0 @@
-import type { GlobalTheme } from '../global';
-
-const getBottomNavigationTheme = (theme: GlobalTheme) => {
-  const colors = {
-    shadow: theme.colors.primary,
-    background: theme.colors.defaultGlobalSurface,
-  };
-
-  const sizes = {
-    height: theme.sizes['6xlarge'],
-  };
-
-  const shadows = {
-    offset: { width: 0, height: 3 },
-    opacity: 0.27,
-    radius: 4.65,
-    elevation: 10,
-  };
-
-  const space = {
-    titleMarginTop: theme.space.xsmall,
-  };
-
-  return { colors, shadows, sizes, space };
-};
-
-export default getBottomNavigationTheme;