Month range feature

src/.stories/index.js

@@ -8,6 +8,7 @@ import InfiniteCalendar, {
   withKeyboardSupport,
   withMultipleDates,
   withRange,
+  withMonthRange,
 } from '../';
 import styles from './stories.scss';
 
@@ -65,6 +66,22 @@ storiesOf('Higher Order Components', module)
       Component={withRange(withKeyboardSupport(Calendar))}
     />
   ))
+  .add('Month Range selection', () => (
+  <InfiniteCalendar
+    selected={{
+      start: subMonths(new Date(), 1),
+      end: addMonths(new Date(), 1),
+    }}
+    display={'years'}
+    displayOptions={{
+        showHeader: false,
+        hideYearsOnSelect: false,
+    }}
+    minDate={subMonths(new Date(), 10)}
+    maxDate={addMonths(new Date(), 10)}
+    Component={withMonthRange(Calendar)}
+  />
+  ))
   .add('Multiple date selection', () => {
     return (
       <InfiniteCalendar

src/Calendar/Range/Range.scss

@@ -0,0 +1,11 @@
+@mixin circle($size) {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $size - 4px;
+  height: $size - 4px;
+  margin-top: -0.5 * ($size - 4px);
+  margin-left: -0.5 * ($size - 4px);
+  border-radius: 50%;
+}

src/Calendar/Range/index.js

@@ -0,0 +1,15 @@
+import {getSortedDate} from '../../utils'
+
+export const EVENT_TYPE = {
+  END: 3,
+  HOVER: 2,
+  START: 1,
+};
+
+export function getSortedSelection({start, end}) {
+  return getSortedDate(start, end);
+}
+
+export function getInitialDate({selected}) {
+  return selected && selected.start || new Date();
+}

src/Calendar/withMonthRange.js

@@ -0,0 +1,110 @@
+import min from 'date-fns/min';
+import max from 'date-fns/max';
+import startOfMonth from 'date-fns/start_of_month';
+import endOfMonth from 'date-fns/end_of_month';
+import {compose, withProps, withState} from 'recompose';
+import {withDefaultProps} from './';
+import {withImmutableProps} from '../utils';
+import {EVENT_TYPE, getInitialDate, getSortedSelection} from './Range';
+
+let isTouchDevice = false;
+
+export const withMonthRange = compose(
+  withDefaultProps,
+  withState('scrollDate', 'setScrollDate', getInitialDate),
+  withState('selectionStart', 'setSelectionStart', null),
+  withImmutableProps(({
+    YearsComponent,
+  }) => ({
+    YearsComponent: YearsComponent,
+  })),
+  withProps(({passThrough, selected, ...props}) => ({
+    /* eslint-disable sort-keys */
+    passThrough: {
+      ...passThrough,
+      Years: {
+        onSelect: (date) => handleSelect(date, {selected, ...props}),
+        handlers: {
+          onMouseOver: !isTouchDevice && props.selectionStart
+            ? (e) => handleMouseOver(e, {selected, ...props})
+            : null,
+        },
+      },
+    },
+    selected: {
+      start: selected && selected.start,
+      end: selected && selected.end,
+    },
+  })),
+);
+
+function handleSelect(date, {onSelect, selected, selectionStart, setSelectionStart, min, max, minDate, maxDate}) {
+  if (selectionStart) {
+    onSelect({
+      eventType: EVENT_TYPE.END,
+      ...getMonthRangeDate({
+        start: selectionStart,
+        end: date,
+        minSelected: minDate,
+        maxSelected: maxDate,
+        minScrolled: min,
+        maxScrolled: max,
+      }),
+    });
+    setSelectionStart(null);
+  } else {
+    onSelect({
+      eventType: EVENT_TYPE.START,
+      ...getMonthRangeDate({
+        start: date,
+        end: date,
+        minSelected: minDate,
+        maxSelected: maxDate,
+        minScrolled: min,
+        maxScrolled: max,
+      }),
+    });
+    setSelectionStart(date);
+  }
+}
+
+function handleMouseOver(e, {onSelect, selectionStart}) {
+  e.stopPropagation();
+  const month = e.target.getAttribute('data-month');
+  if (!month) { return; }
+  onSelect({
+    eventType: EVENT_TYPE.HOVER,
+    ...getMonthRangeDate({
+      start: selectionStart,
+      end: month,
+    }),
+  });
+}
+
+function getMonthRangeDate({start, end, minSelected, maxSelected, minScrolled, maxScrolled}) {
+  const sortedDate = getSortedSelection({start, end});
+  const compareStartDate = [];
+  const compareEndDate = [];
+  if (sortedDate.start) {
+    compareStartDate.push(sortedDate.start, startOfMonth(sortedDate.start));
+    minScrolled && compareStartDate.push(minScrolled);
+    minSelected && compareStartDate.push(minSelected);
+  }
+  if (sortedDate.end) {
+    compareEndDate.push(endOfMonth(sortedDate.end));
+    maxScrolled && compareEndDate.push(maxScrolled);
+    maxSelected && compareEndDate.push(maxSelected);
+  }
+  return {
+    start: compareStartDate.length > 0 ? max(...compareStartDate) : sortedDate.start,
+    end: compareEndDate.length > 0 ? min(...compareEndDate) : sortedDate.end,
+  };
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('touchstart', function onTouch() {
+    isTouchDevice = true;
+
+    window.removeEventListener('touchstart', onTouch, false);
+  });
+}

src/Day/Day.scss

@@ -1,16 +1,5 @@
 @import "../variables";
-
-@mixin circle() {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: $rowHeight - 4px;
-  height: $rowHeight - 4px;
-  margin-top: -0.5 * ($rowHeight - 4px);
-  margin-left: -0.5 * ($rowHeight - 4px);
-  border-radius: 50%;
-}
+@import "../Calendar/Range/Range";
 
 .root {
   display: inline-block;
@@ -31,7 +20,7 @@
       z-index: 1;
 
       &:before {
-        @include circle();
+        @include circle($rowHeight);
 
         background-color: $cellHoverBg;
         z-index: -1;
@@ -63,7 +52,7 @@
       }
 
       &:before {
-          @include circle();
+          @include circle($rowHeight);
           box-shadow: inset 0 0 0 1px;
           z-index: -1;
       }
@@ -84,7 +73,7 @@
     }
 
     .selection {
-      @include circle();
+      @include circle($rowHeight);
       line-height: $rowHeight;
       z-index: 2;
 

src/Years/Years.scss

@@ -1,4 +1,7 @@
 @import "../variables";
+@import "../Calendar/Range/Range";
+
+$cellSize: 44px;
 
 .root {
   position: absolute;
@@ -41,7 +44,6 @@
 }
 
 .year {
-  $cellSize: 44px;
 
   display: flex;
   padding: 0 20px;
@@ -91,6 +93,7 @@
       justify-content: center;
       list-style: none;
       border-radius: 50%;
+      margin-bottom: 2px;
       box-sizing: border-box;
 
       color: #444;
@@ -106,6 +109,12 @@
         background-color: blue;
         color: #FFF !important;
         border: 0;
+
+        .selection {
+          @include circle($cellSize);
+          line-height: $cellSize;
+          z-index: 2;
+        }
       }
       &.disabled {
         cursor: not-allowed;
@@ -159,3 +168,74 @@
     padding-bottom: $spacing;
   }
 }
+
+/*
+ * Range selection styles
+ */
+.range.selected {
+  &.start, &.end {
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: 50%;
+      height: $cellSize;
+      margin-top: -0.5 * $cellSize;
+      background-color: #559fff;
+    }
+  }
+
+  &.disabled {
+      background-color: #EEE !important;
+    .selection.selection {
+      background-color: #EEE !important;
+      color: #FFF;
+    }
+    &:after {
+        background-color: #EEE !important;
+    }
+  }
+
+  &.start {
+    .selection {
+      background-color: #448aff;
+      border-top-left-radius: 50%;
+      border-bottom-left-radius: 50%;
+    }
+
+    &:after {
+      right: 0;
+    }
+
+    &.end:after {
+      display: none;
+    }
+  }
+  &.betweenRange {
+    border-radius: 0;
+    .selection {
+      left: 0;
+      right: 0;
+      width: 100%;
+      margin-left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 0;
+    }
+  }
+  &.end {
+    &:after {
+      left: 0;
+    }
+
+    .selection {
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
+
+      color: #559fff;
+      background-color: #FFF;
+      box-sizing: border-box;
+    }
+  }
+}