@hero-design/rn 7.17.1 → 7.18.1

package/src/components/Drawer/DragableDrawer/index.tsx

@@ -0,0 +1,205 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { Animated, PanResponder, Easing } from 'react-native';
+
+import {
+  StyledDragableContainer,
+  StyledDragableDrawerContainer,
+  StyledHandler,
+  StyledHandlerContainer,
+} from '../StyledDrawer';
+import {
+  calculateAnimatedToValue,
+  calculateSnapPointsData,
+  getOffset,
+  SnapPointsData,
+} from './helpers';
+
+export interface DragableDrawerProps {
+  /**
+   * Drawer's content.
+   */
+  children?: ReactNode;
+  /**
+   * Initial visible height percentage of the drawer. Can be used to programmatically control the drawer height. Range: [0,100].
+   */
+  initialHeightPercentage?: number;
+  /**
+   * Mininum visible height percentage of the drawer. This will be the lowest point in snap points list. Range: [0,100].
+   */
+  minimumHeightPercentage?: number;
+  /**
+   * Callback function is called when the drawer expand to max position.
+   */
+  onExpanded?: () => void;
+  /**
+   * Callback function is called when the drawer collapsed to min position.
+   */
+  onCollapsed?: () => void;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Nearest height snap points that the drawer will attach to on release gesture. Range: [0,100]
+   */
+  snapPoints?: number[];
+}
+
+const DragableDrawer = ({
+  children,
+  initialHeightPercentage,
+  minimumHeightPercentage = 10,
+  snapPoints = [],
+  onExpanded,
+  onCollapsed,
+  testID,
+}: DragableDrawerProps): JSX.Element => {
+  const [height, setHeight] = useState(0);
+  const baseHeightForMeasure = useRef(0);
+  const snapPointsData = useRef<SnapPointsData>({
+    list: [],
+    minHeightOffset: 0,
+    maxHeightOffset: 0,
+  });
+
+  // Track drag
+  const pan = useRef(new Animated.Value(0)).current;
+  const offset = useRef(0);
+  const offsetBeforePan = useRef(0);
+  const [animatedToValue, setAnimatedToValue] = useState<number>(-1);
+
+  useEffect(() => {
+    const id = pan.addListener(({ value }) => {
+      offset.current = value;
+    });
+
+    return () => pan.removeListener(id);
+  }, []);
+
+  useEffect(() => {
+    if (height > 0) {
+      const initialOffset = getOffset(
+        height,
+        initialHeightPercentage || minimumHeightPercentage
+      );
+      setAnimatedToValue(initialOffset);
+    }
+  }, [height]);
+
+  useEffect(() => {
+    if (height > 0) {
+      pan.setValue(height);
+      offset.current = height;
+
+      baseHeightForMeasure.current = height;
+
+      // Calculate snap points information
+      snapPointsData.current = calculateSnapPointsData(
+        minimumHeightPercentage,
+        height,
+        snapPoints
+      );
+    }
+  }, [height, minimumHeightPercentage]);
+
+  useEffect(() => {
+    if (animatedToValue >= 0) {
+      const animation = Animated.timing(pan, {
+        toValue: animatedToValue,
+        useNativeDriver: true,
+        easing: Easing.inOut(Easing.cubic),
+      });
+
+      animation.start(() => {
+        if (animatedToValue === 0) {
+          onExpanded?.();
+        } else if (
+          animatedToValue === getOffset(height, minimumHeightPercentage)
+        ) {
+          onCollapsed?.();
+        }
+        setAnimatedToValue(-1);
+      });
+
+      return () => animation.stop();
+    }
+
+    return () => {};
+  }, [animatedToValue]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        offsetBeforePan.current = offset.current;
+        pan.setOffset(offset.current);
+        pan.setValue(0);
+      },
+      onPanResponderMove: (_, gesture) => {
+        const panDistance = gesture.dy;
+
+        // Moving toward top, stop at highest snap point
+        if (offsetBeforePan.current + panDistance < 0) {
+          pan.setValue(-offsetBeforePan.current);
+          return;
+        }
+
+        // Moving toward bottom, stop at lowest snap point
+        if (
+          offsetBeforePan.current + panDistance >
+          snapPointsData.current?.minHeightOffset
+        ) {
+          pan.setValue(
+            baseHeightForMeasure.current -
+              baseHeightForMeasure.current * (minimumHeightPercentage / 100) -
+              offsetBeforePan.current
+          );
+          return;
+        }
+
+        pan.setValue(panDistance);
+      },
+      onPanResponderRelease: (_, gesture) => {
+        pan.flattenOffset();
+
+        // Attach to nearest snappoint
+        const panDistance = gesture.dy;
+        const offsetAfterPan = offsetBeforePan.current + panDistance;
+        const animatedValue = calculateAnimatedToValue(
+          offsetAfterPan,
+          snapPointsData.current.list
+        );
+
+        setAnimatedToValue(animatedValue);
+      },
+    })
+  ).current;
+
+  return (
+    <StyledDragableContainer
+      testID={testID}
+      enableShadow
+      pointerEvents="box-none"
+    >
+      <StyledDragableDrawerContainer
+        enableShadow
+        style={{
+          transform: [
+            { scaleY: baseHeightForMeasure.current > 0 ? 1 : 0 },
+            { translateY: pan },
+          ],
+        }}
+        onLayout={({ nativeEvent }) => {
+          setHeight(nativeEvent.layout.height);
+        }}
+      >
+        <StyledHandlerContainer {...panResponder.panHandlers}>
+          <StyledHandler />
+        </StyledHandlerContainer>
+        {children}
+      </StyledDragableDrawerContainer>
+    </StyledDragableContainer>
+  );
+};
+
+export default DragableDrawer;

