From 503e849a8d5358d596be5308f9536e5656a8362d Mon Sep 17 00:00:00 2001 From: Mathew Kurian Date: Wed, 17 Jun 2015 01:06:41 -0700 Subject: [PATCH 1/4] Added support for server-side rendering --- src/js/index.jsx | 105 ++++++++++++++++++++++++++--------------------- 1 file changed, 58 insertions(+), 47 deletions(-) diff --git a/src/js/index.jsx b/src/js/index.jsx index cedf20352..930572ab5 100644 --- a/src/js/index.jsx +++ b/src/js/index.jsx @@ -14,6 +14,55 @@ const ReactTooltip = React.createClass({ positon: React.PropTypes.object, }, + _updatePosition: function(){ + let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0; + let tipHeight = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientHeight:0; + let offset = {x:0, y:0}; + let { effect } = this.state; + if(effect === "float") { + if(this.state.place === "top") { + offset.x = -(tipWidth/2); + offset.y = -50; + } + else if(this.state.place === "bottom") { + offset.x = -(tipWidth/2); + offset.y = 30; + } + else if(this.state.place === "left") { + offset.x = -(tipWidth + 15); + offset.y = -(tipHeight/2); + } + else if(this.state.place === "right") { + offset.x = 10; + offset.y = -(tipHeight/2); + } + } + let xPosition = 0, yPosition = 0, {position} = this.state; + if(Object.prototype.toString.apply(position) === "[object String]") { + position = JSON.parse(position); + } + for(let key in position) { + if(key === "top") { + yPosition -= parseInt(position[key]); + } + else if(key === "bottom") { + yPosition += parseInt(position[key]); + } + else if(key === "left") { + xPosition -= parseInt(position[key]); + } + else if(key === "right") { + xPosition += parseInt(position[key]); + } + } + + let node = React.findDOMNode(this); + + node.style.left = this.state.x + offset.x + xPosition + 'px'; + node.style.top = this.state.y + offset.y + yPosition + 'px'; + + }, + getInitialState() { return { show: false, @@ -28,6 +77,9 @@ const ReactTooltip = React.createClass({ }, componentDidMount() { + + this._updatePosition(); + let targetArray = document.querySelectorAll("[data-tip]"); for(let i = 0; i < targetArray.length; i++) { targetArray[i].addEventListener("mouseenter", this.showTooltip, false); @@ -45,6 +97,10 @@ const ReactTooltip = React.createClass({ } }, + componentDidUpdate(){ + this._updatePosition(); + }, + showTooltip(e) { this.setState({ placeholder: e.target.getAttribute("data-tip"), @@ -128,52 +184,7 @@ const ReactTooltip = React.createClass({ }, render() { - let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0; - let tipHeight = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientHeight:0; - let offset = {x:0, y:0}; - let { effect } = this.state; - if(effect === "float") { - if(this.state.place === "top") { - offset.x = -(tipWidth/2); - offset.y = -50; - } - else if(this.state.place === "bottom") { - offset.x = -(tipWidth/2); - offset.y = 30; - } - else if(this.state.place === "left") { - offset.x = -(tipWidth + 15); - offset.y = -(tipHeight/2); - } - else if(this.state.place === "right") { - offset.x = 10; - offset.y = -(tipHeight/2); - } - } - let xPosition = 0, yPosition = 0, {position} = this.state; - if(Object.prototype.toString.apply(position) === "[object String]") { - position = JSON.parse(position); - } - for(let key in position) { - if(key === "top") { - yPosition -= parseInt(position[key]); - } - else if(key === "bottom") { - yPosition += parseInt(position[key]); - } - else if(key === "left") { - xPosition -= parseInt(position[key]); - } - else if(key === "right") { - xPosition += parseInt(position[key]); - } - } - - let style = { - left: this.state.x + offset.x + xPosition + "px", - top: this.state.y + offset.y + yPosition + "px" - } - + let tooltipClass = classname( 'reactTooltip', {"show": this.state.show}, @@ -190,7 +201,7 @@ const ReactTooltip = React.createClass({ ); return ( - {this.state.placeholder} + {this.state.placeholder} ) } }); From f1dd6087b2580fe34624e21a8398ed4dbdb2b499 Mon Sep 17 00:00:00 2001 From: Mathew Kurian Date: Wed, 17 Jun 2015 01:07:16 -0700 Subject: [PATCH 2/4] Adding z-index to style --- src/scss/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/style.scss b/src/scss/style.scss index 980ea1c7e..0df5d0466 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -33,6 +33,7 @@ pointer-events: none; transition: opacity 0.3s ease-out , margin-top 0.3s ease-out, margin-left 0.3s ease-out; top: -999em; + z-index: 99999; &:after { content: ""; width: 0; From 12728bf61e027db2a36d44f8eec3ad922054c597 Mon Sep 17 00:00:00 2001 From: Mathew Kurian Date: Wed, 17 Jun 2015 01:10:33 -0700 Subject: [PATCH 3/4] Undo last commit --- src/scss/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/scss/style.scss b/src/scss/style.scss index 0df5d0466..980ea1c7e 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -33,7 +33,6 @@ pointer-events: none; transition: opacity 0.3s ease-out , margin-top 0.3s ease-out, margin-left 0.3s ease-out; top: -999em; - z-index: 99999; &:after { content: ""; width: 0; From 98404a270662ccd04837a9e38f0507dc8ab4ddb3 Mon Sep 17 00:00:00 2001 From: Mathew Kurian Date: Wed, 17 Jun 2015 01:20:27 -0700 Subject: [PATCH 4/4] Recompiling jsx --- dist/react-tooltip.js | 106 ++++++++++++++++++++--------------- example/src/react-tooltip.js | 105 ++++++++++++++++++---------------- 2 files changed, 118 insertions(+), 93 deletions(-) diff --git a/dist/react-tooltip.js b/dist/react-tooltip.js index bc75c755b..6373bd6fd 100644 --- a/dist/react-tooltip.js +++ b/dist/react-tooltip.js @@ -22,7 +22,52 @@ var ReactTooltip = _react2['default'].createClass({ place: _react2['default'].PropTypes.string, type: _react2['default'].PropTypes.string, effect: _react2['default'].PropTypes.string, - positon: _react2['default'].PropTypes.object }, + positon: _react2['default'].PropTypes.object + }, + + _updatePosition: function _updatePosition() { + var tipWidth = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientWidth : 0; + var tipHeight = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientHeight : 0; + var offset = { x: 0, y: 0 }; + var effect = this.state.effect; + + if (effect === 'float') { + if (this.state.place === 'top') { + offset.x = -(tipWidth / 2); + offset.y = -50; + } else if (this.state.place === 'bottom') { + offset.x = -(tipWidth / 2); + offset.y = 30; + } else if (this.state.place === 'left') { + offset.x = -(tipWidth + 15); + offset.y = -(tipHeight / 2); + } else if (this.state.place === 'right') { + offset.x = 10; + offset.y = -(tipHeight / 2); + } + } + var xPosition = 0;var yPosition = 0;var position = this.state.position; + + if (Object.prototype.toString.apply(position) === '[object String]') { + position = JSON.parse(position); + } + for (var key in position) { + if (key === 'top') { + yPosition -= parseInt(position[key]); + } else if (key === 'bottom') { + yPosition += parseInt(position[key]); + } else if (key === 'left') { + xPosition -= parseInt(position[key]); + } else if (key === 'right') { + xPosition += parseInt(position[key]); + } + } + + var node = _react2['default'].findDOMNode(this); + + node.style.left = this.state.x + offset.x + xPosition + 'px'; + node.style.top = this.state.y + offset.y + yPosition + 'px'; + }, getInitialState: function getInitialState() { return { @@ -33,10 +78,14 @@ var ReactTooltip = _react2['default'].createClass({ place: '', type: '', effect: '', - position: {} }; + 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); @@ -54,13 +103,18 @@ var ReactTooltip = _react2['default'].createClass({ } }, + componentDidUpdate: function componentDidUpdate() { + this._updatePosition(); + }, + showTooltip: function showTooltip(e) { this.setState({ placeholder: e.target.getAttribute('data-tip'), place: e.target.getAttribute('data-place') ? e.target.getAttribute('data-place') : this.props.place ? this.props.place : 'top', type: e.target.getAttribute('data-type') ? e.target.getAttribute('data-type') : this.props.type ? this.props.type : 'dark', 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); }, @@ -109,7 +163,8 @@ var ReactTooltip = _react2['default'].createClass({ this.setState({ show: false, x: 'NONE', - y: 'NONE' }); + y: 'NONE' + }); }, trim: function trim(string) { @@ -134,53 +189,12 @@ var ReactTooltip = _react2['default'].createClass({ }, render: function render() { - var tipWidth = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientWidth : 0; - var tipHeight = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientHeight : 0; - var offset = { x: 0, y: 0 }; - var effect = this.state.effect; - - if (effect === 'float') { - if (this.state.place === 'top') { - offset.x = -(tipWidth / 2); - offset.y = -50; - } else if (this.state.place === 'bottom') { - offset.x = -(tipWidth / 2); - offset.y = 30; - } else if (this.state.place === 'left') { - offset.x = -(tipWidth + 15); - offset.y = -(tipHeight / 2); - } else if (this.state.place === 'right') { - offset.x = 10; - offset.y = -(tipHeight / 2); - } - } - var xPosition = 0;var yPosition = 0;var position = this.state.position; - - if (Object.prototype.toString.apply(position) === '[object String]') { - position = JSON.parse(position); - } - for (var key in position) { - if (key === 'top') { - yPosition -= parseInt(position[key]); - } else if (key === 'bottom') { - yPosition += parseInt(position[key]); - } else if (key === 'left') { - xPosition -= parseInt(position[key]); - } else if (key === 'right') { - xPosition += parseInt(position[key]); - } - } - - var style = { - left: this.state.x + offset.x + xPosition + 'px', - top: this.state.y + offset.y + yPosition + 'px' - }; 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, style: style, 'data-id': 'tooltip' }, + { className: tooltipClass, 'data-id': 'tooltip' }, this.state.placeholder ); } diff --git a/example/src/react-tooltip.js b/example/src/react-tooltip.js index cedf20352..930572ab5 100644 --- a/example/src/react-tooltip.js +++ b/example/src/react-tooltip.js @@ -14,6 +14,55 @@ const ReactTooltip = React.createClass({ positon: React.PropTypes.object, }, + _updatePosition: function(){ + let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0; + let tipHeight = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientHeight:0; + let offset = {x:0, y:0}; + let { effect } = this.state; + if(effect === "float") { + if(this.state.place === "top") { + offset.x = -(tipWidth/2); + offset.y = -50; + } + else if(this.state.place === "bottom") { + offset.x = -(tipWidth/2); + offset.y = 30; + } + else if(this.state.place === "left") { + offset.x = -(tipWidth + 15); + offset.y = -(tipHeight/2); + } + else if(this.state.place === "right") { + offset.x = 10; + offset.y = -(tipHeight/2); + } + } + let xPosition = 0, yPosition = 0, {position} = this.state; + if(Object.prototype.toString.apply(position) === "[object String]") { + position = JSON.parse(position); + } + for(let key in position) { + if(key === "top") { + yPosition -= parseInt(position[key]); + } + else if(key === "bottom") { + yPosition += parseInt(position[key]); + } + else if(key === "left") { + xPosition -= parseInt(position[key]); + } + else if(key === "right") { + xPosition += parseInt(position[key]); + } + } + + let node = React.findDOMNode(this); + + node.style.left = this.state.x + offset.x + xPosition + 'px'; + node.style.top = this.state.y + offset.y + yPosition + 'px'; + + }, + getInitialState() { return { show: false, @@ -28,6 +77,9 @@ const ReactTooltip = React.createClass({ }, componentDidMount() { + + this._updatePosition(); + let targetArray = document.querySelectorAll("[data-tip]"); for(let i = 0; i < targetArray.length; i++) { targetArray[i].addEventListener("mouseenter", this.showTooltip, false); @@ -45,6 +97,10 @@ const ReactTooltip = React.createClass({ } }, + componentDidUpdate(){ + this._updatePosition(); + }, + showTooltip(e) { this.setState({ placeholder: e.target.getAttribute("data-tip"), @@ -128,52 +184,7 @@ const ReactTooltip = React.createClass({ }, render() { - let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0; - let tipHeight = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientHeight:0; - let offset = {x:0, y:0}; - let { effect } = this.state; - if(effect === "float") { - if(this.state.place === "top") { - offset.x = -(tipWidth/2); - offset.y = -50; - } - else if(this.state.place === "bottom") { - offset.x = -(tipWidth/2); - offset.y = 30; - } - else if(this.state.place === "left") { - offset.x = -(tipWidth + 15); - offset.y = -(tipHeight/2); - } - else if(this.state.place === "right") { - offset.x = 10; - offset.y = -(tipHeight/2); - } - } - let xPosition = 0, yPosition = 0, {position} = this.state; - if(Object.prototype.toString.apply(position) === "[object String]") { - position = JSON.parse(position); - } - for(let key in position) { - if(key === "top") { - yPosition -= parseInt(position[key]); - } - else if(key === "bottom") { - yPosition += parseInt(position[key]); - } - else if(key === "left") { - xPosition -= parseInt(position[key]); - } - else if(key === "right") { - xPosition += parseInt(position[key]); - } - } - - let style = { - left: this.state.x + offset.x + xPosition + "px", - top: this.state.y + offset.y + yPosition + "px" - } - + let tooltipClass = classname( 'reactTooltip', {"show": this.state.show}, @@ -190,7 +201,7 @@ const ReactTooltip = React.createClass({ ); return ( - {this.state.placeholder} + {this.state.placeholder} ) } });