Working on Tree component

react-admin/src/components/Home.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Link } from 'react-router-dom';
+import { intro } from '../resources/const';
+const markdown = require('../resources/markdown.json');
+
+const getHandleId = (() => {
+  let id = 0;
+  return () => ('handle-' + (++id));
+})();
+console.log(getHandleId(), getHandleId());
+
+function getSectionLinks() {
+  return (
+    <ul>
+    {markdown.map((section, sIndex) => (
+      <li key={sIndex}><Link to={section.path}>{section.title}</Link></li>
+    ))}
+    </ul>
+  );
+}
+
+const tutos = [
+  { name: 'JavaScript', items: [
+    { name: 'pouet', items: [
+      { name: 'pouet child', items: [] }
+    ] },
+    { name: 'popop', items: [] },
+    { name: 'douap', items: [] }
+  ] },
+  { name: 'jQuery', items: [] },
+  { name: 'AngularJS', items: [] },
+  { name: 'React', items: [] }
+];
+
+class Tree extends React.Component {
+  render() {
+    const { items } = this.props;
+    return (
+      <div>
+        <h2>X</h2>
+        {items.map(item =>
+          <TreeNode item={item} key={item.name} level={0} />
+        )}
+      </div>
+    );
+  }
+}
+
+/*
+ * get DOM ref    =>  https://reactjs.org/docs/refs-and-the-dom.html
+ * dnd w/ handle  =>  https://github.com/jdiamond/html5-examples/blob/master/drag-and-drop/drag-handle.html
+ */
+class TreeNode extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onDragStart = this.onDragStart.bind(this);
+  }
+
+  onMouseDown(e) {
+    this.dragTarget = e.target;
+    console.log('onMouseDown', this.dragTarget);
+  }
+
+  onDragStart(e) {
+    // e.preventDefault();
+    e.stopPropagation();
+    console.log('onDragStart', this.props.item.name, this.draggable);
+    
+    const { draggable } = this;
+    var handle = draggable.getElementsByClassName('drag-handle')[0];
+    console.log(this.draggable, handle.id)
+    // draggable.onmousedown = function(e) {
+    //     target = e.target;
+    // };
+    // draggable.ondragstart = function(e) {
+        if (handle.contains(this.dragTarget)) {
+          console.log('transfer to handle')
+            e.dataTransfer.setData('text/plain', handle.id);
+        } else {
+          console.log('abord onDragStart')
+            e.preventDefault();
+        }
+    // };
+  }
+
+  render() {
+    const { name, items } = this.props.item;
+    const { level } = this.props;
+    const paddingLeft = (level * 15) + 'px';
+    return (
+      <div className="tree-node" style={{ paddingLeft }} onMouseDown={this.onMouseDown} onDragStart={this.onDragStart} ref={(div) => { this.draggable = div; }} draggable>
+        <h5><i id={ getHandleId() } className="material-icons drag-handle">drag_handle</i><span>{ name }</span></h5>
+        {items.map(item =>
+          <TreeNode item={item} key={item.name} level={level + 1} />
+        )}
+      </div>
+    );
+  }
+}
+
+class Home extends React.Component {
+  render() {
+    return (
+      <div className="page">
+        <div className="breadcrumb-wrapper">
+          <span className="breadcrumb light-blue-text"><i className="material-icons">home</i></span>
+          <span className="breadcrumb grey-text">Accueil</span>
+        </div>
+
+        <Tree items={tutos} />
+      </div>
+    );
+  }
+}
+
+export default Home;