Big Refactoring and adding possibility of className prop

.babelrc

@@ -1,3 +1,4 @@
 {
-  "stage": 0
+	"presets": ["react", "env", "stage-2"],
+	"plugins": ["transform-runtime", "transform-es2015-arrow-functions","transform-class-properties"]
 }

README.md

@@ -47,7 +47,7 @@ class MyComponent extends React.Component {
         return (
             <div>
                 <p id="text" onMouseEnter={this.showTooltip.bind(this)} onMouseLeave={this.hideTooltip.bind(this)}>This is a cool component</p>
-                <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent="#text">
+                <ToolTip className = "react__portal__tooltip" active={this.state.isTooltipActive} position="top" arrow="center" parent="#text">
                     <div>
                         <p>This is the content of the tooltip</p>
                         <img src="image.png"/>
@@ -61,9 +61,10 @@ class MyComponent extends React.Component {
 
 ### Props
 
+* `className` : string, the default tooltip css will be used if not specified. check an example in (/example/styles/main.scss)
 * `active`: boolean, the tooltip will be visible if true
 * `position`: top, right, bottom or left. Default to right
-* `arrow`: center, right, left, top or bottom (depending on the position prop). No arrow when the prop is not sepecified
+* `arrow`: center, right, left, top or bottom (depending on the position prop). No arrow when the prop is not specified
 * `tooltipTimeout`: timeout for the tooltip fade out in milliseconds. Default to 500
 * `parent`: the tooltip will be placed next to this element
 * `group`: string, necessary if you want several independent tooltips

example/.babelrc

@@ -1,3 +1,4 @@
 {
-    "stage": 0
+	"presets": ["react", "env"],
+	"plugins": ["transform-runtime", "transform-es2015-arrow-functions","transform-class-properties"]
 }

example/package.json

@@ -10,18 +10,28 @@
     "dev": "npm run build && node server.js"
   },
   "dependencies": {
-    "babel-core": "^5.8.21",
-    "babel-loader": "^5.3.2",
-    "history": "2.0.1",
+    "history": "4.7.2",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "react-router": "^1.0.3",
-    "superagent": "^1.8.3",
-    "webpack": "^1.11.0"
+    "superagent": "^3.6.0",
+    "webpack": "^3.6.0"
   },
   "devDependencies": {
-    "babel": "^5.8.21",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-runtime": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "css-hot-loader": "^1.3.1",
+    "css-loader": "^0.28.7",
+    "history": "^4.7.2",
     "react-hot-loader": "^1.2.8",
-    "webpack-dev-server": "^1.10.1"
+    "react-router": "^3.0.5",
+    "style-loader": "^0.18.2",
+    "webpack-dev-server": "^2.8.2"
   }
 }

example/src/app.js → example/src/AppContainer.js

@@ -1,11 +1,16 @@
-import React from 'react'
-import {Link} from 'react-router'
+import React,{ PropTypes, Component } from 'react'
+import { Link } from 'react-router'
 import request from 'superagent'
+import '../styles/main.scss';
 
-export default class App extends React.Component {
-    state = {
-        users: {list: []},
+class AppContainer extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            users: {list: []}
+        };
     }
+
     componentWillMount() {
         request('GET', 'https://api.dailymotion.com/users?fields=id,username,screenname,cover_250_url,avatar_120_url,videos_total,fans_total&list=recommended&limit=20')
             .send()
@@ -14,7 +19,14 @@ export default class App extends React.Component {
                 this.setState({users: res.body})
             })
     }
+
     render() {
+        const {users} = this.state;
+
+        var children = React.Children.map(this.props.children, function (child) {
+                return React.cloneElement(child, {users: users})
+        });
+
         return (
             <div>
                 <div className="row">
@@ -26,8 +38,9 @@ export default class App extends React.Component {
                         </ul>
                     </div>
                 </div>
-                {React.cloneElement(this.props.children, {users: this.state.users})}
+                {children}
             </div>
         )
     }
 }
