@hero-design/rn 7.2.2 → 7.3.0

package/src/components/Tabs/index.tsx

@@ -1,43 +1,50 @@
 import React, { ReactNode } from 'react';
 import {
-  TouchableOpacity,
+  Animated,
+  TouchableWithoutFeedback,
+  View,
   StyleProp,
   ViewStyle,
   ViewProps,
-  FlatList,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@emotion/react';
+import PagerView, {
+  PagerViewOnPageScrollEventData,
+} from 'react-native-pager-view';
+import Typography from '../Typography';
 import {
-  HeaderTabItem,
+  ContentWrapper,
   HeaderTabWrapper,
-  StyledHeaderTabText,
-  StyledHeaderTabIcon,
+  HeaderTabItem,
   TabContainer,
   TabScreen,
-  ContentWrapper,
-  StyledFlatList,
+  HeaderTab,
 } from './StyledTabs';
-import { isIOS } from '../../utils/helpers';
+import Badge from '../Badge';
 import { IconName } from '../Icon';
+import ActiveTabIndicator from './ActiveTabIndicator';
+import ScrollableTabs from './ScrollableTabs';
+
+export type ItemType =
+  | string
+  | IconName
+  | ((props: { color: string }) => ReactNode);
 
 export type TabType = {
   key: string;
-  title: string;
-  icon: IconName;
+  activeItem: ItemType;
+  inactiveItem?: ItemType;
   component: ReactNode;
   testID?: string;
+  showBadge?: boolean;
 };
 
-interface TabsProps extends ViewProps {
+export 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.
    */
@@ -45,116 +52,154 @@ interface TabsProps extends ViewProps {
   /**
    * List of Tabs to be rendered. Each Tab must have an unique key.
    */
-  tabs: {
-    key: string;
-    title: string;
-    icon: IconName;
-    component: ReactNode;
-    testID?: string;
-  }[];
+  tabs: TabType[];
+  /**
+   * Style for the container of Tab.
+   */
+  containerStyle?: StyleProp<ViewStyle>;
   /**
-   * Addditional style.
+   * Style for the tab navigation bar.
    */
-  style?: StyleProp<ViewStyle>;
+  barStyle?: StyleProp<ViewStyle>;
+  /**
+   * Whether inactive screen should be removed and unmounted in React.
+   * Defaults value is `false`.
+   */
+  lazy?: boolean;
+  /**
+   * Only work when lazy is `true`. You can specify how many adjacent screens should be preloaded.
+   * Defaults value is `1`.
+   */
+  lazyPreloadDistance?: number;
   /**
    * Testing id of the component.
    */
   testID?: string;
 }
 
+const getTabItem = ({
+  item,
+  color,
+  active,
+}: {
+  item: ItemType;
+  color: string;
+  active: boolean;
+}) => {
+  if (typeof item === 'string') {
+    return (
+      <Typography.Text
+        fontWeight={active ? 'semi-bold' : 'regular'}
+        numberOfLines={1}
+        style={{ color }}
+      >
+        {item}
+      </Typography.Text>
+    );
+  }
+
+  return item({ color });
+};
+
 const Tabs = ({
   onTabPress,
-  renderActiveTabOnly = false,
   selectedTabKey,
   tabs,
-  ...nativeProps
+  containerStyle,
+  barStyle,
+  lazy = false,
+  lazyPreloadDistance = 1,
 }: TabsProps): JSX.Element => {
-  const flatListRef = React.useRef<FlatList>(null);
+  const theme = useTheme();
   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]);
-  }
+  const pagerViewRef = React.useRef<PagerView>(null);
+  const selectedTabIndex = tabs.findIndex(item => item.key === selectedTabKey);
+  const scrollOffsetAnimatedValue = React.useRef(new Animated.Value(0)).current;
+  const positionAnimatedValue = React.useRef(new Animated.Value(0)).current;
+  const [tabsWidth, setTabsWidth] = React.useState<number>(0);
 
   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;
