Merge pull request #14 from hckhanh/jstree

hckhanh · web-flow · commit f79d2b12d253 · 2016-08-14T20:20:56.000+07:00
Add JsTree plugin
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,7 @@ node_modules
 npm-debug.log*
 
 # compiled files
-dist
+lib
+
+# coverage directory used by tools like istanbul
+coverage
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,26 @@
+# dependencies
+node_modules
+
+# logs
+*.log
+npm-debug.log*
+
+# coverage directory used by tools like istanbul
+coverage
+
+# tests
+__tests__
+
+# settings
+.vscode
+.babelrc
+.gitignore
+.npmignore
+.travis.yml
+gulpfile.js
+jsconfig.json
+webpack.config.js
+
+# misc
+example
+src
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,27 @@
+language: node_js
+node_js:
+  - "node"
+
+sudo: false
+
+cache:
+  directories:
+    - node_modules
+
+before_install:
+  - npm config set spin false
+
+install:
+  - npm install
+
+script:
+  - npm test
+
+before_deploy:
+  - npm run build
+
+deploy:
+  provider: npm
+  api_key: $NPM_API_KEY
+  on:
+    tags: true
diff --git a/__tests__/react-tree-test.js b/__tests__/react-tree-test.js
@@ -0,0 +1,28 @@
+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'
+
+describe('ReactTree', () => {
+  it('should run be rendered', () => {
+    const reactTree = TestUtils.renderIntoDocument(
+      <ReactTree tree={PROJECT_TREE} />
+    );
+
+    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} />
+    );
+
+    expect(handleOnChanged).toBeCalled();
+  });
+});
diff --git a/example/app.js b/example/app.js
@@ -1,4 +1,32 @@
-import ReactTree from '../lib/react-tree';
+import 'jstree/dist/themes/default/style.min.css';
+import 'jstree/dist/themes/default-dark/style.min.css';
+
 import ReactDOM from 'react-dom';
+import ReactTree from '../src/react-tree';
+import { PROJECT_TREE } from './project-tree';
+
+class ExampleApp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { items: [] };
+
+    this.handleOnChanged = this.handleOnChanged.bind(this);
+  }
+  handleOnChanged(changedItems) {
+    this.setState({
+      items: changedItems.map(item => item.text).join(', ')
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <ReactTree tree={PROJECT_TREE} onChanged={this.handleOnChanged} />
+        <div>Selected items: {this.state.items}</div>
+      </div>
+    );
+  }
+}
 
-ReactDOM.render(<ReactTree />, document.getElementById('app'));
+ReactDOM.render(<ExampleApp />, document.getElementById('app'));
diff --git a/example/index.html b/example/index.html
@@ -2,7 +2,8 @@
 <html>
 
 <head>
-  <title>example react-tree</title>
+  <title>Example App</title>
+  <link rel="stylesheet" type="text/css" href="assets/styles.css">
 
   <script src="https://fb.me/react-15.3.0.js"></script>
   <script src="https://fb.me/react-dom-15.3.0.js"></script>
@@ -11,7 +12,7 @@
 <body>
   <div id="app"></div>
 
-  <script src="bundle.js"></script>
+  <script src="assets/bundle.js"></script>
 </body>
 
 </html>
diff --git a/example/project-tree.js b/example/project-tree.js
@@ -0,0 +1,41 @@
+export const PROJECT_TREE = [
+  {
+    text: '.vscode',
+    state: {
+      opened: true,
+      selected: true
+    },
+    children: [
+      { text: 'settings.json', icon: 'jstree-file' }
+    ]
+  },
+  {
+    text: 'example',
+    state: {
+      opened: true,
+    },
+    children: [
+      { text: 'app.js', icon: 'jstree-file' },
+      { text: 'index.html', icon: 'jstree-file' }
+    ]
+  },
+  {
+    text: 'lib',
+    state: {
+      opened: true,
+    },
+    children: [
+      { text: 'react-tree.js', icon: 'jstree-file' }
+    ]
+  },
+  {
+    text: 'node_modules',
+    children: []
+  },
+  { text: '.babelrc', icon: 'jstree-file' },
+  { text: '.gitignore', icon: 'jstree-file' },
+  { text: 'jsconfig.json', icon: 'jstree-file' },
+  { text: 'LICENSE', icon: 'jstree-file' },
+  { text: 'package.json', icon: 'jstree-file' },
+  { text: 'webpack.config.js', icon: 'jstree-file' }
+];
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,10 @@
+const gulp = require('gulp');
+const babel = require('gulp-babel');
+
+gulp.task('build', () => {
+  return gulp.src('src/react-tree.js')
+    .pipe(babel({
+      presets: ['es2015', 'react']
+    }))
+    .pipe(gulp.dest('lib'));
+});
diff --git a/lib/react-tree.js b/lib/react-tree.js
diff --git a/package.json b/package.json
@@ -2,10 +2,11 @@
   "name": "react-tree",
   "version": "0.0.0",
   "description": "The react component to present data as a tree",
-  "main": ".",
+  "main": "./lib/react-tree.js",
   "scripts": {
     "start": "webpack-dev-server --port=3000",
-    "test": "."
+    "test": "jest",
+    "build": "gulp build"
   },
   "repository": {
     "type": "git",
@@ -33,12 +34,20 @@
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
-    "jstree": "^3.3.1",
+    "css-loader": "^0.23.1",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
+    "jest-cli": "^14.1.0",
+    "react-addons-test-utils": "^15.3.0",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
+    "jstree": "^3.3.1",
     "react": "^15.3.0",
     "react-dom": "^15.3.0"
+  },
+  "jest": {
+    "automock": false
   }
 }
diff --git a/src/react-tree.js b/src/react-tree.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import $ from 'jquery';
+import 'jstree';
+
+export default class ReactTree extends React.Component {
+  componentDidMount() {
+    $(ReactDOM.findDOMNode(this))
+      .on('changed.jstree', (e, data) => {
+        if (this.props.onChanged) {
+          this.props.onChanged(data.selected.map(
+            item => data.instance.get_node(item)
+          ));
+        }
+      })
+      .jstree({
+        core: {
+          data: this.props.tree
+        }
+      });
+  }
+
+  render() {
+    return (<div></div>);
+  }
+}
+
+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`)
+  }
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,27 +1,35 @@
 const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
     entry: './example/app.js',
     output: {
         filename: 'bundle.js',
-        path: __dirname + '/example',
-        publicPath: '/example/',
+        path: __dirname + '/example/assets',
+        publicPath: '/example/assets/',
     },
     module: {
         loaders: [
-            {
-                test: /\.css$/,
-                loader: 'style!css'
-            },
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: 'babel-loader',
+            },
+            {
+                test: /\.css$/,
+                loader: ExtractTextPlugin.extract('css-loader')
+            },
+            {
+                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
+                loader: 'file-loader'
             }
         ]
     },
     externals: {
         'react': 'React',
         'react-dom': 'ReactDOM'
-    }
+    },
+    plugins: [
+        new ExtractTextPlugin('styles.css')
+    ]
 };
