{
29 | moveCardToPreviousList(card, list);
30 | }}
31 | moveCardToNextList={() => {
32 | moveCardToNextList(card, list);
33 | }}
34 | />
35 | ));
36 | }
37 |
38 | return cardElements;
39 | }
40 |
41 | // only takes care of empty list drop
42 | // everything else happens inside handleDropOnCard
43 | onCardDropIntoEmptyList(e) {
44 | e.preventDefault();
45 | const {list_id, ...dropProps} = JSON.parse(e.dataTransfer.getData('text'));
46 | const { list, moveCardToAnotherList } = this.props;
47 |
48 | if (!list.cards || !list.cards.length) {
49 | moveCardToAnotherList(dropProps, list_id, list._id);
50 | }
51 | }
52 |
53 | onDragOver(e) {
54 | e.preventDefault();
55 | }
56 |
57 | handleDropOnCard(card, prevListId, nextListId) {
58 | this.props.moveCardToAnotherList(card, prevListId, nextListId);
59 | }
60 |
61 | render() {
62 | const { list, handleAddNewCardToList } = this.props;
63 |
64 | return (
65 |
66 |
67 |
71 | {this.getCards()}
72 |
73 |
74 |
86 | {this.renderInputBox()}
87 |
88 | );
89 | }
90 |
91 | return (
92 |
93 | {this.renderInitial()}
94 |
95 | );
96 | }
97 | };
98 |
99 | export default AddNewList;
100 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "offline-kanban",
3 | "version": "0.0.1",
4 | "private": true,
5 | "main": "index.js",
6 | "homepage": "https://sarmadsangi.github.io/offline-kanban",
7 | "devDependencies": {
8 | "babel-core": "6.14.0",
9 | "babel-eslint": "6.1.2",
10 | "babel-loader": "6.2.5",
11 | "babel-plugin-transform-class-properties": "6.11.5",
12 | "babel-plugin-transform-decorators": "^6.13.0",
13 | "babel-plugin-transform-decorators-legacy": "^1.3.4",
14 | "babel-plugin-transform-export-extensions": "^6.8.0",
15 | "babel-plugin-transform-object-rest-spread": "6.8.0",
16 | "babel-plugin-transform-react-constant-elements": "6.9.1",
17 | "babel-plugin-transform-regenerator": "6.14.0",
18 | "babel-plugin-transform-runtime": "6.12.0",
19 | "babel-preset-latest": "6.14.0",
20 | "babel-preset-react": "6.11.1",
21 | "babel-runtime": "6.11.6",
22 | "case-sensitive-paths-webpack-plugin": "1.1.3",
23 | "chalk": "1.1.3",
24 | "connect-history-api-fallback": "1.3.0",
25 | "cross-spawn": "4.0.0",
26 | "css-loader": "0.23.1",
27 | "detect-port": "1.0.0",
28 | "eslint": "3.1.1",
29 | "eslint-loader": "1.4.1",
30 | "eslint-plugin-flowtype": "2.4.0",
31 | "eslint-plugin-import": "1.12.0",
32 | "eslint-plugin-jsx-a11y": "2.0.1",
33 | "eslint-plugin-react": "5.2.2",
34 | "extract-text-webpack-plugin": "1.0.1",
35 | "file-loader": "0.9.0",
36 | "filesize": "3.3.0",
37 | "fs-extra": "0.30.0",
38 | "gzip-size": "3.0.0",
39 | "html-webpack-plugin": "2.22.0",
40 | "http-proxy-middleware": "0.17.0",
41 | "json-loader": "0.5.4",
42 | "object-assign": "4.1.0",
43 | "opn": "4.0.2",
44 | "postcss-cssnext": "^2.5.2",
45 | "postcss-import": "^8.1.2",
46 | "postcss-loader": "0.9.1",
47 | "promise": "7.1.1",
48 | "recursive-readdir": "2.0.0",
49 | "rimraf": "2.5.4",
50 | "strip-ansi": "3.0.1",
51 | "style-loader": "0.13.1",
52 | "url-loader": "0.5.7",
53 | "webpack": "1.13.1",
54 | "webpack-dev-server": "1.14.1",
55 | "whatwg-fetch": "1.0.0"
56 | },
57 | "dependencies": {
58 | "lodash": "^4.15.0",
59 | "mobile-detect": "^1.3.3",
60 | "mobx": "^2.0.0",
61 | "mobx-react": "^3.0.0",
62 | "offline-plugin": "^3.4.2",
63 | "pouchdb": "^5.4.5",
64 | "pushstate-server": "^1.12.0",
65 | "react": "^15.3.1",
66 | "react-dom": "^15.3.1",
67 | "react-slick": "^0.14.5"
68 | },
69 | "scripts": {
70 | "dev": "node ./scripts/start.js",
71 | "build": "node ./scripts/build.js",
72 | "start": "node index.js"
73 | },
74 | "eslintConfig": {
75 | "extends": "./config/eslint.js"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/components/icons/Logo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Logo = (props) => (
4 |
35 | );
36 |
37 | export default Logo;
38 |
--------------------------------------------------------------------------------
/src/components/KanbanBoard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import styles from './KanbanBoard.css';
3 | import List from 'components/List';
4 | import AddNewList from 'components/AddNewList';
5 | import { observer } from 'mobx-react';
6 | import Slider from 'react-slick';
7 |
8 | var slideTimer = null;
9 |
10 | @observer
11 | class KanbanBoard extends Component {
12 | constructor(props) {
13 | super(props);
14 | this.handleCreateNewList = this.handleCreateNewList.bind(this);
15 | this.handleMoveCardToAnotherList = this.handleMoveCardToAnotherList.bind(this);
16 | this.transitionCardToNextList = this.transitionCardToNextList.bind(this);
17 | this.transitionCardToPreviousList = this.transitionCardToPreviousList.bind(this);
18 | }
19 |
20 | handleCreateNewList(listName) {
21 | this.props.createNewList(listName);
22 | }
23 |
24 | handleMoveCardToAnotherList(cardToMove, prevListId, nextListId) {
25 | this.props.moveCardToAnotherList(cardToMove, prevListId, nextListId);
26 | }
27 |
28 | transitionCardToNextList(card, list) {
29 | const { slideCount, currentSlide } = this.refs.slider.innerSlider.state;
30 |
31 | // check if there is next list, -2 to exclude ADD NEW LIST component
32 | // which part of slider but is not counted as list.
33 | if (currentSlide < slideCount-2) {
34 | this.refs.slider.slickNext();
35 | clearTimeout(slideTimer);
36 | slideTimer = setTimeout(() => this.props.moveCardToNextList(card, list), 300);
37 | }
38 | }
39 |
40 | transitionCardToPreviousList(card, list) {
41 | this.refs.slider.slickPrev();
42 | clearTimeout(slideTimer);
43 | slideTimer = setTimeout(() => this.props.moveCardToPreviousList(card, list), 300);
44 | }
45 |
46 | renderLists() {
47 | const {
48 | lists,
49 | createNewCard,
50 | } = this.props;
51 |
52 | const settings = {
53 | dots: false,
54 | infinite: false,
55 | speed: 300,
56 | slidesToShow: 1,
57 | nextArrow: '',
58 | swipe: true,
59 | prevArrow: '',
60 | slidesToScroll: 1,
61 | variableWidth: true,
62 | className: styles.slider_wrapper,
63 | };
64 |
65 | const listElements = lists.map(list => (
66 |
67 | createNewCard(cardName, list._id)}
70 | moveCardToAnotherList={this.handleMoveCardToAnotherList}
71 | moveCardToPreviousList={this.transitionCardToPreviousList}
72 | moveCardToNextList={this.transitionCardToNextList}
73 | />
74 |
75 | ));
76 |
77 | if (window.__md.isPhoneSized()) {
78 | return (
79 |
80 | {listElements}
81 |
84 |
85 | );
86 | }
87 |
88 | return (
89 |
90 | {listElements}
91 |
92 |
99 | {this.renderLists()}
100 |
101 | )
102 | }
103 | };
104 |
105 | export default KanbanBoard;
106 |
--------------------------------------------------------------------------------
/src/components/Card.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import styles from './Card.css';
3 | import DummyCard from 'components/DummyCard';
4 | import ArrowIcon from 'components/icons/Arrow';
5 | import { observer } from 'mobx-react';
6 |
7 | export const constants = {
8 | CARD_ID: 'CARD_ID',
9 | };
10 |
11 | @observer
12 | class Card extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.handleDrop = this.handleDrop.bind(this);
16 | this.hideDummy = this.hideDummy.bind(this);
17 | this.displayDummy = this.displayDummy.bind(this);
18 | this.handleCardDragStart = this.handleCardDragStart.bind(this);
19 | this.handleCardDragEnd = this.handleCardDragEnd.bind(this);
20 |
21 | this.state = {
22 | displayDummy: false,
23 | dragging: false,
24 | };
25 | }
26 |
27 | handleDrop(e) {
28 | e.preventDefault();
29 |
30 | const { handleDropOnCard, list_id, _id, pos } = this.props;
31 | const dropProps = JSON.parse(e.dataTransfer.getData('text'));
32 |
33 | // prepare new card props, some will be discarded in Store
34 | // TODO: improve this schema / move this to store as well.
35 | const newCard = {
36 | _id: dropProps._id,
37 | droppedAtCardId: _id,
38 | newPos: pos,
39 | title: dropProps.title,
40 | pos: dropProps.pos,
41 | created_at: dropProps.created_at,
42 | }
43 |
44 | handleDropOnCard(newCard, dropProps.list_id, list_id);
45 | this.hideDummy(e);
46 | }
47 |
48 | hideDummy(e) {
49 | // onDragLeave causes issues when there are nested elements inside drop zone
50 | // with this it will only trigger any change on dropzone element itself (parent)
51 | if (e.target.id === constants.CARD_ID) {
52 | this.setState({
53 | displayDummy: false,
54 | dragging: false,
55 | });
56 | }
57 | }
58 |
59 | // Don't display dummy when this card itself is being dragged
60 | displayDummy(e) {
61 | const { dragging } = this.state;
62 | if (!dragging) {
63 | this.setState({
64 | displayDummy: true,
65 | });
66 | }
67 | }
68 |
69 | handleCardDragStart(e) {
70 | e.dataTransfer.setData('text', JSON.stringify(this.props));
71 | this.setState({
72 | dragging: true,
73 | })
74 | }
75 |
76 | handleCardDragEnd(e) {
77 | this.setState({
78 | dragging: false,
79 | })
80 | }
81 |
82 | renderMobileControls() {
83 | return (
84 |
88 | );
89 | }
90 |
91 | render() {
92 | const { title, isMobileCard } = this.props;
93 | const { displayDummy } = this.state;
94 |
95 | return (
96 |
101 | {displayDummy ?
: ''}
102 |
107 |
{title}
108 | {isMobileCard ? this.renderMobileControls() : null}
109 |
110 |