@hero-design/rn 7.21.0 → 7.22.1

package/src/components/BottomSheet/index.tsx

@@ -1,5 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Modal } from 'react-native';
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  KeyboardAvoidingViewProps,
+  Modal,
+  Platform,
+} from 'react-native';
 import type { ReactElement, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Footer from './Footer';
@@ -7,6 +14,7 @@ import Header from './Header';
 import {
   StyledBackdrop,
   StyledBottomSheet,
+  StyledKeyboardAvoidingView,
   StyledWrapper,
 } from './StyledBottomSheet';
 
@@ -64,6 +72,11 @@ interface BottomSheetProps {
    * Testing id of the component.
    */
   testID?: string;
+
+  /**
+   * keyboardAvoidingView's props
+   * */
+  keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
 }
 
 const BottomSheet = ({
@@ -80,8 +93,9 @@ const BottomSheet = ({
   showDivider = true,
   style,
   testID,
+  keyboardAvoidingViewProps = {},
 }: BottomSheetProps): JSX.Element => {
-  const [height, setHeight] = useState<number>(0);
+  const { height } = Dimensions.get('window');
 
   // Internal state to control modal open/close timing with animation
   const [visible, setVisibility] = useState<boolean>(open);
@@ -145,31 +159,37 @@ const BottomSheet = ({
           style={{ opacity: interpolateOpacity }}
           onPress={onRequestClose}
         />
-        <StyledBottomSheet
-          onLayout={({ nativeEvent }) => setHeight(nativeEvent.layout.height)}
-          style={[
-            style,
-            {
-              transform: [
-                { scaleY: height > 0 ? 1 : 0 },
-                {
-                  translateY: interpolateY,
-                },
-              ],
-            },
-          ]}
+        <StyledKeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          {...keyboardAvoidingViewProps}
         >
-          {header !== undefined ? (
-            <Header
-              content={header}
-              showDivider={showDivider}
-              onRequestClose={onRequestClose}
-              showCloseButton={showCloseButton}
-            />
-          ) : null}
-          {children}
-          {footer ? <Footer showDivider={showDivider}>{footer}</Footer> : null}
-        </StyledBottomSheet>
+          <StyledBottomSheet
+            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>
+        </StyledKeyboardAvoidingView>
       </StyledWrapper>
     </Modal>
   );

package/src/components/Box/helpers.ts

@@ -1,6 +1,6 @@
 export const pick = (keys: Array<string>, props: Record<string, any>) =>
   keys
-    .filter(key => key in props)
+    .filter((key) => key in props)
     .reduce(
       (result, cur) => ({
         ...result,

package/src/components/Calendar/index.tsx

@@ -101,7 +101,7 @@ const Calendar = ({
   const lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
   const lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
 
-  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, index => {
+  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, (index) => {
     const reversedIndex = firstDayWeekIndexOfMonth - index - 1;
     const count = lastDayIndexOfPreviousMonth - reversedIndex;
     return getValidDate(
@@ -111,7 +111,7 @@ const Calendar = ({
     );
   });
 
-  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, index =>
+  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, (index) =>
     getValidDate(
       new Date(currentYear, currentMonth, index + 1),
       minDate,
@@ -122,7 +122,7 @@ const Calendar = ({
   const daysOfNextMonth = initArray(
     TOTAL_DATES_ITEMS -
       (daysOfPreviousMonth.length + daysOfCurrentMonth.length),
-    index =>
+    (index) =>
       getValidDate(
         new Date(currentYear, currentMonth + 1, index + 1),
         minDate,
@@ -133,13 +133,13 @@ const Calendar = ({
   const disablePrevButton =
     minDate === undefined
       ? false
-      : !daysOfPreviousMonth.some(date => date !== undefined) &&
+      : !daysOfPreviousMonth.some((date) => date !== undefined) &&
         minDate >= firstDateOfMonth;
 
   const disableNextButton =
     maxDate === undefined
       ? false
-      : !daysOfNextMonth.some(date => date !== undefined) ||
+      : !daysOfNextMonth.some((date) => date !== undefined) ||
         maxDate <= lastDateOfMonth;
 
   return (
@@ -156,7 +156,7 @@ const Calendar = ({
         />
       </StyledCalendarHeader>
       <StyledCalendarRow>
-        {DAYS_OF_WEEK.map(day => (
+        {DAYS_OF_WEEK.map((day) => (
           <StyledCalendarRowItem key={day}>
             <StyledCalendarDayNameCell>
               <Typography.Text>{day}</Typography.Text>
@@ -165,7 +165,7 @@ const Calendar = ({
         ))}
       </StyledCalendarRow>
       <StyledCalendarRow>
-        {daysOfPreviousMonth.map(date =>
+        {daysOfPreviousMonth.map((date) =>
           date ? (
             <CalendarRowItem
               key={date.toDateString()}
@@ -180,7 +180,7 @@ const Calendar = ({
             <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
           )
         )}
-        {daysOfCurrentMonth.map(date =>
+        {daysOfCurrentMonth.map((date) =>
           date ? (
             <CalendarRowItem
               key={date.toDateString()}
@@ -194,7 +194,7 @@ const Calendar = ({
             <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
           )
         )}
-        {daysOfNextMonth.map(date =>
+        {daysOfNextMonth.map((date) =>
           date ? (
             <CalendarRowItem
               key={date.toDateString()}

package/src/components/Collapse/index.tsx

@@ -60,7 +60,7 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
     >
       <StyledHiddenWrapper>
         <StyledChildWrapper
-          onLayout={event => fetchMaxHeight(event.nativeEvent.layout)}
+          onLayout={(event) => fetchMaxHeight(event.nativeEvent.layout)}
           style={style}
         >
           {children}

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -277,166 +277,146 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 }
               }
             />
-            <RCTSafeAreaView
-              collapsable={false}
-              emulateUnlessSupported={true}
-              nativeID="animatedComponent"
+            <View
               onLayout={[Function]}
               style={
-                Object {
-                  "backgroundColor": "#ffffff",
-                  "borderTopLeftRadius": 16,
-                  "borderTopRightRadius": 16,
-                  "elevation": 10,
-                  "maxHeight": "94%",
-                  "shadowColor": "#001f23",
-                  "shadowOffset": Object {
-                    "height": 3,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.27,
-                  "shadowRadius": 4.65,
-                  "transform": Array [
-                    Object {
-                      "scaleY": 0,
-                    },
+                Array [
+                  Array [
                     Object {
-                      "translateY": 0,
+                      "flex": 1,
+                      "flexDirection": "column-reverse",
                     },
+                    undefined,
                   ],
-                  "width": "100%",
-                }
+                  Object {
+                    "paddingBottom": 0,
+                  },
+                ]
               }
             >
-              <View
+              <RCTSafeAreaView
+                collapsable={false}
+                emulateUnlessSupported={true}
+                nativeID="animatedComponent"
                 style={
-                  Array [
-                    Object {
-                      "flexDirection": "row",
-                      "paddingHorizontal": 16,
-                      "paddingVertical": 8,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                    "borderTopLeftRadius": 16,
+                    "borderTopRightRadius": 16,
+                    "elevation": 10,
+                    "maxHeight": "94%",
+                    "shadowColor": "#001f23",
+                    "shadowOffset": Object {
+                      "height": 3,
+                      "width": 0,
                     },
-                    undefined,
-                  ]
+                    "shadowOpacity": 0.27,
+                    "shadowRadius": 4.65,
+                    "transform": Array [
+                      Object {
+                        "scaleY": 1,
+                      },
+                      Object {
+                        "translateY": 0,
+                      },
+                    ],
+                    "width": "100%",
+                  }
                 }
               >
                 <View
                   style={
                     Array [
                       Object {
-                        "flex": 1,
-                        "justifyContent": "center",
+                        "flexDirection": "row",
+                        "paddingHorizontal": 16,
+                        "paddingVertical": 8,
                       },
                       undefined,
                     ]
                   }
                 >
-                  <Text
+                  <View
                     style={
                       Array [
                         Object {
-                          "color": "#001f23",
-                          "fontFamily": "BeVietnamPro-SemiBold",
-                          "fontSize": 16,
-                          "letterSpacing": 0.48,
-                          "lineHeight": 24,
+                          "flex": 1,
+                          "justifyContent": "center",
                         },
                         undefined,
                       ]
                     }
-                    themeFontSize="large"
-                    themeFontWeight="semi-bold"
-                    themeIntent="body"
-                  >
-                    Start date
-                  </Text>
-                </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "alignItems": "center",
-                        "height": 48,
-                        "justifyContent": "center",
-                        "marginLeft": 12,
-                        "width": 48,
-                      },
-                      undefined,
-                    ]
-                  }
-                >
-                  <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 {
-                        "opacity": 1,
-                      }
-                    }
-                    testID="bottom-sheet-close-icon"
                   >
-                    <HeroIcon
-                      name="cancel"
+                    <Text
                       style={
                         Array [
                           Object {
                             "color": "#001f23",
-                            "fontSize": 20,
+                            "fontFamily": "BeVietnamPro-SemiBold",
+                            "fontSize": 16,
+                            "letterSpacing": 0.48,
+                            "lineHeight": 24,
                           },
                           undefined,
                         ]
                       }
-                      themeIntent="text"
-                      themeSize="small"
-                    />
+                      themeFontSize="large"
+                      themeFontWeight="semi-bold"
+                      themeIntent="body"
+                    >
+                      Start date
+                    </Text>
                   </View>
-                </View>
-              </View>
-              <View
-                style={
-                  Array [
-                    Object {
-                      "borderBottomColor": "#e8e9ea",
-                      "borderBottomWidth": 1,
-                      "maxWidth": "100%",
-                    },
-                    undefined,
-                  ]
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 176,
-                    },
-                    undefined,
-                  ]
-                }
-              >
-                <Picker
-                  display="spinner"
-                  mode="date"
-                  onChange={[Function]}
-                  style={
-                    Object {
-                      "flex": 1,
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "alignItems": "center",
+                          "height": 48,
+                          "justifyContent": "center",
+                          "marginLeft": 12,
+                          "width": 48,
+                        },
+                        undefined,
+                      ]
                     }
-                  }
-                  testID="datePickerIOS"
-                  value={1995-12-21T00:00:00.000Z}
-                />
-              </View>
-              <View>
+                  >
+                    <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 {
+                          "opacity": 1,
+                        }
+                      }
+                      testID="bottom-sheet-close-icon"
+                    >
+                      <HeroIcon
+                        name="cancel"
+                        style={
+                          Array [
+                            Object {
+                              "color": "#001f23",
+                              "fontSize": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        themeIntent="text"
+                        themeSize="small"
+                      />
+                    </View>
+                  </View>
+                </View>
                 <View
                   style={
                     Array [
@@ -453,58 +433,95 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "flex-end",
-                        "minHeight": 64,
-                        "paddingHorizontal": 12,
-                        "paddingVertical": 8,
+                        "height": 176,
                       },
                       undefined,
                     ]
                   }
                 >
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  <Picker
+                    display="spinner"
+                    mode="date"
+                    onChange={[Function]}
                     style={
                       Object {
-                        "opacity": 1,
+                        "flex": 1,
                       }
                     }
+                    testID="datePickerIOS"
+                    value={1995-12-21T00:00:00.000Z}
+                  />
+                </View>
+                <View>
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "borderBottomColor": "#e8e9ea",
+                          "borderBottomWidth": 1,
+                          "maxWidth": "100%",
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "justifyContent": "flex-end",
+                          "minHeight": 64,
+                          "paddingHorizontal": 12,
+                          "paddingVertical": 8,
+                        },
+                        undefined,
+                      ]
+                    }
                   >
-                    <Text
+                    <View
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      nativeID="animatedComponent"
+                      onClick={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
                       style={
-                        Array [
-                          Object {
-                            "color": "#8505a2",
-                            "fontFamily": "BeVietnamPro-SemiBold",
-                            "fontSize": 16,
-                            "letterSpacing": 0.48,
-                            "lineHeight": 24,
-                          },
-                          undefined,
-                        ]
+                        Object {
+                          "opacity": 1,
+                        }
                       }
-                      themeFontSize="large"
-                      themeFontWeight="semi-bold"
-                      themeIntent="primary"
                     >
-                      Confirm
-                    </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "#8505a2",
+                              "fontFamily": "BeVietnamPro-SemiBold",
+                              "fontSize": 16,
+                              "letterSpacing": 0.48,
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ]
+                        }
+                        themeFontSize="large"
+                        themeFontWeight="semi-bold"
+                        themeIntent="primary"
+                      >
+                        Confirm
+                      </Text>
+                    </View>
                   </View>
                 </View>
-              </View>
-            </RCTSafeAreaView>
+              </RCTSafeAreaView>
+            </View>
           </View>
         </View>
       </View>

package/src/components/Drawer/DragableDrawer/helpers.ts

@@ -16,9 +16,11 @@ export const calculateSnapPointsData = (
   height: number,
   snapPoints: number[]
 ): SnapPointsData => {
-  const filteredSnapPoints = snapPoints.filter(value => value >= minimumHeight);
+  const filteredSnapPoints = snapPoints.filter(
+    (value) => value >= minimumHeight
+  );
   const snapPointsOffsetValues = [minimumHeight, ...filteredSnapPoints].map(
-    value => getOffset(height, value)
+    (value) => getOffset(height, value)
   );
   const uniqSnapPointOffsetValues = Array.from(
     new Set([...snapPointsOffsetValues, 0])
@@ -35,7 +37,9 @@ export const calculateAnimatedToValue = (
   position: number,
   heightSnapPoints: number[]
 ) => {
-  const distances = heightSnapPoints.map(height => Math.abs(position - height));
+  const distances = heightSnapPoints.map((height) =>
+    Math.abs(position - height)
+  );
 
   const minIndex = distances.indexOf(Math.min(...distances));
   return heightSnapPoints[minIndex];

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

@@ -21,7 +21,7 @@ const ActionItemsListComponent = ({
   items,
 }: ActionItemsContainerProps) => (
   <View style={style}>
-    {items?.map(itemProp => (
+    {items?.map((itemProp) => (
       <ActionItem key={itemProp.icon} {...itemProp} />
     ))}
   </View>