Skip to content

Commit fb3cce5

Browse files
rcdextarcdexta
committed
feat: Refine drag-n-drop feature performance by adding finite width and height to cards within a lan
#63
1 parent 4634818 commit fb3cce5

7 files changed

Lines changed: 32 additions & 76 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@
8383
"mocha": "^3.4.2",
8484
"node-sass": "^4.5.3",
8585
"prettier": "1.10.2",
86-
"react": "^16.0.0",
86+
"react": "^16.2.0",
8787
"react-addons-test-utils": "^15.5.1",
88-
"react-dom": "^16.0.0",
88+
"react-dom": "^16.2.0",
8989
"react-test-renderer": "^15.4.2",
9090
"rimraf": "^2.6.1",
9191
"sass-loader": "^6.0.6",

‎src/components/Card.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react'
1+
import React, {Component, Fragment} from 'react'
22
import PropTypes from 'prop-types'
33
import {CardHeader, CardRightContent, CardTitle, Detail, Footer, MovableCardWrapper} from '../styles/Base'
44
import Tag from './Tag'
@@ -34,36 +34,37 @@ class Card extends Component {
3434

3535
getItemStyle = (isDragging, draggableStyle) => ({
3636
backgroundColor: isDragging ? '#fbfbbc' : '#fff',
37-
...draggableStyle
37+
...draggableStyle,
38+
margin: '0px 0px 5px 0px',
3839
})
3940

4041
render() {
4142
const {id, index, cardStyle, draggable, editable, customCardLayout, ...otherProps} = this.props
4243
const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
4344
const isDragDisabled = !draggable
4445
return (
45-
<Draggable key={id} draggableId={id} index={index} isDragDisabled={isDragDisabled}>
46+
<Draggable key={id} draggableId={id} type="card" index={index} isDragDisabled={isDragDisabled} disableInteractiveElementBlocking={true}>
4647
{(dragProvided, dragSnapshot) => {
4748
const draggablePropsStyle = dragProvided.draggableProps && dragProvided.draggableProps.style
4849
const dragStyle = this.getItemStyle(dragSnapshot.isDragging, draggablePropsStyle)
4950
return (
50-
<div>
51+
<Fragment>
5152
<MovableCardWrapper
5253
key={id}
5354
data-id={id}
5455
innerRef={dragProvided.innerRef}
5556
{...dragProvided.draggableProps}
5657
{...dragProvided.dragHandleProps}
5758
style={{
59+
...dragStyle,
5860
...style,
59-
...dragStyle
6061
}}
6162
{...otherProps}>
6263
{this.renderBody()}
6364
{editable && <DeleteButton onClick={this.removeCard} />}
6465
</MovableCardWrapper>
6566
{dragProvided.placeholder}
66-
</div>
67+
</Fragment>
6768
)
6869
}}
6970
</Draggable>

‎src/components/Lane.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ class Lane extends Component {
201201
const {id, onLaneClick, index, droppable, ...otherProps} = this.props
202202
const isDropDisabled = !droppable
203203
return (
204-
<Droppable droppableId={id} type="card" index={index} isDropDisabled={isDropDisabled}>
204+
<Droppable droppableId={id} type="card" index={index} isDropDisabled={isDropDisabled} ignoreContainerClipping={false}>
205205
{(dropProvided, dropSnapshot) => {
206206
const isDraggingOver = dropSnapshot.isDraggingOver
207207
return (

‎src/styles/Base.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,12 @@ export const ScrollableLane = styled.div`
5555
overflow-y: auto;
5656
min-width: 250px;
5757
overflow-x: hidden;
58-
display: inline-flex;
58+
align-self: center;
5959
height: 100%;
6060
padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
6161
margin-top: 10px;
62+
flex-direction: column;
63+
justify-content: space-between;
6264
`
6365

6466
export const Title = styled.span`
@@ -79,14 +81,13 @@ export const RightContent = styled.span`
7981

8082
export const CardWrapper = styled.article`
8183
border-radius: 3px;
82-
margin: 10px 0;
8384
border-bottom: 1px solid #ccc;
8485
background-color: #fff;
8586
position: relative;
8687
padding: 10px;
8788
cursor: pointer;
88-
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
8989
max-width: 250px;
90+
margin-bottom: 5px;
9091
min-width: 230px;
9192
`
9293

‎src/styles/Elements.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {CardWrapper} from './Base'
44
export const DeleteWrapper = styled.div`
55
text-align: center;
66
position: absolute;
7-
top: -8px;
7+
top: -6px;
88
right: -1px;
99
`
1010

‎stories/data/base.json‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,24 @@
1010
"id": "Milk",
1111
"title": "Buy milk",
1212
"label": "15 mins",
13-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
1413
"description": "2 Gallons of milk at the Deli store"
1514
},
1615
{
1716
"id": "Plan2",
1817
"title": "Dispose Garbage",
1918
"label": "10 mins",
20-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
2119
"description": "Sort out recyclable and waste as needed"
2220
},
2321
{
2422
"id": "Plan3",
2523
"title": "Write Blog",
2624
"label": "30 mins",
27-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
2825
"description": "Can AI make memes?"
2926
},
3027
{
3128
"id": "Plan4",
3229
"title": "Pay Rent",
3330
"label": "5 mins",
34-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
3531
"description": "Transfer to bank account"
3632
}
3733
]
@@ -46,7 +42,6 @@
4642
"id": "Wip1",
4743
"title": "Clean House",
4844
"label": "30 mins",
49-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
5045
"description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
5146
}
5247
]
@@ -68,14 +63,12 @@
6863
"id": "Completed1",
6964
"title": "Practice Meditation",
7065
"label": "15 mins",
71-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
7266
"description": "Use Headspace app"
7367
},
7468
{
7569
"id": "Completed2",
7670
"title": "Maintain Daily Journal",
7771
"label": "15 mins",
78-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
7972
"description": "Use Spreadsheet for now"
8073
}
8174
]
@@ -90,7 +83,6 @@
9083
"id": "Repeat1",
9184
"title": "Morning Jog",
9285
"label": "30 mins",
93-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
9486
"description": "Track using fitbit"
9587
}
9688
]
@@ -105,7 +97,6 @@
10597
"id": "Archived1",
10698
"title": "Go Trekking",
10799
"label": "300 mins",
108-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
109100
"description": "Completed 10km on cycle"
110101
}
111102
]
@@ -117,10 +108,9 @@
117108
"label": "1/1",
118109
"cards": [
119110
{
120-
"id": "Archived1",
121-
"title": "Go Trekking",
111+
"id": "Archived2",
112+
"title": "Go Jogging",
122113
"label": "300 mins",
123-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
124114
"description": "Completed 10km on cycle"
125115
}
126116
]
@@ -132,10 +122,9 @@
132122
"label": "1/1",
133123
"cards": [
134124
{
135-
"id": "Archived1",
136-
"title": "Go Trekking",
125+
"id": "Archived3",
126+
"title": "Go Cycling",
137127
"label": "300 mins",
138-
"cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
139128
"description": "Completed 10km on cycle"
140129
}
141130
]

