Merge 78308ba into 1f1b451

packages/patternfly-3/patternfly-react-wooden-tree/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["../.babelrc.js"]
+}

packages/patternfly-3/patternfly-react-wooden-tree/.npmignore

@@ -0,0 +1,2 @@
+src
+build

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
+```

packages/patternfly-3/patternfly-react-wooden-tree/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "patternfly-react-wooden-tree",
+  "version": "1.0.0",
+  "description": "",
+  "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"
+  ],
+  "author": "Red Hat",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-react/issues"
+  },
+  "homepage": "https://github.com/patternfly/patternfly-react#readme",
+  "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": {}
+}

packages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/TreeView.stories.js

@@ -0,0 +1,30 @@
+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)}/Tree View`, module);
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Catalog Tile',
+    description:
+      'This is a Tree View component to display trees and hierarchical data using React Wooden Tree.' +
+      'The tree uses the https://www.npmjs.com/package/react-wooden-tree component.'
+  })
+);
+
+stories.add(
+  'Tree View',
+  withInfo({
+    source: false,
+    propTables: [TreeViewExample]
+  })(() => (
+    <div style={{ display: 'flex' }}>
+      <TreeViewExample />
+    </div>
+  ))
+);

packages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/TreeViewExample.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import TreeView 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]: TreeView.nodeExpanded,
+  [CHECKED]: TreeView.nodeChecked,
+  [DISABLED]: TreeView.nodeDisabled,
+  [SELECTED]: TreeView.nodeSelected,
+  [NODES]: TreeView.nodeChildren,
+  [LOADING]: TreeView.nodeLoading
+};
+
+class TreeViewExample extends React.Component {
+  state = {
+    tree: TreeView.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 = TreeView.nodeSelector(this.state.tree, nodeId);
+    if (node == null) {
+      return;
+    }
+
+    if (actionMapper.hasOwnProperty(type)) {
+      node = actionMapper[type](node, value);
+      this.setState({ tree: TreeView.nodeUpdater(this.state.tree, node) });
+    }
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <TreeView nodeIcon="fa fa-file-o" data={this.state.tree} onDataChange={this.onDataChange} {...this.props} />
+      </div>
+    );
+  }
+}
+
+export default TreeViewExample;

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 TreeView extends Tree {}
+
+export default TreeView;

packages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/style.css

@@ -0,0 +1,7 @@
+.Icon {
+    margin-right: 0;
+}
+
+.NoOpenButton {
+    margin-left: 1em;
+}

packages/patternfly-3/patternfly-react-wooden-tree/src/index.js

@@ -0,0 +1 @@
+export { default as TreeView } from './components/TreeView';