patternfly · jeff-phillips-18 · Mar 18, 2019 · Oct 31, 2018 · Oct 31, 2018 · Nov 7, 2018
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/.babelrc b/packages/patternfly-3/patternfly-react-wooden-tree/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["../.babelrc.js"]
+}
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/.npmignore b/packages/patternfly-3/patternfly-react-wooden-tree/.npmignore
@@ -0,0 +1,2 @@
+src
+build
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/README.md b/packages/patternfly-3/patternfly-react-wooden-tree/README.md
@@ -0,0 +1,13 @@
+# react-wooden-tree
+
+## Getting Started
+
+```
+yarn add patternfly-react-wooden-tree
+```
+
+or
+
+```
+npm install patternfly-react-wooden-tree --save
+```
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/package.json b/packages/patternfly-3/patternfly-react-wooden-tree/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "patternfly-react-wooden-tree",
+  "version": "1.0.0",
+  "description": "Reexport react-wooden-tree with Patternfly design.",
+  "main": "dist/js/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/js/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patternfly/patternfly-react.git"
+  },
+  "keywords": [
+    "react",
+    "patternfly",
+    "treeview"
+  ],
+  "author": "Red Hat",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-react/issues"
+  },
+  "homepage": "https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-react-wooden-tree/README.md",
+  "scripts": {
+    "build": "yarn build:babel",
+    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.2",
+    "react": "^16.6.1",
+    "react-wooden-tree": "^1.1.2"
+  },
+  "devDependencies": {}
+}
diff --git a/...ges/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/TreeView.stories.js b/...ges/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/TreeView.stories.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info/dist/index';
+import { defaultTemplate } from 'storybook/decorators/storyTemplates';
+import { storybookPackageName } from 'storybook/constants/siteConstants';
+import { name } from '../../../package.json';
+import TreeViewExample from './TreeViewExample';
+
+const stories = storiesOf(`${storybookPackageName(name)}/Wooden Tree View`, module);
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Wooden Tree View',
+    description: (
+      <div>
+        This is a Tree View component to display trees and hierarchical data using React Wooden Tree.
+        The tree uses the <a href="https://www.npmjs.com/package/react-wooden-tree">https://www.npmjs.com/package/react-wooden-tree</a> component.
+      </div>
+    )
+  })
+);
+
+stories.add(
+  'Wooden Tree View',
+  withInfo({
+    source: false,
+    propTables: [TreeViewExample]
+  })(() => (
+    <div style={{ display: 'flex' }}>
+      <TreeViewExample />
+    </div>
+  ))
+);
diff --git a/...ages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/TreeViewExample.js b/...ages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/TreeViewExample.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import WoodenTreeView from './index';
+
+const data = [
+  {
+    text: 'Parent 1',
+    icon: 'fa fa-folder',
+    nodes: [
+      {
+        text: 'Child 1',
+        nodes: [{ text: 'Grandchild 1' }, { text: 'Grandchild 2' }]
+      },
+      {
+        text: 'Child 2',
+        nodes: [{ text: 'Grandchild 1' }, { text: 'Grandchild 2' }]
+      }
+    ]
+  },
+  {
+    text: 'Parent 2',
+    icon: 'fa fa-folder',
+    nodes: [{ text: 'Child 1' }]
+  },
+  {
+    text: 'Parent 3',
+    icon: 'fa fa-folder'
+  },
+  {
+    text: 'Parent 4',
+    icon: 'fa fa-folder'
+  },
+  {
+    text: 'Parent 5',
+    icon: 'fa fa-folder'
+  }
+];
+
+const EXPANDED = 'state.expanded';
+const CHECKED = 'state.checked';
+const DISABLED = 'state.disabled';
+const SELECTED = 'state.selected';
+const NODES = 'nodes';
+const LOADING = 'loading';
+
+const actionMapper = {
+  [EXPANDED]: WoodenTreeView.nodeExpanded,
+  [CHECKED]: WoodenTreeView.nodeChecked,
+  [DISABLED]: WoodenTreeView.nodeDisabled,
+  [SELECTED]: WoodenTreeView.nodeSelected,
+  [NODES]: WoodenTreeView.nodeChildren,
+  [LOADING]: WoodenTreeView.nodeLoading
+};
+
+class TreeViewExample extends React.Component {
+  state = {
+    tree: WoodenTreeView.initTree(data)
+  };
+
+  /**
+   * The callback function for changing data in the tree.
+   *
+   * @param {string} nodeId The nodeId of the node.
+   * @param {string} type The field name which changed.
+   * @param {boolean} value The new value to assign.
+   */
+  onDataChange = (nodeId, type, value) => {
+    let node = WoodenTreeView.nodeSelector(this.state.tree, nodeId);
+    if (node == null) {
+      return;
+    }
+
+    if (actionMapper.hasOwnProperty(type)) {
+      node = actionMapper[type](node, value);
+      this.setState({ tree: WoodenTreeView.nodeUpdater(this.state.tree, node) });
+    }
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <WoodenTreeView nodeIcon="fa fa-file-o" data={this.state.tree} onDataChange={this.onDataChange} {...this.props} />
+      </div>
+    );
+  }
+}
+
+export default TreeViewExample;
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/index.js b/packages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/index.js
@@ -0,0 +1,8 @@
+import { Tree } from 'react-wooden-tree';
+
+require('react-wooden-tree/dist/react-wooden-tree.css');
+require('./style.css');
+
+class WoodenTreeView extends Tree {}
+
+export default WoodenTreeView;
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/style.css b/packages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/style.css
@@ -0,0 +1,7 @@
+.Tree .Icon {
+    margin-right: 0;
+}
+
+.Tree .NoOpenButton {
+    margin-left: 1em;
+}
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/src/index.js b/packages/patternfly-3/patternfly-react-wooden-tree/src/index.js
@@ -0,0 +1 @@
+export { default as WoodenTreeView } from './components/TreeView';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as WoodenTreeView } from './components/TreeView';