@hero-design/rn 7.3.1 → 7.5.0

package/src/components/BottomSheet/index.tsx

@@ -0,0 +1,171 @@
+import React, {
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Animated, Easing, Modal, StyleProp, ViewStyle } from 'react-native';
+import Footer from './Footer';
+import Header from './Header';
+import {
+  StyledBackdrop,
+  StyledBottomSheet,
+  StyledWrapper,
+} from './StyledBottomSheet';
+
+interface BottomSheetProps {
+  /**
+   * Bottom sheet open state.
+   */
+  open: boolean;
+  /**
+   * Bottom sheet's header.
+   */
+  header?: string | ReactElement;
+  /**
+   * Bottom sheet's footer.
+   */
+  footer?: ReactNode;
+  /**
+   * Bottom sheet's content.
+   */
+  children?: ReactNode;
+  /**
+   * Callback is called when the Bottom Sheet is opened.
+   */
+  onOpen?: () => void;
+  /**
+   * Callback is called when the user taps the back button on Android or when the bottom sheet
+   * is being dismiss by interacting outside of the bottom sheet.
+   */
+  onRequestClose?: () => void;
+  /**
+   * Displays an X button on bottom sheet header that will invoke onRequestClose callback on press.
+   */
+  showCloseButton?: boolean;
+  /**
+   * Enable the bottom sheet's backdrop.
+   */
+  hasBackdrop?: boolean;
+  /**
+   * Displays dividers between header, footer and body.
+   */
+  showDivider?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const BottomSheet = ({
+  open,
+  header,
+  footer,
+  children,
+  onOpen,
+  onRequestClose,
+  showCloseButton = true,
+  hasBackdrop = true,
+  showDivider = true,
+  style,
+  testID,
+}: BottomSheetProps): JSX.Element => {
+  const [height, setHeight] = useState<number>(0);
+
+  // Internal state to control modal open/close timing with animation
+  const [visible, setVisibility] = useState<boolean>(open);
+  const animatedValue = useRef(new Animated.Value(open ? 0 : 1));
+
+  useEffect(() => {
+    // Show the modal before the open animation start
+    if (open && !visible) {
+      setVisibility(open);
+    }
+
+    // Delay closing the modal until after the closing animation end
+    animatedValue.current.removeAllListeners();
+    animatedValue.current.addListener(({ value }) => {
+      const endValueOfTransition = open ? 1 : 0;
+      if (endValueOfTransition === 0 && value === endValueOfTransition) {
+        setVisibility(false);
+      }
+    });
+
+    return () => animatedValue.current.removeAllListeners();
+  }, [open]);
+
+  // Animation
+  useEffect(() => {
+    const animation = Animated.timing(animatedValue.current, {
+      toValue: open ? 1 : 0,
+      easing: Easing.inOut(Easing.cubic),
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [open]);
+
+  const interpolateY = animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [height, 0],
+  });
+
+  // Backdrop opacity
+  const interpolateOpacity = hasBackdrop
+    ? animatedValue.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.48],
+      })
+    : 0;
+
+  return (
+    <Modal
+      visible={visible}
+      onRequestClose={onRequestClose}
+      transparent
+      testID={testID}
+      onShow={onOpen}
+    >
+      <StyledWrapper pointerEvents="box-none">
+        <StyledBackdrop
+          style={{ opacity: interpolateOpacity }}
+          onPress={onRequestClose}
+        />
+        <StyledBottomSheet
+          onLayout={({ nativeEvent }) => setHeight(nativeEvent.layout.height)}
+          style={[
+            style,
+            {
+              transform: [
+                { scaleY: height > 0 ? 1 : 0 },
+                {
+                  translateY: interpolateY,
+                },
+              ],
+            },
+          ]}
+        >
+          {header !== undefined ? (
+            <Header
+              content={header}
+              showDivider={showDivider}
+              onRequestClose={onRequestClose}
+              showCloseButton={showCloseButton}
+            />
+          ) : null}
+          {children}
+          {footer ? <Footer showDivider={showDivider}>{footer}</Footer> : null}
+        </StyledBottomSheet>
+      </StyledWrapper>
+    </Modal>
+  );
+};
+
+export default BottomSheet;

package/src/components/Button/IconButton.tsx

