@hero-design/rn 7.1.1 → 7.1.2

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

@@ -0,0 +1,315 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BottomNavigation 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 {
+          "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="route-screen-home"
+        themeVisibility={true}
+      >
+        <Text>
+          Home Screen
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+          "elevation": 10,
+          "height": 72,
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "shadowColor": "#292a2b",
+          "shadowOffset": Object {
+            "height": 3,
+            "width": 0,
+          },
+          "shadowOpacity": 0.27,
+          "shadowRadius": 4.65,
+        }
+      }
+      themeInsets={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexBasis": 0,
+            "flexDirection": "row",
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "overflow": "hidden",
+          }
+        }
+      >
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+            }
+          }
+        >
+          <HeroIcon
+            name="home"
+            style={
+              Object {
+                "color": "#7622d7",
+                "fontSize": 24,
+              }
+            }
+            testID="hero-icon-home"
+            themeIntent="primary"
+            themeSize="medium"
+          />
+          <Text
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#7622d7",
+                  "fontSize": 12,
+                  "fontWeight": "600",
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+            themeFontSize="small"
+            themeFontWeight="semi-bold"
+            themeIntent="primary"
+          >
+            Home
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+            }
+          }
+        >
+          <HeroIcon
+            name="speaker-outlined"
+            style={
+              Object {
+                "color": "#292a2b",
+                "fontSize": 24,
+              }
+            }
+            testID="hero-icon-speaker-outlined"
+            themeIntent="text"
+            themeSize="medium"
+          />
+          <Text
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 12,
+                  "fontWeight": "600",
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+            themeFontSize="small"
+            themeFontWeight="semi-bold"
+            themeIntent="body"
+          >
+            Feed
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+            }
+          }
+        >
+          <HeroIcon
+            name="bell-outlined"
+            style={
+              Object {
+                "color": "#292a2b",
+                "fontSize": 24,
+              }
+            }
+            testID="hero-icon-bell-outlined"
+            themeIntent="text"
+            themeSize="medium"
+          />
+          <Text
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 12,
+                  "fontWeight": "600",
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+            themeFontSize="small"
+            themeFontWeight="semi-bold"
+            themeIntent="body"
+          >
+            Alerts
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+            }
+          }
+        >
+          <HeroIcon
+            name="user-outlined"
+            style={
+              Object {
+                "color": "#292a2b",
+                "fontSize": 24,
+              }
+            }
+            testID="hero-icon-user-outlined"
+            themeIntent="text"
+            themeSize="medium"
+          />
+          <Text
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 12,
+                  "fontWeight": "600",
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+            themeFontSize="small"
+            themeFontWeight="semi-bold"
+            themeIntent="body"
+          >
+            Profile
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/components/BottomNavigation/index.tsx

