Merge branch 'master' of github.com:wix/react-native-calendars into release

Author: Inbal-Tish

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 ***

README.md

@@ -557,6 +557,10 @@ An advanced `Agenda` component that can display interactive listings for calenda
   renderKnob={() => {
     return <View />;
   }}
+  // Override inner list with a custom implemented component
+  renderList={(listProps) => {
+    return <MyCustomList {...listProps} />
+  }}
   // Specify what should be rendered instead of ActivityIndicator
   renderEmptyData={() => {
     return <View />;

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  

example/src/mocks/AgendaItem.tsx

@@ -41,7 +41,7 @@ const AgendaItem = (props: ItemProps) => {
   );
 };
 
-export default AgendaItem;
+export default React.memo(AgendaItem);
 
 
 const styles = StyleSheet.create({

example/src/mocks/agendaItems.ts

@@ -1,4 +1,5 @@
 import isEmpty from 'lodash/isEmpty';
+import {MarkedDates} from '../../../src/types';
 
 const today = new Date().toISOString().split('T')[0];
 const fastDate = getPastDate(3);
@@ -116,12 +117,8 @@ export const agendaItems = [
   }
 ];
 
-type MarkedDate = {
-  [key: string]: object;
-}
-
 export function getMarkedDates() {
-  const marked: MarkedDate = {};
+  const marked: MarkedDates = {};
 
   agendaItems.forEach(item => {
     // NOTE: only mark dates with data

example/src/screens/calendarListScreen.tsx

@@ -17,12 +17,6 @@ const CalendarListScreen = (props: Props) => {
   const [selected, setSelected] = useState(initialDate);
   const marked = useMemo(() => {
     return {
-      [selected]: {
-        selected: true,
-        disableTouchEvent: true,
-        selectedColor: '#5E60CE',
-        selectedTextColor: 'white'
-      },
       [nextWeekDate]: {
         selected: selected === nextWeekDate,
         selectedTextColor: '#5E60CE',
@@ -32,6 +26,12 @@ const CalendarListScreen = (props: Props) => {
         selected: selected === nextMonthDate,
         selectedTextColor: '#5E60CE',
         marked: true
+      },
+      [selected]: {
+        selected: true,
+        disableTouchEvent: true,
+        selectedColor: '#5E60CE',
+        selectedTextColor: 'white'
       }
     };
   }, [selected]);

example/src/screens/calendarPlaygroundScreen.tsx

@@ -1,25 +1,20 @@
 import times from 'lodash/times';
-import React, {useState, Fragment, useCallback, useMemo, useRef} from 'react';
+import React, {useState, useCallback, useMemo, useRef} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity, Switch, Alert} from 'react-native';
 import {Calendar, CalendarUtils} from 'react-native-calendars';
+
 import testIDs from '../testIDs';
+import Marking from '../../../src/calendar/day/marking';
 
 const INITIAL_DATE = '2022-07-06';
 const GREEN = '#13ba7d';
 const PINK = '#a68a9f';
 const RED = '#ba1313';
-enum Markings {
-  DOT = 'dot',
-  MULTI_DOT = 'multi-dot',
-  PERIOD = 'period',
-  MULTI_PERIOD = 'multi-period',
-  CUSTOM = 'custom'
-}
 
 const NewCalendarScreen = () => {
   const [selected, setSelected] = useState(INITIAL_DATE);
   const [currentMonth, setCurrentMonth] = useState(INITIAL_DATE);
-  const [markingType, setMarkingType] = useState(Markings.DOT);
+  const [markingType, setMarkingType] = useState(Marking.markings.DOT);
   const [selectedButtonIndex, setSelectedButtonIndex] = useState(0);
 
   /** props */
@@ -91,16 +86,20 @@ const NewCalendarScreen = () => {
 
   const dotMarks = useMemo(() => {
     return {
+      [getDate(1)]: {
+        disabled: true,
+        dotColor: RED,
+        marked: true
+      },
+      [getDate(2)]: {
+        dotColor: RED,
+        marked: true
+      },
       [selected]: {
         selected: true,
         disableTouchEvent: true,
         selectedColor: PINK,
         selectedTextColor: RED
-      },
-      [getDate(1)]: {
-        disabled: true,
-        dotColor: RED,
-        marked: true
       }
     };
   }, [selected]);
@@ -289,15 +288,15 @@ const NewCalendarScreen = () => {
 
   const markingForType = useCallback(() => {
     switch (markingType) {
-      case Markings.DOT:
+      case Marking.markings.DOT:
         return dotMarks;
-      case Markings.MULTI_DOT:
+      case Marking.markings.MULTI_DOT:
         return multiDotMarks;
-      case Markings.PERIOD:
+      case Marking.markings.PERIOD:
         return periodWithDotsMarks; //periodMarks;
-      case Markings.MULTI_PERIOD:
+      case Marking.markings.MULTI_PERIOD:
         return multiPeriodMarks;
-      case Markings.CUSTOM:
+      case Marking.markings.CUSTOM:
         return customMarks;
     }
   }, [markingType, selected]);
@@ -450,32 +449,36 @@ const NewCalendarScreen = () => {
     return (
       <View>
         {renderSwitch('Min and Max Dates', minAndMax, toggleMinAndMax)}
-        {renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)}
+        <View style={styles.subSwitchContainer}>
+          {minAndMax && renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)}
+        </View>
         {renderSwitch('Enable Swipe Months', enableSwipeMonths, toggleEnableSwipeMonths)}
         {renderSwitch('Disable Month Change', disableMonthChange, toggleDisableMonthChange)}
         {renderSwitch('Show Week Numbers', showWeekNumbers, toggleShowWeekNumbers)}
         {renderSwitch('Show Six Weeks', showSixWeeks, toggleShowSixWeeks)}
         {renderSwitch('Hide Extra Days', hideExtraDays, toggleHideExtraDays)}
         {renderSwitch('Hide Day Names', hideDayNames, toggleHideDayNames)}
-        {renderSwitch('Hide Arrows', hideArrows, toggleHideArrows)}
         {renderSwitch('Disabled By Default', disabledByDefault, toggleDisabledByDefault)}
         {renderSwitch('Disable All Touch Events For Disabled Days', disableAllTouchEventsForDisabledDays, toggleDisableAllTouchEventsForDisabledDays)}
         {renderSwitch('Disable All Touch Events For Inactive Days', disableAllTouchEventsForInactiveDays, toggleDisableAllTouchEventsForInactiveDays)}
         {renderSwitch('Display Loading Indicator', displayLoadingIndicator, toggleDisplayLoadingIndicator)}
         {renderSwitch('Disabled Days Indexes', disabledDaysIndexes, toggleDisabledDaysIndexes)}
+        {renderSwitch('Hide Arrows', hideArrows, toggleHideArrows)}
+        <View style={styles.subSwitchContainer}>
+          {!hideArrows && renderSwitch('Disable Arrow Left', disableArrowLeft, toggleDisableArrowLeft)}
+          {!hideArrows && renderSwitch('Disable Arrow Right', disableArrowRight, toggleDisableArrowRight)}
+          {!hideArrows && renderSwitch('Render Arrow', renderArrow, toggleRenderArrow)}
+        </View>
         {renderSwitch('Day Component', dayComponent, toggleDayComponent)}
         {renderSwitch('Custom Header', customHeader, toggleCustomHeader)}
         {renderSwitch('Custom Header Title', customHeaderTitle, toggleCustomHeaderTitle)}
-        {renderSwitch('Render Arrow', renderArrow, toggleRenderArrow)}
-        {renderSwitch('Disable Arrow Left', disableArrowLeft, toggleDisableArrowLeft)}
-        {renderSwitch('Disable Arrow Right', disableArrowRight, toggleDisableArrowRight)}
       </View>
     );
   };
 
   /** Buttons */
   const getValue = (index = 0) => {
-    return Object.values(Markings)[index];
+    return Object.values(Marking.markings)[index];
   };
 
   const setType = (index = 0) => {
@@ -528,12 +531,12 @@ const NewCalendarScreen = () => {
   };
 
   return (
-    <Fragment>
+    <>
       {renderCalendar()}
       <ScrollView showsVerticalScrollIndicator={false} testID={testIDs.calendars.CONTAINER}>
         {renderOptions()}
       </ScrollView>
-    </Fragment>
+    </>
   );
 };
 
@@ -578,6 +581,9 @@ const styles = StyleSheet.create({
   switchText: {
     marginHorizontal: 10
   },
+  subSwitchContainer: {
+    marginLeft: 20
+  },
   buttonsContainer: {
     margin: 10
   },