@@ -18,6 +18,10 @@ export interface IconButtonProps {
    * Name of the Icon.
    */
   icon: IconName;
+  /**
+   * Disable state of button.
+   */
+  disabled?: boolean;
   /**
    * Intent of the Icon.
    */
@@ -44,6 +48,7 @@ const IconButton = ({
   hitSlop,
   onPress,
   icon,
+  disabled,
   testID,
   style,
   size,
@@ -54,8 +59,13 @@ const IconButton = ({
     onPress={onPress}
     testID={testID}
     hitSlop={hitSlop}
+    disabled={disabled}
   >
-    <Icon icon={icon} size={size} intent={intent} />
+    <Icon
+      icon={icon}
+      size={size}
+      intent={disabled ? 'disabled-text' : intent}
+    />
   </TouchableOpacity>
 );
 

package/src/components/Card/index.tsx

@@ -26,7 +26,7 @@ const Card = ({
   children,
   ...nativeProps
 }: CardProps): JSX.Element => (
-  <StyledCard {...nativeProps} testID="card" themeVariant={variant}>
+  <StyledCard {...nativeProps} themeVariant={variant}>
     {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
     {children}
   </StyledCard>

package/src/components/Collapse/StyledCollapse.tsx

@@ -1,4 +1,4 @@
-import { Animated, View } from 'react-native';
+import { Animated, Dimensions, View } from 'react-native';
 import styled from '@emotion/native';
 
 const StyledWrapper = styled(Animated.View)(() => ({
@@ -7,9 +7,18 @@ const StyledWrapper = styled(Animated.View)(() => ({
   overflow: 'hidden',
 }));
 
+/**
+ * Height need to be high enough to cover most scenario
+ * This container's purpose is only to help get correct children height and returns it
+ * to use with Animated.timing
+ */
+const StyledHiddenWrapper = styled(View)(() => ({
+  height: Dimensions.get('window').height,
+}));
+
 const StyledChildWrapper = styled(View)(() => ({
   margin: 0,
   padding: 0,
 }));
 
-export { StyledWrapper, StyledChildWrapper };
+export { StyledWrapper, StyledHiddenWrapper, StyledChildWrapper };

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

@@ -4,11 +4,10 @@ exports[`Collapse renders correctly 1`] = `
 <View
   collapsable={false}
   nativeID="animatedComponent"
-  onLayout={[Function]}
   style={
     Object {
+      "height": 0,
       "margin": 0,
-      "maxHeight": "0%",
       "overflow": "hidden",
       "padding": 0,
     }
@@ -19,46 +18,40 @@ exports[`Collapse renders correctly 1`] = `
     style={
       Array [
         Object {
-          "margin": 0,
-          "padding": 0,
+          "height": 1334,
         },
         undefined,
       ]
     }
   >
-    <Text>
-      Sample Text
-    </Text>
+    <View
+      onLayout={[Function]}
+      style={
+        Array [
+          Object {
+            "margin": 0,
+            "padding": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text>
+        Sample Text
+      </Text>
+    </View>
   </View>
 </View>
 `;
 
-exports[`Collapse should not render Sample Text 1`] = `
-<View
-  collapsable={false}
-  nativeID="animatedComponent"
-  onLayout={[Function]}
-  style={
-    Object {
-      "margin": 0,
-      "maxHeight": "0%",
-      "overflow": "hidden",
-      "padding": 0,
-    }
-  }
-  testID="collapse"
-/>
-`;
-
 exports[`Collapse should render Sample Text but not visible 1`] = `
 <View
   collapsable={false}
   nativeID="animatedComponent"
-  onLayout={[Function]}
   style={
     Object {
+      "height": 0,
       "margin": 0,
-      "maxHeight": "0%",
       "overflow": "hidden",
       "padding": 0,
     }
@@ -69,16 +62,28 @@ exports[`Collapse should render Sample Text but not visible 1`] = `
     style={
       Array [
         Object {
-          "margin": 0,
-          "padding": 0,
+          "height": 1334,
         },
         undefined,
       ]
     }
   >
-    <Text>
-      Sample Text
-    </Text>
+    <View
+      onLayout={[Function]}
+      style={
+        Array [
+          Object {
+            "margin": 0,
+            "padding": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text>
+        Sample Text
+      </Text>
+    </View>
   </View>
 </View>
 `;

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

@@ -16,21 +16,9 @@ describe('Collapse', () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
-  it('should not render Sample Text', () => {
-    const wrapper = renderWithTheme(
-      <Collapse testID="collapse">
-        <Text>Sample Text</Text>
-      </Collapse>
-    );
-    expect(wrapper.queryAllByTestId('collapse')).toHaveLength(1);
-    expect(wrapper.queryByText('Sample Text')).toBeNull();
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
   it('should render Sample Text but not visible', () => {
     const wrapper = renderWithTheme(
-      <Collapse testID="collapse" keepChildrenMounted>
+      <Collapse testID="collapse">
         <Text>Sample Text</Text>
       </Collapse>
     );

package/src/components/Collapse/index.tsx

@@ -5,21 +5,19 @@ import {
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
-import { StyledChildWrapper, StyledWrapper } from './StyledCollapse';
+import React, { ReactNode, useCallback, useEffect } from 'react';
+import {
+  StyledChildWrapper,
+  StyledHiddenWrapper,
+  StyledWrapper,
+} from './StyledCollapse';
 import { usePrevious } from '../../utils/hooks';
 
-type HeightSource = 'percent' | 'container';
-
 interface CollapseProps extends ViewProps {
   /*
    * The collapse's content.
    */
   children: ReactNode;
-  /**
-   * Whether the child components will remain mounted when the Collapse is closed.
-   */
-  keepChildrenMounted?: boolean;
   /**
    * Whether the component is open or closed.
    */
@@ -34,74 +32,46 @@ interface CollapseProps extends ViewProps {
   testID?: string;
 }
 
-const Collapse = ({
-  open = false,
-  keepChildrenMounted = false,
-  children,
-  testID,
-  style,
-}: CollapseProps) => {
+const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
   const collapseAnim = React.useRef(new Animated.Value(0)).current;
-  const innerRef = React.useRef(null);
   const [contentHeight, setContentHeight] = React.useState<number>(0);
-  const [maxHeight, setMaxHeight] = React.useState<number>(0);
-  const [isWaitingToClose, setIsWaitingToClose] = useState<boolean>(false);
-  const [heightSource, setHeightSource] = useState<HeightSource>('percent');
 
   const previousOpenState = usePrevious(open);
 
-  const animatedCallback = useCallback(() => {
-    if (open === true) {
-      setIsWaitingToClose(true);
-      setMaxHeight(contentHeight);
-    } else {
-      setIsWaitingToClose(false);
-    }
-  }, [open, contentHeight]);
-
   useEffect(() => {
     if (open !== previousOpenState && previousOpenState !== undefined) {
-      const useHeightValue = maxHeight || 100;
-      setHeightSource(useHeightValue > 100 ? 'container' : 'percent');
       Animated.timing(collapseAnim, {
-        toValue: open ? useHeightValue : 0,
+        toValue: open ? contentHeight : 0,
         easing: Easing.inOut(Easing.ease),
         useNativeDriver: false,
-      }).start(animatedCallback);
+      }).start();
     }
-  }, [open, previousOpenState, maxHeight]);
+  }, [open, previousOpenState, contentHeight]);
 
-  const checkMaxHeight = useCallback(
+  const fetchMaxHeight = useCallback(
     ({ height }) => {
-      if (height > contentHeight) {
-        setContentHeight(height);
-      }
+      setContentHeight(height);
     },
     [contentHeight]
   );
 
   return (
     <StyledWrapper
-      onLayout={event => checkMaxHeight(event.nativeEvent.layout)}
       style={[
         style,
         {
-          maxHeight:
-            heightSource === 'container'
-              ? collapseAnim
-              : collapseAnim.interpolate({
-                  inputRange: [0, 100],
-                  outputRange: ['0%', '100%'],
-                }),
+          height: collapseAnim,
         },
       ]}
       testID={testID}
     >
-      {(keepChildrenMounted === true ||
-        open === true ||
-        (open === false && isWaitingToClose === true)) && (
-        <StyledChildWrapper ref={innerRef}>{children}</StyledChildWrapper>
-      )}
+      <StyledHiddenWrapper>
+        <StyledChildWrapper
+          onLayout={event => fetchMaxHeight(event.nativeEvent.layout)}
+        >
+          {children}
+        </StyledChildWrapper>
+      </StyledHiddenWrapper>
     </StyledWrapper>
   );
 };

package/src/components/ContentNavigator/StyledContentNavigator.tsx

@@ -0,0 +1,15 @@
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import Typography from '../Typography';
+
+const Wrapper = styled(View)(() => ({
+  flex: 1,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+}));
+
+const Value = styled(Typography.Text)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.contentNavigator.space.valueHorizontalPadding,
+}));
+
+export { Wrapper, Value };

package/src/components/ContentNavigator/__tests__/StyledContentNavigator.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { Value, Wrapper } from '../StyledContentNavigator';
+
+describe('Wrapper', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<Wrapper />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Value', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<Value>Text</Value>);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/ContentNavigator/__tests__/__snapshots__/StyledContentNavigator.spec.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Value has correct style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "paddingHorizontal": 8,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  Text
+</Text>
+`;
+
+exports[`Wrapper has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+      },
+      undefined,
+    ]
+  }
+/>
+`;