react-tooltip
Advanced tools
Comparing version 0.3.1 to 0.3.2
@@ -25,5 +25,52 @@ 'use strict'; | ||
effect: _react2['default'].PropTypes.string, | ||
positon: _react2['default'].PropTypes.object | ||
positon: _react2['default'].PropTypes.object }, | ||
getInitialState: function getInitialState() { | ||
return { | ||
show: false, | ||
placeholder: '', | ||
x: 'NONE', | ||
y: 'NONE', | ||
place: '', | ||
type: '', | ||
effect: '', | ||
position: {} }; | ||
}, | ||
componentDidMount: function componentDidMount() { | ||
this._updatePosition(); | ||
this.bindListener(); | ||
}, | ||
componentWillUnmount: function componentWillUnmount() { | ||
this.unbindListener(); | ||
}, | ||
componentWillUpdate: function componentWillUpdate() { | ||
this.unbindListener(); | ||
}, | ||
componentDidUpdate: function componentDidUpdate() { | ||
this._updatePosition(); | ||
this.bindListener(); | ||
}, | ||
bindListener: function bindListener() { | ||
var targetArray = document.querySelectorAll('[data-tip]'); | ||
for (var i = 0; i < targetArray.length; i++) { | ||
targetArray[i].addEventListener('mouseenter', this.showTooltip, false); | ||
targetArray[i].addEventListener('mousemove', this.updateTooltip, false); | ||
targetArray[i].addEventListener('mouseleave', this.hideTooltip, false); | ||
} | ||
}, | ||
unbindListener: function unbindListener() { | ||
var targetArray = document.querySelectorAll('[data-tip]'); | ||
for (var i = 0; i < targetArray.length; i++) { | ||
targetArray[i].removeEventListener('mouseenter', this.showTooltip); | ||
targetArray[i].removeEventListener('mousemove', this.updateTooltip); | ||
targetArray[i].removeEventListener('mouseleave', this.hideTooltip); | ||
} | ||
}, | ||
_updatePosition: function _updatePosition() { | ||
@@ -73,40 +120,2 @@ var tipWidth = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientWidth : 0; | ||
getInitialState: function getInitialState() { | ||
return { | ||
show: false, | ||
placeholder: '', | ||
x: 'NONE', | ||
y: 'NONE', | ||
place: '', | ||
type: '', | ||
effect: '', | ||
position: {} | ||
}; | ||
}, | ||
componentDidMount: function componentDidMount() { | ||
this._updatePosition(); | ||
var targetArray = document.querySelectorAll('[data-tip]'); | ||
for (var i = 0; i < targetArray.length; i++) { | ||
targetArray[i].addEventListener('mouseenter', this.showTooltip, false); | ||
targetArray[i].addEventListener('mousemove', this.updateTooltip, false); | ||
targetArray[i].addEventListener('mouseleave', this.hideTooltip, false); | ||
} | ||
}, | ||
componentWillUnmount: function componentWillUnmount() { | ||
var targetArray = document.querySelectorAll('[data-tip]'); | ||
for (var i = 0; i < targetArray.length; i++) { | ||
targetArray[i].removeEventListener('mouseenter', this.showTooltip); | ||
targetArray[i].removeEventListener('mousemove', this.updateTooltip); | ||
targetArray[i].removeEventListener('mouseleave', this.hideTooltip); | ||
} | ||
}, | ||
componentDidUpdate: function componentDidUpdate() { | ||
this._updatePosition(); | ||
}, | ||
showTooltip: function showTooltip(e) { | ||
@@ -118,4 +127,3 @@ this.setState({ | ||
effect: e.target.getAttribute('data-effect') ? e.target.getAttribute('data-effect') : this.props.effect ? this.props.effect : 'float', | ||
position: e.target.getAttribute('data-position') ? e.target.getAttribute('data-position') : this.props.position ? this.props.position : {} | ||
}); | ||
position: e.target.getAttribute('data-position') ? e.target.getAttribute('data-position') : this.props.position ? this.props.position : {} }); | ||
this.updateTooltip(e); | ||
@@ -169,6 +177,15 @@ }, | ||
x: 'NONE', | ||
y: 'NONE' | ||
}); | ||
y: 'NONE' }); | ||
}, | ||
render: function render() { | ||
var tooltipClass = (0, _classnames2['default'])('reactTooltip', { 'show': this.state.show }, { 'place-top': this.state.place === 'top' }, { 'place-bottom': this.state.place === 'bottom' }, { 'place-left': this.state.place === 'left' }, { 'place-right': this.state.place === 'right' }, { 'type-dark': this.state.type === 'dark' }, { 'type-success': this.state.type === 'success' }, { 'type-warning': this.state.type === 'warning' }, { 'type-error': this.state.type === 'error' }, { 'type-info': this.state.type === 'info' }, { 'type-light': this.state.type === 'light' }); | ||
return _react2['default'].createElement( | ||
'span', | ||
{ className: tooltipClass, 'data-id': 'tooltip' }, | ||
this.state.placeholder | ||
); | ||
}, | ||
trim: function trim(string) { | ||
@@ -193,17 +210,5 @@ var newString = string.split(''); | ||
return newString.join(''); | ||
}, | ||
} }); | ||
render: function render() { | ||
var tooltipClass = (0, _classnames2['default'])('reactTooltip', { 'show': this.state.show }, { 'place-top': this.state.place === 'top' }, { 'place-bottom': this.state.place === 'bottom' }, { 'place-left': this.state.place === 'left' }, { 'place-right': this.state.place === 'right' }, { 'type-dark': this.state.type === 'dark' }, { 'type-success': this.state.type === 'success' }, { 'type-warning': this.state.type === 'warning' }, { 'type-error': this.state.type === 'error' }, { 'type-info': this.state.type === 'info' }, { 'type-light': this.state.type === 'light' }); | ||
return _react2['default'].createElement( | ||
'span', | ||
{ className: tooltipClass, 'data-id': 'tooltip' }, | ||
this.state.placeholder | ||
); | ||
} | ||
}); | ||
exports['default'] = ReactTooltip; | ||
module.exports = exports['default']; |
{ | ||
"name": "react-tooltip", | ||
"version": "0.3.1", | ||
"version": "0.3.2", | ||
"description": "react tooltip component", | ||
@@ -5,0 +5,0 @@ "main": "dist/react-tooltip.js", |
26080
391