@hero-design/rn 7.1.3-alpha5 → 7.1.3-alpha8

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

@@ -0,0 +1,321 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs renders correctly 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "paddingLeft": 0,
+            "paddingRight": 0,
+          },
+          undefined,
+        ]
+      }
+      themeInsets={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <RCTScrollView
+        data={
+          Array [
+            Object {
+              "component": <Text>
+                Work Screen
+              </Text>,
+              "icon": "suitcase",
+              "key": "work",
+              "title": "Work",
+            },
+            Object {
+              "component": <Text>
+                Personal Screen
+              </Text>,
+              "icon": "face-smiley",
+              "key": "personal",
+              "title": "Personal",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        horizontal={true}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        onScrollToIndexFailed={[Function]}
+        removeClippedSubviews={false}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={Array []}
+        style={
+          Array [
+            Object {
+              "paddingLeft": 8,
+              "paddingRight": 8,
+            },
+            undefined,
+          ]
+        }
+        viewabilityConfigCallbackPairs={Array []}
+      >
+        <View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              nativeID="animatedComponent"
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "paddingBottom": 24,
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "paddingTop": 24,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <HeroIcon
+                  name="suitcase"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#292a2b",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  testID="hero-icon-suitcase"
+                  themeIntent="text"
+                  themeSize="medium"
+                />
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#292a2b",
+                        "fontFamily": "BeVietnamPro-SemiBold",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                          "marginLeft": 8,
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeActive={true}
+                  themeFontSize="medium"
+                  themeFontWeight="semi-bold"
+                  themeIntent="body"
+                >
+                  Work
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              nativeID="animatedComponent"
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "paddingBottom": 24,
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "paddingTop": 24,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <HeroIcon
+                  name="face-smiley"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#292a2b",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff50",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  testID="hero-icon-face-smiley"
+                  themeIntent="text"
+                  themeSize="medium"
+                />
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#292a2b",
+                        "fontFamily": "BeVietnamPro-SemiBold",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff50",
+                          "marginLeft": 8,
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeActive={false}
+                  themeFontSize="medium"
+                  themeFontWeight="semi-bold"
+                  themeIntent="body"
+                >
+                  Personal
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityElementsHidden={false}
+        collapsable={false}
+        importantForAccessibility="auto"
+        pointerEvents="auto"
+        removeClippedSubviews={false}
+        style={
+          Array [
+            Object {
+              "display": "flex",
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        themeVisibility={true}
+      >
+        <Text>
+          Work Screen
+        </Text>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;

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

@@ -0,0 +1,79 @@
+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',
+      title: 'Work',
+      icon: 'suitcase',
+      component: <Text>Work Screen</Text>,
+    },
+    {
+      key: 'personal',
+      title: 'Personal',
+      icon: 'face-smiley',
+      component: <Text>Personal Screen</Text>,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      <Tabs
+        {...props}
+        tabs={tabs}
+        selectedTabKey={selectedTabKey}
+        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
+      />
+    </SafeAreaProvider>
+  );
+};
+
+describe('Tabs', () => {
+  it('renders correctly', () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Work')).toBeDefined();
+    expect(getByText('Personal')).toBeDefined();
+    expect(getByTestId('hero-icon-suitcase')).toBeDefined();
+    expect(getByTestId('hero-icon-face-smiley')).toBeDefined();
+    fireEvent.press(getByText('Personal'));
+
+    // All screens are rendered and component is not unmounted when switching screen.
+    expect(getByText('Work Screen')).toBeDefined();
+    expect(getByText('Personal Screen')).toBeDefined();
+  });
+
+  it('renders correctly with renderActiveTabOnly is true', () => {
+    const { getByText, queryByText, getByTestId } = renderWithTheme(
+      <TestTabsComponent renderActiveTabOnly />
+    );
+
+    // Can switch tab by clicking icon.
+    fireEvent.press(getByTestId('hero-icon-face-smiley'));
+    expect(getByText('Personal Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-suitcase'));
+    expect(getByText('Work Screen')).toBeDefined();
+
+    // Only render selected screen, others are unmounted.
+    expect(queryByText('Personal Screen')).toBeNull();
+  });
+});

package/src/components/Tabs/index.tsx

@@ -0,0 +1,185 @@
+import React, { ReactNode } from 'react';
+import {
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+  FlatList,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  HeaderTabItem,
+  HeaderTabWrapper,
+  StyledHeaderTabText,
+  StyledHeaderTabIcon,
+  TabContainer,
+  TabScreen,
+  ContentWrapper,
+  StyledFlatList,
+} from './StyledTabs';
+import { isIOS } from '../../utils/helpers';
+import { IconName } from '../Icon';
+
+export type TabType = {
+  key: string;
+  title: string;
+  icon: IconName;
+  component: ReactNode;
+  testID?: string;
+};
+
+interface TabsProps 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;
+  }[];
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Tabs = ({
+  onTabPress,
+  renderActiveTabOnly = false,
+  selectedTabKey,
+  tabs,
+  ...nativeProps
+}: TabsProps): JSX.Element => {
+  const flatListRef = React.useRef<FlatList>(null);
+  const insets = useSafeAreaInsets();
+
+  /**
+   * List of loaded tabs, tabs will be loaded when navigated to.
+   */
+  const [loaded, setLoaded] = React.useState([selectedTabKey]);
+
+  React.useEffect(() => {
+    const selectedTabIndex = tabs.findIndex(
+      item => item.key === selectedTabKey
+    );
+    if (selectedTabIndex !== -1) {
+      flatListRef.current?.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5,
+      });
+    }
+  }, [selectedTabKey, tabs]);
+
+  if (!loaded.includes(selectedTabKey)) {
+    // Set the current tab to be loaded if it was not loaded before
+    setLoaded(loadedState => [...loadedState, selectedTabKey]);
+  }
+
+  return (
+    <TabContainer {...nativeProps}>
+      <HeaderTabWrapper themeInsets={insets}>
+        <StyledFlatList<TabType>
+          ref={flatListRef}
+          horizontal
+          data={tabs}
+          keyExtractor={tab => String(tab.key)}
+          showsHorizontalScrollIndicator={false}
+          onScrollToIndexFailed={({ index }) => {
+            setTimeout(
+              () =>
+                flatListRef.current?.scrollToIndex({
+                  index,
+                  viewPosition: 0.5,
+                }),
+              100
+            );
+          }}
+          renderItem={({ item: tab }) => {
+            const { key, icon, title, testID } = tab;
+            const active = selectedTabKey === key;
+
+            return (
+              <TouchableOpacity
+                key={key}
+                onPress={() => onTabPress(key)}
+                testID={testID}
+              >
+                <HeaderTabItem>
+                  <StyledHeaderTabIcon
+                    icon={icon}
+                    testID={`hero-icon-${icon}`}
+                    themeActive={active}
+                  />
+                  <StyledHeaderTabText
+                    fontWeight="semi-bold"
+                    numberOfLines={1}
+                    themeActive={active}
+                  >
+                    {title}
+                  </StyledHeaderTabText>
+                </HeaderTabItem>
+              </TouchableOpacity>
+            );
+          }}
+        />
+      </HeaderTabWrapper>
+      <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 (
+            <TabScreen
+              key={key}
+              testID={testID ? `tab-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}
+            </TabScreen>
+          );
+        })}
+      </ContentWrapper>
+    </TabContainer>
+  );
+};
+
+export default Tabs;

package/src/components/Typography/Text/StyledText.tsx

@@ -1,73 +1,28 @@
 import { Text } from 'react-native';
-import styled, { css } from '../../../styled-components';
+import styled from '@emotion/native';
+
+const FONTWEIGHT_MAP = {
+  light: 'light',
+  regular: 'regular',
+  'semi-bold': 'semiBold',
+} as const;
 
 const StyledText = styled(Text)<{
   themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent: 'body' | 'subdued' | 'primary';
-}>`
-  ${({ themeFontSize, theme }) => {
-    switch (themeFontSize) {
-      case 'small':
-        return css`
-          font-size: ${theme.__hd__.typography.fontSizes.small}px;
-          line-height: ${theme.__hd__.typography.lineHeights.small};
-          letter-spacing: ${theme.__hd__.typography.fontSizes.small * 0.03}px;
-        `;
-      case 'medium':
-        return css`
-          font-size: ${theme.__hd__.typography.fontSizes.medium}px;
-          line-height: ${theme.__hd__.typography.lineHeights.medium};
-          letter-spacing: ${theme.__hd__.typography.fontSizes.medium * 0.03}px;
-        `;
-      case 'large':
-        return css`
-          font-size: ${theme.__hd__.typography.fontSizes.large}px;
-          line-height: ${theme.__hd__.typography.lineHeights.large};
-          letter-spacing: ${theme.__hd__.typography.fontSizes.large * 0.03}px;
-        `;
-      case 'xlarge':
-        return css`
-          font-size: ${theme.__hd__.typography.fontSizes.xlarge}px;
-          line-height: ${theme.__hd__.typography.lineHeights.xlarge};
-          letter-spacing: ${theme.__hd__.typography.fontSizes.xlarge * 0.03}px;
-        `;
-    }
-  }}
-
-  ${({ themeFontWeight, theme }) => {
-    switch (themeFontWeight) {
-      case 'light':
-        return css`
-          font-family: ${theme.__hd__.typography.fonts.light};
-        `;
-      case 'regular':
-        return css`
-          font-family: ${theme.__hd__.typography.fonts.regular};
-        `;
-      case 'semi-bold':
-        return css`
-          font-family: ${theme.__hd__.typography.fonts.semiBold};
-        `;
-    }
-  }}
+}>(({ themeFontSize, themeFontWeight, themeIntent, theme }) => {
+  const sizeStyles = {
+    fontSize: theme.__hd__.typography.fontSizes[themeFontSize],
+    lineHeight: theme.__hd__.typography.lineHeights[themeFontSize],
+    letterSpacing: theme.__hd__.typography.fontSizes[themeFontSize] * 0.03,
+  };
 
-  ${({ themeIntent, theme }) => {
-    switch (themeIntent) {
-      case 'body':
-        return css`
-          color: ${theme.__hd__.typography.colors.body};
-        `;
-      case 'subdued':
-        return css`
-          color: ${theme.__hd__.typography.colors.subdued};
-        `;
-      case 'primary':
-        return css`
-          color: ${theme.__hd__.typography.colors.primary};
-        `;
-    }
-  }}
-`;
+  return {
+    ...sizeStyles,
+    fontFamily: theme.__hd__.typography.fonts[FONTWEIGHT_MAP[themeFontWeight]],
+    color: theme.__hd__.typography.colors[themeIntent],
+  };
+});
 
 export { StyledText };