Skip to content

Commit

Permalink
feat: Enable drag-n-drop to work for lanes and cards. Rewrite dnd lib…
Browse files Browse the repository at this point in the history 
…rary

#30
  • Loading branch information
@rcdexta
rcdexta committed May 5, 2018
1 parent 953c9ac commit d47791f
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 73 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@
"immutability-helper": "^2.4.0",
"lodash": "^4.17.4",
"prop-types": "^15.6.0",
"react-beautiful-dnd": "^7.1.0",
"react-redux": "^5.0.3",
"react-smooth-dnd": "^0.3.6",
"redux": "^3.6.0",
Expand Down
28 changes: 14 additions & 14 deletions src/components/BoardContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,12 @@ class BoardContainer extends Component {
handleLaneDragEnd(payload.id, addedIndex)
}

getLaneDetails = (index) => {
getLaneDetails = index => {
return this.props.reducerData.lanes[index]
}

render() {
const {reducerData, style, ...otherProps} = this.props
const {reducerData, draggable, style, ...otherProps} = this.props
// Stick to whitelisting attributes to segregate board and lane props
const passthroughProps = pick(this.props, [
'onLaneScroll',
Expand Down Expand Up @@ -105,23 +105,23 @@ class BoardContainer extends Component {
orientation="horizontal"
onDragStart={this.onDragStart}
onDrop={this.onLaneDrop}
lockAxis={'x'}
getChildPayload={index => this.getLaneDetails(index)}
groupName="TrelloBoard">
{reducerData.lanes.map((lane, index) => {
const {id, droppable, ...otherProps} = lane
return (
<Draggable key={lane.id}>
<Lane
key={id}
id={id}
getCardDetails={this.getCardDetails}
index={index}
droppable={droppable === undefined ? true : droppable}
{...otherProps}
{...passthroughProps}
/>
</Draggable>
const laneToRender = (
<Lane
key={id}
id={id}
getCardDetails={this.getCardDetails}
index={index}
droppable={droppable === undefined ? true : droppable}
{...otherProps}
{...passthroughProps}
/>
)
return draggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : <span>{laneToRender}</span>
})}
</Container>
</BoardDiv>
Expand Down
9 changes: 6 additions & 3 deletions src/components/Lane.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ class Lane extends Component {
loading: false,
currentPage: this.props.currentPage,
addCardMode: false,
collapsed: false
collapsed: false,
isDraggingOver: false
}

handleScroll = evt => {
Expand Down Expand Up @@ -183,6 +184,8 @@ class Lane extends Component {
groupName="TrelloLane"
onDragStart={this.onDragStart}
onDrop={e => this.onDragEnd(id, e)}
onDragEnter={() => this.setState({isDraggingOver: true})}
onDragLeave={() => this.setState({isDraggingOver: false})}
shouldAcceptDrop={() => droppable}
getChildPayload={index => this.props.getCardDetails(id, index)}>
{cardList}
Expand Down Expand Up @@ -226,12 +229,12 @@ class Lane extends Component {
}

render() {
const {loading} = this.state
const {loading, isDraggingOver} = this.state
const {id, onLaneClick, ...otherProps} = this.props
return (
<Section {...otherProps} key={id} onClick={() => onLaneClick && onLaneClick(id)} draggable={false}>
{this.renderHeader()}
{this.renderDragContainer(false)}
{this.renderDragContainer(isDraggingOver)}
{loading && <Loader />}
{this.renderFooter()}
</Section>
Expand Down
2 changes: 1 addition & 1 deletion src/styles/Base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const ScrollableLane = styled.div`
min-width: 250px;
overflow-x: hidden;
align-self: center;
height: 100%;
max-height: 90vh;
padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
margin-top: 10px;
flex-direction: column;
Expand Down
55 changes: 1 addition & 54 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5746,10 +5746,6 @@ mem@^1.1.0:
dependencies:
mimic-fn "^1.0.0"

memoize-one@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"

memory-fs@^0.4.0, memory-fs@~0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
Expand Down Expand Up @@ -6540,10 +6536,6 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"

performance-now@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"

performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
Expand Down Expand Up @@ -7047,16 +7039,6 @@ radium@^0.19.0:
inline-style-prefixer "^2.0.5"
prop-types "^15.5.8"

raf-schd@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-2.1.1.tgz#0b59964cee2e96b7dd46ffaeb5c08740f3a5e7ab"

raf@^3.1.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
dependencies:
performance-now "^2.1.0"

randomatic@^1.1.3:
version "1.1.7"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
Expand Down Expand Up @@ -7104,21 +7086,6 @@ react-addons-test-utils@^15.5.1:
version "15.6.0"
resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.0.tgz#062d36117fe8d18f3ba5e06eb33383b0b85ea5b9"

react-beautiful-dnd@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-7.1.0.tgz#f78b4b47c557fba7ca3c4ae399c3b9621c92dc50"
dependencies:
babel-runtime "^6.26.0"
memoize-one "^3.1.1"
prop-types "^15.6.0"
raf-schd "^2.1.1"
react-motion "^0.5.2"
react-redux "^5.0.6"
redux "^3.7.2"
redux-thunk "^2.2.0"
reselect "^3.0.1"
tiny-invariant "^0.0.3"

react-docgen@^2.15.0:
version "2.17.0"
resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.17.0.tgz#b0f3e85af955714e1067593c1043cb82611a93d1"
Expand Down Expand Up @@ -7203,15 +7170,7 @@ react-modal@^2.3.2:
exenv "^1.2.0"
prop-types "^15.5.10"

react-motion@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
dependencies:
performance-now "^0.2.0"
prop-types "^15.5.8"
raf "^3.1.0"

react-redux@^5.0.3, react-redux@^5.0.6:
react-redux@^5.0.3:
version "5.0.6"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946"
dependencies:
Expand Down Expand Up @@ -7444,10 +7403,6 @@ redux-logger@^3.0.6:
dependencies:
deep-diff "^0.3.5"

redux-thunk@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"

redux@^3.6.0, redux@^3.7.2:
version "3.7.2"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
Expand Down Expand Up @@ -7688,10 +7643,6 @@ require-uncached@^1.0.3:
caller-path "^0.1.0"
resolve-from "^1.0.0"

reselect@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"

resolve-dir@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-0.1.1.tgz#b219259a5602fac5c5c496ad894a6e8cc430261e"
Expand Down Expand Up @@ -8503,10 +8454,6 @@ timers-browserify@^2.0.2:
dependencies:
setimmediate "^1.0.4"

tiny-invariant@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-0.0.3.tgz#4c7283c950e290889e9e94f64d3586ec9156cf44"

tmp@^0.0.29:
version "0.0.29"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.29.tgz#f25125ff0dd9da3ccb0c2dd371ee1288bb9128c0"
Expand Down

0 comments on commit d47791f

Please sign in to comment.