New tree view integration

packages/patternfly-3/patternfly-react/src/components/PatternflyTreeView/PatternflyTreeView.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * PatternflyTreeView Component for PatternFly React
+ */
+const PatternflyTreeView = ({ children, ...props }) => <div {...props}>{children}</div>;
+
+PatternflyTreeView.propTypes = {
+  children: PropTypes.node
+};
+
+PatternflyTreeView.defaultProps = {
+  children: null
+};
+
+export default PatternflyTreeView;

packages/patternfly-3/patternfly-react/src/components/PatternflyTreeView/PatternflyTreeView.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import { defaultTemplate } from 'storybook/decorators/storyTemplates';
+import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
+import { PatternflyTreeView } from './index';
+import { name } from '../../../package.json';
+
+const stories = storiesOf(
+  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.SOME_CATEGORY}/PatternflyTreeView`,
+  module
+);
+stories.addDecorator(withKnobs);
+stories.addDecorator(
+  defaultTemplate({
+    title: 'PatternflyTreeView',
+    documentationLink: `${DOCUMENTATION_URL.SOME_PATTERNFLY_ORG_CATEGORY}some-valid-component-url-here/`
+  })
+);
+
+stories.add(
+  'PatternflyTreeView story',
+  withInfo(`This is the PatternflyTreeView component.`)(() => (
+    <PatternflyTreeView>
+      <span>{text('Label', 'Well done! You generated a PatternFly React component.')}</span>
+    </PatternflyTreeView>
+  ))
+);

packages/patternfly-3/patternfly-react/src/components/PatternflyTreeView/PatternflyTreeView.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import PatternflyTreeView from './PatternflyTreeView';
+
+const props = {};
+
+test('replace with useful test name', () => {
+  const view = shallow(<PatternflyTreeView {...props} />);
+  // Add a useful assertion here.
+  expect(view).toBe(false);
+});

packages/patternfly-3/patternfly-react/src/components/PatternflyTreeView/index.js

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

packages/patternfly-3/patternfly-tree-view/README.md

@@ -0,0 +1 @@
+# patternfly-tree-view

packages/patternfly-3/patternfly-tree-view/lib/index.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Tree } from 'react-wooden-tree';
+
+require('react-wooden-tree/dist/react-wooden-tree.css');
+require('./style.css');
+
+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 lazyLoad(node) {
+  const isWorking = true;
+
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (isWorking) {
+        resolve([]);
+      } else {
+        reject(new Error('Something happened.'));
+      }
+    }, 2000);
+  });
+} */
+
+const actionMapper = {
+  'state.expanded': Tree.nodeExpanded,
+  'state.checked': Tree.nodeChecked,
+  'state.disabled': Tree.nodeDisabled,
+  'state.selected': Tree.nodeSelected,
+  nodes: Tree.nodeChildren,
+  loading: Tree.nodeLoading
+};
+
+class App extends React.Component {
+  /**
+   * Constructor.
+   * @param {{}} props
+   */
+  constructor(props) {
+    super(props);
+
+    this.data = Tree.initTree(data);
+
+    this.state = {
+      tree: this.data
+    };
+
+    this.onDataChange = this.onDataChange.bind(this);
+    this.lazyLoad = this.lazyLoad.bind(this);
+  }
+
+  /**
+   * 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 = Tree.nodeSelector(this.data, nodeId);
+    if (node == null) {
+      return;
+    }
+
+    if (actionMapper.hasOwnProperty(type)) {
+      node = actionMapper[type](node, value);
+      this.data = Tree.nodeUpdater(this.data, node);
+    } else {
+      // console.log(nodeId, type, value);
+    }
+
+    this.setState({ tree: this.data });
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <Tree
+          nodeIcon="fa fa-file-o"
+          data={this.state.tree}
+          onDataChange={this.onDataChange}
+          lazyLoad={this.lazyLoad}
+        />
+      </div>
+    );
+  }
+}
+
+export const x = () => (
+  <div>
+    <App />
+  </div>
+);

packages/patternfly-3/patternfly-tree-view/lib/style.css

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

packages/patternfly-3/patternfly-tree-view/lib/tree.stories.js

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { inlineTemplate } from 'storybook/decorators/storyTemplates';
+import { name } from '../package.json';
+import { storybookPackageName } from 'storybook/constants/siteConstants';
+import { x as Foo } from './';
+
+const stories = storiesOf(`${storybookPackageName(name)}/Tree view`, module);
+
+stories.add(
+  'Tree view',
+  withInfo()(() => {
+    const story = <Foo />;
+    return inlineTemplate({
+      story,
+      title: 'TreeView'
+    });
+  })
+);

packages/patternfly-3/patternfly-tree-view/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "patternfly-tree-view",
+  "version": "1.0.0",
+  "description": "",
+  "main": "lib/index.js",
+  "types": "lib/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": {},
+  "dependencies": {
+    "react-wooden-tree": "^1.1.0"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.6.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2"
+  }
+}