From 94142fec347072b27c3780401eea78df3fe40504 Mon Sep 17 00:00:00 2001 From: ihfazhillah Date: Tue, 5 Sep 2017 13:53:13 +0700 Subject: [PATCH 1/4] add childrenClassName as props --- package.json | 2 ++ src/Container.jsx | 4 +++- src/Nestable.jsx | 10 +++++++--- webpack.config.js | 6 ++++-- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index f848b43..f9cd91e 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-1": "^6.5.0", + "css-loader": "^0.28.7", "enzyme": "^2.2.0", "eslint": "^2.9.0", "eslint-friendly-formatter": "^2.0.2", @@ -43,6 +44,7 @@ "react-dom": "^15.0.2", "react-hot-loader": "^3.0.0-beta.2", "react-transform-catch-errors": "^1.0.2", + "style-loader": "^0.18.2", "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1" }, diff --git a/src/Container.jsx b/src/Container.jsx index 129e98f..bb0b99f 100644 --- a/src/Container.jsx +++ b/src/Container.jsx @@ -27,13 +27,14 @@ class Container extends Component { const { items, parentPosition, + childrenClassName, childrenProperty, childrenStyle, topLevel } = this.props; return ( -
    +
      { items.map((item, i) => { const position = parentPosition.concat([i]); const children = item[childrenProperty]; @@ -54,6 +55,7 @@ class Container extends Component { parentPosition={ position } childrenProperty={ childrenProperty } childrenStyle={ childrenStyle } + childrenClassName={childrenClassName} /> : null } diff --git a/src/Nestable.jsx b/src/Nestable.jsx index c15b735..2ba9261 100644 --- a/src/Nestable.jsx +++ b/src/Nestable.jsx @@ -60,7 +60,8 @@ class Nestable extends Component { renderItem: () => { throw new Error('Nestable: You must supply a renderItem prop.'); }, useDragHandle: false, maxDepth: Infinity, - threshold: 30 + threshold: 30, + childrenClassName: '' }; static childContextTypes = { @@ -69,7 +70,8 @@ class Nestable extends Component { threshold: PropTypes.number.isRequired, renderItem: PropTypes.func.isRequired, moveItem: PropTypes.func.isRequired, - dropItem: PropTypes.func.isRequired + dropItem: PropTypes.func.isRequired, + childrenClassName: PropTypes.string }; state = { @@ -139,7 +141,7 @@ class Nestable extends Component { render() { const { items } = this.state; - const { renderItem, childrenProperty, childrenStyle } = this.props; + const { renderItem, childrenProperty, childrenStyle, childrenClassName } = this.props; return (
      @@ -148,12 +150,14 @@ class Nestable extends Component { parentPosition={ [] } childrenProperty={ childrenProperty } childrenStyle={ childrenStyle } + childrenClassName={ childrenClassName } topLevel={ true } />
      ); diff --git a/webpack.config.js b/webpack.config.js index 0ca13a4..01d5602 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,7 +18,8 @@ var plugins = [ var entry = { 'demo0-flat-list': './demos/demo0-flat-list/index.jsx', 'demo1-nested-list': './demos/demo1-nested-list/index.jsx', - 'demo2-drag-handles': './demos/demo2-drag-handles/index.jsx' + 'demo2-drag-handles': './demos/demo2-drag-handles/index.jsx', + 'demo3-childrenClassName': './demos/demo3-childrenClassName/index.jsx' }; if (process.env.NODE_ENV === 'development') { @@ -56,7 +57,8 @@ module.exports = { test: /\.jsx?$/, exclude: /build|node_modules/, loaders: ['babel'] - } + }, + { test: /\.css$/, loader: "style-loader!css-loader" } ] }, resolve: { From 59276e852abf9e751115c53c05cdb85736140f4b Mon Sep 17 00:00:00 2001 From: ihfazhillah Date: Tue, 5 Sep 2017 13:53:33 +0700 Subject: [PATCH 2/4] add childrenClassName demo --- demos/demo3-childrenClassName/Demo.jsx | 50 ++++++++++++++++++++++++ demos/demo3-childrenClassName/demo.css | 3 ++ demos/demo3-childrenClassName/index.html | 25 ++++++++++++ demos/demo3-childrenClassName/index.jsx | 26 ++++++++++++ 4 files changed, 104 insertions(+) create mode 100644 demos/demo3-childrenClassName/Demo.jsx create mode 100644 demos/demo3-childrenClassName/demo.css create mode 100644 demos/demo3-childrenClassName/index.html create mode 100644 demos/demo3-childrenClassName/index.jsx diff --git a/demos/demo3-childrenClassName/Demo.jsx b/demos/demo3-childrenClassName/Demo.jsx new file mode 100644 index 0000000..8e4398c --- /dev/null +++ b/demos/demo3-childrenClassName/Demo.jsx @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; +import { DragDropContext } from 'react-dnd'; +import HTML5Backend from 'react-dnd-html5-backend'; + +import { Nestable } from '../../src/react-dnd-nestable'; + +class Demo extends Component { + state = { + items: [ + { id: 1, text: 'Item #1', children: [] }, + { id: 2, text: 'Item #2', children: [] }, + { id: 3, text: 'Item #3', children: [] }, + { id: 4, text: 'Item #4', children: [{ id: 5, text: 'Item #5', children: [] }] } + ] + }; + + renderItem = ({ item }) => { + return
      { item.text }
      ; + }; + + updateItems = (newItems) => { + this.setState({ items: newItems }); + }; + + componentDidMount(){ + require("./demo.css") + } + + render() { + return ( + + ); + } +} + +var styles = { + item: { + marginBottom: 5, + padding: 10, + border: '1px solid #000', + background: '#fff' + }, +}; + +export default DragDropContext(HTML5Backend)(Demo); diff --git a/demos/demo3-childrenClassName/demo.css b/demos/demo3-childrenClassName/demo.css new file mode 100644 index 0000000..a9c017e --- /dev/null +++ b/demos/demo3-childrenClassName/demo.css @@ -0,0 +1,3 @@ +.child { + margin-left: 30px; +} diff --git a/demos/demo3-childrenClassName/index.html b/demos/demo3-childrenClassName/index.html new file mode 100644 index 0000000..02a696b --- /dev/null +++ b/demos/demo3-childrenClassName/index.html @@ -0,0 +1,25 @@ + + + + + + Nested List + + + + +
      + + + + + \ No newline at end of file diff --git a/demos/demo3-childrenClassName/index.jsx b/demos/demo3-childrenClassName/index.jsx new file mode 100644 index 0000000..a34fe9b --- /dev/null +++ b/demos/demo3-childrenClassName/index.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; + +const rootEl = document.querySelector('#content'); + +ReactDOM.render( + + + , + rootEl +); + +if (module.hot) { + module.hot.accept('./Demo', () => { + const NewDemo = require('./Demo').default; + + ReactDOM.render( + + + , + rootEl + ); + }); +} From 8afe970a5691f013d09ba886cf5066c305bdb350 Mon Sep 17 00:00:00 2001 From: ihfazhillah Date: Tue, 5 Sep 2017 14:12:14 +0700 Subject: [PATCH 3/4] make child also flagged as dragging + demos --- demos/demo4-isDragging/.Demo.jsx.swp | Bin 0 -> 12288 bytes demos/demo4-isDragging/Demo.jsx | 53 +++++++++++++++++++++++++++ demos/demo4-isDragging/demo.css | 3 ++ demos/demo4-isDragging/index.html | 25 +++++++++++++ demos/demo4-isDragging/index.jsx | 26 +++++++++++++ src/Item.jsx | 18 ++++++++- webpack.config.js | 3 +- 7 files changed, 126 insertions(+), 2 deletions(-) create mode 100644 demos/demo4-isDragging/.Demo.jsx.swp create mode 100644 demos/demo4-isDragging/Demo.jsx create mode 100644 demos/demo4-isDragging/demo.css create mode 100644 demos/demo4-isDragging/index.html create mode 100644 demos/demo4-isDragging/index.jsx diff --git a/demos/demo4-isDragging/.Demo.jsx.swp b/demos/demo4-isDragging/.Demo.jsx.swp new file mode 100644 index 0000000000000000000000000000000000000000..4c88342b1b6290487b01815e885569fb32fd0d08 GIT binary patch literal 12288 zcmeI2&u`;I6vt=x2<&zR0wMPDNDpzO#7Wv_S*1-5+a6en_5dsrTJ6EL$Bn6fVNbeU zB7?*M@h89yA#vb>1RVGeI3nP{6@(Ci0~|T?ow1#y*{#?s>a+5(zr z2lxSe1HJ}dfzQB4;6ot67(5UDL5zQa-@&io7w|Lq9()VF1fPKS!7=cG3l4$K?*`z5 z6<`He0akz&URy(lyGg9%sj^;vegBogEyq2U zvDdP6t7>Z-zXERyqN0rx(IF;}vSb>2Lu#)3zTYf|lgyJDhWhC#gf?P3g{R>6Ge(GWqs2$fVVxKKTQnM1F_hk_7TrMqtEIK!n=CX^KZQDy;+Gpz~4dUZw0nb`I~HXmA17JMDX#)|#Mf7tg|?EB}~YavkscM+T^OY`iw`k^5G6cbWM zh3B+emzJ)90A+@k!HnvnrGoq{iKuDYU3~J)eMDn>b9=sW`E^mPTr|Q@R1^+6`h9_& fv1q>A%1dXy>3r$J_*LCj-$sOsxa$y&H7x%Hl48c8 literal 0 HcmV?d00001 diff --git a/demos/demo4-isDragging/Demo.jsx b/demos/demo4-isDragging/Demo.jsx new file mode 100644 index 0000000..aca6d7d --- /dev/null +++ b/demos/demo4-isDragging/Demo.jsx @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; +import { DragDropContext } from 'react-dnd'; +import HTML5Backend from 'react-dnd-html5-backend'; + +import { Nestable } from '../../src/react-dnd-nestable'; + +class Demo extends Component { + state = { + items: [ + { id: 1, text: 'Item #1', children: [] }, + { id: 2, text: 'Item #2', children: [] }, + { id: 3, text: 'Item #3', children: [] }, + { id: 4, text: 'Item #4', children: [{ id: 5, text: 'Item #5', children: [] }] } + ] + }; + + renderItem = ({ item, isDragging }) => { + if (isDragging) { + return
      {item.text}
      + } + return
      { item.text }
      ; + }; + + updateItems = (newItems) => { + this.setState({ items: newItems }); + }; + + componentDidMount(){ + require("./demo.css") + } + + render() { + return ( + + ); + } +} + +var styles = { + item: { + marginBottom: 5, + padding: 10, + border: '1px solid #000', + background: '#fff' + }, +}; + +export default DragDropContext(HTML5Backend)(Demo); diff --git a/demos/demo4-isDragging/demo.css b/demos/demo4-isDragging/demo.css new file mode 100644 index 0000000..a9c017e --- /dev/null +++ b/demos/demo4-isDragging/demo.css @@ -0,0 +1,3 @@ +.child { + margin-left: 30px; +} diff --git a/demos/demo4-isDragging/index.html b/demos/demo4-isDragging/index.html new file mode 100644 index 0000000..02a696b --- /dev/null +++ b/demos/demo4-isDragging/index.html @@ -0,0 +1,25 @@ + + + + + + Nested List + + + + +
      + + + + + \ No newline at end of file diff --git a/demos/demo4-isDragging/index.jsx b/demos/demo4-isDragging/index.jsx new file mode 100644 index 0000000..a34fe9b --- /dev/null +++ b/demos/demo4-isDragging/index.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; + +const rootEl = document.querySelector('#content'); + +ReactDOM.render( + + + , + rootEl +); + +if (module.hot) { + module.hot.accept('./Demo', () => { + const NewDemo = require('./Demo').default; + + ReactDOM.render( + + + , + rootEl + ); + }); +} diff --git a/src/Item.jsx b/src/Item.jsx index 18ee810..6f839fd 100644 --- a/src/Item.jsx +++ b/src/Item.jsx @@ -39,7 +39,23 @@ function decreaseHorizontalLevel(prevPosition) { const cardSource = { isDragging(props, monitor) { - return props.id === monitor.getItem().id; + let draggedItem = monitor.getItem(); + + + let ids = []; + const flattenId = (item) => { + ids.push(item.id) + if (item.children && item.children.length) { + item.children.forEach(child => flattenId(child)); + } + } + + flattenId(draggedItem.data) + + if (ids.indexOf(props.id) > -1){ + return true + } + }, beginDrag(props, monitor, component) { const node = findDOMNode(component); diff --git a/webpack.config.js b/webpack.config.js index 01d5602..df4ef13 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -19,7 +19,8 @@ var entry = { 'demo0-flat-list': './demos/demo0-flat-list/index.jsx', 'demo1-nested-list': './demos/demo1-nested-list/index.jsx', 'demo2-drag-handles': './demos/demo2-drag-handles/index.jsx', - 'demo3-childrenClassName': './demos/demo3-childrenClassName/index.jsx' + 'demo3-childrenClassName': './demos/demo3-childrenClassName/index.jsx', + 'demo4-isDragging': './demos/demo4-isDragging/index.jsx' }; if (process.env.NODE_ENV === 'development') { From ca9f0453aabeed91033851d9c71e4bc587984b1e Mon Sep 17 00:00:00 2001 From: ihfazhillah Date: Tue, 5 Sep 2017 14:12:41 +0700 Subject: [PATCH 4/4] remove unnecessary file --- demos/demo4-isDragging/.Demo.jsx.swp | Bin 12288 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 demos/demo4-isDragging/.Demo.jsx.swp diff --git a/demos/demo4-isDragging/.Demo.jsx.swp b/demos/demo4-isDragging/.Demo.jsx.swp deleted file mode 100644 index 4c88342b1b6290487b01815e885569fb32fd0d08..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12288 zcmeI2&u`;I6vt=x2<&zR0wMPDNDpzO#7Wv_S*1-5+a6en_5dsrTJ6EL$Bn6fVNbeU zB7?*M@h89yA#vb>1RVGeI3nP{6@(Ci0~|T?ow1#y*{#?s>a+5(zr z2lxSe1HJ}dfzQB4;6ot67(5UDL5zQa-@&io7w|Lq9()VF1fPKS!7=cG3l4$K?*`z5 z6<`He0akz&URy(lyGg9%sj^;vegBogEyq2U zvDdP6t7>Z-zXERyqN0rx(IF;}vSb>2Lu#)3zTYf|lgyJDhWhC#gf?P3g{R>6Ge(GWqs2$fVVxKKTQnM1F_hk_7TrMqtEIK!n=CX^KZQDy;+Gpz~4dUZw0nb`I~HXmA17JMDX#)|#Mf7tg|?EB}~YavkscM+T^OY`iw`k^5G6cbWM zh3B+emzJ)90A+@k!HnvnrGoq{iKuDYU3~J)eMDn>b9=sW`E^mPTr|Q@R1^+6`h9_& fv1q>A%1dXy>3r$J_*LCj-$sOsxa$y&H7x%Hl48c8