[WIP] TreeView component

src/demos/components/treeviews.jsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2015-present, CWB SAS
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { Component } from "react";
+import TreeView from "../../libs/components/treeView";
+
+export default class TreeViews extends Component {
+  state = {
+    items: [
+      {
+        id: "i1",
+        name: "Item 1",
+        icon: "folder",
+        color: "gray",
+        children: [
+          {
+            id: "i2a",
+            name: "SubItem 1",
+            icon: "insert_drive_file",
+            color: "gray",
+          },
+          {
+            id: "i2b",
+            name: "SubItem 2",
+            icon: "folder",
+            color: "gray",
+            children: [
+              {
+                id: "i2aa",
+                name: "SubItem 1",
+                icon: "insert_drive_file",
+                color: "gray",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "i2",
+        name: "Item 2",
+        icon: "insert_drive_file",
+        color: "gray",
+      },
+      {
+        id: "i3",
+        name: "Item 3",
+        icon: "folder",
+        color: "gray",
+        children: [],
+      },
+    ],
+  };
+
+  collapseChild(items, itemId) {
+    const its = items;
+    items.forEach((item, index) => {
+      if (item.id === itemId) {
+        its[index].collapsed = !item.collapsed;
+      } else if (item.children) {
+        this.collapseChild(item.children, itemId);
+      }
+    });
+    return its;
+  }
+
+  handleCollapse = (index, level, itemId) => {
+    const { items } = this.state;
+    this.collapseChild(items, itemId);
+    this.setState({ items });
+  };
+
+  render() {
+    const { items } = this.state;
+    return (
+      <section>
+        <h1>TreeView examples </h1>
+        <div style={{ padding: "16px" }}>
+          <TreeView
+            items={items}
+            selectedItem={-1}
+            onSelect={() => {}}
+            onCollapse={this.handleCollapse}
+          />
+        </div>
+      </section>
+    );
+  }
+}

src/demos/main.jsx

@@ -13,13 +13,15 @@ import SubToolbars from "./components/subToolbars";
 import Lists from "./components/lists";
 import FileInputs from "./components/fileInputs";
 import Tooltips from "./components/tooltips";
+import TreeViews from "./components/treeviews";
 
 const Main = ({ children }) => (
   <main>
     {children}
     <Tooltips />
     <SubToolbars />
     <Lists />
+    <TreeViews />
     <ContentEditables />
     <ExpansionPanels />
     <Steppers />

src/libs/components/list/listDragItem.jsx

@@ -4,10 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { Component, Children } from "react";
+import React, { Component } from "react";
+import { findDOMNode } from "react-dom";
 import PropTypes from "prop-types";
 import { DragSource, DropTarget } from "react-dnd";
-import Zrmc, { Icon } from "zrmc";
+import { ListItem } from "zrmc";
 
 const MDC_LISTITEM = "mdc-list-item";
 
@@ -107,70 +108,30 @@ export default class ListDragItem extends Component {
     delete otherProps.onDrop;
     delete otherProps.isDragging;
 
-    let classes = MDC_LISTITEM;
-    let graphic;
-    if (activated) {
-      classes += " mdc-list-item--activated";
-    }
-    if (icon) {
-      graphic = (
-        <Icon
-          className="mdc-list-item__graphic"
-          aria-hidden="true"
-          name={icon}
-        />
-      );
-    } else if (imgSrc) {
-      graphic = (
-        <img
-          className="mdc-list-item__graphic"
-          src={imgSrc}
-          width={imgSize}
-          height={imgSize}
-          alt={imgLabel}
-        />
-      );
-    }
-    let meta;
-    let text = Children.map(children, (child) => {
-      if (child.props && child.props.mdcElement === "mdc-list-item__meta") {
-        meta = child;
-        return null;
-      }
-      return child;
-    });
-    if (secondaryText) {
-      text = (
-        <span className="mdc-list-item__text">
-          {text}
-          <span className="mdc-list-item__secondary-text">{secondaryText}</span>
-        </span>
-      );
-    }
-    let el;
-    if (type === "a") {
-      el = (
-        <a className={classes} href={href} onClick={onClick}>
-          {graphic}
-          {text}
-          {meta}
-        </a>
-      );
-    } else {
-      el = (
-        <li
-          role="menuitem"
-          className={classes}
-          onKeyPress={() => {}}
-          onClick={onClick}
-        >
-          {graphic}
-          {text}
-          {meta}
-        </li>
-      );
-    }
-    return connectDragSource(connectDropTarget(Zrmc.render(el, otherProps)));
+    return (
+      <ListItem
+        type={type}
+        icon={icon}
+        activated={activated}
+        imgSrc={imgSrc}
+        imgSize={imgSize}
+        imgLabel={imgLabel}
+        secondaryText={secondaryText}
+        href={href}
+        onClick={onClick}
+        props={otherProps}
+        /* eslint-disable react/no-find-dom-node */
+        // TODO react-dnd doesn't work with findDOMNode replacement
+        // see : https://github.com/react-dnd/react-dnd/issues/998
+        ref={(instance) => {
+          connectDropTarget(findDOMNode(instance));
+          connectDragSource(findDOMNode(instance));
+        }}
+        /* eslint-enaable react/no-find-dom-node */
+      >
+        {children}
+      </ListItem>
+    );
   }
 }
 

src/libs/components/treeView/index.jsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2015-present, CWB SAS
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import { List } from "zrmc";
+import Item from "./item";
+
+const renderItem = (
+  list,
+  item,
+  index,
+  selectedItem,
+  onSelect,
+  onCollapse,
+  selectedLevel = 0,
+  level = 0,
+) => {
+  const content = item.name;
+  const { icon } = item;
+  if (icon) {
+    let { color } = item;
+    if (!color) {
+      color = "gray";
+    }
+  }
+  let cn = "selectableListItem";
+  if (selectedItem === index && selectedLevel === level) {
+    cn = "selectedListItem";
+  }
+  list.push(
+    <Item
+      level={level}
+      icon={icon}
+      key={item.id}
+      onClick={(e) => {
+        e.preventDefault();
+        onSelect(index, level, item.id);
+      }}
+      onCollapse={() => {
+        onCollapse(index, level, item.id);
+      }}
+      className={cn}
+      arrow={!!item.children}
+      collapsed={item.collapsed}
+      activated={item.activated}
+    >
+      {content}
+    </Item>,
+  );
+  if (item.children && !item.collapsed) {
+    item.children.map((sitem, sindex) =>
+      renderItem(
+        list,
+        sitem,
+        sindex,
+        selectedItem,
+        onSelect,
+        onCollapse,
+        selectedLevel,
+        level + 1,
+      ),
+    );
+  }
+};
+
+const TreeView = ({
+  items,
+  selectedItem,
+  onSelect,
+  onCollapse,
+  className,
+  style,
+}) => (
+  <List className={className} style={style}>
+    {items.map((item, index) => {
+      const list = [];
+      renderItem(list, item, index, selectedItem, onSelect, onCollapse);
+      return list;
+    })}
+  </List>
+);
+
+TreeView.defaultProps = {
+  className: null,
+  style: null,
+};
+
+TreeView.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      icon: PropTypes.string,
+      children: PropTypes.arrayOf(PropTypes.shape({})),
+    }),
+  ).isRequired,
+  selectedItem: PropTypes.number.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.string),
+  onCollapse: PropTypes.func,
+};
+
+export default TreeView;