header click events now work with multipleRanges,

Also cleaned up some functionality on the on select function to make it more readable.

src/Calendar/withMultipleRanges.js

@@ -76,8 +76,8 @@ export const withMultipleRanges = compose(
         },
       },
       Years: {
-        selected: selected[0] && selected[0][displayKey],
-        onSelect: (date) => handleYearSelect(date, {displayKey, selected, ...props}),
+        selected: selected[displayIndex] && parse(selected[displayIndex][displayKey]),
+        onSelect: (date, e, callback) => handleYearSelect(date, callback),
       },
       Header: {
         setDisplayIndex,
@@ -103,40 +103,36 @@ function getSortedSelection({start, end}) {
 
 function handleSelect(date, {onSelect, selected, selectionStart, setSelectionStart, selectionStartIdx, setSelectionStartIdx}) {
   const positionOfDate = determineIfDateAlreadySelected(date, selected);
+  const funcs = {onSelect, setSelectionStart, setSelectionStartIdx};
 
   if(positionOfDate.value && !selectionStart) { //selecting an already defined range
     const selectedDate = selected[positionOfDate.index];//not clone so modding this is modding selected
     selectedDate.end = date; //not possible to have start/end reversed when clicking on already set range
-    selectedDate.eventType = EVENT_TYPES.START;
 
-    onSelect(selected);
-    setSelectionStart(selectedDate.start);
-    setSelectionStartIdx(positionOfDate.index);//grab index of selected and set in state
-  } else if (selectionStart) { //ending new date range
+    updateSelectedState(selectedDate.start, positionOfDate.index, selected, funcs);//grab index of selected and set in state
+  } else if (selectionStart) { //ending date range selection
     if (positionOfDate.value === PositionTypes.START && !(date < selectionStart)) { //if in process and selecting start, assume they want to cancel
-      selected[selectionStartIdx].eventType = EVENT_TYPES.DELETE
-      onSelect(selected); //call twice to notify parent component something is about to be deleted
-      onSelect([...selected.slice(0, positionOfDate.index), ...selected.slice(positionOfDate.index+1)]);
+      updateSelectedState(null, null, [...selected.slice(0, positionOfDate.index), ...selected.slice(positionOfDate.index+1)], funcs);
     } else {
       selected[selectionStartIdx] = { //modifying passed in object without clone due to immediate set state
-        eventType: EVENT_TYPES.END,
         ...getSortedSelection({
           start: selectionStart,
           end: date,
         }),
       };
-      onSelect(selected);
+      updateSelectedState(null, null, selected, funcs);
     }
-    setSelectionStart(null);
-    setSelectionStartIdx(null);
   } else { //starting new date range
-    onSelect(selected.concat({eventType:EVENT_TYPES.START, start: date, end: date}));
-
-    setSelectionStart(date);
-    setSelectionStartIdx(selected.length);//accounts for increase due to concat
+    updateSelectedState(date, selected.length, selected.concat({eventType:EVENT_TYPES.START, start: date, end: date}), funcs)//length accounts for increase due to concat
   }
 }
 
+function updateSelectedState(selectStart, selectStartIdx, selected, {onSelect, setSelectionStart, setSelectionStartIdx}) {
+  onSelect(selected);
+  setSelectionStart(selectStart);
+  setSelectionStartIdx(selectStartIdx);
+}
+
 function handleMouseOver(e, {onSelect, selectionStart, selectionStartIdx, selected}) {
   const dateStr = e.target.getAttribute('data-date');
   const date = dateStr && parse(dateStr);
@@ -154,12 +150,8 @@ function handleMouseOver(e, {onSelect, selectionStart, selectionStartIdx, select
   onSelect(selected);
 }
 
-function handleYearSelect(date, {displayKey, onSelect, selected, setScrollDate}) {
-
-  setScrollDate(date);
-  onSelect(getSortedSelection(
-    Object.assign({}, selected, {[displayKey]: parse(date)}))
-  );
+function handleYearSelect(date, callback) {
+  callback(parse(date));
 }
 
 function getInitialDate({selected}) { //add

src/Calendar/withRange.js

@@ -69,7 +69,7 @@ export const withRange = compose(
         onSelect: (date) => handleYearSelect(date, {displayKey, selected, ...props}),
       },
       Header: {
-        onYearClick: (date, e, key) => setDisplayKey( key.key || 'start'),
+        onYearClick: (date, e, key) => setDisplayKey( key || 'start'),
       },
     },
     selected: {

src/Header/defaultSelectionRenderer.js

@@ -22,7 +22,7 @@ export default function defaultSelectionRenderer(value, {
     {
       active: display === 'years',
       handleClick: e => {
-        onYearClick(date, e, { key, idx });
+        onYearClick(date, e, key);
         setDisplay('years');
       },
       item: 'year',