package/src/components/Drawer/StyledDrawer.tsx

@@ -1,23 +1,35 @@
 import styled from '@emotion/native';
 import { ComponentProps } from 'react';
-import { Animated, Pressable, StyleSheet, View } from 'react-native';
+import { Animated, Pressable, StyleSheet, View, ViewProps } from 'react-native';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
-const StyledContainer = styled(View)<{ enableShadow: boolean }>(
-  ({ theme, enableShadow }) => ({
-    ...StyleSheet.absoluteFillObject,
-    shadowColor: enableShadow
-      ? theme.__hd__.drawer.colors.shadow
-      : 'transparent',
-    shadowOffset: theme.__hd__.drawer.shadows.offset,
-    shadowOpacity: theme.__hd__.drawer.shadows.opacity,
-    shadowRadius: theme.__hd__.drawer.shadows.radius,
-    overflow: 'hidden',
-    zIndex: 9999,
-    elevation: 9999,
-  })
-);
+const StyledContainer = styled(View)<{
+  enableShadow: boolean;
+}>(({ theme, enableShadow }) => ({
+  ...StyleSheet.absoluteFillObject,
+  shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
+  shadowOffset: theme.__hd__.drawer.shadows.offset,
+  shadowOpacity: theme.__hd__.drawer.shadows.opacity,
+  shadowRadius: theme.__hd__.drawer.shadows.radius,
+  overflow: 'hidden',
+  zIndex: 9999,
+  elevation: 9999,
+}));
+
+const StyledDragableContainer = styled(View)<{
+  enableShadow: boolean;
+}>(({ theme, enableShadow }) => ({
+  ...StyleSheet.absoluteFillObject,
+  shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
+  shadowOffset: theme.__hd__.drawer.shadows.offset,
+  shadowOpacity: theme.__hd__.drawer.shadows.opacity,
+  shadowRadius: theme.__hd__.drawer.shadows.radius,
+  overflow: 'hidden',
+  zIndex: 9999,
+  elevation: 9999,
+  flexDirection: 'column-reverse',
+}));
 
 const StyledBackdrop = styled(AnimatedPressable)<
   ComponentProps<typeof AnimatedPressable>
@@ -26,14 +38,46 @@ const StyledBackdrop = styled(AnimatedPressable)<
   backgroundColor: theme.__hd__.drawer.colors.backdrop,
 }));
 
