Merge pull request #109 from TheoremOne/feature/multiple-push-pull

Feature: Multiple push pull

Author: briandiaz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremone/th1-calendar",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "React Calendar",
   "contributors": ["Brian Diaz <[email protected]>"],
   "repository": "https://github.com/TheoremOne/react-big-calendar",

src/Calendar.js

@@ -80,6 +80,7 @@ class Calendar extends React.Component {
   state = {
     selected: {},
     switchMonthHeader: false,
+    selectedList: [],
   };
 
   static propTypes = {
@@ -791,6 +792,7 @@ class Calendar extends React.Component {
           onShowMore={this._showMore}
           ref="view"
           selected={this.state.selected}
+          selectedList={this.state.selectedList}
           showAllEvents={this.props.showAllEvents}
         />
         <div
@@ -838,6 +840,7 @@ class Calendar extends React.Component {
             onShowMore={this._showMore}
             ref="view"
             selected={this.state.selected}
+            selectedList={this.state.selectedList}
             showAllEvents={this.props.showAllEvents}
           />
         </div>
@@ -867,10 +870,39 @@ class Calendar extends React.Component {
 
   handleSelectEvent = (eventInfo, ...args) => {
     const [event] = args;
+    const { selectedList } = this.state;
     event.persist();
+
     if (event && event.shiftKey) {
-      console.log('isSelectingShiftKey');
-      notify(this.props.onShiftSelect, event);
+      const copySelectedList = selectedList;
+      let eventIndex = null,
+        hasEvent = false;
+
+      for (let index = 0; index < selectedList.length; index++) {
+        const evt = selectedList[index];
+
+        if (evt.id === eventInfo.id) {
+          eventIndex = index;
+          hasEvent = true;
+          break;
+        }
+      }
+
+      if (hasEvent) {
+        copySelectedList.splice(eventIndex, eventIndex + 1);
+      } else {
+        copySelectedList.push(eventInfo);
+      }
+      this.setState({ selectedList: copySelectedList }, () => {
+        console.log('is selecting', copySelectedList);
+        notify(this.props.onShiftSelect, copySelectedList);
+      });
+    } else {
+      selectedList.length = 0;
+      this.setState({ selectedList }, () => {
+        console.log('left selecting', selectedList);
+        notify(this.props.onShiftSelect, selectedList);
+      });
     }
 
     this.setState({ selected: eventInfo }, () => {

src/DateContentRow.js

@@ -25,6 +25,7 @@ const propTypes = {
 
   container: PropTypes.func,
   selected: PropTypes.object,
+  selectedList: PropTypes.array,
   selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
   longPressThreshold: PropTypes.number,
 

src/DayColumn.js

@@ -49,6 +49,7 @@ class DayColumn extends React.Component {
     messages: PropTypes.object,
 
     selected: PropTypes.object,
+    selectedList: PropTypes.array,
     selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
     eventOffset: PropTypes.number,
     longPressThreshold: PropTypes.number,
@@ -127,6 +128,7 @@ class DayColumn extends React.Component {
       culture,
       eventPropGetter,
       selected,
+      selectedList,
       messages,
       eventComponent,
       eventTimeRangeFormat,
@@ -186,6 +188,12 @@ class DayColumn extends React.Component {
 
       let _isSelected = isSelected(event, selected);
 
+      console.log({ selectedList });
+
+      if (selectedList.length) {
+        _isSelected = selectedList.some(evt => evt.id === event.data.id);
+      }
+
       if (eventPropGetter)
         var { style: xStyle, className } = eventPropGetter(event, start, end, _isSelected);
 

src/EventCell.js

@@ -21,6 +21,7 @@ let propTypes = {
   onInlineEditEventTitle: PropTypes.func.isRequired,
   onSelect: PropTypes.func,
   selected: PropTypes.bool,
+  selectedList: PropTypes.array,
   slotEnd: PropTypes.instanceOf(Date),
   slotStart: PropTypes.instanceOf(Date),
   startAccessor: accessor,

src/EventRowMixin.js

@@ -15,6 +15,7 @@ export default {
     start: PropTypes.instanceOf(Date),
 
     selected: PropTypes.object,
+    selectedList: PropTypes.array,
     eventPropGetter: PropTypes.func,
     titleAccessor: accessor,
     allDayAccessor: accessor,
@@ -30,6 +31,7 @@ export default {
   defaultProps: {
     segments: [],
     selected: {},
+    selectedList: [],
     slots: 7,
   },
 
@@ -45,10 +47,16 @@ export default {
       onInlineEditEventTitle,
       onSelect,
       selected,
+      selectedList,
       start,
       startAccessor,
       titleAccessor,
     } = props;
+    let _isSelected = isSelected(event.data, selected);
+
+    if (selectedList.length) {
+      _isSelected = selectedList.some(evt => evt.id === event.data.id);
+    }
 
     return (
       <EventCell
@@ -61,7 +69,8 @@ export default {
         onDoubleClick={onDoubleClick}
         onInlineEditEventTitle={onInlineEditEventTitle}
         onSelect={onSelect}
-        selected={isSelected(event.data, selected)}
+        selected={_isSelected}
+        selectedList={selectedList}
         slotEnd={end}
         slotStart={start}
         startAccessor={startAccessor}

src/Month.js

@@ -50,6 +50,7 @@ let propTypes = {
   endAccessor: accessor.isRequired,
 
   selected: PropTypes.object,
+  selectedList: PropTypes.array,
   selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
   longPressThreshold: PropTypes.number,
 
@@ -188,6 +189,7 @@ class MonthView extends React.Component {
       eventPropGetter,
       messages,
       selected,
+      selectedList,
       now,
       date,
       longPressThreshold,
@@ -236,6 +238,7 @@ class MonthView extends React.Component {
         renderHeader={this.readerDateHeading}
         selectable={selectable}
         selected={selected}
+        selectedList={selectedList}
         startAccessor={startAccessor}
         titleAccessor={titleAccessor}
         onNavigate={onNavigate}
@@ -340,13 +343,8 @@ class MonthView extends React.Component {
   };
 
   handleSelectEvent = (...args) => {
-    const [_, e] = args;
     this.clearSelection();
     notify(this.props.onSelectEvent, args);
-
-    if (e && e.shiftKey) {
-      notify(this.props.onShiftSelect, e);
-    }
   };
 
   handleDoubleClickEvent = (...args) => {