Improve structure

Makefile

@@ -26,15 +26,23 @@ genStand:
 @$(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)/watchify -t babelify $(EXAMPLE_SRC)/index.js -o $(EXAMPLE_DIST)/index.js -dv
-@$(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
-@$(NODE_BIN)/http-server example -p 8888 -s -o
+@$(NODE_BIN)/concurrently --kill-others "make devJS" "make devCSS" "make devServer"
 
 deployJS:
 @echo Generating deploy JS files...
@@ -56,4 +64,4 @@ deploy: lint
 @make genStand
 @echo success!
 
-.PHONY: lint convertCSS genStand dev deployJS deployCSS deploy
+.PHONY: lint convertCSS genStand devJS devCSS devServer dev deployJS deployCSS deploy

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,14 +152,23 @@ 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>
+ <a data-for='customer-event' data-tip='customer show' data-event='click'>( •̀д•́)</a>
  <ReactTooltip id='customer-event' />
  </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'>( •̀д•́)</a>\n" +
+ "<ReactTooltip />"}</p>
+ </div>
+ <div>
+ <p>{"<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +
  "<ReactTooltip/>"}</p>
  </div>
  </pre>

package.json

@@ -59,6 +59,7 @@
  "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",
  "jsdom": "^9.2.1",

src/decorators/customEvent.js

@@ -0,0 +1,64 @@
+/**
+ * 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.state.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 = event || ele.getAttribute('data-event')
+ const dataEventOff = eventOff || ele.getAttribute('data-event-off')
+
+ ele.removeEventListener(dataEvent, checkStatus)
+ ele.addEventListener(dataEvent, checkStatus.bind(this, dataEventOff), false)
+ if (dataEventOff) {
+ ele.removeEventListener(dataEventOff, this.hideTooltip)
+ ele.addEventListener(dataEventOff, ::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)
+ }
+}