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 + ); + }); +} 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/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/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/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..df4ef13 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,7 +18,9 @@ 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', + 'demo4-isDragging': './demos/demo4-isDragging/index.jsx' }; if (process.env.NODE_ENV === 'development') { @@ -56,7 +58,8 @@ module.exports = { test: /\.jsx?$/, exclude: /build|node_modules/, loaders: ['babel'] - } + }, + { test: /\.css$/, loader: "style-loader!css-loader" } ] }, resolve: {