diff --git a/src/components/KanbanBoard.js b/src/components/KanbanBoard.js index e6f85b5..ba0e783 100644 --- a/src/components/KanbanBoard.js +++ b/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} /> )); if (window.__md.isPhoneSized()) { return ( - + {listElements}