Skip to content

Commit 55edb66

Browse files
wwaynewwayne
committed
Using decorators for static method and tests
Progress w
1 parent acd6d17 commit 55edb66

File tree

10 files changed

+310
-204
lines changed

10 files changed

+310
-204
lines changed

‎.babelrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"presets": ["es2015", "react"]
2+
"presets": ["es2015", "react", "stage-0"],
3+
"plugins": ["transform-decorators-legacy"],
34
}

‎Makefile‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,18 @@ EXAMPLE_SRC = example/src
44
STANDALONE = standalone
55
SRC = src
66
DIST = dist
7+
TEST = test/*.test.js
8+
MOCHA_OPTS = --compilers js:babel-core/register --require test/setup.js -b --timeout 20000 --reporter spec
79

810
lint:
9-
@echo linting...
11+
@echo Linting...
1012
@$(NODE_BIN)/standard --verbose | $(NODE_BIN)/snazzy src/index.js
1113

12-
convertCss:
14+
test: lint
15+
@echo Start testing...
16+
@$(NODE_BIN)/mocha $(MOCHA_OPTS) $(TEST)
17+
18+
convertCSS:
1319
@echo Converting css...
1420
@node bin/transferSass.js
1521

@@ -24,7 +30,7 @@ dev:
2430
@echo starting dev server...
2531
@rm -rf $(EXAMPLE_DIST)
2632
@mkdir -p $(EXAMPLE_DIST)
27-
@make convertCss
33+
@make convertCSS
2834
@$(NODE_BIN)/watchify -t babelify $(EXAMPLE_SRC)/index.js -o $(EXAMPLE_DIST)/index.js -dv
2935
@$(NODE_BIN)/node-sass $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
3036
@$(NODE_BIN)/node-sass -w $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
@@ -44,10 +50,10 @@ deployCSS:
4450
deploy: lint
4551
@echo Deploy...
4652
@rm -rf dist && mkdir dist
47-
@make convertCss
53+
@make convertCSS
4854
@make deployCSS
4955
@make deployJS
5056
@make genStand
5157
@echo success!
5258

53-
.PHONY: lint convertCss genStand dev deployJS deployCSS deploy
59+
.PHONY: lint convertCSS genStand dev deployJS deployCSS deploy

‎package.json‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "react tooltip component",
55
"main": "index.js",
66
"scripts": {
7-
"test": "make lint",
7+
"test": "make test",
88
"dev": "make start",
99
"deploy": "make deploy"
1010
},
@@ -46,15 +46,26 @@
4646
},
4747
"devDependencies": {
4848
"babel-cli": "^6.5.1",
49+
"babel-core": "^6.9.1",
4950
"babel-eslint": "^4.1.1",
51+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
5052
"babel-plugin-transform-runtime": "^6.5.0",
5153
"babel-preset-es2015": "^6.5.0",
5254
"babel-preset-react": "^6.5.0",
55+
"babel-preset-stage-0": "^6.5.0",
5356
"babelify": "^7.2.0",
5457
"browserify": "^13.0.0",
5558
"browserify-shim": "^3.8.12",
59+
"chai": "^3.5.0",
60+
"chai-enzyme": "^0.5.0",
61+
"cheerio": "^0.20.0",
62+
"enzyme": "^2.3.0",
5663
"http-server": "^0.8.0",
64+
"jsdom": "^9.2.1",
65+
"mocha": "^2.5.3",
5766
"node-sass": "^3.3.2",
67+
"react-addons-test-utils": "^15.1.0",
68+
"sinon": "^1.17.4",
5869
"snazzy": "^2.0.1",
5970
"standard": "^5.2.2",
6071
"tape": "^4.2.0",

‎src/constant.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default {
2+
3+
GLOBAL: {
4+
HIDE: '__react_tooltip_hide_event',
5+
REBUILD: '__react_tooltip_rebuild_event'
6+
}
7+
}

‎src/decorators/customEvent.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* Custom events to control showing and hiding of tooltip
3+
*
4+
* @attributes
5+
* - `event` {String}
6+
* - `eventOff` {String}
7+
*/
8+
9+
const checkStatus = function (e) {
10+
const {show} = this.state
11+
const dataIsCapture = e.currentTarget.getAttribute('data-iscapture')
12+
const isCapture = dataIsCapture && dataIsCapture === 'true' || this.state.isCapture
13+
const currentItem = e.currentTarget.getAttribute('currentItem')
14+
15+
if (!isCapture) e.stopPropagation()
16+
if (show && currentItem === 'true') {
17+
this.hideTooltip(e)
18+
} else {
19+
e.currentTarget.setAttribute('currentItem', 'true')
20+
21+
this.showTooltip(e)
22+
setUntargetItems(e.currentTarget)
23+
}
24+
}
25+
26+
const setUntargetItems = function (currentTarget) {
27+
let targetArray = this.getTargetArray()
28+
for (let i = 0; i < targetArray.length; i++) {
29+
if (currentTarget !== targetArray[i]) {
30+
targetArray[i].setAttribute('currentItem', 'false')
31+
} else {
32+
targetArray[i].setAttribute('currentItem', 'true')
33+
}
34+
}
35+
}
36+
37+
export default function (target) {
38+
target.prototype.isCustomEvent = function (ele) {
39+
const {event} = this.state
40+
return event || ele.getAttribute('data-event')
41+
}
42+
43+
/* Bind listener for custom event */
44+
target.prototype.customBindListener = function () {
45+
const {event, eventOff} = this.state
46+
const dataEvent = event || target.getAttribute('data-event')
47+
const dataEventOff = eventOff || target.getAttribute('data-event-off')
48+
49+
target.removeEventListener(dataEvent, checkStatus)
50+
target.addEventListener(dataEvent, checkStatus, false)
51+
if (dataEventOff) {
52+
target.removeEventListener(dataEventOff, this.hideTooltip)
53+
target.addEventListener(dataEventOff, ::this.hideTooltip, false)
54+
}
55+
}
56+
57+
/* Unbind listener for custom event */
58+
target.prototype.customUnbindListener = function () {
59+
const {event, eventOff} = this.state
60+
const dataEvent = event || target.getAttribute('data-event')
61+
const dataEventOff = eventOff || target.getAttribute('data-event-off')
62+
63+
target.removeEventListener(dataEvent, checkStatus)
64+
if (dataEventOff) target.removeEventListener(dataEventOff, this.hideTooltip)
65+
}
66+
}

