Add core prop to ReactTree

.npmignore

@@ -9,7 +9,7 @@ npm-debug.log*
 coverage
 
 # tests
-__tests__
+test
 
 # settings
 .vscode

CHANGELOG.md

@@ -0,0 +1,37 @@
+# Change Log
+
+## [v1.0.0](https://github.com/hckhanh/react-tree-es6/tree/v1.0.0)
+
+[Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v0.1.2...v1.0.0)
+
+**Implemented enhancements:**
+
+- Add core property [\#20](https://github.com/hckhanh/react-tree-es6/issues/20)
+- Add Codecov service [\#15](https://github.com/hckhanh/react-tree-es6/issues/15)
+- Add test coverage \(\#15\) [\#19](https://github.com/hckhanh/react-tree-es6/pull/19) ([hckhanh](https://github.com/hckhanh))
+
+## [v0.1.2](https://github.com/hckhanh/react-tree-es6/tree/v0.1.2) (2016-08-14)
+[Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v0.1.1...v0.1.2)
+
+**Implemented enhancements:**
+
+- Setup NPM for publishing [\#13](https://github.com/hckhanh/react-tree-es6/issues/13)
+- Remove css from ReactTree [\#12](https://github.com/hckhanh/react-tree-es6/issues/12)
+- Backward compatible to ES5 [\#11](https://github.com/hckhanh/react-tree-es6/issues/11)
+- Write tests for component [\#10](https://github.com/hckhanh/react-tree-es6/issues/10)
+- Create README file [\#5](https://github.com/hckhanh/react-tree-es6/issues/5)
+- Create onChanged event [\#3](https://github.com/hckhanh/react-tree-es6/issues/3)
+- Add JSON data to ReactTree [\#2](https://github.com/hckhanh/react-tree-es6/issues/2)
+- Add jstree plugin [\#1](https://github.com/hckhanh/react-tree-es6/issues/1)
+- Add README and update version to v0.1.0 [\#16](https://github.com/hckhanh/react-tree-es6/pull/16) ([hckhanh](https://github.com/hckhanh))
+- Add JsTree plugin [\#14](https://github.com/hckhanh/react-tree-es6/pull/14) ([hckhanh](https://github.com/hckhanh))
+
+**Fixed bugs:**
+
+- Fix Travis script to publish to NPM [\#18](https://github.com/hckhanh/react-tree-es6/pull/18) ([hckhanh](https://github.com/hckhanh))
+- Add email to Travis script [\#17](https://github.com/hckhanh/react-tree-es6/pull/17) ([hckhanh](https://github.com/hckhanh))
+
+## [v0.1.1](https://github.com/hckhanh/react-tree-es6/tree/v0.1.1) (2016-08-14)
+[Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v0.1.0...v0.1.1)
+
+## [v0.1.0](https://github.com/hckhanh/react-tree-es6/tree/v0.1.0) (2016-08-14)

README.md

@@ -10,7 +10,7 @@ The wrapper of jsTree (jstree.com) for React
 ## Getting Started
 
 If you want to find a **tree view** component for React, this module is what you need.
-It supports **ES6** and backward compatible with **ES5**.
+**It supports ES6 and backward compatible with ES5.**
 
 ## Installation
 
@@ -26,27 +26,33 @@ import/require `ReactTree` to your React source code:
 import ReactTree from 'react-tree-es6';
 ```
 
-### tree
+### core
 
-**tree** is the node object or and array of node object. This is an example of data of a node:
+`core` is the jsTree object contains basic data and configurations of the tree.
+This is an example of `core` object:
 
 ```js
 {
-  text: 'Root node 2',
-  state: {
-    opened: true,
-    selected: true
-  },
-  children: [
+  data: [ // data can be an array or object.
+    'Simple root node',
     {
-      text: 'Child 1'
-    },
-    'Child 2'
+      text: 'Root node 2',
+      state: {
+        opened: true,
+        selected: true
+      },
+      children: [
+        {
+          text: 'Child 1'
+        },
+        'Child 2'
+      ]
+    }
   ]
 }
 ```
 
-Here is the full structure of a node:
+As you know, a tree has one or many nodes, here is the full structure of a node:
 
 ```js
 // Alternative format of the node (id & parent are required)
@@ -65,54 +71,60 @@ Here is the full structure of a node:
 }
 ```
 
-You can define a tree and then parse it to `tree` property:
+You can define a `core` object and then parse it to `core` property:
 
 ```js
-const TREE = [
-  'Simple root node',
-  {
-    text: 'Root node 2',
-    state: {
-      opened: true,
-      selected: true
-    },
-    children: [
-      {
-        text: 'Child 1'
+const CORE = {
+  data: [
+    'Simple root node',
+    {
+      text: 'Root node 2',
+      state: {
+        opened: true,
+        selected: true
       },
-      'Child 2'
-    ]
-  }
-];
+      children: [
+        {
+          text: 'Child 1'
+        },
+        'Child 2'
+      ]
+    }
+  ]
+};
 
 class ExampleApp extends React.Component {
   render() {
-    return (<ReactTree tree={TREE} />);
+    return (<ReactTree core={CORE} />);
   }
 }
 ```
 
+> To make sure you can find what you need, go to [jsTree API](https://www.jstree.com/api) for more details.
+
 ### onChanged
 
 This is an event to handle when a node is clicked:
 
 ```js
-const TREE = [
-  'Simple root node',
-  {
-    text: 'Root node 2',
-    state: {
-      opened: true,
-      selected: true
-    },
-    children: [
-      {
-        text: 'Child 1'
+const CORE = {
+  data: [
+    'Simple root node',
+    {
+      text: 'Root node 2',
+      state: {
+        opened: true,
+        selected: true
       },
-      'Child 2'
-    ]
-  }
-];
+      children: [
+        {
+          text: 'Child 1'
+        },
+        'Child 2'
+      ]
+    }
+  ]
+};
 
 class ExampleApp extends React.Component {
   constructor(props) {
@@ -132,7 +144,7 @@ class ExampleApp extends React.Component {
   render() {
     return (
       <div>
-        <ReactTree tree={TREE} onChanged={this.handleOnChanged} />
+        <ReactTree core={CORE} onChanged={this.handleOnChanged} />
         <div>Selected items: {this.state.items}</div>
       </div>
     );
@@ -144,11 +156,37 @@ If you need detailed example, go to [example](example) folder.
 
 ### Themes
 
-If user want to apply css for **ReactTree**, consider to include these files:
+If user want to apply css for **ReactTree**, consider to include these files to your web app:
 
 * node_modules/jstree/dist/themes/default/style.min.css
 * node_modules/jstree/dist/themes/default-dark/style.min.css
 
+with additional options in `core` object, for instance with **default-dark** theme:
+
+```js
+const CORE = {
+  data: [
+    'Simple root node',
+    {
+      text: 'Root node 2',
+      state: {
+        opened: true,
+        selected: true
+      },
+      children: [
+        {
+          text: 'Child 1'
+        },
+        'Child 2'
+      ]
+    }
+  ],
+  themes: {
+    name: 'default-dark'
+  }
+};
+```
+
 ## License
 
 MIT (<http://www.opensource.org/licenses/mit-license.php>)

example/app.js

@@ -5,6 +5,10 @@ import ReactDOM from 'react-dom';
 import ReactTree from '../src/react-tree';
 import { PROJECT_TREE } from './project-tree';
 
+const CORE_DATA = {
+  data: PROJECT_TREE
+};
+
 class ExampleApp extends React.Component {
   constructor(props) {
     super(props);
@@ -23,7 +27,7 @@ class ExampleApp extends React.Component {
   render() {
     return (
       <div>
-        <ReactTree tree={PROJECT_TREE} onChanged={this.handleOnChanged} />
+        <ReactTree core={CORE_DATA} onChanged={this.handleOnChanged} />
         <div>Selected items: {this.state.items}</div>
       </div>
     );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tree-es6",
-  "version": "0.1.2",
+  "version": "1.0.0-0",
   "description": "The wrapper of jsTree (jstree.com) for React",
   "main": "./lib/react-tree.js",
   "scripts": {

src/react-tree.js

@@ -14,9 +14,7 @@ export default class ReactTree extends React.Component {
         }
       })
       .jstree({
-        core: {
-          data: this.props.tree
-        }
+        core: this.props.core
       });
   }
 
@@ -26,9 +24,13 @@ export default class ReactTree extends React.Component {
 }
 
 ReactTree.propTypes = {
-  tree: function (props, propName, componentName) {
-    const prop = props[propName];
-    if (!Array.isArray(prop) && typeof (prop) !== 'object')
-      return new TypeError(`Invalid prop \`tree\`: tree must be an object or array`)
+  core: function (props, propName, componentName) {
+    const core = props[propName];
+    if (!core || typeof (core) !== 'object')
+      return new TypeError(`Invalid prop \`core\`: must follow jsTree API, read more https://www.jstree.com/api/#/?q=core`);
+
+    const data = core.data;
+    if (!Array.isArray(data) && typeof (data) !== 'object')
+      throw new TypeError(`Invalid object \`core.data\`: must be array of object of jsTree JSON data, read more https://www.jstree.com/docs/json`);
   }
 };

test/react-tree-test.js

@@ -2,35 +2,46 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import ReactTree from '../src/react-tree';
-import { PROJECT_TREE } from '../example/project-tree'
+import { PROJECT_TREE } from '../example/project-tree';
+
+const CORE_DATA = {
+  data: PROJECT_TREE
+};
 
 describe('ReactTree', () => {
   it('should run be rendered', () => {
     const reactTree = TestUtils.renderIntoDocument(
-      <ReactTree tree={PROJECT_TREE} />
+      <ReactTree core={CORE_DATA} />
     );
 
     const reactTreeNode = ReactDOM.findDOMNode(reactTree);
 
     expect(reactTreeNode.textContent).not.toBeNull();
-
   });
 
   it('should run the handle function of onChanged event', () => {
     const handleOnChanged = jest.fn();
 
     const reactTree = TestUtils.renderIntoDocument(
-      <ReactTree tree={PROJECT_TREE} onChanged={handleOnChanged} />
+      <ReactTree core={CORE_DATA} onChanged={handleOnChanged} />
     );
 
     expect(handleOnChanged).toBeCalled();
   });
 
-  it('should show error when tree is not object or array', () => {
-    const reactTree = TestUtils.renderIntoDocument(
-      <ReactTree tree={1} />
-    );
+  it('should throw TypeError when "core" prop is not valid', () => {
+    const renderReactTree = () => {
+      TestUtils.renderIntoDocument(<ReactTree core={1} />);
+    };
+
+    expect(renderReactTree).toThrowError(TypeError);
+  });
+
+  it('should validation of "core" prop is defined', () => {
+    const ERROR_CORE = { data: 1 };
+
+    TestUtils.renderIntoDocument(<ReactTree core={ERROR_CORE} />);
 
-    expect(ReactTree.propTypes.tree).toBeDefined();
+    expect(ReactTree.propTypes.core).toBeDefined();
   });
 });