‎yarn.lock‎

Lines changed: 13 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -346,24 +346,11 @@ airbnb-js-shims@^1.3.0:
346346
string.prototype.padend "^3.0.0"
347347
string.prototype.padstart "^3.0.0"
348348

349-
ajv-keywords@^2.0.0:
349+
ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
350350
version "2.1.0"
351351
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
352352

353-
ajv-keywords@^2.1.0:
354-
version "2.1.1"
355-
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
356-
357-
ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5:
358-
version "5.2.2"
359-
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
360-
dependencies:
361-
co "^4.6.0"
362-
fast-deep-equal "^1.0.0"
363-
json-schema-traverse "^0.3.0"
364-
json-stable-stringify "^1.0.1"
365-
366-
ajv@^5.2.3, ajv@^5.3.0:
353+
ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0:
367354
version "5.5.2"
368355
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
369356
dependencies:
@@ -2208,15 +2195,7 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
22082195
strip-ansi "^3.0.0"
22092196
supports-color "^2.0.0"
22102197

2211-
chalk@^2.0.0:
2212-
version "2.3.0"
2213-
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
2214-
dependencies:
2215-
ansi-styles "^3.1.0"
2216-
escape-string-regexp "^1.0.5"
2217-
supports-color "^4.0.0"
2218-
2219-
chalk@^2.0.1, chalk@^2.1.0:
2198+
chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
22202199
version "2.1.0"
22212200
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
22222201
dependencies:
@@ -2866,13 +2845,13 @@ dateformat@^1.0.11:
28662845
get-stdin "^4.0.1"
28672846
meow "^3.3.0"
28682847

2869-
debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.6.3:
2848+
debug@2, debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.6.3:
28702849
version "2.6.9"
28712850
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
28722851
dependencies:
28732852
ms "2.0.0"
28742853

2875-
debug@2.6.8, debug@^2.1.1, debug@^2.6.8:
2854+
debug@2.6.8, debug@^2.6.8:
28762855
version "2.6.8"
28772856
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
28782857
dependencies:
@@ -3046,14 +3025,7 @@ doctrine@1.5.0:
30463025
esutils "^2.0.2"
30473026
isarray "^1.0.0"
30483027

3049-
doctrine@^2.0.0:
3050-
version "2.0.0"
3051-
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
3052-
dependencies:
3053-
esutils "^2.0.2"
3054-
isarray "^1.0.0"
3055-
3056-
doctrine@^2.0.2:
3028+
doctrine@^2.0.0, doctrine@^2.0.2:
30573029
version "2.1.0"
30583030
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
30593031
dependencies:
@@ -5259,14 +5231,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
52595231
version "3.0.2"
52605232
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
52615233

5262-
js-yaml@3.x, js-yaml@^3.4.3, js-yaml@^3.7.0:
5263-
version "3.9.1"
5264-
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.9.1.tgz#08775cebdfdd359209f0d2acd383c8f86a6904a0"
5265-
dependencies:
5266-
argparse "^1.0.7"
5267-
esprima "^4.0.0"
5268-
5269-
js-yaml@^3.9.1:
5234+
js-yaml@3.x, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
52705235
version "3.10.0"
52715236
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
52725237
dependencies:
@@ -7185,9 +7150,9 @@ react-docgen@^2.15.0:
71857150
node-dir "^0.1.10"
71867151
recast "^0.12.6"
71877152

7188-
react-dom@^16.0.0:
7189-
version "16.0.0"
7190-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
7153+
react-dom@^16.2.0:
7154+
version "16.2.0"
7155+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
71917156
dependencies:
71927157
fbjs "^0.8.16"
71937158
loose-envify "^1.1.0"
@@ -7331,9 +7296,9 @@ react-treebeard@^2.0.3:
73317296
shallowequal "^0.2.2"
73327297
velocity-react "^1.3.1"
73337298

7334-
react@^16.0.0:
7335-
version "16.0.0"
7336-
resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
7299+
react@^16.2.0:
7300+
version "16.2.0"
7301+
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
73377302
dependencies:
73387303
fbjs "^0.8.16"
73397304
loose-envify "^1.1.0"

0 commit comments

Comments
 (0)