‎src/decorators/staticMethods.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Static methods for react-tooltip
3+
*/
4+
import CONSTANT from '../constant'
5+
6+
const dispatchGlobalEvent = (eventName) => {
7+
// Compatibale with IE
8+
// @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work
9+
let event
10+
11+
if (typeof window.Event === 'function') {
12+
event = new window.Event(eventName)
13+
} else {
14+
event = document.createEvent('Event')
15+
event.initEvent(eventName, false, true)
16+
}
17+
18+
window.dispatchEvent(event)
19+
}
20+
21+
export default function (target) {
22+
/**
23+
* Hide all tooltip
24+
* @trigger ReactTooltip.hide()
25+
*/
26+
target.hide = () => {
27+
dispatchGlobalEvent(CONSTANT.GLOBAL.HIDE)
28+
}
29+
30+
/**
31+
* Rebuild all tooltip
32+
* @trigger ReactTooltip.rebuild()
33+
*/
34+
target.rebuild = () => {
35+
dispatchGlobalEvent(CONSTANT.GLOBAL.REBUILD)
36+
}
37+
}

‎src/decorators/windowListener.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* Events that should be bound to the window
3+
*/
4+
import CONSTANT from '../constant'
5+
6+
export default function (target) {
7+
target.prototype.bindWindowEvents = function () {
8+
// ReactTooltip.hide
9+
window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip)
10+
window.addEventListener(CONSTANT.GLOBAL.HIDE, ::this.hideTooltip, false)
11+
12+
// ReactTooltip.rebuild
13+
window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
14+
window.addEventListener(CONSTANT.GLOBAL.REBUILD, ::this.globalRebuild, false)
15+
16+
// Resize
17+
window.removeEventListener('resize', this.onWindowResize)
18+
window.addEventListener('resize', ::this.onWindowResize, false)
19+
}
20+
21+
target.prototype.unbindWindowEvents = function () {
22+
window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip)
23+
window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
24+
window.removeEventListener('resize', this.onWindowResize)
25+
}
26+
}

0 commit comments

Comments
 (0)