+export default AppContainer;

example/src/list.js → example/src/ListItems.js

@@ -1,7 +1,11 @@
-import React from 'react'
-import User from './user'
+import React, { Component } from 'react'
+import User from './User'
+
+class ListItems extends Component {
+  constructor(props) {
+    super(props);
+  }
 
-export default class List extends React.Component {
   split(data, n) {
     let result = [],
         set = []
@@ -21,9 +25,11 @@ export default class List extends React.Component {
 
     return result
   }
+
   shouldComponentUpdate(nextProps) {
     return this.props.data !== nextProps.data || this.props.position !== nextProps.position || this.props.arrow !== nextProps.arrow
   }
+
   getList() {
     let list = []
     this.split(this.props.data, 4).forEach((set, i) => {
@@ -34,7 +40,10 @@ export default class List extends React.Component {
 
     return list
   }
+
   render() {
     return <div>{this.getList()}</div>
   }
-}
+};
+
+export default ListItems;

example/src/groups.js

@@ -1,7 +1,11 @@
-import React from 'react'
-import List from './list'
+import React, { Component } from 'react'
+import ListItems from './ListItems'
+
+class Groups extends Component {
+  constructor(props) {
+    super(props);
+  }
 
-export default class Groups extends React.Component {
   render() {
     return (
       <div className="row" style={{marginTop: 20}}>
@@ -14,17 +18,19 @@ export default class Groups extends React.Component {
           <div className="row">
             <h2>first group</h2>
             <div className="col-lg-12">
-              <List data={this.props.users.list.slice(0, 10)} group="first" arrow="center"/>
+              <ListItems data={this.props.users.list.slice(0, 10)} group="first" arrow="center"/>
             </div>
           </div>
           <div className="row">
             <h2>second group</h2>
             <div className="col-lg-12">
-              <List data={this.props.users.list.slice(10, 20)} group="second" arrow="center"/>
+              <ListItems data={this.props.users.list.slice(10, 20)} group="second" arrow="center"/>
             </div>
           </div>
         </div>
       </div>
     )
   }
-}
+};
+
+export default Groups;

example/src/home.js

@@ -1,46 +1,54 @@
-import React from 'react'
-import List from './list'
-import ToolTip from './../../src'
+import React, {Component} from 'react'
+import ListItems from './ListItems'
+import CardWrapper from './../../src/CardWrapper'
 
-export default class Home extends React.Component {
-  state = {
-    isTooltipActive: false,
-    isTooltipLoading: false,
-    position: 'right',
-    arrow: 'center',
-    arrowOptions: null
+ class Home extends Component {
+  constructor(props) {
+    super(props);
+    this.showTooltip = this.showTooltip.bind(this);
+    this.hideTooltip = this.hideTooltip.bind(this);
+    this.handleOnChange = this.handleOnChange.bind(this);
+    this.state = {
+      isTooltipActive: false,
+      isTooltipLoading: false,
+      position: 'right',
+      arrow: 'center',
+      arrowOptions: null
+    };
   }
+
   componentDidMount() {
     this.getArrowOptions()
   }
-  showTooltip() {
-    // this.setState({isTooltipActive: true, isTooltipLoading: true})
-    // setTimeout(() => {
-    //   this.setState({isTooltipLoading: false})
-    // }, 2000)
 
+  showTooltip() {
     this.setState({isTooltipActive: true})
   }
+
   hideTooltip() {
     this.setState({isTooltipActive: false})
   }
+
   handleOnChange() {
     let arrow = this.refs.arrow.value === 'disable' ? null : this.refs.arrow.value
     this.setState({
       position: this.refs.position.value,
       arrow
     }, this.getArrowOptions)
   }
+
   escape(html) {
     return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML
   }
+
   getBasicExample() {
     return {
-      __html: this.escape(`<ToolTip active={true} parent="#parent" position="right" arrow="center">
-  ToolTip content here
-</ToolTip>`)
+      __html: this.escape(`<CardWrapper active={true} parent="#parent" position="right" arrow="center">
+              ToolTip content here
+              </CardWrapper>`)
     }
   }
+
   getArrowOptions() {
     let node = this.refs.position
     let value = node ? node.value : 'right'
@@ -64,6 +72,7 @@ export default class Home extends React.Component {
 
     this.setState({arrowOptions})
   }
+
   render() {
     return (
       <div className="row" style={{marginTop: 20}}>
@@ -76,18 +85,18 @@ export default class Home extends React.Component {
               </div>
               <div style={{marginBottom: 20}}>
                 Result:
-                <span className="btn btn-default" id="result" onMouseEnter={::this.showTooltip} onMouseLeave={::this.hideTooltip} style={{marginLeft: 10}}>Hover me!</span>
-                <ToolTip active={this.state.isTooltipActive} parent="#result" position={this.state.position} arrow={this.state.arrow} group="result">
+                <span className="btn btn-default" id="result" onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip} style={{marginLeft: 10}}>Hover me!</span>
+                <CardWrapper  className="react__portal__tooltip" active={this.state.isTooltipActive} parent="#result" position={this.state.position} group="result">
 
                 { this.state.isTooltipLoading ? 'Loading...' : <div>Tooltip content here</div>}
-                </ToolTip>
+                </CardWrapper>
               </div>
             </div>
           </div>
           <div className="row">
             <div className="col-lg-3">
               <label htmlFor="position-select" style={{marginRight: 10}}>Position:</label>
-              <select id="position-select" onChange={::this.handleOnChange} ref="position" defaultValue="right">
+              <select id="position-select" onChange={this.handleOnChange} ref="position" defaultValue="right">
                 <option value="top">top</option>
                 <option value="right">right</option>
                 <option value="bottom">bottom</option>
@@ -96,17 +105,19 @@ export default class Home extends React.Component {
             </div>
             <div className="col-lg-3">
               <label htmlFor="arrow" style={{marginRight: 10}}>Arrow:</label>
-              <select id="arrow" onChange={::this.handleOnChange} ref="arrow" defaultValue="center">
+              <select id="arrow" onChange={this.handleOnChange} ref="arrow" defaultValue="center">
                 {this.state.arrowOptions}
               </select>
             </div>
           </div>
           <div className="row">
             <h4 className="col-lg-12">Hover the usernames to display the tooltips</h4>
           </div>
-          <List data={this.props.users.list.slice(0, 12)} position={this.state.position} arrow={this.state.arrow}/>
+          <ListItems data={this.props.users.list.slice(0, 12)} position={this.state.position} arrow={this.state.arrow}/>
         </div>
       </div>
     )
   }
 }
+
+export default Home;

example/src/index.js

@@ -1,17 +1,29 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Router, {Route} from 'react-router'
-import App from './app'
-import Home from './home'
-import Groups from './groups'
-import Style from './style'
+import {Router, Route,IndexRoute, browserHistory } from 'react-router'
+import AppContainer from './AppContainer'
+import Home from './Home'
+import Groups from './Groups'
+import Style from './Style'
 
-ReactDOM.render((
-  <Router>
-    <Route component={App}>
-      <Route path="/" component={Home}/>
-      <Route path="/groups" component={Groups}/>
-      <Route path="/style" component={Style}/>
-    </Route>
-  </Router>
-), document.querySelector('#root'))
+
+const routes = (
+
+	<Route path="/" component={ AppContainer } >
+		<IndexRoute component={Home}/>
+		<Route path="/groups" component={Groups}/>
+		<Route path="/style" component={Style}/>
+  	</Route>
+);
+
+const renderAll = () => {
+	ReactDOM.render(
+	(
+		<Router history={ browserHistory }>
+        	{routes}
+      	</Router>
+
+	), document.getElementById('root')
+	);
+};
+renderAll();