feature: custom arrowsHitSlop for Header (#1809)

* Add custom arrowsHitSlop for Header

* Add transformer to Insets if number is provided

* Add styles types to header styles, remove ts-expect-error

* Add default in calendar.api.json remove des

* Remove changes from CHANGELOG.md

* Restore hitSlop, add useMemo, fix conflict merge

* Restore CHANGELOG.md formatting

* Move hitSlop outside _renderArrow

Author: CezarCobuz

CHANGELOG.md

@@ -793,4 +793,4 @@
 - 'input.js' - renaming 'velocityTracker'.
 - 'test.js' - renaming 'testUtils' and removing from folder.
 
-*** End of changelog - please see release tags for notes ***
+*** End of changelog - please see release tags for notes ***

docsRNC/docs/Calendar.md

@@ -130,6 +130,10 @@ Whether to hide the days names
 Whether to hide the arrows  
 <span style={{color: 'grey'}}>boolean</span>
 
+### arrowsHitSlop
+
+Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20 
+<span style={{color: 'grey'}}>null | Insets | number</span>
 ### disableArrowLeft
 
 Whether to disable the left arrow  

src/calendar/calendar.api.json

@@ -132,6 +132,11 @@
       "type": "boolean",
       "description": "Whether to hide the arrows"
     },
+    {
+      "name": "arrowsHitSlop",
+      "type": "null | Insets | number",
+      "default": 20
+    },
     {
       "name": "disableArrowLeft",
       "type": "boolean",

src/calendar/header/index.tsx

@@ -12,7 +12,8 @@ import {
   StyleProp,
   ViewStyle,
   AccessibilityActionEvent,
-  ColorValue
+  ColorValue,
+  Insets
 } from 'react-native';
 import {formatNumbers, weekDayNames} from '../../dateutils';
 import {
@@ -50,6 +51,8 @@ export interface CalendarHeaderProps {
   onPressArrowLeft?: (method: () => void, month?: XDate) => void; //TODO: replace with string
   /** Handler which gets executed when press arrow icon right. It receive a callback can go next month */
   onPressArrowRight?: (method: () => void, month?: XDate) => void; //TODO: replace with string
+  /** Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20 */
+  arrowsHitSlop?: Insets | number;
   /** Disable left arrow */
   disableArrowLeft?: boolean;
   /** Disable right arrow */
@@ -75,7 +78,6 @@ export interface CalendarHeaderProps {
   timelineLeftInset?: number;
 }
 
-const arrowHitSlop = {left: 20, right: 20, top: 20, bottom: 20};
 const accessibilityActions = [
   {name: 'increment', label: 'increment'},
   {name: 'decrement', label: 'decrement'}
@@ -95,6 +97,7 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
     renderArrow,
     onPressArrowLeft,
     onPressArrowRight,
+    arrowsHitSlop = 20,
     disableArrowLeft,
     disableArrowRight,
     disabledDaysIndexes,
@@ -123,7 +126,14 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
   const dayNamesStyle = useMemo(() => {
     return [style.current.week, numberOfDaysCondition ? partialWeekStyle : undefined];
   }, [numberOfDaysCondition, partialWeekStyle]);
-
+  const hitSlop: Insets | undefined = useMemo(
+    () =>
+      typeof arrowsHitSlop === 'number'
+        ? {top: arrowsHitSlop, left: arrowsHitSlop, bottom: arrowsHitSlop, right: arrowsHitSlop}
+        : arrowsHitSlop,
+    [arrowsHitSlop]
+  );
+  
   useImperativeHandle(ref, () => ({
     onPressLeft,
     onPressRight
@@ -225,14 +235,14 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
     const shouldDisable = isLeft ? disableArrowLeft : disableArrowRight;
     const onPress = !shouldDisable ? isLeft ? onPressLeft : onPressRight : undefined;
     const imageSource = isLeft ? require('../img/previous.png') : require('../img/next.png');
-    const renderArrowDirection = isLeft ? 'left' : 'right';
-
+    const renderArrowDirection = isLeft ? 'left' : 'right';   
+      
     return (
       <TouchableOpacity
         onPress={onPress}
         disabled={shouldDisable}
         style={style.current.arrow}
-        hitSlop={arrowHitSlop}
+        hitSlop={hitSlop}
         testID={testId}
       >
         {renderArrow ? (
@@ -301,5 +311,6 @@ export default CalendarHeader;
 CalendarHeader.displayName = 'CalendarHeader';
 CalendarHeader.defaultProps = {
   monthFormat: 'MMMM yyyy',
-  webAriaLevel: 1
+  webAriaLevel: 1,
+  arrowsHitSlop: 20
 };