feat: add selecting and drag cancelation (jquense#1119)

* feat: cancel drag on Esc press

* fix: always reset drag when an event happens out of bounds

* feat: cancel selection on Esc press

Author: bs85

src/DayColumn.js

@@ -188,7 +188,7 @@ class DayColumn extends React.Component {
       events,
       accessors,
       slotMetrics,
-      minimumStartDifference: Math.ceil(step * timeslots / 2),
+      minimumStartDifference: Math.ceil((step * timeslots) / 2),
     })
 
     return styledEvents.map(({ event, style }, idx) => {
@@ -318,6 +318,12 @@ class DayColumn extends React.Component {
         this.setState({ selecting: false })
       }
     })
+
+    selector.on('reset', () => {
+      if (this.state.selecting) {
+        this.setState({ selecting: false })
+      }
+    })
   }
 
   _teardownSelectable = () => {

src/Selection.js

@@ -94,6 +94,7 @@ class Selection {
     this._onTouchMoveWindowListener && this._onTouchMoveWindowListener.remove()
     this._onInitialEventListener && this._onInitialEventListener.remove()
     this._onEndListener && this._onEndListener.remove()
+    this._onEscListener && this._onEscListener.remove()
     this._onMoveListener && this._onMoveListener.remove()
     this._onKeyUpListener && this._onKeyUpListener.remove()
     this._onKeyDownListener && this._onKeyDownListener.remove()
@@ -237,6 +238,10 @@ class Selection {
           'mouseup',
           this._handleTerminatingEvent
         )
+        this._onEscListener = addEventListener(
+          'keydown',
+          this._handleTerminatingEvent
+        )
         this._onMoveListener = addEventListener(
           'mousemove',
           this._handleMoveEvent
@@ -274,7 +279,11 @@ class Selection {
 
     this._initialEventData = null
 
-    if (click && !inRoot) {
+    if (e.key === 'Escape') {
+      return this.emit('reset')
+    }
+
+    if (!inRoot) {
       return this.emit('reset')
     }
 
@@ -318,7 +327,7 @@ class Selection {
 
   _handleMoveEvent(e) {
     if (this._initialEventData === null) {
-      return;
+      return
     }
 
     let { x, y } = this._initialEventData

src/addons/dragAndDrop/EventContainerWrapper.js

@@ -151,6 +151,11 @@ class EventContainerWrapper extends React.Component {
     })
 
     selector.on('click', () => this.context.draggable.onEnd(null))
+
+    selector.on('reset', () => {
+      this.reset()
+      this.context.draggable.onEnd(null)
+    })
   }
 
   handleInteractionEnd = () => {