-const StyledDrawerContainer = styled(Animated.View)<{ enableShadow: boolean }>(
-  ({ theme, enableShadow }) => ({
-    borderBottomLeftRadius: theme.__hd__.drawer.radii.default,
-    borderBottomRightRadius: theme.__hd__.drawer.radii.default,
-    backgroundColor: theme.__hd__.drawer.colors.background,
-    elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
-    overflow: 'hidden',
-  })
-);
-
-export { StyledBackdrop, StyledContainer, StyledDrawerContainer };
+const StyledDrawerContainer = styled(Animated.View)<{
+  enableShadow: boolean;
+}>(({ theme, enableShadow }) => ({
+  borderBottomLeftRadius: theme.__hd__.drawer.radii.default,
+  borderBottomRightRadius: theme.__hd__.drawer.radii.default,
+  backgroundColor: theme.__hd__.drawer.colors.background,
+  elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
+  overflow: 'hidden',
+}));
+
+const StyledDragableDrawerContainer = styled(Animated.View)<{
+  enableShadow: boolean;
+}>(({ theme, enableShadow }) => ({
+  borderTopLeftRadius: theme.__hd__.drawer.radii.default,
+  borderTopRightRadius: theme.__hd__.drawer.radii.default,
+  backgroundColor: theme.__hd__.drawer.colors.background,
+  elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
+  overflow: 'hidden',
+  maxHeight: '100%',
+}));
+
+const StyledHandlerContainer = styled(View)<ViewProps>(({ theme }) => ({
+  backgroundColor: theme.__hd__.drawer.colors.background,
+  paddingVertical: theme.__hd__.drawer.space.handlerPaddingVertical,
+  alignItems: 'center',
+}));
+
+const StyledHandler = styled(View)<{ active?: boolean }>(({ theme }) => ({
+  width: theme.__hd__.drawer.sizes.handlerWidth,
+  height: theme.__hd__.drawer.sizes.handlerHeight,
+  backgroundColor: theme.__hd__.drawer.colors.handler,
+  borderRadius: theme.__hd__.drawer.radii.handler,
+}));
+
+export {
+  StyledBackdrop,
+  StyledContainer,
+  StyledDrawerContainer,
+  StyledHandlerContainer,
+  StyledHandler,
+  StyledDragableContainer,
+  StyledDragableDrawerContainer,
+};

package/src/components/Drawer/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { Animated, Easing } from 'react-native';
+import DragableDrawer from './DragableDrawer';
 
 import {
   StyledBackdrop,
@@ -90,4 +91,6 @@ const Drawer = ({
   );
 };
 
-export default Drawer;
+export default Object.assign(Drawer, {
+  Dragable: DragableDrawer,
+});

package/src/components/Empty/StyledEmpty.tsx

@@ -3,12 +3,13 @@ import styled from '@emotion/native';
 
 type ThemeVariant = 'light' | 'dark';
 
-const StyledWrapper = styled(View)(() => ({
+const StyledWrapper = styled(View)(({ theme }) => ({
   display: 'flex',
   flex: 1,
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
+  padding: theme.__hd__.empty.space.wrapperPadding,
 }));
 
 const StyledIllustration = styled(View)(({ theme }) => ({
@@ -16,7 +17,7 @@ const StyledIllustration = styled(View)(({ theme }) => ({
   width: theme.__hd__.empty.sizes.illustration,
   borderRadius: theme.__hd__.empty.radii.illustration,
   backgroundColor: theme.__hd__.empty.colors.illustrationBackground,
-  marginBottom: theme.__hd__.empty.space.large,
+  marginBottom: theme.__hd__.empty.space.illustrationMargin,
 }));
 
 const StyledTitle = styled(Text)<{ themeVariant: ThemeVariant }>(
@@ -24,7 +25,7 @@ const StyledTitle = styled(Text)<{ themeVariant: ThemeVariant }>(
     fontFamily: theme.__hd__.empty.fonts.title,
     fontSize: theme.__hd__.empty.fontSizes.title,
     textAlign: 'center',
-    marginBottom: theme.__hd__.empty.space.medium,
+    marginBottom: theme.__hd__.empty.space.titleMargin,
     color:
       themeVariant === 'dark'
         ? theme.__hd__.empty.colors.invertedText

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

@@ -10,6 +10,7 @@ exports[`Empty renders empty state content correctly 1`] = `
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
+        "padding": 16,
       },
       undefined,
     ]

package/src/components/Empty/index.tsx

@@ -19,7 +19,7 @@ interface EmptyProps {
   description?: string;
   /**
    * Empty's variant
-   * 'dark' if rendered on a dark background and 'white' otherwise
+   * 'dark' if rendered on a dark background and 'light' otherwise
    */
   variant?: 'light' | 'dark';
   /**
@@ -42,7 +42,7 @@ const Empty = ({
   <StyledWrapper style={style} testID={testID}>
     <StyledIllustration />
     <StyledTitle themeVariant={variant}>{title}</StyledTitle>
-    {description && (
+    {!!description && (
       <StyledDescription themeVariant={variant}>
         {description}
       </StyledDescription>

package/src/components/FAB/ActionGroup/index.tsx

@@ -124,7 +124,7 @@ const ActionGroup = ({
           transform: [{ translateX: interpolatedTranlateXAnimation }],
         }}
       >
-        {headerTitle && (
+        {!!headerTitle && (
           <StyledHeaderText testID="header-text">
             {headerTitle}
           </StyledHeaderText>

package/src/components/List/ListItem.tsx

@@ -119,7 +119,7 @@ const ListItem = ({
               >
                 {title}
               </Typography.Text>
-              {subtitle && (
+              {!!subtitle && (
                 <Typography.Text intent="subdued" fontSize="small">
                   {subtitle}
                 </Typography.Text>

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

@@ -52,6 +52,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]
@@ -315,6 +316,7 @@ exports[`RichTextEditor should render correctly 1`] = `
             "alignSelf": "stretch",
             "flexDirection": "row",
             "flexGrow": 2,
+            "flexShrink": 1,
           },
           undefined,
         ]

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -71,6 +71,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]
@@ -1438,6 +1439,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]
@@ -2954,6 +2956,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]
@@ -4465,6 +4468,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]
@@ -5995,6 +5999,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]

package/src/components/Select/MultiSelect/index.tsx

@@ -82,10 +82,7 @@ function MultiSelect<V, T extends OptionType<V>>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={() => {
-          setSelectingValue(value);
-          if (onDimiss) onDimiss();
-        }}
+        onDismiss={onDimiss}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -71,6 +71,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]
@@ -1366,6 +1367,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]
@@ -2759,6 +2761,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]
@@ -4149,6 +4152,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]
@@ -5556,6 +5560,7 @@ Array [
                   "alignSelf": "stretch",
                   "flexDirection": "row",
                   "flexGrow": 2,
+                  "flexShrink": 1,
                 },
                 undefined,
               ]

