Skip to content

Commit fa2690d

Browse files
rcdextarcdexta
committed
feat: Allow lane and card dragging to be styled. Applied default styling too
Provide css classes to be passed as arguments through laneDragClass and cardDragClass to modify appearance when dragging #100
1 parent d20387d commit fa2690d

7 files changed

Lines changed: 100 additions & 50 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ This is the container component that encapsulates the lanes and cards
9393
| handleDragEnd | function | Callback function triggered when card drag ends: `handleDragEnd(cardId, sourceLaneId, targetLaneId, position)` |
9494
| handleLaneDragStart | function | Callback function triggered when lane drag is started: `handleLaneDragStart(laneId)` |
9595
| handleLaneDragEnd | function | Callback function triggered when lane drag ends: `handleLaneDragEnd(laneId, newPosition)` |
96+
| cardDragClass | string | CSS class to be applied to Card when being dragged |
97+
| laneDragClass | string | CSS class to be applied to Lane when being dragged |
9698
| onLaneScroll | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)` |
9799
| onCardClick | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId)` |
98100
| onCardAdd | function | Called when a new card is added: `onCardAdd(card, laneId)` |

‎src/components/BoardContainer.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ class BoardContainer extends Component {
7878
}
7979

8080
render() {
81-
const {reducerData, draggable, laneDraggable, style, ...otherProps} = this.props
81+
const {reducerData, draggable, laneDraggable, laneDragClass, style, ...otherProps} = this.props
8282
// Stick to whitelisting attributes to segregate board and lane props
8383
const passthroughProps = pick(this.props, [
8484
'onLaneScroll',
@@ -99,6 +99,7 @@ class BoardContainer extends Component {
9999
'tagStyle',
100100
'handleDragStart',
101101
'handleDragEnd',
102+
'cardDragClass',
102103
'children'
103104
])
104105

@@ -107,6 +108,7 @@ class BoardContainer extends Component {
107108
<Container
108109
orientation="horizontal"
109110
onDragStart={this.onDragStart}
111+
dragClass={laneDragClass}
110112
onDrop={this.onLaneDrop}
111113
lockAxis={'x'}
112114
getChildPayload={index => this.getLaneDetails(index)}
@@ -163,7 +165,9 @@ BoardContainer.propTypes = {
163165
style: PropTypes.object,
164166
tagStyle: PropTypes.object,
165167
laneDraggable: PropTypes.bool,
166-
cardDraggable: PropTypes.bool
168+
cardDraggable: PropTypes.bool,
169+
cardDragClass: PropTypes.string,
170+
laneDragClass: PropTypes.string
167171
}
168172

169173
BoardContainer.defaultProps = {
@@ -177,7 +181,9 @@ BoardContainer.defaultProps = {
177181
draggable: false,
178182
collapsibleLanes: false,
179183
laneDraggable: true,
180-
cardDraggable: true
184+
cardDraggable: true,
185+
cardDragClass: 'react_trello_dragClass',
186+
laneDragClass: 'react_trello_dragLaneClass'
181187
}
182188

183189
const mapStateToProps = state => {

‎src/components/Card.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,15 @@ class Card extends Component {
3232
}
3333

3434
render() {
35-
const {id, cardStyle, editable, hideCardDeleteIcon, customCardLayout, ...otherProps} = this.props
35+
const {id, cardStyle, editable, hideCardDeleteIcon, customCardLayout, dragStyle, ...otherProps} = this.props
3636
const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
3737
return (
3838
<MovableCardWrapper
3939
key={id}
4040
data-id={id}
4141
style={{
42-
...style
42+
...style,
43+
...dragStyle
4344
}}
4445
{...otherProps}>
4546
{this.renderBody()}
@@ -53,7 +54,8 @@ Card.defaultProps = {
5354
cardStyle: {},
5455
customCardLayout: false,
5556
onDelete: () => {},
56-
editable: false
57+
editable: false,
58+
dragStyle: {}
5759
}
5860

5961
Card.propTypes = {
@@ -69,6 +71,7 @@ Card.propTypes = {
6971
onDelete: PropTypes.func,
7072
metadata: PropTypes.object,
7173
cardStyle: PropTypes.object,
74+
dragStyle: PropTypes.object,
7275
tagStyle: PropTypes.object,
7376
customCardLayout: PropTypes.bool,
7477
customCard: PropTypes.node,

‎src/components/Lane.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ class Lane extends Component {
124124
handleDragStart && handleDragStart(payload.id, payload.laneId)
125125
}
126126

127-
shouldAcceptDrop = (sourceContainerOptions) => {
127+
shouldAcceptDrop = sourceContainerOptions => {
128128
return this.props.droppable && sourceContainerOptions.groupName === 'TrelloLane'
129129
}
130130

@@ -152,6 +152,7 @@ class Lane extends Component {
152152
draggable,
153153
cardDraggable,
154154
cards,
155+
cardDragClass,
155156
id
156157
} = this.props
157158
const {addCardMode, collapsed} = this.state
@@ -175,14 +176,19 @@ class Lane extends Component {
175176
{...card}
176177
/>
177178
)
178-
return draggable && cardDraggable ? <Draggable key={card.id}>{cardToRender}</Draggable> : <span key={card.id}>{cardToRender}</span>
179+
return draggable && cardDraggable ? (
180+
<Draggable key={card.id}>{cardToRender}</Draggable>
181+
) : (
182+
<span key={card.id}>{cardToRender}</span>
183+
)
179184
})
180185

181186
return (
182187
<ScrollableLane innerRef={this.laneDidMount} isDraggingOver={isDraggingOver}>
183188
<Container
184189
orientation="vertical"
185190
groupName="TrelloLane"
191+
dragClass={cardDragClass}
186192
onDragStart={this.onDragStart}
187193
onDrop={e => this.onDragEnd(id, e)}
188194
onDragEnter={() => this.setState({isDraggingOver: true})}
@@ -271,7 +277,8 @@ Lane.propTypes = {
271277
newCardTemplate: PropTypes.node,
272278
addCardLink: PropTypes.node,
273279
editable: PropTypes.bool,
274-
cardDraggable: PropTypes.bool
280+
cardDraggable: PropTypes.bool,
281+
cardDragClass: PropTypes.string
275282
}
276283

277284
Lane.defaultProps = {

‎src/styles/Base.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ injectGlobal`
1111
color: inherit;
1212
cursor: text;
1313
}
14+
15+
.react_trello_dragClass {
16+
transform: rotate(3deg);
17+
}
18+
19+
.react_trello_dragLaneClass {
20+
transform: rotate(3deg);
21+
}
1422
`
1523

1624
export const BoardDiv = styled.div`

‎stories/DragDrop.story.js‎

Lines changed: 54 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,65 @@
11
import React from 'react'
22
import {withInfo} from '@storybook/addon-info'
33
import {storiesOf} from '@storybook/react'
4+
import './drag.css'
45

56
import Board from '../src'
67

78
const data = require('./data/base.json')
89

9-
storiesOf('Drag-n-Drop', module).add(
10-
'Basic',
11-
withInfo('A demonstration of onDragStart and onDragEnd hooks for card and lanes')(() => {
12-
const handleDragStart = (cardId, laneId) => {
13-
console.log('drag started')
14-
console.log(`cardId: ${cardId}`)
15-
console.log(`laneId: ${laneId}`)
16-
}
17-
18-
const handleDragEnd = (cardId, sourceLaneId, targetLaneId, position) => {
19-
console.log('drag ended')
20-
console.log(`cardId: ${cardId}`)
21-
console.log(`sourceLaneId: ${sourceLaneId}`)
22-
console.log(`targetLaneId: ${targetLaneId}`)
23-
console.log(`newPosition: ${position}`)
24-
}
25-
26-
const handleLaneDragStart = (laneId) => {
27-
console.log(`lane drag started for ${laneId}`)
28-
}
29-
30-
const handleLaneDragEnd = (laneId, newPosition) => {
31-
console.log(`lane drag ended for ${laneId}`)
32-
console.log(`New lane position: ${newPosition}`)
33-
}
34-
35-
const shouldReceiveNewData = nextData => {
36-
console.log('data has changed')
37-
console.log(nextData)
38-
}
39-
40-
return (
41-
<Board
10+
storiesOf('Drag-n-Drop', module)
11+
.add(
12+
'Basic',
13+
withInfo('A demonstration of onDragStart and onDragEnd hooks for card and lanes')(() => {
14+
const handleDragStart = (cardId, laneId) => {
15+
console.log('drag started')
16+
console.log(`cardId: ${cardId}`)
17+
console.log(`laneId: ${laneId}`)
18+
}
19+
20+
const handleDragEnd = (cardId, sourceLaneId, targetLaneId, position) => {
21+
console.log('drag ended')
22+
console.log(`cardId: ${cardId}`)
23+
console.log(`sourceLaneId: ${sourceLaneId}`)
24+
console.log(`targetLaneId: ${targetLaneId}`)
25+
console.log(`newPosition: ${position}`)
26+
}
27+
28+
const handleLaneDragStart = laneId => {
29+
console.log(`lane drag started for ${laneId}`)
30+
}
31+
32+
const handleLaneDragEnd = (laneId, newPosition) => {
33+
console.log(`lane drag ended for ${laneId}`)
34+
console.log(`New lane position: ${newPosition}`)
35+
}
36+
37+
const shouldReceiveNewData = nextData => {
38+
console.log('data has changed')
39+
console.log(nextData)
40+
}
41+
42+
return (
43+
<Board
44+
data={data}
45+
draggable
46+
onDataChange={shouldReceiveNewData}
47+
handleDragStart={handleDragStart}
48+
handleDragEnd={handleDragEnd}
49+
handleLaneDragStart={handleLaneDragStart}
50+
handleLaneDragEnd={handleLaneDragEnd}
51+
/>
52+
)
53+
})
54+
)
55+
.add(
56+
'Drag Styling',
57+
withInfo('Modifying appearance of dragged card')(() => {
58+
return <Board
4259
data={data}
60+
cardDragClass='draggingCard'
61+
laneDragClass='draggingLane'
4362
draggable
44-
onDataChange={shouldReceiveNewData}
45-
handleDragStart={handleDragStart}
46-
handleDragEnd={handleDragEnd}
47-
handleLaneDragStart={handleLaneDragStart}
48-
handleLaneDragEnd={handleLaneDragEnd}
4963
/>
50-
)
51-
})
52-
)
64+
})
65+
)

‎stories/drag.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.draggingCard {
2+
background-color: #7fffd4;
3+
border: 1px dashed #a5916c;
4+
transform: rotate(2deg);
5+
}
6+
7+
.draggingLane {
8+
background-color: #ffaecf;
9+
transform: rotate(2deg);
10+
border: 1px dashed #a5916c;
11+
}

0 commit comments

Comments
 (0)