echenley · ihfazhillah · Sep 5, 2017 · Sep 5, 2017 · Sep 5, 2017 · Sep 5, 2017
diff --git a/demos/demo3-childrenClassName/Demo.jsx 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 <div style={ styles.item }>{ item.text }</div>;
+  };
+
+  updateItems = (newItems) => {
+    this.setState({ items: newItems });
+  };
+
+  componentDidMount(){
+    require("./demo.css")
+  }
+
+  render() {
+    return (
+      <Nestable
+        items={ this.state.items }
+        renderItem={ this.renderItem }
+        onUpdate={ this.updateItems }
+        childrenClassName="child"
+      />
+    );
+  }
+}
+
+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
@@ -0,0 +1,3 @@
+.child {
+  margin-left: 30px;
+}
diff --git a/demos/demo3-childrenClassName/index.html b/demos/demo3-childrenClassName/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<head>
+  <meta charset="UTF-8">
+  <title>Nested List</title>
+  <style>
+  body {
+    margin: 5px;
+  }
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  </style>
+</head>
+<body>
+
+<div id="content"></div>
+
+<script src="./all.js"></script>
+
+</body>
+</html>
diff --git a/demos/demo3-childrenClassName/index.jsx 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(
+  <AppContainer>
+    <Demo />
+  </AppContainer>,
+  rootEl
+);
+
+if (module.hot) {
+  module.hot.accept('./Demo', () => {
+    const NewDemo = require('./Demo').default;
+
+    ReactDOM.render(
+      <AppContainer>
+        <NewDemo />
+      </AppContainer>,
+      rootEl
+    );
+  });
+}
diff --git a/demos/demo4-isDragging/Demo.jsx 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 <div style={{...styles.item, background: 'pink'}}>{item.text}</div>
+    }
+    return <div style={ styles.item }>{ item.text }</div>;
+  };
+
+  updateItems = (newItems) => {
+    this.setState({ items: newItems });
+  };
+
+  componentDidMount(){
+    require("./demo.css")
+  }
+
+  render() {
+    return (
+      <Nestable
+        items={ this.state.items }
+        renderItem={ this.renderItem }
+        onUpdate={ this.updateItems }
+        childrenClassName="child"
+      />
+    );
+  }
+}
+
+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
@@ -0,0 +1,3 @@
+.child {
+  margin-left: 30px;
+}
diff --git a/demos/demo4-isDragging/index.html b/demos/demo4-isDragging/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<head>
+  <meta charset="UTF-8">
+  <title>Nested List</title>
+  <style>
+  body {
+    margin: 5px;
+  }
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  </style>
+</head>
+<body>
+
+<div id="content"></div>
+
+<script src="./all.js"></script>
+
+</body>
+</html>
diff --git a/demos/demo4-isDragging/index.jsx 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(
+  <AppContainer>
+    <Demo />
+  </AppContainer>,
+  rootEl
+);
+
+if (module.hot) {
+  module.hot.accept('./Demo', () => {
+    const NewDemo = require('./Demo').default;
+
+    ReactDOM.render(
+      <AppContainer>
+        <NewDemo />
+      </AppContainer>,
+      rootEl
+    );
+  });
+}
diff --git 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
@@ -27,13 +27,14 @@ class Container extends Component {
     const {
       items,
       parentPosition,
+      childrenClassName,
       childrenProperty,
       childrenStyle,
       topLevel
     } = this.props;
 
     return (
-      <ol style={ topLevel ? {} : childrenStyle }>
+      <ol style={ topLevel ? {} : childrenStyle } className={ topLevel ? '' : childrenClassName }>
         { 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
@@ -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
@@ -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 (
       <div>
@@ -148,12 +150,14 @@ class Nestable extends Component {
           parentPosition={ [] }
           childrenProperty={ childrenProperty }
           childrenStyle={ childrenStyle }
+          childrenClassName={ childrenClassName }
           topLevel={ true }
         />
         <CustomDragLayer
           renderItem={ renderItem }
           childrenProperty={ childrenProperty }
           childrenStyle={ childrenStyle }
+          childrenClassName={ childrenClassName }
         />
       </div>
     );

diff --git 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: {