Merge branch 'master' into infra/refactorTimeline_2

Author: ethanshar

example/src/screens/calendars.tsx

@@ -1,4 +1,4 @@
-import React, {useState, Fragment} from 'react';
+import React, {useState, Fragment, useCallback} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity, Switch} from 'react-native';
 import {Calendar, CalendarProps} from 'react-native-calendars';
 import testIDs from '../testIDs';
@@ -358,6 +358,56 @@ const CalendarsScreen = () => {
     );
   };
 
+  const renderCalendarWithCustomHeaderTitle = () => {
+    const [selectedValue, setSelectedValue] = useState(new Date());
+
+    const getNewSelectedDate = useCallback(
+      (date, shouldAdd) => {
+        const newMonth = new Date(date).getMonth();
+        const month = shouldAdd ? newMonth + 1 : newMonth - 1;
+        const newDate = new Date(selectedValue.setMonth(month));
+        const newSelected = new Date(newDate.setDate(1));
+        return newSelected;
+      },
+      [selectedValue]
+    );
+    const onPressArrowLeft = useCallback(
+      (subtract, month) => {
+        const newDate = getNewSelectedDate(month, false);
+        setSelectedValue(newDate);
+        subtract();
+      },
+      [getNewSelectedDate]
+    );
+  
+    const onPressArrowRight = useCallback(
+      (add, month) => {
+        const newDate = getNewSelectedDate(month, true);
+        setSelectedValue(newDate);
+        add();
+      },
+      [getNewSelectedDate]
+    );
+
+    const CustomHeaderTitle = (
+      <TouchableOpacity style={styles.customTitleContainer} onPress={() => console.warn('Tapped!')}>
+        <Text style={styles.customTitle}>{selectedValue.getMonth() + 1}-{selectedValue.getFullYear()}</Text>
+      </TouchableOpacity>
+    );
+
+    return (
+      <Fragment>
+        <Text style={styles.text}>Calendar with custom header title</Text>
+        <Calendar
+          style={styles.calendar}
+          customHeaderTitle={CustomHeaderTitle}
+          onPressArrowLeft={onPressArrowLeft}
+          onPressArrowRight={onPressArrowRight}
+        />
+      </Fragment>
+    );
+  };
+
   const renderCalendarWithCustomHeader = () => {
     const CustomHeader = React.forwardRef((props, ref) => {
       return (
@@ -424,8 +474,9 @@ const CalendarsScreen = () => {
         {renderCalendarWithWeekNumbers()}
         {renderCalendarWithMinAndMaxDates()}
         {renderCalendarWithCustomDay()}
-        {renderCalendarWithCustomHeader()}
         {renderCalendarWithInactiveDays()}
+        {renderCalendarWithCustomHeaderTitle()}
+        {renderCalendarWithCustomHeader()}
       </Fragment>
     );
   };
@@ -494,5 +545,15 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
     marginHorizontal: -4,
     padding: 8
+  },
+  customTitleContainer: {
+    flexDirection: 'row', 
+    alignItems: 'center', 
+    padding: 10
+  },
+  customTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#00BBF2'
   }
 });

src/calendar/header/index.tsx

@@ -54,8 +54,10 @@ export interface CalendarHeaderProps {
   disableArrowRight?: boolean;
   /** Apply custom disable color to selected day indexes */
   disabledDaysIndexes?: number[];
-  /** Replace default month and year title with custom one. the function receive a date as parameter */
+  /** Replace default title with custom one. the function receive a date as parameter */
   renderHeader?: (date?: XDate) => ReactNode;
+  /** Replace default title with custom element */
+  customHeaderTitle?: JSX.Element;
   /** Provide aria-level for calendar heading for proper accessibility when used with web (react-native-web) */
   webAriaLevel?: number;
   testID?: string;
@@ -92,8 +94,10 @@ class CalendarHeader extends Component<CalendarHeaderProps> {
     disableArrowRight: PropTypes.bool,
     /** Apply custom disable color to selected day indexes */
     disabledDaysIndexes: PropTypes.arrayOf(PropTypes.number),
-    /** Replace default month and year title with custom one. the function receive a date as parameter. */
+    /** Replace default title with custom one. the function receive a date as parameter */
     renderHeader: PropTypes.any,
+    /** Replace default title with custom element */
+    customHeaderTitle: PropTypes.any,
     /** Provide aria-level for calendar heading for proper accessibility when used with web (react-native-web) */
     webAriaLevel: PropTypes.number
   };
@@ -123,7 +127,8 @@ class CalendarHeader extends Component<CalendarHeaderProps> {
       'renderArrow',
       'disableArrowLeft',
       'disableArrowRight',
-      'renderHeader'
+      'renderHeader',
+      'customHeaderTitle'
     ]);
   }
 
@@ -180,13 +185,17 @@ class CalendarHeader extends Component<CalendarHeaderProps> {
   });
 
   renderHeader = () => {
-    const {renderHeader, month, monthFormat, testID, webAriaLevel} = this.props;
+    const {customHeaderTitle, renderHeader, month, monthFormat, testID, webAriaLevel} = this.props;
     const webProps = Platform.OS === 'web' ? {'aria-level': webAriaLevel} : {};
 
     if (renderHeader) {
       return renderHeader(month);
     }
 
+    if (customHeaderTitle) {
+      return customHeaderTitle;
+    }
+
     return (
       <Fragment>
         <Text

src/calendar/index.tsx

@@ -66,7 +66,7 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   disabledByDefault?: boolean;
   /** Style passed to the header */
   headerStyle?: ViewStyle;
-  /** Allow rendering of a totally custom header */
+  /** Allow rendering a totally custom header */
   customHeader?: any;
   /** Allow selection of dates before minDate or after maxDate */
   allowSelectionOutOfRange?: boolean;
@@ -127,7 +127,7 @@ class Calendar extends Component<CalendarProps, State> {
     disabledByDefault: PropTypes.bool,
     /** Style passed to the header */
     headerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-    /** Allow rendering of a totally custom header */
+    /** Allow rendering a totally custom header */
     customHeader: PropTypes.any,
     /** Allow selection of dates before minDate or after maxDate */
     allowSelectionOutOfRange: PropTypes.bool