Make compatible with 'React v15.5.0'

storybook-eol · Jun 28, 2017 · 832d812 · 832d812
2 parents 3046fc0 + 14b593c
commit 832d812
Show file tree

Hide file tree

Showing 14 changed files with 607 additions and 585 deletions.
diff --git a/README.md b/README.md
@@ -82,27 +82,27 @@ ReactDOM.render(<TreeExample/>, content);
 ### Prop Values
 
 #### data
-`React.PropTypes.oneOfType([React.PropTypes.object,React.PropTypes.array]).isRequired`
+`PropTypes.oneOfType([PropTypes.object,PropTypes.array]).isRequired`
 
 Data that drives the tree view. State-driven effects can be built by manipulating the attributes in this object. Also supports an array for multiple nodes at the root level. An example can be found in `example/data.js`
 
 #### onToggle
-`React.PropTypes.func`
+`PropTypes.func`
 
 Callback function when a node is toggled / clicked. Passes 2 attributes: the data node and it's toggled boolean state.
 
 #### style
-`React.PropTypes.object`
+`PropTypes.object`
 
 Sets the treeview styling. Defaults to `src/themes/default`.
 
 #### animations
-`React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.bool])`
+`PropTypes.oneOfType([PropTypes.object, PropTypes.bool])`
 
 Sets the treeview animations. Set to `false` if you want to turn off animations. See [velocity-react](https://github.com/twitter-fabric/velocity-react) for more details. Defaults to `src/themes/animations`.
 
 #### decorators
-`React.PropTypes.object`
+`PropTypes.object`
 
 Decorates the treeview. Here you can use your own Container, Header, Toggle and Loading components. Defaults to `src/decorators`. See example below:
 

diff --git a/example/app.js b/example/app.js
@@ -1,8 +1,9 @@
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { StyleRoot } from 'radium';
+import {StyleRoot} from 'radium';
 import {Treebeard, decorators} from '../src/index';
 
 import data from './data';
@@ -12,87 +13,96 @@ import * as filters from './filter';
 const HELP_MSG = 'Select A Node To See Its Data Structure Here...';
 
 // Example: Customising The Header Decorator To Include Icons
-decorators.Header = (props) => {
-    const style = props.style;
-    const iconType = props.node.children ? 'folder' : 'file-text';
+decorators.Header = ({style, node}) => {
+    const iconType = node.children ? 'folder' : 'file-text';
     const iconClass = `fa fa-${iconType}`;
-    const iconStyle = { marginRight: '5px' };
+    const iconStyle = {marginRight: '5px'};
+
     return (
         <div style={style.base}>
             <div style={style.title}>
                 <i className={iconClass} style={iconStyle}/>
-                {props.node.name}
+
+                {node.name}
             </div>
         </div>
     );
 };
 
 class NodeViewer extends React.Component {
-    constructor(props){
-        super(props);
-    }
-    render(){
+    render() {
         const style = styles.viewer;
         let json = JSON.stringify(this.props.node, null, 4);
-        if(!json){ json = HELP_MSG; }
-        return (
-            <div style={style.base}>
-                {json}
-            </div>
-        );
+
+        if (!json) {
+            json = HELP_MSG;
+        }
+
+        return <div style={style.base}>{json}</div>;
     }
 }
-
 NodeViewer.propTypes = {
-    node: React.PropTypes.object
+    node: PropTypes.object
 };
 
 class DemoTree extends React.Component {
-    constructor(props){
-        super(props);
+    constructor() {
+        super();
+
         this.state = {data};
         this.onToggle = this.onToggle.bind(this);
     }
-    onToggle(node, toggled){
-        if(this.state.cursor){this.state.cursor.active = false;}
+
+    onToggle(node, toggled) {
+        const {cursor} = this.state;
+
+        if (cursor) {
+            cursor.active = false;
+        }
+
         node.active = true;
-        if(node.children){ node.toggled = toggled; }
-        this.setState({ cursor: node });
+        if (node.children) {
+            node.toggled = toggled;
+        }
+
+        this.setState({cursor: node});
     }
-    onFilterMouseUp(e){
+
+    onFilterMouseUp(e) {
         const filter = e.target.value.trim();
-        if(!filter){ return this.setState({data}); }
+        if (!filter) {
+            return this.setState({data});
+        }
         var filtered = filters.filterTree(data, filter);
         filtered = filters.expandFilteredNodes(filtered, filter);
         this.setState({data: filtered});
     }
-    render(){
+
+    render() {
+        const {data: stateData, cursor} = this.state;
+
         return (
             <StyleRoot>
                 <div style={styles.searchBox}>
                     <div className="input-group">
                         <span className="input-group-addon">
-                          <i className="fa fa-search"></i>
+                          <i className="fa fa-search"/>
                         </span>
-                        <input type="text"
-                            className="form-control"
-                            placeholder="Search the tree..."
-                            onKeyUp={this.onFilterMouseUp.bind(this)}
-                        />
+                        <input className="form-control"
+                               onKeyUp={this.onFilterMouseUp.bind(this)}
+                               placeholder="Search the tree..."
+                               type="text"/>
                     </div>
                 </div>
                 <div style={styles.component}>
-                    <Treebeard
-                        data={this.state.data}
-                        onToggle={this.onToggle}
-                        decorators={decorators}
-                    />
+                    <Treebeard data={stateData}
+                               decorators={decorators}
+                               onToggle={this.onToggle}/>
                 </div>
                 <div style={styles.component}>
-                    <NodeViewer node={this.state.cursor}/>
+                    <NodeViewer node={cursor}/>
                 </div>
             </StyleRoot>
-
         );
     }
 }

diff --git a/package.json b/package.json
@@ -7,13 +7,13 @@
     "prepublish": "npm run lib",
     "lib": "npm run babel",
     "babel": "rimraf lib && babel src/ -d lib/",
-    "test": "./node_modules/.bin/karma start karma.conf.js",
-    "test-travis": "./node_modules/karma/bin/karma start --browsers Firefox --single-run",
+    "test": "karma start karma.conf.js",
+    "test-travis": "karma start --browsers Firefox --single-run",
     "example": "webpack-dev-server --content-base ./example/ --config ./example/webpack.config.js"
   },
   "peerDependencies": {
-    "react": "^0.14 || ^15.0",
-    "react-dom": "^0.14 || ^15.0"
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
   },
   "repository": {
     "type": "git",
@@ -60,9 +60,8 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.3",
     "node-libs-browser": "^0.5.3",
-    "react": "^0.14.7",
-    "react-addons-test-utils": "^0.14.7",
-    "react-dom": "^0.14.7",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
     "react-hot-loader": "^1.3.0",
     "rimraf": "^2.4.4",
     "sinon": "uberVU/Sinon.JS.git",
@@ -73,8 +72,9 @@
   "dependencies": {
     "babel-runtime": "^5.8.29",
     "deep-equal": "^1.0.1",
-    "radium": "^0.18.0",
+    "prop-types": "^15.5.8",
+    "radium": "^0.19.0",
     "shallowequal": "^0.2.2",
-    "velocity-react": "^1.1.2"
+    "velocity-react": "^1.3.1"
   }
 }
diff --git a/src/components/decorators.js b/src/components/decorators.js
@@ -1,108 +1,100 @@
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import Radium from 'radium';
 import {VelocityComponent} from 'velocity-react';
 
-const Loading = (props) => {
-    return (
-        <div style={props.style}>
-            loading...
-        </div>
-    );
+const Loading = ({style}) => {
+    return <div style={style}>loading...</div>;
 };
-
 Loading.propTypes = {
-    style: React.PropTypes.object
+    style: PropTypes.object
 };
 
-const Toggle = (props) => {
-    const style = props.style;
-    const height = style.height;
-    const width = style.width;
-    let midHeight = height * 0.5;
-    let points = `0,0 0,${height} ${width},${midHeight}`;
+const Toggle = ({style}) => {
+    const {height, width} = style;
+    const midHeight = height * 0.5;
+    const points = `0,0 0,${height} ${width},${midHeight}`;
+
     return (
         <div style={style.base}>
             <div style={style.wrapper}>
                 <svg height={height} width={width}>
-                    <polygon
-                        points={points}
-                        style={style.arrow}
-                    />
+                    <polygon points={points}
+                             style={style.arrow}/>
                 </svg>
             </div>
         </div>
     );
 };
-
 Toggle.propTypes = {
-    style: React.PropTypes.object
+    style: PropTypes.object
 };
 
-const Header = (props) => {
-    const style = props.style;
+const Header = ({node, style}) => {
     return (
         <div style={style.base}>
             <div style={style.title}>
-                {props.node.name}
+                {node.name}
             </div>
         </div>
     );
 };
-
 Header.propTypes = {
-    style: React.PropTypes.object,
-    node: React.PropTypes.object.isRequired
+    style: PropTypes.object,
+    node: PropTypes.object.isRequired
 };
 
 @Radium
 class Container extends React.Component {
-    constructor(props){
-        super(props);
-    }
-    render(){
+    render() {
         const {style, decorators, terminal, onClick, node} = this.props;
+
         return (
-            <div
-                ref="clickable"
-                onClick={onClick}
-                style={style.container}>
-                { !terminal ? this.renderToggle() : null }
-                <decorators.Header
-                    node={node}
-                    style={style.header}
-                />
+            <div onClick={onClick}
+                 ref={ref => this.clickableRef = ref}
+                 style={style.container}>
+                {!terminal ? this.renderToggle() : null}
+
+                <decorators.Header node={node}
+                                   style={style.header}/>
             </div>
         );
     }
-    renderToggle(){
-        const animations = this.props.animations;
-        if(!animations){ return this.renderToggleDecorator(); }
+
+    renderToggle() {
+        const {animations} = this.props;
+
+        if (!animations) {
+            return this.renderToggleDecorator();
+        }
+
         return (
-            <VelocityComponent ref="velocity"
-                duration={animations.toggle.duration}
-                animation={animations.toggle.animation}>
+            <VelocityComponent animation={animations.toggle.animation}
+                               duration={animations.toggle.duration}
+                               ref={ref => this.velocityRef = ref}>
                 {this.renderToggleDecorator()}
             </VelocityComponent>
         );
     }
-    renderToggleDecorator(){
+
+    renderToggleDecorator() {
         const {style, decorators} = this.props;
-        return (<decorators.Toggle style={style.toggle}/>);
+
+        return <decorators.Toggle style={style.toggle}/>;
     }
 }
-
 Container.propTypes = {
-    style: React.PropTypes.object.isRequired,
-    decorators: React.PropTypes.object.isRequired,
-    terminal: React.PropTypes.bool.isRequired,
-    onClick: React.PropTypes.func.isRequired,
-    animations: React.PropTypes.oneOfType([
-        React.PropTypes.object,
-        React.PropTypes.bool
+    style: PropTypes.object.isRequired,
+    decorators: PropTypes.object.isRequired,
+    terminal: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+    animations: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.bool
     ]).isRequired,
-    node: React.PropTypes.object.isRequired
+    node: PropTypes.object.isRequired
 };
 
 export default {