smooth transition to next list on mobile when moving object from one …

…list to another

src/components/KanbanBoard.js

@@ -5,12 +5,16 @@ import AddNewList from 'components/AddNewList';
 import { observer } from 'mobx-react';
 import Slider from 'react-slick';
 
+var slideTimer = null;
+
 @observer
 class KanbanBoard extends Component {
   constructor(props) {
     super(props);
     this.handleCreateNewList = this.handleCreateNewList.bind(this);
     this.handleMoveCardToAnotherList = this.handleMoveCardToAnotherList.bind(this);
+    this.transitionCardToNextList = this.transitionCardToNextList.bind(this);
+    this.transitionCardToPreviousList = this.transitionCardToPreviousList.bind(this);
   }
 
   handleCreateNewList(listName) {
@@ -21,12 +25,28 @@ class KanbanBoard extends Component {
     this.props.moveCardToAnotherList(cardToMove, prevListId, nextListId);
   }
 
+  transitionCardToNextList(card, list) {
+    const { slideCount, currentSlide } = this.refs.slider.innerSlider.state;
+
+    // check if there is next list, -2 to exclude ADD NEW LIST component
+    // which part of slider but is not counted as list.
+    if (currentSlide < slideCount-2) {
+      this.refs.slider.slickNext();
+      clearTimeout(slideTimer);
+      slideTimer = setTimeout(() => this.props.moveCardToNextList(card, list), 300);
+    }
+  }
+
+  transitionCardToPreviousList(card, list) {
+    this.refs.slider.slickPrev();
+    clearTimeout(slideTimer);
+    slideTimer = setTimeout(() => this.props.moveCardToPreviousList(card, list), 300);
+  }
+
   renderLists() {
     const {
       lists,
       createNewCard,
-      moveCardToPreviousList,
-      moveCardToNextList,
     } = this.props;
 
     const settings = {
@@ -48,15 +68,15 @@ class KanbanBoard extends Component {
           list={list}
           handleAddNewCardToList={(cardName) => createNewCard(cardName, list._id)}
           moveCardToAnotherList={this.handleMoveCardToAnotherList}
-          moveCardToPreviousList={moveCardToPreviousList}
-          moveCardToNextList={moveCardToNextList}
+          moveCardToPreviousList={this.transitionCardToPreviousList}
+          moveCardToNextList={this.transitionCardToNextList}
         />
       </div>
     ));
 
     if (window.__md.isPhoneSized()) {
       return (
-        <Slider {...settings}>
+        <Slider ref='slider' {...settings}>
           {listElements}
           <div>
             <AddNewList handleAddNewList={this.handleCreateNewList} />