@@ -0,0 +1,169 @@
+import React, { ComponentProps, ReactNode } from 'react';
+import {
+  TouchableWithoutFeedback,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from 'styled-components-native';
+import Icon from '../Icon';
+import { isHeroIcon } from '../Icon/utils';
+import Typography from '../Typography';
+import {
+  BottomBar,
+  BottomBarItem,
+  BottomBarWrapper,
+  BottomNavigationContainer,
+  BottomNavigationTab,
+  ContentWrapper,
+} from './StyledBottomNavigation';
+import { isIOS } from '../../utils/helpers';
+
+type IconType = ComponentProps<typeof Icon>['icon'];
+
+export type Tab<V> = {
+  key: V;
+  title?: string;
+  icon: IconType;
+  component: ReactNode;
+  testID?: string;
+};
+
+interface BottomNavigationType<V extends string | number, T extends Tab<V>>
+  extends ViewProps {
+  /**
+   * Callback which is called on tab change, receiving id of upcoming active Tab.
+   */
+  onChange: (key: V) => void;
+  /**
+   * Whether inactive tabs should be removed and unmounted in React.
+   * Defaults to `false`.
+   */
+  renderActiveTabOnly?: boolean;
+  /**
+   * Current selected tab key.
+   */
+  selectedTabKey: V;
+  /**
+   * List of Tab to be rendered. Each Tab must have an unique id.
+   */
+  tabs: T[];
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const getInactiveIcon = (icon: IconType): IconType => {
+  const inactiveIcon = `${icon}-outlined`;
+  return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
+};
+
+const BottomNavigation = <V extends string | number, T extends Tab<V>>({
+  onChange,
+  renderActiveTabOnly = false,
+  selectedTabKey,
+  tabs,
+  ...nativeProps
+}: BottomNavigationType<V, T>): JSX.Element => {
+  const theme = useTheme();
+  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 } = 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={`route-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}
+            </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={() => {
+                  if (key !== selectedTabKey) {
+                    onChange(key);
+                  }
+                }}
+                testID={testID}
+              >
+                <BottomBarItem>
+                  <Icon
+                    icon={active ? icon : inactiveIcon}
+                    intent={active ? 'primary' : 'text'}
+                    testID={`hero-icon-${icon}`}
+                  />
+                  {title && (
+                    <Typography.Text
+                      fontSize="small"
+                      fontWeight="semi-bold"
+                      intent={active ? 'primary' : 'body'}
+                      style={{ marginTop: theme.space.xsmall }}
+                      numberOfLines={1}
+                    >
+                      {title}
+                    </Typography.Text>
+                  )}
+                </BottomBarItem>
+              </TouchableWithoutFeedback>
+            );
+          })}
+        </BottomBar>
+      </BottomBarWrapper>
+    </BottomNavigationContainer>
+  );
+};
+
+export default BottomNavigation;

package/src/components/Icon/utils.ts

@@ -0,0 +1,6 @@
+import IconList from './IconList';
+
+const isHeroIcon = (x: any): x is typeof IconList[number] =>
+  IconList.includes(x);
+
+export { isHeroIcon };

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

@@ -4,7 +4,7 @@ import styled, { css } from '../../../styled-components';
 const StyledText = styled(Text)<{
   themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
-  themeIntent: 'body' | 'subdued';
+  themeIntent: 'body' | 'subdued' | 'primary';
 }>`
   ${({ themeFontSize, theme }) => {
     switch (themeFontSize) {
@@ -62,6 +62,10 @@ const StyledText = styled(Text)<{
         return css`
           color: ${theme.__hd__.typography.colors.subdued};
         `;
+      case 'primary':
+        return css`
+          color: ${theme.__hd__.typography.colors.primary};
+        `;
     }
   }}
 `;

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

@@ -22,7 +22,7 @@ interface TextProps extends NativeTextProps {
   /**
    * Visual intent color to apply to the text.
    */
-  intent?: 'body' | 'subdued';
+  intent?: 'body' | 'subdued' | 'primary';
   /**
    * Addditional style.
    */

package/src/index.ts

@@ -3,6 +3,7 @@ import theme, { getTheme } from './theme';
 import { scale } from './utils/scale';
 
 import Badge from './components/Badge';
+import BottomNavigation from './components/BottomNavigation';
 import Card from './components/Card';
 import Divider from './components/Divider';
 import Icon from './components/Icon';
@@ -16,6 +17,7 @@ export {
   scale,
   ThemeProvider,
   Badge,
+  BottomNavigation,
   Card,
   Divider,
   Icon,

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

@@ -30,6 +30,21 @@ Object {
         "default": "4px",
       },
     },
+    "bottomNavigation": Object {
+      "colors": Object {
+        "background": "#ffffff",
+        "shadow": "#292a2b",
+      },
+      "shadows": Object {
+        "elevation": 10,
+        "offset": "0px 3px",
+        "opacity": 0.27,
+        "radius": "4.65px",
+      },
+      "sizes": Object {
+        "height": 72,
+      },
+    },
     "card": Object {
       "padding": Object {
         "default": "8px",
@@ -86,6 +101,7 @@ Object {
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",
+        "primary": "#7622d7",
         "subdued": "#8b8d92",
       },
       "fontSizes": Object {

package/src/theme/components/bottomNavigation.ts

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+
+const getBottomNavigationTheme = (theme: GlobalTheme) => {
+  const colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground,
+  };
+
+  const sizes = {
+    height: 72,
+  };
+
+  const shadows = {
+    offset: `0px 3px`,
+    opacity: 0.27,
+    radius: `4.65px`,
+    elevation: 10,
+  };
+
+  return { colors, shadows, sizes };
+};
+
+export default getBottomNavigationTheme;

package/src/theme/components/typography.ts

@@ -4,6 +4,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   const colors = {
     body: theme.colors.text,
     subdued: theme.colors.disabledText,
+    primary: theme.colors.primary,
   };
 
   const fontSizes = {

package/src/theme/index.ts

@@ -1,6 +1,7 @@
 import globalTheme, { GlobalTheme } from './global';
 
 import getBadgeTheme from './components/badge';
+import getBottomNavigationTheme from './components/bottomNavigation';
 import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
 import getIconTheme from './components/icon';
@@ -10,6 +11,7 @@ import getFABTheme from './components/fab';
 type Theme = GlobalTheme & {
   __hd__: {
     badge: ReturnType<typeof getBadgeTheme>;
+    bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
     card: ReturnType<typeof getCardTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     icon: ReturnType<typeof getIconTheme>;
@@ -22,6 +24,7 @@ const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
   ...theme,
   __hd__: {
     badge: getBadgeTheme(theme),
+    bottomNavigation: getBottomNavigationTheme(theme),
     card: getCardTheme(theme),
     divider: getDividerTheme(theme),
     icon: getIconTheme(theme),

package/src/utils/helpers.ts

@@ -0,0 +1,4 @@
+import { Platform } from 'react-native';
+
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';

package/types/playground/components/BottomNavigation.d.ts

@@ -0,0 +1,2 @@
+declare const MyComponent: () => JSX.Element;
+export default MyComponent;

package/types/src/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -0,0 +1,17 @@
+import { View } from 'react-native';
+declare const BottomNavigationTab: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeVisibility?: boolean | undefined;
+}, never>;
+declare const BottomNavigationContainer: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const ContentWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const BottomBarWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, never>;
+declare const BottomBar: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const BottomBarItem: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, };

package/types/src/components/BottomNavigation/__tests__/BottomNavigation.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/components/BottomNavigation/index.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps, ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import Icon from '../Icon';
+declare type IconType = ComponentProps<typeof Icon>['icon'];
+export declare type Tab<V> = {
+    key: V;
+    title?: string;
+    icon: IconType;
+    component: ReactNode;
+    testID?: string;
+};
+interface BottomNavigationType<V extends string | number, T extends Tab<V>> extends ViewProps {
+    /**
+     * Callback which is called on tab change, receiving id of upcoming active Tab.
+     */
+    onChange: (key: V) => void;
+    /**
+     * Whether inactive tabs should be removed and unmounted in React.
+     * Defaults to `false`.
+     */
+    renderActiveTabOnly?: boolean;
+    /**
+     * Current selected tab key.
+     */
+    selectedTabKey: V;
+    /**
+     * List of Tab to be rendered. Each Tab must have an unique id.
+     */
+    tabs: T[];
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const BottomNavigation: <V extends string | number, T extends Tab<V>>({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationType<V, T>) => JSX.Element;
+export default BottomNavigation;