366 | 
367 | rcdexta 368 | |
369 |
370 |
371 | 
372 | dapi 373 | |
374 |
375 |
45 | {this.props.children}
46 |
47 | );
48 | }
49 | }
50 |
51 | setRef(element) {
52 | this.containerDiv = element;
53 | }
54 |
55 | getContainerOptions() {
56 | const functionProps = {};
57 |
58 | if (this.props.onDragStart) {
59 | functionProps.onDragStart = (...p) => this.props.onDragStart(...p);
60 | }
61 |
62 | if (this.props.onDragEnd) {
63 | functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p);
64 | }
65 |
66 | if (this.props.onDrop) {
67 | functionProps.onDrop = (...p) => this.props.onDrop(...p);
68 | }
69 |
70 | if (this.props.getChildPayload) {
71 | functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p);
72 | }
73 |
74 | if (this.props.shouldAnimateDrop) {
75 | functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p);
76 | }
77 |
78 | if (this.props.shouldAcceptDrop) {
79 | functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p);
80 | }
81 |
82 | if (this.props.onDragEnter) {
83 | functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p);
84 | }
85 |
86 | if (this.props.onDragLeave) {
87 | functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p);
88 | }
89 |
90 | if (this.props.render) {
91 | functionProps.render = (...p) => this.props.render(...p);
92 | }
93 |
94 | if (this.props.onDropReady) {
95 | functionProps.onDropReady = (...p) => this.props.onDropReady(...p);
96 | }
97 |
98 | if (this.props.getGhostParent) {
99 | functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p);
100 | }
101 |
102 | return Object.assign({}, this.props, functionProps);
103 | }
104 | }
105 |
106 | Container.propTypes = {
107 | behaviour: PropTypes.oneOf(["move", "copy", "drag-zone"]),
108 | groupName: PropTypes.string,
109 | orientation: PropTypes.oneOf(["horizontal", "vertical"]),
110 | style: PropTypes.object,
111 | dragHandleSelector: PropTypes.string,
112 | className: PropTypes.string,
113 | nonDragAreaSelector: PropTypes.string,
114 | dragBeginDelay: PropTypes.number,
115 | animationDuration: PropTypes.number,
116 | autoScrollEnabled: PropTypes.string,
117 | lockAxis: PropTypes.string,
118 | dragClass: PropTypes.string,
119 | dropClass: PropTypes.string,
120 | onDragStart: PropTypes.func,
121 | onDragEnd: PropTypes.func,
122 | onDrop: PropTypes.func,
123 | getChildPayload: PropTypes.func,
124 | shouldAnimateDrop: PropTypes.func,
125 | shouldAcceptDrop: PropTypes.func,
126 | onDragEnter: PropTypes.func,
127 | onDragLeave: PropTypes.func,
128 | render: PropTypes.func,
129 | getGhostParent: PropTypes.func,
130 | removeOnDropOut: PropTypes.bool
131 | };
132 |
133 | Container.defaultProps = {
134 | behaviour: 'move',
135 | orientation: 'vertical',
136 | className: 'reactTrelloBoard'
137 | };
138 |
139 | export default Container;
140 |
--------------------------------------------------------------------------------
/src/dnd/Draggable.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import PropTypes from 'prop-types'
3 | import {constants} from 'trello-smooth-dnd'
4 | const {wrapperClass} = constants
5 |
6 | class Draggable extends Component {
7 | render() {
8 | if (this.props.render) {
9 | return React.cloneElement(this.props.render(), {className: wrapperClass})
10 | }
11 |
12 | const clsName = `${this.props.className ? this.props.className + ' ' : ''}`
13 | return (
14 |
15 | {this.props.children}
16 |
17 | )
18 | }
19 | }
20 |
21 | Draggable.propTypes = {
22 | render: PropTypes.func
23 | }
24 |
25 | export default Draggable
26 |
--------------------------------------------------------------------------------
/src/helpers/LaneHelper.js:
--------------------------------------------------------------------------------
1 | import update from 'immutability-helper'
2 |
3 | const LaneHelper = {
4 | initialiseLanes: (state, {lanes}) => {
5 | const newLanes = lanes.map(lane => {
6 | lane.currentPage = 1
7 | lane.cards && lane.cards.forEach(c => (c.laneId = lane.id))
8 | return lane
9 | })
10 | return update(state, {lanes: {$set: newLanes}})
11 | },
12 |
13 | paginateLane: (state, {laneId, newCards, nextPage}) => {
14 | const updatedLanes = LaneHelper.appendCardsToLane(state, {laneId: laneId, newCards: newCards})
15 | updatedLanes.find(lane => lane.id === laneId).currentPage = nextPage
16 | return update(state, {lanes: {$set: updatedLanes}})
17 | },
18 |
19 | appendCardsToLane: (state, {laneId, newCards, index}) => {
20 | const lane = state.lanes.find(lane => lane.id === laneId)
21 | newCards = newCards
22 | .map(c => update(c, {laneId: {$set: laneId}}))
23 | .filter(c => lane.cards.find(card => card.id === c.id) == null)
24 | return state.lanes.map(lane => {
25 | if (lane.id === laneId) {
26 | if (index !== undefined) {
27 | return update(lane, {cards: {$splice: [[index, 0, ...newCards]]}})
28 | } else {
29 | const cardsToUpdate = [...lane.cards, ...newCards]
30 | return update(lane, {cards: {$set: cardsToUpdate}})
31 | }
32 | } else {
33 | return lane
34 | }
35 | })
36 | },
37 |
38 | appendCardToLane: (state, {laneId, card, index}) => {
39 | const newLanes = LaneHelper.appendCardsToLane(state, {laneId: laneId, newCards: [card], index})
40 | return update(state, {lanes: {$set: newLanes}})
41 | },
42 |
43 | addLane: (state, lane) => {
44 | const newLane = {cards: [], ...lane}
45 | return update(state, {lanes: {$push: [newLane]}})
46 | },
47 |
48 | updateLane: (state, updatedLane) => {
49 | const newLanes = state.lanes.map(lane => {
50 | if (updatedLane.id == lane.id ) {
51 | return { ...lane, ...updatedLane }
52 | } else {
53 | return lane
54 | }
55 | })
56 | return update(state, {lanes: {$set: newLanes}})
57 | },
58 |
59 | removeCardFromLane: (state, {laneId, cardId}) => {
60 | const lanes = state.lanes.map(lane => {
61 | if (lane.id === laneId) {
62 | let newCards = lane.cards.filter(card => card.id !== cardId)
63 | return update(lane, {cards: {$set: newCards}})
64 | } else {
65 | return lane
66 | }
67 | })
68 | return update(state, {lanes: {$set: lanes}})
69 | },
70 |
71 | moveCardAcrossLanes: (state, {fromLaneId, toLaneId, cardId, index}) => {
72 | let cardToMove = null
73 | const interimLanes = state.lanes.map(lane => {
74 | if (lane.id === fromLaneId) {
75 | cardToMove = lane.cards.find(card => card.id === cardId)
76 | const newCards = lane.cards.filter(card => card.id !== cardId)
77 | return update(lane, {cards: {$set: newCards}})
78 | } else {
79 | return lane
80 | }
81 | })
82 | const updatedState = update(state, {lanes: {$set: interimLanes}})
83 | return LaneHelper.appendCardToLane(updatedState, {laneId: toLaneId, card: cardToMove, index: index})
84 | },
85 |
86 | updateCardsForLane: (state, {laneId, cards}) => {
87 | const lanes = state.lanes.map(lane => {
88 | if (lane.id === laneId) {
89 | return update(lane, {cards: {$set: cards}})
90 | } else {
91 | return lane
92 | }
93 | })
94 | return update(state, {lanes: {$set: lanes}})
95 | },
96 |
97 | updateCardForLane: (state, {laneId, card: updatedCard}) => {
98 | const lanes = state.lanes.map(lane => {
99 | if (lane.id === laneId) {
100 | const cards = lane.cards.map(card => {
101 | if (card.id === updatedCard.id) {
102 | return {...card, ...updatedCard}
103 | } else {
104 | return card
105 | }
106 | })
107 | return update(lane, {cards: {$set: cards}})
108 | } else {
109 | return lane
110 | }
111 | })
112 | return update(state, {lanes: {$set: lanes}})
113 | },
114 |
115 | updateLanes: (state, lanes) => {
116 | return {...state, ...{lanes: lanes}}
117 | },
118 |
119 | moveLane: (state, {oldIndex, newIndex}) => {
120 | const laneToMove = state.lanes[oldIndex]
121 | const tempState = update(state, {lanes: {$splice: [[oldIndex, 1]]}});
122 | return update(tempState, {lanes: {$splice: [[newIndex, 0, laneToMove]]}})
123 | },
124 |
125 | removeLane: (state, {laneId}) => {
126 | const updatedLanes = state.lanes.filter(lane => lane.id !== laneId)
127 | return update(state, {lanes: {$set: updatedLanes}})
128 | }
129 | }
130 |
131 | export default LaneHelper
132 |
--------------------------------------------------------------------------------
/src/helpers/createTranslate.js:
--------------------------------------------------------------------------------
1 | import get from 'lodash/get'
2 | export default (TABLE) => (key) => get(TABLE, key)
3 |
--------------------------------------------------------------------------------
/src/helpers/deprecationWarnings.js:
--------------------------------------------------------------------------------
1 | const REPLACE_TABLE = {
2 | addCardLink: 'components.Card',
3 | customLaneHeader: 'components.LaneHeader',
4 | newLaneTemplate: 'components.NewLaneSection',
5 | newCardTemplate: 'components.NewCardForm',
6 | children: 'components.Card',
7 | customCardLayout: 'components.Card',
8 | addLaneTitle: '`t` function with key "Add another lane"',
9 | addCardLink: '`t` function with key "Click to add card"',
10 | }
11 |
12 | const warn = (prop) => {
13 | const use = REPLACE_TABLE[prop]
14 | console.warn(`react-trello property '${prop}' is removed. Use '${use}' instead. More - https://github.com/rcdexta/react-trello/blob/master/UPGRADE.md`)
15 | }
16 |
17 | export default (props) => {
18 | Object.keys(REPLACE_TABLE).forEach((key) => {
19 | if (props.hasOwnProperty(key)) {
20 | warn(key)
21 | }
22 | })
23 | }
24 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Draggable from './dnd/Draggable'
4 | import Container from './dnd/Container'
5 | import BoardContainer from './controllers/BoardContainer'
6 | import Board from './controllers/Board'
7 | import Lane from './controllers/Lane'
8 | import deprecationWarnings from './helpers/deprecationWarnings'
9 | import DefaultComponents from './components'
10 | import locales from './locales'
11 |
12 | import widgets from './widgets'
13 |
14 | import createTranslate from './helpers/createTranslate'
15 |
16 | export {
17 | Draggable,
18 | Container,
19 | BoardContainer,
20 | Lane,
21 | createTranslate,
22 | locales,
23 | widgets
24 | }
25 |
26 | export { DefaultComponents as components }
27 |
28 | const DEFAULT_LANG='en'
29 |
30 | export default ({ components, lang=DEFAULT_LANG, ...otherProps }) => {
31 | deprecationWarnings(otherProps);
32 | const translate = createTranslate(locales[lang].translation)
33 | return (this.refDiv = ref)}
60 | contentEditable="true"
61 | className={this.getClassName()}
62 | onPaste={this.onPaste}
63 | onBlur={this.onBlur}
64 | onInput={this.onTextChange}
65 | onKeyDown={this.onKeyDown}
66 | placeholder={placeholder}
67 | />
68 | )
69 | }
70 | }
71 |
72 | EditableLabel.propTypes = {
73 | onChange: PropTypes.func,
74 | placeholder: PropTypes.string,
75 | autoFocus: PropTypes.bool,
76 | inline: PropTypes.bool,
77 | value: PropTypes.string,
78 | }
79 |
80 | EditableLabel.defaultProps = {
81 | onChange: () => {},
82 | placeholder: '',
83 | autoFocus: false,
84 | inline: false,
85 | value: ''
86 | }
87 | export default EditableLabel
88 |
--------------------------------------------------------------------------------
/src/widgets/InlineInput.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import {InlineInput} from 'rt/styles/Base'
4 | import autosize from 'autosize'
5 |
6 | class InlineInputController extends React.Component {
7 | onFocus = (e) => e.target.select()
8 |
9 | // This is the way to select all text if mouse clicked
10 | onMouseDown = (e) => {
11 | if (document.activeElement != e.target) {
12 | e.preventDefault()
13 | this.refInput.focus()
14 | }
15 | }
16 |
17 | onBlur = () => {
18 | this.updateValue()
19 | }
20 |
21 | onKeyDown = (e) => {
22 | if(e.keyCode == 13) {
23 | this.refInput.blur()
24 | e.preventDefault()
25 | }
26 | if(e.keyCode == 27) {
27 | this.setValue(this.props.value)
28 | this.refInput.blur()
29 | e.preventDefault()
30 | }
31 | if(e.keyCode == 9) {
32 | if (this.getValue().length == 0) {
33 | this.props.onCancel()
34 | }
35 | this.refInput.blur()
36 | e.preventDefault()
37 | }
38 | }
39 |
40 | getValue = () => this.refInput.value
41 | setValue = (value) => this.refInput.value=value
42 |
43 | updateValue = () => {
44 | if (this.getValue() != this.props.value) {
45 | this.props.onSave(this.getValue())
46 | }
47 | }
48 |
49 | setRef = (ref) => {
50 | this.refInput = ref
51 | if (this.props.resize != 'none') {
52 | autosize(this.refInput)
53 | }
54 | }
55 |
56 | UNSAFE_componentWillReceiveProps(nextProps) {
57 | this.setValue(nextProps.value)
58 | }
59 |
60 | render() {
61 | const {autoFocus, border, value, placeholder} = this.props
62 |
63 | return
35 |
45 |
49 |
72 | )
73 | }
74 |
75 | const data = {
76 | lanes: [
77 | {
78 | id: 'lane1',
79 | title: 'Planned Tasks',
80 | label: '12/12',
81 | style: {backgroundColor: 'cyan', padding: 20},
82 | titleStyle: {fontSize: 20, marginBottom: 15},
83 | labelStyle: {color: '#009688', fontWeight: 'bold'},
84 | cards: [
85 | {
86 | id: 'Card1',
87 | name: 'John Smith',
88 | dueOn: 'due in a day',
89 | subTitle: 'SMS received at 12:13pm today',
90 | body: 'Thanks. Please schedule me for an estimate on Monday.',
91 | escalationText: 'Escalated to OPS-ESCALATIONS!',
92 | cardColor: '#BD3B36',
93 | cardStyle: {borderRadius: 6, boxShadow: '0 0 6px 1px #BD3B36', marginBottom: 15},
94 | metadata: {id: 'Card1'}
95 | },
96 | {
97 | id: 'Card2',
98 | name: 'Card Weathers',
99 | dueOn: 'due now',
100 | subTitle: 'Email received at 1:14pm',
101 | body: 'Is the estimate free, and can someone call me soon?',
102 | escalationText: 'Escalated to Admin',
103 | cardColor: '#E08521',
104 | cardStyle: {borderRadius: 6, boxShadow: '0 0 6px 1px #E08521', marginBottom: 15},
105 | metadata: {id: 'Card1'}
106 | }
107 | ]
108 | },
109 | {
110 | id: 'lane2',
111 | title: 'Long Lane name this is i suppose ha!',
112 | cards: [
113 | {
114 | id: 'Card3',
115 | name: 'Michael Caine',
116 | dueOn: 'due in a day',
117 | subTitle: 'Email received at 4:23pm today',
118 | body: 'You are welcome. Interested in doing business with you' + ' again',
119 | escalationText: 'Escalated to OPS-ESCALATIONS!',
120 | cardColor: '#BD3B36',
121 | cardStyle: {borderRadius: 6, boxShadow: '0 0 6px 1px #BD3B36', marginBottom: 15},
122 | metadata: {id: 'Card1'},
123 | tags: [{title: 'Critical', color: 'white', bgcolor: 'red'}, {title: '2d ETA', color: 'white', bgcolor: '#0079BF'}]
124 | }
125 | ]
126 | }
127 | ]
128 | }
129 |
130 | storiesOf('Custom Components', module).add(
131 | 'Card',
132 | () => {
133 | return (
134 | alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`)}
140 | />
141 | )
142 | },
143 | {info: 'Style your own card appearance. Watch out for usage of tags in custom styling as well!'}
144 | )
145 |
--------------------------------------------------------------------------------
/stories/CustomCardWithDrag.story.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import {storiesOf} from '@storybook/react'
3 | import update from 'immutability-helper'
4 |
5 | import {MovableCardWrapper } from 'rt/styles/Base'
6 | import debug from './helpers/debug'
7 |
8 | import Board from '../src'
9 |
10 | const CustomCard = props => {
11 | return (
12 |
19 |
28 |
30 |
37 | )
38 | }
39 |
40 | const customCardData = {
41 | lanes: [
42 | {
43 | id: 'lane1',
44 | title: 'Planned',
45 | cards: [
46 | {
47 | id: 'Card1',
48 | name: 'John Smith',
49 | subTitle: 'SMS received at 12:13pm today',
50 | body: 'Thanks. Please schedule me for an estimate on Monday.',
51 | metadata: {id: 'Card1'}
52 | },
53 | {
54 | id: 'Card2',
55 | name: 'Card Weathers',
56 | subTitle: 'Email received at 1:14pm',
57 | body: 'Is the estimate free, and can someone call me soon?',
58 | metadata: {id: 'Card1'}
59 | }
60 | ]
61 | },
62 | {
63 | id: 'lane2',
64 | title: 'Work In Progress',
65 | cards: [
66 | {
67 | id: 'Card3',
68 | name: 'Michael Caine',
69 | subTitle: 'Email received at 4:23pm today',
70 | body: 'You are welcome. Interested in doing business with you again',
71 | metadata: {id: 'Card1'}
72 | }
73 | ]
74 | }
75 | ]
76 | }
77 |
78 | class BoardWithCustomCard extends Component {
79 | state = {boardData: customCardData, draggedData: undefined}
80 |
81 | updateBoard = newData => {
82 | debug('calling updateBoard')
83 | this.setState({draggedData: newData})
84 | }
85 |
86 | onDragEnd = (cardId, sourceLandId, targetLaneId, card) => {
87 | debug('Calling onDragENd')
88 | const {draggedData} = this.state
89 | const laneIndex = draggedData.lanes.findIndex(lane => lane.id === sourceLandId)
90 | const cardIndex = draggedData.lanes[laneIndex].cards.findIndex(card => card.id === cardId)
91 | const updatedData = update(draggedData, {lanes: {[laneIndex]: {cards: {[cardIndex]: {cardColor: {$set: '#d0fdd2'}}}}}})
92 | this.setState({boardData: updatedData})
93 | }
94 |
95 | render() {
96 | return (
97 | alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`)}
104 | components={{Card: CustomCard}}
105 | />
106 | )
107 | }
108 | }
109 |
110 | storiesOf('Custom Components', module).add(
111 | 'Drag-n-Drop Styling',
112 | () => {
113 | return New Card}
114 | customLaneHeader={ ,
121 | {info: 'Example of usage legacy props: addCardLink, customCardLayout, customLaneHeader, newLaneTemplate, newCardTemplate'}
122 | )
123 |
--------------------------------------------------------------------------------
/stories/DragDrop.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 | import debug from './helpers/debug'
4 |
5 | import Board from '../src'
6 |
7 | const data = require('./data/base.json')
8 |
9 | storiesOf('Drag-n-Drop', module)
10 | .add(
11 | 'Basic',
12 | () => {
13 | const handleDragStart = (cardId, laneId) => {
14 | debug('drag started')
15 | debug(`cardId: ${cardId}`)
16 | debug(`laneId: ${laneId}`)
17 | }
18 |
19 | const handleDragEnd = (cardId, sourceLaneId, targetLaneId, position, card) => {
20 | debug('drag ended')
21 | debug(`cardId: ${cardId}`)
22 | debug(`sourceLaneId: ${sourceLaneId}`)
23 | debug(`targetLaneId: ${targetLaneId}`)
24 | debug(`newPosition: ${position}`)
25 | debug(`cardDetails:`)
26 | debug(card)
27 | }
28 |
29 | const handleLaneDragStart = laneId => {
30 | debug(`lane drag started for ${laneId}`)
31 | }
32 |
33 | const handleLaneDragEnd = (removedIndex, addedIndex, {id}) => {
34 | debug(`lane drag ended from position ${removedIndex} for laneId=${id}`)
35 | debug(`New lane position: ${addedIndex}`)
36 | }
37 |
38 | const shouldReceiveNewData = nextData => {
39 | debug('data has changed')
40 | debug(nextData)
41 | }
42 |
43 | const onCardMoveAcrossLanes = (fromLaneId, toLaneId, cardId, addedIndex) => {
44 | debug(`onCardMoveAcrossLanes: ${fromLaneId}, ${toLaneId}, ${cardId}, ${addedIndex}`)
45 | }
46 |
47 | return (
48 | alert(`Card with id:${cardId} clicked. Card in lane: ${laneId}`)}
41 | editable
42 | />
43 | )
44 | },
45 | {info: 'Add/delete cards or delete lanes'}
46 | )
47 | .add(
48 | 'Add New Lane',
49 | () => {
50 | return (
51 | debug('You added a line with title ' + t.title)}
56 | />
57 | )
58 | },
59 | {info: 'Allow adding new lane'}
60 | )
61 | .add(
62 | 'Disallow Adding Card for specific Lane',
63 | () => {
64 | return (
65 | debug(`onCardUpdate: ${cardId} -> ${JSON.stringify(data, null, 2)}`)}
83 | onLaneUpdate={ (laneId, data) => debug(`onLaneUpdate: ${laneId} -> ${data.title}`)}
84 | onLaneAdd={t => debug('You added a line with title ' + t.title)}
85 | />
86 | )
87 | },
88 | {info: 'Allow edit lane title and cards'}
89 | )
90 |
--------------------------------------------------------------------------------
/stories/I18n.story.js:
--------------------------------------------------------------------------------
1 | import React, {Component, Suspense} from 'react'
2 | import {storiesOf} from '@storybook/react'
3 | import { useTranslation, I18nextProvider } from 'react-i18next';
4 |
5 | import Board from '../src'
6 | import i18n from './helpers/i18n'
7 | import createTranslate from 'rt/helpers/createTranslate'
8 |
9 | const smallData = require('./data/data-sort')
10 |
11 | const I18nBoard = () => {
12 | const { t } = useTranslation()
13 | return (
14 | FLAT_TRANSLATION_TABLE[key]} editable canAddLanes draggable />
68 | },
69 | {info: 'Flat translation table'}
70 | )
71 |
72 | storiesOf('I18n', module)
73 | .addDecorator(story => {story()} )
74 | .add(
75 | 'Using i18next',
76 | () => alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}. Card in lane: ${laneId}`)}
31 | onLaneClick={laneId => alert(`Lane with id:${laneId} clicked`)}
32 | />
33 | ),
34 | {info: 'Adding event handlers to cards'}
35 | )
36 |
--------------------------------------------------------------------------------
/stories/MultipleBoards.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 |
4 | import Board from '../src'
5 |
6 | const data1 = require('./data/base.json')
7 | const data2 = require('./data/other-board')
8 |
9 | const containerStyles = {
10 | height: 500,
11 | padding: 20
12 | }
13 |
14 | storiesOf('Multiple Boards', module).add(
15 | 'Two Boards',
16 | () => {
17 | return (
18 | parseInt(card1.id) - parseInt(card2.id)} onLaneScroll={paginate} />
52 | },
53 | {
54 | info: `
55 | Infinite scroll with onLaneScroll function callback to fetch more items
56 |
57 | The callback function passed to onLaneScroll will be of the following form
58 | ~~~js
59 | function paginate(requestedPage, laneId) {
60 | return fetchCardsFromBackend(laneId, requestedPage);
61 | };
62 | ~~~
63 | `
64 | }
65 | )
66 |
--------------------------------------------------------------------------------
/stories/PaginationAndEvents.story.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import {storiesOf} from '@storybook/react'
3 |
4 | import Board from '../src'
5 |
6 | let eventBus
7 |
8 | const PER_PAGE = 15
9 |
10 | const addCard = () => {
11 | eventBus.publish({
12 | type: 'ADD_CARD',
13 | laneId: 'Lane1',
14 | card: {id: '000', title: 'EC2 Instance Down', label: '30 mins', description: 'Main EC2 instance down', metadata: {cardId: '000'}}
15 | })
16 | }
17 |
18 | function generateCards(requestedPage = 1) {
19 | const cards = []
20 | let fetchedItems = (requestedPage - 1) * PER_PAGE
21 | for (let i = fetchedItems + 1; i <= fetchedItems + PER_PAGE; i++) {
22 | cards.push({
23 | id: `${i}`,
24 | title: `Card${i}`,
25 | description: `Description for #${i}`,
26 | metadata: {cardId: `${i}`}
27 | })
28 | }
29 | return cards
30 | }
31 |
32 | class BoardWrapper extends Component {
33 | state = {data: this.props.data}
34 |
35 | setEventBus = handle => {
36 | eventBus = handle
37 | }
38 |
39 | delayedPromise = (durationInMs, resolutionPayload) => {
40 | return new Promise(function(resolve) {
41 | setTimeout(function() {
42 | resolve(resolutionPayload)
43 | }, durationInMs)
44 | })
45 | }
46 |
47 | refreshCards = () => {
48 | eventBus.publish({
49 | type: 'REFRESH_BOARD',
50 | data: {
51 | lanes: [
52 | {
53 | id: 'Lane1',
54 | title: 'Changed Lane',
55 | cards: []
56 | }
57 | ]
58 | }
59 | })
60 | }
61 |
62 | paginate = (requestedPage, laneId) => {
63 | let newCards = generateCards(requestedPage)
64 | return this.delayedPromise(2000, newCards)
65 | }
66 |
67 | render() {
68 | return (
69 | new Date(card1.metadata.completedAt) - new Date(card2.metadata.completedAt)} />,
12 | {info: 'A lane sorted by completed at ascending'}
13 | )
14 | .add(
15 | 'Reverse Sorted Lane',
16 | () => new Date(card2.metadata.completedAt) - new Date(card1.metadata.completedAt)} />,
17 | {info: 'A lane sorted by completed at descending'}
18 | )
19 |
--------------------------------------------------------------------------------
/stories/Styling.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 |
4 | import Board from '../src'
5 |
6 | import './board.css'
7 |
8 | const data = require('./data/base.json')
9 |
10 | storiesOf('Styling', module).add(
11 | 'Board Styling',
12 | () =>
{name}
46 | {dueOn}
47 | {showDeleteButton &&
50 |
71 | {subTitle}
51 |
52 | {body}
53 |
54 | {escalationText}
55 | {tags && (
56 |
65 | {tags.map(tag => (
66 |
69 | )}
70 | {props.name}
29 |
31 |
36 | {props.subTitle}
32 |
33 | {props.body}
34 |
35 | {collapsed ? 'click to expand' : 'click to collapse'}
9 |
10 | storiesOf('Custom Components', module).
11 | add('LaneFooter', () =>
12 |
21 |
30 |
32 | )
33 | }
34 |
35 | storiesOf('Custom Components', module).add(
36 | 'LaneHeader',
37 | () => {
38 | const data = {
39 | lanes: [
40 | {
41 | id: 'lane1',
42 | title: 'Planned Tasks',
43 | current: "70", // custom property
44 | target: "100", // custom property
45 | label: 'First Lane here',
46 | cards: [
47 | {
48 | id: 'Card1',
49 | title: 'John Smith',
50 | description: 'Thanks. Please schedule me for an estimate on Monday.'
51 | },
52 | {
53 | id: 'Card2',
54 | title: 'Card Weathers',
55 | description: 'Email received at 1:14pm'
56 | }
57 | ]
58 | },
59 | {
60 | id: 'lane2',
61 | title: 'Completed Tasks',
62 | label: 'Second Lane here',
63 | current: "30", // custom property
64 | target: "100", // custom property
65 | cards: [
66 | {
67 | id: 'Card3',
68 | title: 'Michael Caine',
69 | description: 'You are welcome. Interested in doing business with you' + ' again',
70 | tags: [{title: 'Critical', color: 'white', bgcolor: 'red'}, {title: '2d ETA', color: 'white', bgcolor: '#0079BF'}]
71 | }
72 | ]
73 | }
74 | ]
75 | }
76 |
77 | return {title}
22 | {label && (
23 |
24 |
27 |
28 | )}
29 | Percentage: {current || 0}/{target}
31 |
16 |
29 | )
30 | }
31 | }
32 |
33 | storiesOf('Custom Components', module)
34 | .add(
35 | 'NewCardForm',
36 | () =>
17 |
28 |
18 |
25 |
26 |
27 |
19 |
20 |
21 |
22 |
23 |
24 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 | }
22 |
23 | storiesOf('Custom Components', module)
24 | .add('NewLaneForm', () =>
16 |
25 |
34 |
35 | )
36 | }
37 |
38 | class NewCard extends Component {
39 | updateField = (field, evt) => {
40 | this.setState({[field]: evt.target.value})
41 | }
42 |
43 | handleAdd = () => {
44 | this.props.onAdd(this.state)
45 | }
46 |
47 | render() {
48 | const {onCancel} = this.props
49 | return (
50 | {props.title}
26 | {props.label && (
27 |
28 |
31 |
32 | )}
33 |
51 |
64 | )
65 | }
66 | }
67 | const CustomCard = props => {
68 | return (
69 |
52 |
63 |
53 |
60 |
61 |
62 |
54 | this.updateField('title', evt)} placeholder="Title" />
55 |
56 |
57 | this.updateField('description', evt)} placeholder="Description" />
58 |
59 |
70 |
80 |
83 |
106 | )
107 | }
108 | storiesOf('Deprecation warnings', module).add(
109 | 'v2.2 warnings',
110 | () => {props.name}
81 | {props.dueOn}
82 |
84 |
105 | {props.subTitle}
85 |
86 | {props.body}
87 |
88 | {props.escalationText}
89 | {props.tags && (
90 |
99 | {props.tags.map(tag => (
100 |
103 | )}
104 | new lane
}
116 | newCardTemplate={
15 |
21 | )
22 | }
23 |
24 | storiesOf('I18n', module)
25 | .add(
26 | 'Custom texts',
27 | () => {
28 |
29 | const TEXTS = {
30 | "Add another lane": "NEW LANE",
31 | "Click to add card": "Click to add card",
32 | "Delete lane": "Delete lane",
33 | "Lane actions": "Lane actions",
34 | "button": {
35 | "Add lane": "Add lane",
36 | "Add card": "Add card",
37 | "Cancel": "Cancel"
38 | },
39 | "placeholder": {
40 | "title": "title",
41 | "description": "description",
42 | "label": "label"
43 | }
44 | }
45 |
46 | const customTranslation = createTranslate(TEXTS)
47 | return
16 |
17 |
18 |
19 |
19 |
26 | )
27 | },
28 | {info: 'Have two boards rendering their own data'}
29 | )
30 |
--------------------------------------------------------------------------------
/stories/Pagination.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 |
4 | import Board from '../src'
5 |
6 | storiesOf('Basic Functions', module).add(
7 | 'Infinite Scrolling',
8 | () => {
9 | const PER_PAGE = 15
10 |
11 | function delayedPromise(durationInMs, resolutionPayload) {
12 | return new Promise(function(resolve) {
13 | setTimeout(function() {
14 | resolve(resolutionPayload)
15 | }, durationInMs)
16 | })
17 | }
18 |
19 | function generateCards(requestedPage = 1) {
20 | const cards = []
21 | let fetchedItems = (requestedPage - 1) * PER_PAGE
22 | for (let i = fetchedItems + 1; i <= fetchedItems + PER_PAGE; i++) {
23 | cards.push({
24 | id: `${i}`,
25 | title: `Card${i}`,
26 | description: `Description for #${i}`
27 | })
28 | }
29 | return cards
30 | }
31 |
32 | function paginate(requestedPage, laneId) {
33 | // simulate no more cards after page 2
34 | if (requestedPage > 2) {
35 | return delayedPromise(2000, [])
36 | }
37 | let newCards = generateCards(requestedPage)
38 | return delayedPromise(2000, newCards)
39 | }
40 |
41 | const data = {
42 | lanes: [
43 | {
44 | id: 'Lane1',
45 | title: 'Lane1',
46 | cards: generateCards()
47 | }
48 | ]
49 | }
50 |
51 | return
20 |
22 |
23 |
25 |
70 |
73 |
76 | parseInt(card1.id) - parseInt(card2.id)}
80 | onLaneScroll={this.paginate}
81 | />
82 |
83 | )
84 | }
85 | }
86 |
87 | storiesOf('Advanced Features', module).add(
88 | 'Scrolling and Events',
89 | () => {
90 | const data = {
91 | lanes: [
92 | {
93 | id: 'Lane1',
94 | title: 'Lane1',
95 | cards: generateCards()
96 | }
97 | ]
98 | }
99 |
100 | return
72 |
75 |
78 |
81 |
84 |
87 |
90 |
92 | )
93 | }
94 | }
95 |
96 | storiesOf('Advanced Features', module).add('Realtime Events', () =>