+    <TabContainer style={containerStyle}>
+      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+        <View>
+          <HeaderTab
+            onLayout={e => {
+              const { width } = e.nativeEvent.layout;
+              if (tabsWidth !== width) {
+                setTabsWidth(width);
+              }
+            }}
+          >
+            {tabs.map((tab, index) => {
+              const {
+                key,
+                testID,
+                activeItem,
+                inactiveItem: originalInactiveItem,
+                showBadge = false,
+              } = tab;
 
-            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;
+              const active = selectedTabKey === key;
+              const inactiveItem = originalInactiveItem ?? activeItem;
+              const tabItem = getTabItem({
+                item: active ? activeItem : inactiveItem,
+                color: theme.__hd__.tabs.colors.text,
+                active,
+              });
 
-          if (renderActiveTabOnly && !active) {
-            return null;
+              return (
+                <TouchableWithoutFeedback
+                  key={key}
+                  onPress={() => {
+                    onTabPress(key);
+                    pagerViewRef.current?.setPage(index);
+                  }}
+                  testID={testID}
+                >
+                  <HeaderTabItem>
+                    <Badge.Status visible={showBadge}>{tabItem}</Badge.Status>
+                  </HeaderTabItem>
+                </TouchableWithoutFeedback>
+              );
+            })}
+          </HeaderTab>
+          <ActiveTabIndicator
+            positionAnimatedValue={positionAnimatedValue}
+            scrollOffsetAnimatedValue={scrollOffsetAnimatedValue}
+            tabsLength={tabs.length}
+            tabsWidth={tabsWidth}
+          />
+        </View>
+      </HeaderTabWrapper>
+      <ContentWrapper
+        initialPage={selectedTabIndex}
+        ref={pagerViewRef}
+        onPageSelected={e => {
+          const index = e.nativeEvent.position;
+          const selectedItem = tabs[index];
+          if (selectedItem) {
+            onTabPress(selectedItem.key);
           }
-
-          if (!loaded.includes(key)) {
-            // Don't render a screen if we've never navigated to it
-            return null;
+        }}
+        onPageScroll={Animated.event<PagerViewOnPageScrollEventData>(
+          [
+            {
+              nativeEvent: {
+                offset: scrollOffsetAnimatedValue,
+                position: positionAnimatedValue,
+              },
+            },
+          ],
+          {
+            useNativeDriver: true,
           }
+        )}
+      >
+        {tabs.map((tab, index) => {
+          const { key, component, testID } = tab;
+          const active = selectedTabKey === key;
+          const isLazyScreen =
+            lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
 
           return (
             <TabScreen
@@ -166,14 +211,8 @@ const Tabs = ({
                 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}
+              {isLazyScreen ? null : component}
             </TabScreen>
           );
         })}
@@ -182,4 +221,6 @@ const Tabs = ({
   );
 };
 
-export default Tabs;
+export default Object.assign(Tabs, {
+  Scroll: ScrollableTabs,
+});

package/src/components/Tabs/utils.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Animated } from 'react-native';
+
+export const useAnimatedValueArray = (initialValues: number[]) => {
+  const refs = React.useRef<Animated.Value[]>([]);
+
+  refs.current.length = initialValues.length;
+  initialValues.forEach((initialValue, i) => {
+    refs.current[i] = refs.current[i] ?? new Animated.Value(initialValue);
+  });
+
+  return refs.current;
+};

package/src/components/Tag/StyledTag.tsx

@@ -0,0 +1,35 @@
+import { View, Text } from 'react-native';
+import styled from '@emotion/native';
+
+const BACKGROUND_INTENTS = {
+  success: 'successBackground',
+  warning: 'warningBackground',
+  danger: 'dangerBackground',
+  info: 'infoBackground',
+} as const;
+
+type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
+
+const StyledView = styled(View)<{ themeIntent: ThemeIntent }>(
+  ({ themeIntent, theme }) => ({
+    borderWidth: theme.__hd__.tag.borderWidths.default,
+    borderRadius: theme.__hd__.tag.radii.default,
+    paddingVertical: theme.__hd__.tag.space.verticalPadding,
+    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
+    borderColor: theme.__hd__.tag.colors[themeIntent],
+    backgroundColor: theme.__hd__.tag.colors[BACKGROUND_INTENTS[themeIntent]],
+  })
+);
+
+const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>(
+  ({ themeIntent, theme }) => ({
+    fontFamily: theme.__hd__.tag.fonts.default,
+    fontSize: theme.__hd__.tag.fontSizes.default,
+    color: theme.__hd__.tag.colors[themeIntent],
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+    textAlign: 'center',
+  })
+);
+
+export { StyledView, StyledText };

package/src/components/Tag/__tests__/Tag.spec.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Tag from '..';
+
+describe('Tag', () => {
+  it('has success style when intent is success', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="APPROVED" intent="success" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('APPROVED')).toBeDefined();
+  });
+
+  it('has warning style when intent is warning', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="PENDING" intent="warning" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('PENDING')).toBeDefined();
+  });
+
+  it('has danger style when intent is danger', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="DECLINED" intent="danger" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('DECLINED')).toBeDefined();
+  });
+
+  it('has info style when intent is info', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="SUBMITTED" intent="info" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('SUBMITTED')).toBeDefined();
+  });
+});

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag has danger style when intent is danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fcebe7",
+        "borderColor": "#de350b",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="danger"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#de350b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="danger"
+  >
+    DECLINED
+  </Text>
+</View>
+`;
+
+exports[`Tag has info style when intent is info 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ecf0ff",
+        "borderColor": "#4568fb",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#4568fb",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="info"
+  >
+    SUBMITTED
+  </Text>
+</View>
+`;
+
+exports[`Tag has success style when intent is success 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f0fef4",
+        "borderColor": "#017d6d",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="success"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#017d6d",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="success"
+  >
+    APPROVED
+  </Text>
+</View>
+`;
+
+exports[`Tag has warning style when intent is warning 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff6eb",
+        "borderColor": "#d98a2c",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="warning"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#d98a2c",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="warning"
+  >
+    PENDING
+  </Text>
+</View>
+`;

package/src/components/Tag/index.tsx

@@ -0,0 +1,41 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import React from 'react';
+import { StyledView, StyledText } from './StyledTag';
+
+interface TagProps extends ViewProps {
+  /**
+   * Content of the Tag.
+   */
+  content: string;
+  /**
+   * Visual intent color to apply to Tag.
+   */
+  intent?: 'success' | 'warning' | 'danger' | 'info';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Tag = ({
+  content,
+  intent = 'info',
+  style,
+  testID,
+  ...nativeProps
+}: TagProps): JSX.Element => (
+  <StyledView
+    {...nativeProps}
+    themeIntent={intent}
+    style={style}
+    testID={testID}
+  >
+    <StyledText themeIntent={intent}>{content}</StyledText>
+  </StyledView>
+);
+
+export default Tag;

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

@@ -41,10 +41,10 @@ const Text = ({
   ...nativeProps
 }: TextProps) => (
   <StyledText
+    {...nativeProps}
     themeFontSize={fontSize}
     themeFontWeight={fontWeight}
     themeIntent={intent}
-    {...nativeProps}
   >
     {children}
   </StyledText>

package/src/index.ts

@@ -2,14 +2,19 @@ import { ThemeProvider, useTheme } from '@emotion/react';
 import theme, { getTheme } from './theme';
 import { scale } from './utils/scale';
 
+import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import Button from './components/Button';
 import Card from './components/Card';
+import Collapse from './components/Collapse';
 import Divider from './components/Divider';
+import Drawer from './components/Drawer';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Progress from './components/Progress';
 import Tabs from './components/Tabs';
+import Tag from './components/Tag';
 import Typography from './components/Typography';
 
 export {
@@ -18,14 +23,19 @@ export {
   useTheme,
   scale,
   ThemeProvider,
+  Avatar,
   Badge,
   BottomNavigation,
   Button,
   Card,
+  Collapse,
   Divider,
+  Drawer,
   FAB,
   Icon,
+  Progress,
   Tabs,
+  Tag,
   Typography,
 };