Merge pull request #428 from lexispike/feature/fixed-focus-and-backwards-focus

Add options calendarFocus and preventUnnecessaryRefocus

Author: kamyar

README.md

@@ -128,6 +128,8 @@ preview(DateRange)                   | Object    |                  | displays a
 showPreview(DateRange)               | bool      | true             | visibility of preview
 editableDateInputs(Calendar)         | bool      | false            | whether dates can be edited in the Calendar's input fields
 dragSelectionEnabled(Calendar)       | bool      | true             | whether dates can be selected via drag n drop
+calendarFocus(Calendar)              | String    | 'forwards'       | Whether calendar focus month should be forward-driven or backwards-driven. can be 'forwards' or 'backwards'
+preventSnapRefocus(Calendar)  | bool      | false            | prevents unneceessary refocus of shown range on selection
 onPreviewChange(DateRange)           | Object    |                  | Callback function for preview changes
 dateDisplayFormat                    | String    | `MMM d, yyyy`    | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
 dayDisplayFormat                     | String    | `d`              | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)

src/components/Calendar/index.js

@@ -9,6 +9,7 @@ import ReactList from 'react-list';
 import { shallowEqualObjects } from 'shallow-equal';
 import {
   addMonths,
+  subMonths,
   format,
   eachDayOfInterval,
   startOfWeek,
@@ -77,6 +78,14 @@ class Calendar extends PureComponent {
   }
   focusToDate = (date, props = this.props, preventUnnecessary = true) => {
     if (!props.scroll.enabled) {
+      if (preventUnnecessary && props.preventSnapRefocus) {
+        const focusedDateDiff = differenceInCalendarMonths(date, this.state.focusedDate);
+        const isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0;
+        const isAllowedBackward = props.calendarFocus === 'backwards' && focusedDateDiff <= 0;
+        if ((isAllowedForward || isAllowedBackward) && Math.abs(focusedDateDiff) < props.months) {
+          return;
+        }
+      }
       this.setState({ focusedDate: date });
       return;
     }
@@ -484,7 +493,10 @@ class Calendar extends PureComponent {
               isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
             )}>
             {new Array(this.props.months).fill(null).map((_, i) => {
-              const monthStep = addMonths(this.state.focusedDate, i);
+              let monthStep = addMonths(this.state.focusedDate, i);;
+              if (this.props.calendarFocus === 'backwards') {
+                monthStep = subMonths(this.state.focusedDate, this.props.months - 1 - i);
+              }
               return (
                 <Month
                   {...this.props}
@@ -544,6 +556,8 @@ Calendar.defaultProps = {
   editableDateInputs: false,
   dragSelectionEnabled: true,
   fixedHeight: false,
+  calendarFocus: 'forwards',
+  preventSnapRefocus: false,
   ariaLabels: {},
 };
 
@@ -598,6 +612,8 @@ Calendar.propTypes = {
   editableDateInputs: PropTypes.bool,
   dragSelectionEnabled: PropTypes.bool,
   fixedHeight: PropTypes.bool,
+  calendarFocus: PropTypes.string,
+  preventSnapRefocus: PropTypes.bool,
   ariaLabels: ariaLabelsShape,
 };
 

src/components/DateRangePicker/README.md

@@ -24,6 +24,32 @@ const [state, setState] = useState([
 />;
 ```
 
+#### Example: Backwards 2 Month View with preventSnapRefocus
+
+```jsx inside Markdown
+import { addDays } from 'date-fns';
+import { useState } from 'react';
+
+const [state, setState] = useState([
+  {
+    startDate: new Date(),
+    endDate: addDays(new Date(), 7),
+    key: 'selection'
+  }
+]);
+
+<DateRangePicker
+  onChange={item => setState([item.selection])}
+  showSelectionPreview={true}
+  moveRangeOnFirstSelection={false}
+  months={2}
+  ranges={state}
+  direction="horizontal"
+  preventSnapRefocus={true}
+  calendarFocus="backwards"
+/>;
+```
+
 #### Example: Vertical Infinite
 
 ```jsx inside Markdown