@hero-design/rn 7.17.0 → 7.18.0

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/__tests__/__snapshots__/index.spec.tsx.snap

@@ -44,7 +44,7 @@ exports[`Drawer renders correctly in invisible state 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#292a2b",
+        "backgroundColor": "#001f23",
         "bottom": 0,
         "left": 0,
         "opacity": 0,
@@ -125,7 +125,7 @@ exports[`Drawer renders correctly in visible state 1`] = `
     pointerEvents="auto"
     style={
       Object {
-        "backgroundColor": "#292a2b",
+        "backgroundColor": "#001f23",
         "bottom": 0,
         "left": 0,
         "opacity": 0.35,
@@ -206,7 +206,7 @@ exports[`Drawer renders correctly with no backdrop 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#292a2b",
+        "backgroundColor": "#001f23",
         "bottom": 0,
         "left": 0,
         "opacity": 0,

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,
     ]
@@ -19,7 +20,7 @@ exports[`Empty renders empty state content correctly 1`] = `
     style={
       Array [
         Object {
-          "backgroundColor": "#dadbde",
+          "backgroundColor": "#ccced1",
           "borderRadius": 999,
           "height": 168,
           "marginBottom": 24,
@@ -33,7 +34,7 @@ exports[`Empty renders empty state content correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 28,
           "marginBottom": 16,
@@ -50,7 +51,7 @@ exports[`Empty renders empty state content correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#727478",
+          "color": "#4d6265",
           "fontFamily": "BeVietnamPro-Light",
           "fontSize": 16,
           "textAlign": "center",

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/__tests__/__snapshots__/index.spec.tsx.snap

@@ -24,7 +24,7 @@ exports[`ActionGroup has active false 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#292a2b",
+        "backgroundColor": "#001f23",
         "bottom": 0,
         "left": 0,
         "opacity": 0,
@@ -58,7 +58,7 @@ exports[`ActionGroup has active false 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -122,7 +122,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -140,7 +140,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -201,7 +201,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -219,7 +219,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -280,7 +280,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -298,7 +298,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -359,7 +359,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -377,7 +377,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -438,7 +438,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -456,7 +456,7 @@ exports[`ActionGroup has active false 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -498,7 +498,7 @@ exports[`ActionGroup has active false 1`] = `
         Object {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#292a2b",
+          "backgroundColor": "#001f23",
           "borderRadius": 999,
           "flexDirection": "row",
           "justifyContent": "center",
@@ -523,7 +523,7 @@ exports[`ActionGroup has active false 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 16,
           },
           Array [
@@ -587,7 +587,7 @@ exports[`ActionGroup has active true 1`] = `
     pointerEvents="auto"
     style={
       Object {
-        "backgroundColor": "#292a2b",
+        "backgroundColor": "#001f23",
         "bottom": 0,
         "left": 0,
         "opacity": 0.9,
@@ -621,7 +621,7 @@ exports[`ActionGroup has active true 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -685,7 +685,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -703,7 +703,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -764,7 +764,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -782,7 +782,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -843,7 +843,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -861,7 +861,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -922,7 +922,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -940,7 +940,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -1001,7 +1001,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 24,
               },
               Array [
@@ -1019,7 +1019,7 @@ exports[`ActionGroup has active true 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -1061,7 +1061,7 @@ exports[`ActionGroup has active true 1`] = `
         Object {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#292a2b",
+          "backgroundColor": "#001f23",
           "borderRadius": 999,
           "flexDirection": "row",
           "justifyContent": "center",
@@ -1086,7 +1086,7 @@ exports[`ActionGroup has active true 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 16,
           },
           Array [