package/src/components/Select/SingleSelect/index.tsx

@@ -41,7 +41,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
 }: SingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
-  const [selectingValue, setSelectingValue] = useState<V | null>(value);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions.find(opt => value === opt.value)?.text;
@@ -73,10 +72,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={() => {
-          setSelectingValue(value);
-          if (onDimiss) onDimiss();
-        }}
+        onDismiss={onDimiss}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
@@ -99,7 +95,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
           loading={loading}
           sections={sections}
           renderOption={renderOption}
-          value={selectingValue}
+          value={value}
           onPress={selectedValue => {
             setOpen(false);
             onConfirm(selectedValue);

package/src/components/Tabs/ScrollableTabs.tsx

@@ -79,6 +79,7 @@ const ScrollableTab = ({
         index: selectedTabIndex,
         viewPosition: 0.5,
       });
+      pagerViewRef.current?.setPage(selectedTabIndex);
     }
 
     const animation = Animated.parallel([
@@ -149,7 +150,6 @@ const ScrollableTab = ({
                 key={key}
                 onPress={() => {
                   onTabPress(key);
-                  pagerViewRef.current?.setPage(index);
                 }}
                 testID={testID}
               >

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

@@ -4,6 +4,7 @@ import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tabs, { TabType } from '..';
+import Button from '../../Button';
 
 const TestTabsComponent = (
   props: Omit<
@@ -40,6 +41,11 @@ const TestTabsComponent = (
         insets: { top: 0, left: 0, right: 0, bottom: 0 },
       }}
     >
+      <Button.Utility
+        text="Move to Work"
+        onPress={() => setSelectedTabKey('work')}
+        icon="sync"
+      />
       <Tabs.Scroll
         {...props}
         tabs={tabs}
@@ -65,6 +71,8 @@ describe('Tabs.Scroll', () => {
     expect(getByText('Personal Screen')).toBeDefined();
     fireEvent.press(getByTestId('hero-icon-home-outlined'));
     expect(getByText('Home Screen')).toBeDefined();
+    fireEvent.press(getByText('Move to Work'));
+    expect(getByText('Work Screen')).toBeDefined();
   });
 
   it('renders correctly with lazy preloaded', () => {

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

@@ -12,6 +12,85 @@ exports[`Tabs.Scroll renders correctly 1`] = `
     ]
   }
 >
+  <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 {
+        "alignItems": "center",
+        "backgroundColor": "#f6f6f7",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "padding": 8,
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "paddingRight": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="sync"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        testID="undefined-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Move to Work
+    </Text>
+  </View>
   <View
     style={
       Array [