Improve structure

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["es2015", "react", "stage-0"],
+  "plugins": ["transform-decorators-legacy"],
 }

Makefile

@@ -0,0 +1,67 @@
+NODE_BIN 		 = node_modules/.bin
+EXAMPLE_DIST = example/dist
+EXAMPLE_SRC  = example/src
+STANDALONE   = standalone
+SRC          = src
+DIST         = dist
+TEST         = test/*.test.js
+MOCHA_OPTS   = --compilers js:babel-core/register --require test/setup.js -b --timeout 20000 --reporter spec
+
+lint:
+	@echo Linting...
+	@$(NODE_BIN)/standard --verbose | $(NODE_BIN)/snazzy src/index.js
+
+test: lint
+	@echo Start testing...
+	@$(NODE_BIN)/mocha $(MOCHA_OPTS) $(TEST)
+
+convertCSS:
+	@echo Converting css...
+	@node bin/transferSass.js
+
+genStand:
+	@echo Generating standard...
+	@rm -rf $(STANDALONE) && mkdir $(STANDALONE)
+	@$(NODE_BIN)/browserify -t babelify -t browserify-shim $(SRC)/index.js --standalone ReactTooltip -o $(STANDALONE)/react-tooltip.js
+	@$(NODE_BIN)/browserify -t babelify -t browserify-shim $(SRC)/index.js --standalone ReactTooltip | $(NODE_BIN)/uglifyjs > $(STANDALONE)/react-tooltip.min.js
+	@cp $(DIST)/style.js $(STANDALONE)/style.js
+
+devJS:
+	@$(NODE_BIN)/watchify -t babelify $(EXAMPLE_SRC)/index.js -o $(EXAMPLE_DIST)/index.js -dv
+
+devCSS:
+	@$(NODE_BIN)/node-sass $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
+	@$(NODE_BIN)/node-sass -w $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
+
+devServer:
+	@echo Listening 8888...
+	@$(NODE_BIN)/http-server example -p 8888 -s
+
+dev:
+	@echo starting dev server...
+	@rm -rf $(EXAMPLE_DIST)
+	@mkdir -p $(EXAMPLE_DIST)
+	@make convertCSS
+	@$(NODE_BIN)/concurrently --kill-others "make devJS" "make devCSS" "make devServer"
+
+deployJS:
+	@echo Generating deploy JS files...
+	@$(NODE_BIN)/babel $(SRC)/index.js -o $(DIST)/react-tooltip.js
+	@$(NODE_BIN)/babel $(SRC)/style.js -o $(DIST)/style.js
+	@$(NODE_BIN)/babel $(SRC)/index.js | $(NODE_BIN)/uglifyjs > $(DIST)/react-tooltip.min.js
+
+deployCSS:
+	@echo Generating deploy CSS files...
+	@cp $(SRC)/index.scss $(DIST)/react-tooltip.scss
+	@$(NODE_BIN)/node-sass --output-style compressed $(SRC)/index.scss $(DIST)/react-tooltip.min.css
+
+deploy: lint
+	@echo Deploy...
+	@rm -rf dist && mkdir dist
+	@make convertCSS
+	@make deployCSS
+	@make deployJS
+	@make genStand
+	@echo success!
+
+.PHONY: lint convertCSS genStand devJS devCSS devServer dev deployJS deployCSS deploy

bin/transferSass.js

@@ -16,6 +16,7 @@ function transferSass () {
         console.error(err)
       }
       console.log('css file has been transformed successful')
+      process.exit()
     })
   })
 }

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 0.12.0
+    version: 4.2.1
 
 dependencies:
   override:

example/src/index.js

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import {render} from 'react-dom'
-import ReactTooltip from '../../src/index'
+import ReactTooltip from '../../src'
 
 const Test = React.createClass({
 
@@ -152,18 +152,75 @@ const Test = React.createClass({
 
             <div className="example-jsx">
               <div className="side">
-                <a data-for='customer-event' data-tip='customer event' data-event='click' data-type='info'>( •̀д•́)</a>
-                <ReactTooltip id='customer-event' />
+                <a data-for='customer-event' data-tip='customer show' data-event='click focus'>( •̀д•́)</a>
+                <ReactTooltip id='customer-event' globalEventOff='click'/>
+              </div>
+
+              <div className="side">
+                <a data-for='customer-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
+                <ReactTooltip id='customer-off-event'/>
               </div>
             </div>
             <br />
             <pre className='example-pre'>
               <div>
-                <p>{"<a data-tip='customer event' data-event='click' data-type='info'>( •̀д•́)</a>\n" +
+                <p>{"<a data-tip='customer show' data-event='click focus'>( •̀д•́)</a>\n" +
+                "<ReactTooltip globalEventOff='click' />"}</p>
+              </div>
+              <div>
+                <p>{"<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +
                 "<ReactTooltip/>"}</p>
               </div>
             </pre>
           </div>
+
+          <div className="section">
+            <h4 className='title'>Theme and delay</h4>
+            <p className="sub-title"></p>
+
+            <div className="example-jsx">
+              <div className="side">
+                <a data-for='customer-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
+                <ReactTooltip id='customer-class' class='extraClass' delayHide={1000} effect='solid'/>
+              </div>
+
+              <div className="side">
+                <a data-for='customer-theme' data-tip='custom theme'>(･ω´･ )</a>
+                <ReactTooltip id='customer-theme' class='customeTheme'/>
+              </div>
+            </div>
+            <br />
+            <pre className='example-pre'>
+              <div>
+                <p>{"<a data-tip='hover on me will keep the tootlip'>(･ω´･ )́)</a>\n" +
+                "<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>\n" +
+                ".extraClass {\n" +
+                  " font-size: 20px !important;\n" +
+                  " pointer-events: auto !important;\n" +
+                  " &:hover {\n" +
+                    "visibility: visible !important;\n" +
+                    "opacity: 1 !important;\n" +
+                  " }\n" +
+                "}"}</p>
+              </div>
+
+              <div>
+                <p>{"<a data-tip='custom theme'>(･ω´･ )́)</a>\n" +
+                "<ReactTooltip class='customeTheme'/>\n" +
+                " .customeTheme {\n" +
+                  " color: #ff6e00 !important;\n" +
+                  " background-color: orange !important;\n" +
+                  " &.place-top {\n" +
+                    " &:after {\n" +
+                      " border-top-color: orange !important;\n" +
+                      " border-top-style: solid !important;\n" +
+                      " border-top-width: 6px !important;\n" +
+                    " }\n" +
+                  " }\n" +
+                "}"}</p>
+              </div>
+            </pre>
+          </div>
         </section>
       </div>
     )

example/src/index.scss

@@ -206,3 +206,25 @@ html, body{
     line-height: 30px;
   }
 }
+
+// Extra class for demonstration
+.extraClass {
+  font-size: 20px !important;
+  pointer-events: auto !important;
+  &:hover {
+    visibility: visible !important;
+    opacity: 1 !important;
+ }
+}
+
+.customeTheme {
+  color: #ff6e00 !important;
+  background-color: orange !important;
+  &.place-top {
+    &:after {
+      border-top-color: orange !important;
+      border-top-style: solid !important;
+      border-top-width: 6px !important;
+    }
+  }
+}

package.json

@@ -1,25 +1,12 @@
 {
   "name": "react-tooltip",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "react tooltip component",
   "main": "index.js",
   "scripts": {
-    "check": "standard --verbose | snazzy src/index.js",
-    "test": "npm run check",
-    "devjs": "node bin/transferSass.js & watchify -t babelify ./example/src/index.js -o ./example/dist/index.js -dv",
-    "devcss": "node-sass example/src/index.scss example/dist/index.css & node-sass -w example/src/index.scss example/dist/index.css",
-    "predev": "rm -rf example/dist",
-    "dev": "mkdir -p ./example/dist & npm run devjs & npm run devcss & http-server example -p 8888 -s -o",
-    "deployjs": "babel src/index.js -o dist/react-tooltip.js && babel src/style.js -o dist/style.js && npm run deployminjs",
-    "deployminjs": "babel src/index.js | uglifyjs > dist/react-tooltip.min.js",
-    "predeploycss": "cp src/index.scss dist/react-tooltip.scss",
-    "deploycss": "node-sass --output-style compressed src/index.scss dist/react-tooltip.min.css",
-    "predeploy": "rm -rf dist",
-    "deploy": "mkdir dist & npm run deployjs & npm run deploycss & npm run standjs",
-    "prestandjs": "rm -rf standalone",
-    "standjs": "mkdir standalone && browserify -t babelify -t browserify-shim src/index.js --standalone ReactTooltip -o standalone/react-tooltip.js & npm run standminjs",
-    "standminjs": "browserify -t babelify -t browserify-shim src/index.js --standalone ReactTooltip | uglifyjs > standalone/react-tooltip.min.js",
-    "poststandjs": "cp ./dist/style.js ./standalone/style.js"
+    "test": "make test",
+    "dev": "make start",
+    "deploy": "make deploy"
   },
   "standard": {
     "parser": "babel-eslint",
@@ -59,15 +46,27 @@
   },
   "devDependencies": {
     "babel-cli": "^6.5.1",
+    "babel-core": "^6.9.1",
     "babel-eslint": "^4.1.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.5.0",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
     "babelify": "^7.2.0",
     "browserify": "^13.0.0",
     "browserify-shim": "^3.8.12",
+    "chai": "^3.5.0",
+    "chai-enzyme": "^0.5.0",
+    "cheerio": "^0.20.0",
+    "concurrently": "^2.1.0",
+    "enzyme": "^2.3.0",
     "http-server": "^0.8.0",
-    "node-sass": "^3.3.2",
+    "jsdom": "^9.2.1",
+    "mocha": "^2.5.3",
+    "node-sass": "^3.7.0",
+    "react-addons-test-utils": "^15.1.0",
+    "sinon": "^1.17.4",
     "snazzy": "^2.0.1",
     "standard": "^5.2.2",
     "tape": "^4.2.0",

src/constant.js

@@ -0,0 +1,8 @@
+export default {
+
+  GLOBAL: {
+    HIDE: '__react_tooltip_hide_event',
+    REBUILD: '__react_tooltip_rebuild_event',
+    SHOW: '__react_tooltip_show_event'
+  }
+}

src/decorators/customEvent.js

@@ -0,0 +1,68 @@
+/**
+ * Custom events to control showing and hiding of tooltip
+ *
+ * @attributes
+ * - `event` {String}
+ * - `eventOff` {String}
+ */
+
+const checkStatus = function (dataEventOff, e) {
+  const {show} = this.state
+  const dataIsCapture = e.currentTarget.getAttribute('data-iscapture')
+  const isCapture = dataIsCapture && dataIsCapture === 'true' || this.props.isCapture
+  const currentItem = e.currentTarget.getAttribute('currentItem')
+
+  if (!isCapture) e.stopPropagation()
+  if (show && currentItem === 'true') {
+    if (!dataEventOff) this.hideTooltip(e)
+  } else {
+    e.currentTarget.setAttribute('currentItem', 'true')
+    setUntargetItems(e.currentTarget, this.getTargetArray())
+    this.showTooltip(e)
+  }
+}
+
+const setUntargetItems = function (currentTarget, targetArray) {
+  for (let i = 0; i < targetArray.length; i++) {
+    if (currentTarget !== targetArray[i]) {
+      targetArray[i].setAttribute('currentItem', 'false')
+    } else {
+      targetArray[i].setAttribute('currentItem', 'true')
+    }
+  }
+}
+
+export default function (target) {
+  target.prototype.isCustomEvent = function (ele) {
+    const {event} = this.state
+    return event || ele.getAttribute('data-event')
+  }
+
+  /* Bind listener for custom event */
+  target.prototype.customBindListener = function (ele) {
+    const {event, eventOff} = this.state
+    const dataEvent = ele.getAttribute('data-event') || event
+    const dataEventOff = ele.getAttribute('data-event-off') || eventOff
+
+    dataEvent.split(' ').forEach(event => {
+      ele.removeEventListener(event, checkStatus)
+      ele.addEventListener(event, checkStatus.bind(this, dataEventOff), false)
+    })
+    if (dataEventOff) {
+      dataEventOff.split(' ').forEach(event => {
+        ele.removeEventListener(event, this.hideTooltip)
+        ele.addEventListener(event, ::this.hideTooltip, false)
+      })
+    }
+  }
+
+  /* Unbind listener for custom event */
+  target.prototype.customUnbindListener = function (ele) {
+    const {event, eventOff} = this.state
+    const dataEvent = event || ele.getAttribute('data-event')
+    const dataEventOff = eventOff || ele.getAttribute('data-event-off')
+
+    ele.removeEventListener(dataEvent, checkStatus)
+    if (dataEventOff) ele.removeEventListener(dataEventOff, this.hideTooltip)
+  }
+}

