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

package/src/components/Tabs/StyledTabs.tsx

@@ -0,0 +1,72 @@
+import { View, FlatList } from 'react-native';
+import styled from 'styled-components-native';
+import Icon from '../Icon';
+import Typography from '../Typography';
+
+const TabScreen = styled(View)<{ themeVisibility?: boolean }>`
+  flex: 1;
+  display: ${({ themeVisibility }) =>
+    themeVisibility === false ? 'none' : 'flex'};
+`;
+
+const TabContainer = styled(View)`
+  flex: 1;
+  overflow: hidden;
+`;
+
+const ContentWrapper = styled(View)`
+  flex: 1;
+`;
+
+const HeaderTabWrapper = styled(View)<{
+  themeInsets: { top: number; right: number; bottom: number; left: number };
+}>`
+  padding-left: ${({ themeInsets }) =>
+    Math.max(themeInsets.left, themeInsets.right)}px;
+  padding-right: ${({ themeInsets }) =>
+    Math.max(themeInsets.left, themeInsets.right)}px;
+  background-color: ${({ theme }) => theme.__hd__.tabs.colors.background};
+`;
+
+const StyledFlatList = (styled(FlatList)`
+  padding-left: ${({ theme }) =>
+    theme.__hd__.tabs.space.flatListHorizontalPadding};
+  padding-right: ${({ theme }) =>
+    theme.__hd__.tabs.space.flatListHorizontalPadding};
+` as React.ComponentType) as new <T>() => FlatList<T>;
+
+const HeaderTabItem = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  padding-left: ${({ theme }) => theme.__hd__.tabs.space.itemHorizontalPadding};
+  padding-right: ${({ theme }) =>
+    theme.__hd__.tabs.space.itemHorizontalPadding};
+  padding-top: ${({ theme }) => theme.__hd__.tabs.space.itemVerticalPadding};
+  padding-bottom: ${({ theme }) => theme.__hd__.tabs.space.itemVerticalPadding};
+`;
+
+const StyledHeaderTabIcon = styled(Icon)<{ themeActive: boolean }>`
+  color: ${({ theme, themeActive }) =>
+    themeActive
+      ? theme.__hd__.tabs.colors.active
+      : theme.__hd__.tabs.colors.inactive};
+`;
+
+const StyledHeaderTabText = styled(Typography.Text)<{ themeActive: boolean }>`
+  margin-left: ${({ theme }) => theme.__hd__.tabs.space.titleMarginLeft};
+  color: ${({ theme, themeActive }) =>
+    themeActive
+      ? theme.__hd__.tabs.colors.active
+      : theme.__hd__.tabs.colors.inactive};
+`;
+
+export {
+  StyledFlatList,
+  HeaderTabItem,
+  TabScreen,
+  TabContainer,
+  HeaderTabWrapper,
+  ContentWrapper,
+  StyledHeaderTabIcon,
+  StyledHeaderTabText,
+};

package/src/components/Tabs/__tests__/Tabs.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, { Tab } from '..';
+
+const TestTabsComponent = (
+  props: Omit<
+    ComponentProps<typeof Tabs>,
+    'selectedTabKey' | 'onChange' | 'tabs'
+  >
+) => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('work');
+  const tabs: Tab[] = [
+    {
+      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}
+        onChange={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/__tests__/__snapshots__/Tabs.spec.tsx.snap

@@ -0,0 +1,295 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs renders correctly 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "flexBasis": 0,
+        "flexGrow": 1,
+        "flexShrink": 1,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#7622d7",
+          "paddingLeft": 0,
+          "paddingRight": 0,
+        }
+      }
+      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={
+          Object {
+            "paddingLeft": 8,
+            "paddingRight": 8,
+          }
+        }
+        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={
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "paddingBottom": 24,
+                    "paddingLeft": 16,
+                    "paddingRight": 16,
+                    "paddingTop": 24,
+                  }
+                }
+              >
+                <HeroIcon
+                  name="suitcase"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#292a2b",
+                        "fontSize": 24,
+                      },
+                      Object {
+                        "color": "#ffffff",
+                      },
+                    ]
+                  }
+                  testID="hero-icon-suitcase"
+                  themeIntent="text"
+                  themeSize="medium"
+                />
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#292a2b",
+                        "fontFamily": "Be Vietnam Pro SemiBold",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
+                      },
+                      Object {
+                        "color": "#ffffff",
+                        "marginLeft": 8,
+                      },
+                    ]
+                  }
+                  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={
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "paddingBottom": 24,
+                    "paddingLeft": 16,
+                    "paddingRight": 16,
+                    "paddingTop": 24,
+                  }
+                }
+              >
+                <HeroIcon
+                  name="face-smiley"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#292a2b",
+                        "fontSize": 24,
+                      },
+                      Object {
+                        "color": "#ffffff50",
+                      },
+                    ]
+                  }
+                  testID="hero-icon-face-smiley"
+                  themeIntent="text"
+                  themeSize="medium"
+                />
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#292a2b",
+                        "fontFamily": "Be Vietnam Pro SemiBold",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
+                      },
+                      Object {
+                        "color": "#ffffff50",
+                        "marginLeft": 8,
+                      },
+                    ]
+                  }
+                  themeActive={false}
+                  themeFontSize="medium"
+                  themeFontWeight="semi-bold"
+                  themeIntent="body"
+                >
+                  Personal
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+    </View>
+    <View
+      style={
+        Object {
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "flexShrink": 1,
+        }
+      }
+    >
+      <View
+        accessibilityElementsHidden={false}
+        collapsable={false}
+        importantForAccessibility="auto"
+        pointerEvents="auto"
+        removeClippedSubviews={false}
+        style={
+          Object {
+            "display": "flex",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+          }
+        }
+        testID="tab-screen-work"
+        themeVisibility={true}
+      >
+        <Text>
+          Work Screen
+        </Text>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/components/Tabs/index.tsx

@@ -0,0 +1,177 @@
+import React, { ReactNode } from 'react';
+import {
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+  FlatList,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { IconProps } from '../Icon';
+import {
+  HeaderTabItem,
+  HeaderTabWrapper,
+  StyledHeaderTabText,
+  StyledHeaderTabIcon,
+  TabContainer,
+  TabScreen,
+  ContentWrapper,
+  StyledFlatList,
+} from './StyledTabs';
+import { isIOS } from '../../utils/helpers';
+
+type IconType = IconProps['icon'];
+
+export type Tab = {
+  key: string;
+  title: string;
+  icon: IconType;
+  component: ReactNode;
+  testID?: string;
+};
+
+interface TabType extends ViewProps {
+  /**
+   * Callback which is called on tab change, receiving id of upcoming active Tab.
+   */
+  onChange: (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 Tab to be rendered. Each Tab must have an unique id.
+   */
+  tabs: Tab[];
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Tabs = ({
+  onChange,
+  renderActiveTabOnly = false,
+  selectedTabKey,
+  tabs,
+  ...nativeProps
+}: TabType): 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]);
+
+  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<Tab>
+          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, index }) => {
+            const { key, icon, title, testID } = tab;
+            const active = selectedTabKey === key;
+
+            return (
+              <TouchableOpacity
+                key={key}
+                onPress={() => {
+                  if (key !== selectedTabKey) {
+                    onChange(key);
+                    flatListRef.current?.scrollToIndex({
+                      index,
+                      viewPosition: 0.5,
+                    });
+                  }
+                }}
+                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 } = 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={`tab-screen-${selectedTabKey}`}
+              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/index.ts

@@ -6,9 +6,11 @@ import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import Card from './components/Card';
 import Divider from './components/Divider';
+import Tabs from './components/Tabs';
 import Icon from './components/Icon';
 import Typography from './components/Typography';
 import FAB from './components/FAB';
+import Button from './components/Button';
 
 export {
   theme,
@@ -21,6 +23,8 @@ export {
   Card,
   Divider,
   Icon,
+  Tabs,
   Typography,
   FAB,
+  Button,
 };

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -17,12 +17,6 @@ Object {
         "warning": "#d98a2c",
         "warningBackground": "#fff6eb",
       },
-      "fontSizes": Object {
-        "default": "12px",
-      },
-      "fonts": Object {
-        "default": "Be Vietnam Pro SemiBold",
-      },
       "padding": Object {
         "default": "4px 8px",
       },
@@ -44,6 +38,9 @@ Object {
       "sizes": Object {
         "height": 72,
       },
+      "space": Object {
+        "titleMarginTop": "4px",
+      },
     },
     "card": Object {
       "padding": Object {
@@ -125,6 +122,19 @@ Object {
         "xsmall": 16,
       },
     },
+    "tabs": Object {
+      "colors": Object {
+        "active": "#ffffff",
+        "background": "#7622d7",
+        "inactive": "#ffffff50",
+      },
+      "space": Object {
+        "flatListHorizontalPadding": "8px",
+        "itemHorizontalPadding": "16px",
+        "itemVerticalPadding": "24px",
+        "titleMarginLeft": "8px",
+      },
+    },
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",

package/src/theme/components/badge.ts

@@ -20,19 +20,11 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     default: `${theme.space.xsmall}px ${theme.space.small}px`,
   };
 
-  const fonts = {
-    default: theme.fonts.semiBold,
-  };
-
-  const fontSizes = {
-    default: `${theme.fontSizes.small}px`,
-  };
-
   const radii = {
     default: `4px`,
   };
 
-  return { borderWidths, colors, padding, fonts, fontSizes, radii };
+  return { borderWidths, colors, padding, radii };
 };
 
 export default getBadgeTheme;