diff --git a/.npmignore b/.npmignore index 2de1b2c..981eee8 100644 --- a/.npmignore +++ b/.npmignore @@ -9,7 +9,7 @@ npm-debug.log* coverage # tests -__tests__ +test # settings .vscode diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..c4a511c --- /dev/null +++ b/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) diff --git a/README.md b/README.md index 0b31b13..05e8069 100644 --- a/README.md +++ b/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 (); + return (); } } ``` +> 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 (
- +
Selected items: {this.state.items}
); @@ -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 () diff --git a/example/app.js b/example/app.js index 045a632..9c548b4 100644 --- a/example/app.js +++ b/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 (
- +
Selected items: {this.state.items}
); diff --git a/package.json b/package.json index b6ccef2..00f4171 100644 --- a/package.json +++ b/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": { diff --git a/src/react-tree.js b/src/react-tree.js index 8c7d871..b124780 100644 --- a/src/react-tree.js +++ b/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`); } }; diff --git a/test/react-tree-test.js b/test/react-tree-test.js index cf9b183..6d28781 100644 --- a/test/react-tree-test.js +++ b/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( - + ); 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( - + ); expect(handleOnChanged).toBeCalled(); }); - it('should show error when tree is not object or array', () => { - const reactTree = TestUtils.renderIntoDocument( - - ); + it('should throw TypeError when "core" prop is not valid', () => { + const renderReactTree = () => { + TestUtils.renderIntoDocument(); + }; + + expect(renderReactTree).toThrowError(TypeError); + }); + + it('should validation of "core" prop is defined', () => { + const ERROR_CORE = { data: 1 }; + + TestUtils.renderIntoDocument(); - expect(ReactTree.propTypes.tree).toBeDefined(); + expect(ReactTree.propTypes.core).toBeDefined(); }); });