src/decorators/isCapture.js

@@ -0,0 +1,10 @@
+/**
+ * Util method to judge if it should follow capture model
+ */
+
+export default function (target) {
+  target.prototype.isCapture = function (currentTarget) {
+    const dataIsCapture = currentTarget.getAttribute('data-iscapture')
+    return dataIsCapture && dataIsCapture === 'true' || this.props.isCapture || false
+  }
+}

src/decorators/staticMethods.js

@@ -0,0 +1,44 @@
+/**
+ * Static methods for react-tooltip
+ */
+import CONSTANT from '../constant'
+
+const dispatchGlobalEvent = (eventName) => {
+  // Compatibale with IE
+  // @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work
+  let event
+
+  if (typeof window.Event === 'function') {
+    event = new window.Event(eventName)
+  } else {
+    event = document.createEvent('Event')
+    event.initEvent(eventName, false, true)
+  }
+
+  window.dispatchEvent(event)
+}
+
+export default function (target) {
+  /**
+   * Hide all tooltip
+   * @trigger ReactTooltip.hide()
+   */
+  target.hide = () => {
+    dispatchGlobalEvent(CONSTANT.GLOBAL.HIDE)
+  }
+
+  /**
+   * Rebuild all tooltip
+   * @trigger ReactTooltip.rebuild()
+   */
+  target.rebuild = () => {
+    dispatchGlobalEvent(CONSTANT.GLOBAL.REBUILD)
+  }
+
+  target.prototype.globalRebuild = function () {
+    if (this.mount) {
+      this.unbindListener()
+      this.bindListener()
+    }
+  }
+}