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
Xetoxyc · Nov 19, 2018 · aa8f08b · aa8f08b
1 parent 7a48b6a
commit aa8f08b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/DayColumn.js b/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 = () => {

diff --git a/src/Selection.js b/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

diff --git a/src/addons/dragAndDrop/EventContainerWrapper.js b/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 = () => {