From 85f1c985e9900b32dd55a6f3c1d9d8f4a2304827 Mon Sep 17 00:00:00 2001 From: wwayne Date: Fri, 29 Apr 2016 09:07:03 +0800 Subject: [PATCH] New attribute isCapture, deprecate eventPropagationMode --- README.md | 7 ++++--- dist/react-tooltip.js | 25 +++++++++++++++---------- dist/react-tooltip.min.js | 2 +- example/src/index.js | 2 +- package.json | 2 +- src/index.js | 24 ++++++++++++++---------- standalone/react-tooltip.js | 25 +++++++++++++++---------- standalone/react-tooltip.min.js | 2 +- 8 files changed, 52 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 6891fa493..c63a4c7d3 100644 --- a/README.md +++ b/README.md @@ -51,12 +51,13 @@ Check example: [React-tooltip Test](http://wwayne.com/react-tooltip) type | data-type | String | success, warning, error, info, light | tooltip's color theme effect | data-effect | String | float, solid | either float or pinned event | data-event | String | e.g. click | custom event to trigger tooltip - offset | data-offset | Object | top, right, bottom, left | data-offset="{'top': 10, 'left': 10}" for specific and offset={{top: 10, left: 10}} for global + isCapture | data-iscapture | Bool | true, false | when set to ture, custom event's propagation mode will be capture, default is false, `

` or `` | + offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global multiline | data-multiline | Bool | true, false | support `
`, `
` to make multiline class | data-class | String | your custom class | extra custom class, can use !important to cover react-tooltip's default class html | data-html | Bool | true, false | `

` or `` - delayHide | data-delay-hide | Number | | `

` or `` - delayShow | data-delay-show | Number | | `

` or `` + delayHide | data-delay-hide | Number | | `

` or `` + delayShow | data-delay-show | Number | | `

` or `` border | data-border | Bool | true, false | Add one pixel white border ### Using react component as tooltip diff --git a/dist/react-tooltip.js b/dist/react-tooltip.js index e77df00a4..6027400d5 100644 --- a/dist/react-tooltip.js +++ b/dist/react-tooltip.js @@ -100,7 +100,8 @@ var ReactTooltip = function (_Component) { html: false, delayHide: 0, delayShow: 0, - event: props.event || null + event: props.event || null, + isCapture: props.isCapture || false }; _this.delayShowLoop = null; return _this; @@ -264,16 +265,24 @@ var ReactTooltip = function (_Component) { }, { key: 'checkStatus', value: function checkStatus(e) { - if (this.props.eventPropagationMode === 'bubble') { - e.stopPropagation(); + var show = this.state.show; + + var isCapture = undefined; + + if (e.currentTarget.getAttribute('data-iscapture')) { + isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true'; + } else { + isCapture = this.state.isCapture; } - if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') { + + if (!isCapture) e.stopPropagation(); + if (show && e.currentTarget.getAttribute('currentItem') === 'true') { this.hideTooltip(e); } else { e.currentTarget.setAttribute('currentItem', 'true'); /* when click other place, the tooltip should be removed */ window.removeEventListener('click', this.bindClickListener); - window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture'); + window.addEventListener('click', this.bindClickListener, isCapture); this.showTooltip(e); this.setUntargetItems(e.currentTarget); @@ -746,11 +755,7 @@ ReactTooltip.propTypes = { delayShow: _react.PropTypes.number, event: _react.PropTypes.any, watchWindow: _react.PropTypes.bool, - eventPropagationMode: _react.PropTypes.oneOf(['bubble', 'capture']) -}; - -ReactTooltip.defaultProps = { - eventPropagationMode: 'bubble' + isCapture: _react.PropTypes.bool }; /* export default not fit for standalone, it will exports {default:...} */ diff --git a/dist/react-tooltip.min.js b/dist/react-tooltip.min.js index 5d27598b6..6b249ce01 100644 --- a/dist/react-tooltip.min.js +++ b/dist/react-tooltip.min.js @@ -1 +1 @@ -"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i/;var multiline=e.currentTarget.getAttribute("data-multiline")?e.currentTarget.getAttribute("data-multiline"):this.props.multiline?this.props.multiline:false;var tooltipText=undefined;var multilineCount=0;if(!multiline||multiline==="false"||!regexp.test(originTooltip)){tooltipText=originTooltip}else{tooltipText=originTooltip.split(regexp).map(function(d,i){multilineCount+=1;return _react2.default.createElement("span",{key:i,className:"multi-line"},d)})}var extraClass=e.currentTarget.getAttribute("data-class")?e.currentTarget.getAttribute("data-class"):"";extraClass=this.props.class?this.props.class+" "+extraClass:extraClass;this.setState({placeholder:tooltipText,multilineCount:multilineCount,place:e.currentTarget.getAttribute("data-place")?e.currentTarget.getAttribute("data-place"):this.props.place?this.props.place:"top",type:e.currentTarget.getAttribute("data-type")?e.currentTarget.getAttribute("data-type"):this.props.type?this.props.type:"dark",effect:e.currentTarget.getAttribute("data-effect")?e.currentTarget.getAttribute("data-effect"):this.props.effect?this.props.effect:"float",offset:e.currentTarget.getAttribute("data-offset")?e.currentTarget.getAttribute("data-offset"):this.props.offset?this.props.offset:{},html:e.currentTarget.getAttribute("data-html")?e.currentTarget.getAttribute("data-html"):this.props.html?this.props.html:false,delayShow:e.currentTarget.getAttribute("data-delay-show")?e.currentTarget.getAttribute("data-delay-show"):this.props.delayShow?this.props.delayShow:0,delayHide:e.currentTarget.getAttribute("data-delay-hide")?e.currentTarget.getAttribute("data-delay-hide"):this.props.delayHide?this.props.delayHide:0,border:e.currentTarget.getAttribute("data-border")?e.currentTarget.getAttribute("data-border")==="true":this.props.border?this.props.border:false,extraClass:extraClass,multiline:multiline});this.addScrollListener();this.updateTooltip(e)}},{key:"updateTooltip",value:function updateTooltip(e){var _this3=this;var _state=this.state;var delayShow=_state.delayShow;var show=_state.show;var delayTime=show?0:parseInt(delayShow,10);var eventTarget=e.currentTarget;clearTimeout(this.delayShowLoop);this.delayShowLoop=setTimeout(function(){if(_this3.trim(_this3.state.placeholder).length>0){if(_this3.state.effect==="float"){_this3.setState({show:true,x:e.clientX,y:e.clientY})}else if(_this3.state.effect==="solid"){var _getPosition2=_this3.getPosition(eventTarget);var x=_getPosition2.x;var y=_getPosition2.y;_this3.setState({show:true,x:x,y:y})}}},delayTime)}},{key:"hideTooltip",value:function hideTooltip(){var _this4=this;var delayHide=this.state.delayHide;clearTimeout(this.delayShowLoop);setTimeout(function(){_this4.setState({show:false});_this4.removeScrollListener()},parseInt(delayHide,10))}},{key:"addScrollListener",value:function addScrollListener(){window.addEventListener("scroll",this.hideTooltip)}},{key:"removeScrollListener",value:function removeScrollListener(){window.removeEventListener("scroll",this.hideTooltip)}},{key:"getPosition",value:function getPosition(currentTarget){var _this5=this;var place=this.state.place;var node=_reactDom2.default.findDOMNode(this);var boundingClientRect=currentTarget.getBoundingClientRect();var targetTop=boundingClientRect.top;var targetLeft=boundingClientRect.left;var tipWidth=node.clientWidth;var tipHeight=node.clientHeight;var targetWidth=currentTarget.clientWidth;var targetHeight=currentTarget.clientHeight;var windoWidth=window.innerWidth;var windowHeight=window.innerHeight;var x=undefined;var y=undefined;var defaultTopY=targetTop-tipHeight-8;var defaultBottomY=targetTop+targetHeight+8;var defaultLeftX=targetLeft-tipWidth-6;var defaultRightX=targetLeft+targetWidth+6;var outsideTop=function outsideTop(){return defaultTopY-10<0};var outsideBottom=function outsideBottom(){return targetTop+targetHeight+tipHeight+25>windowHeight};var outsideLeft=function outsideLeft(){return defaultLeftX-10<0};var outsideRight=function outsideRight(){return targetLeft+targetWidth+tipWidth+25>windoWidth};var getTopPositionY=function getTopPositionY(){if(outsideTop(defaultTopY)&&!outsideBottom()){_this5.setState({place:"bottom"});return defaultBottomY}return defaultTopY};var getBottomPositionY=function getBottomPositionY(){if(outsideBottom()&&!outsideTop()){_this5.setState({place:"top"});return defaultTopY}return defaultBottomY};var getLeftPositionX=function getLeftPositionX(){if(outsideLeft()&&!outsideRight()){_this5.setState({place:"right"});return defaultRightX}return defaultLeftX};var getRightPositionX=function getRightPositionX(){if(outsideRight()&&!outsideLeft()){_this5.setState({place:"left"});return defaultLeftX}return defaultRightX};if(place==="top"){x=targetLeft-tipWidth/2+targetWidth/2;y=getTopPositionY()}else if(place==="bottom"){x=targetLeft-tipWidth/2+targetWidth/2;y=getBottomPositionY()}else if(place==="left"){x=getLeftPositionX();y=targetTop+targetHeight/2-tipHeight/2}else if(place==="right"){x=getRightPositionX();y=targetTop+targetHeight/2-tipHeight/2}return{x:x,y:y}}},{key:"updatePosition",value:function updatePosition(){var node=_reactDom2.default.findDOMNode(this);var tipWidth=node.clientWidth;var tipHeight=node.clientHeight;var _state2=this.state;var effect=_state2.effect;var place=_state2.place;var offset=_state2.offset;var offsetFromEffect={};var placements=["top","bottom","left","right"];placements.forEach(function(key){offsetFromEffect[key]={x:0,y:0}});if(effect==="float"){offsetFromEffect.top={x:-(tipWidth/2),y:-tipHeight};offsetFromEffect.bottom={x:-(tipWidth/2),y:15};offsetFromEffect.left={x:-(tipWidth+15),y:-(tipHeight/2)};offsetFromEffect.right={x:10,y:-(tipHeight/2)}}var xPosition=0;var yPosition=0;if(Object.prototype.toString.apply(offset)==="[object String]"){offset=JSON.parse(offset.toString().replace(/\'/g,'"'))}for(var key in offset){if(key==="top"){yPosition-=parseInt(offset[key],10)}else if(key==="bottom"){yPosition+=parseInt(offset[key],10)}else if(key==="left"){xPosition-=parseInt(offset[key],10)}else if(key==="right"){xPosition+=parseInt(offset[key],10)}}var x=this.state.x;var y=this.state.y;var windoWidth=window.innerWidth;var windowHeight=window.innerHeight;var getStyleLeft=function getStyleLeft(place){var offsetEffectX=effect==="solid"?0:place?offsetFromEffect[place].x:0;return x+offsetEffectX+xPosition};var getStyleTop=function getStyleTop(place){var offsetEffectY=effect==="solid"?0:place?offsetFromEffect[place].y:0;return y+offsetEffectY+yPosition};var outsideLeft=function outsideLeft(place){var styleLeft=getStyleLeft(place);return styleLeft<0&&x+offsetFromEffect["right"].x+xPosition<=windoWidth};var outsideRight=function outsideRight(place){var styleLeft=getStyleLeft(place);return styleLeft+tipWidth>windoWidth&&x+offsetFromEffect["left"].x+xPosition>=0};var outsideTop=function outsideTop(place){var styleTop=getStyleTop(place);return styleTop<0&&y+offsetFromEffect["bottom"].y+yPosition+tipHeight=windowHeight&&y+offsetFromEffect["top"].y+yPosition>=0};var outside=function outside(place){return outsideTop(place)||outsideRight(place)||outsideBottom(place)||outsideLeft(place)};if(outsideLeft(place)){if(!outside("right")){this.setState({place:"right"});return}}else if(outsideRight(place)){if(!outside("left")){this.setState({place:"left"});return}}else if(outsideTop(place)){if(!outside("bottom")){this.setState({place:"bottom"});return}}else if(outsideBottom(place)){if(!outside("top")){this.setState({place:"top"});return}}node.style.left=getStyleLeft(place)+"px";node.style.top=getStyleTop(place)+"px"}},{key:"setStyleHeader",value:function setStyleHeader(){if(!document.getElementsByTagName("head")[0].querySelector('style[id="react-tooltip"]')){var tag=document.createElement("style");tag.id="react-tooltip";tag.innerHTML=_style2.default;document.getElementsByTagName("head")[0].appendChild(tag)}}},{key:"render",value:function render(){var _state3=this.state;var placeholder=_state3.placeholder;var extraClass=_state3.extraClass;var html=_state3.html;var tooltipClass=(0,_classnames2.default)("__react_component_tooltip",{show:this.state.show},{border:this.state.border},{"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"});if(html){return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip",dangerouslySetInnerHTML:{__html:placeholder}})}else{var content=this.props.children?this.props.children:placeholder;return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip"},content)}}},{key:"trim",value:function trim(string){if(Object.prototype.toString.call(string)!=="[object String]"){return string}var newString=string.split("");var firstCount=0;var lastCount=0;for(var i=0;i=0;i--){if(string[i]!==" "){break}lastCount++}newString.splice(0,firstCount);newString.splice(-lastCount,lastCount);return newString.join("")}}]);return ReactTooltip}(_react.Component);ReactTooltip.propTypes={children:_react.PropTypes.any,place:_react.PropTypes.string,type:_react.PropTypes.string,effect:_react.PropTypes.string,offset:_react.PropTypes.object,multiline:_react.PropTypes.bool,border:_react.PropTypes.bool,"class":_react.PropTypes.string,id:_react.PropTypes.string,html:_react.PropTypes.bool,delayHide:_react.PropTypes.number,delayShow:_react.PropTypes.number,event:_react.PropTypes.any,watchWindow:_react.PropTypes.bool,eventPropagationMode:_react.PropTypes.oneOf(["bubble","capture"])};ReactTooltip.defaultProps={eventPropagationMode:"bubble"};module.exports=ReactTooltip; \ No newline at end of file +"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i/;var multiline=e.currentTarget.getAttribute("data-multiline")?e.currentTarget.getAttribute("data-multiline"):this.props.multiline?this.props.multiline:false;var tooltipText=undefined;var multilineCount=0;if(!multiline||multiline==="false"||!regexp.test(originTooltip)){tooltipText=originTooltip}else{tooltipText=originTooltip.split(regexp).map(function(d,i){multilineCount+=1;return _react2.default.createElement("span",{key:i,className:"multi-line"},d)})}var extraClass=e.currentTarget.getAttribute("data-class")?e.currentTarget.getAttribute("data-class"):"";extraClass=this.props.class?this.props.class+" "+extraClass:extraClass;this.setState({placeholder:tooltipText,multilineCount:multilineCount,place:e.currentTarget.getAttribute("data-place")?e.currentTarget.getAttribute("data-place"):this.props.place?this.props.place:"top",type:e.currentTarget.getAttribute("data-type")?e.currentTarget.getAttribute("data-type"):this.props.type?this.props.type:"dark",effect:e.currentTarget.getAttribute("data-effect")?e.currentTarget.getAttribute("data-effect"):this.props.effect?this.props.effect:"float",offset:e.currentTarget.getAttribute("data-offset")?e.currentTarget.getAttribute("data-offset"):this.props.offset?this.props.offset:{},html:e.currentTarget.getAttribute("data-html")?e.currentTarget.getAttribute("data-html"):this.props.html?this.props.html:false,delayShow:e.currentTarget.getAttribute("data-delay-show")?e.currentTarget.getAttribute("data-delay-show"):this.props.delayShow?this.props.delayShow:0,delayHide:e.currentTarget.getAttribute("data-delay-hide")?e.currentTarget.getAttribute("data-delay-hide"):this.props.delayHide?this.props.delayHide:0,border:e.currentTarget.getAttribute("data-border")?e.currentTarget.getAttribute("data-border")==="true":this.props.border?this.props.border:false,extraClass:extraClass,multiline:multiline});this.addScrollListener();this.updateTooltip(e)}},{key:"updateTooltip",value:function updateTooltip(e){var _this3=this;var _state=this.state;var delayShow=_state.delayShow;var show=_state.show;var delayTime=show?0:parseInt(delayShow,10);var eventTarget=e.currentTarget;clearTimeout(this.delayShowLoop);this.delayShowLoop=setTimeout(function(){if(_this3.trim(_this3.state.placeholder).length>0){if(_this3.state.effect==="float"){_this3.setState({show:true,x:e.clientX,y:e.clientY})}else if(_this3.state.effect==="solid"){var _getPosition2=_this3.getPosition(eventTarget);var x=_getPosition2.x;var y=_getPosition2.y;_this3.setState({show:true,x:x,y:y})}}},delayTime)}},{key:"hideTooltip",value:function hideTooltip(){var _this4=this;var delayHide=this.state.delayHide;clearTimeout(this.delayShowLoop);setTimeout(function(){_this4.setState({show:false});_this4.removeScrollListener()},parseInt(delayHide,10))}},{key:"addScrollListener",value:function addScrollListener(){window.addEventListener("scroll",this.hideTooltip)}},{key:"removeScrollListener",value:function removeScrollListener(){window.removeEventListener("scroll",this.hideTooltip)}},{key:"getPosition",value:function getPosition(currentTarget){var _this5=this;var place=this.state.place;var node=_reactDom2.default.findDOMNode(this);var boundingClientRect=currentTarget.getBoundingClientRect();var targetTop=boundingClientRect.top;var targetLeft=boundingClientRect.left;var tipWidth=node.clientWidth;var tipHeight=node.clientHeight;var targetWidth=currentTarget.clientWidth;var targetHeight=currentTarget.clientHeight;var windoWidth=window.innerWidth;var windowHeight=window.innerHeight;var x=undefined;var y=undefined;var defaultTopY=targetTop-tipHeight-8;var defaultBottomY=targetTop+targetHeight+8;var defaultLeftX=targetLeft-tipWidth-6;var defaultRightX=targetLeft+targetWidth+6;var outsideTop=function outsideTop(){return defaultTopY-10<0};var outsideBottom=function outsideBottom(){return targetTop+targetHeight+tipHeight+25>windowHeight};var outsideLeft=function outsideLeft(){return defaultLeftX-10<0};var outsideRight=function outsideRight(){return targetLeft+targetWidth+tipWidth+25>windoWidth};var getTopPositionY=function getTopPositionY(){if(outsideTop(defaultTopY)&&!outsideBottom()){_this5.setState({place:"bottom"});return defaultBottomY}return defaultTopY};var getBottomPositionY=function getBottomPositionY(){if(outsideBottom()&&!outsideTop()){_this5.setState({place:"top"});return defaultTopY}return defaultBottomY};var getLeftPositionX=function getLeftPositionX(){if(outsideLeft()&&!outsideRight()){_this5.setState({place:"right"});return defaultRightX}return defaultLeftX};var getRightPositionX=function getRightPositionX(){if(outsideRight()&&!outsideLeft()){_this5.setState({place:"left"});return defaultLeftX}return defaultRightX};if(place==="top"){x=targetLeft-tipWidth/2+targetWidth/2;y=getTopPositionY()}else if(place==="bottom"){x=targetLeft-tipWidth/2+targetWidth/2;y=getBottomPositionY()}else if(place==="left"){x=getLeftPositionX();y=targetTop+targetHeight/2-tipHeight/2}else if(place==="right"){x=getRightPositionX();y=targetTop+targetHeight/2-tipHeight/2}return{x:x,y:y}}},{key:"updatePosition",value:function updatePosition(){var node=_reactDom2.default.findDOMNode(this);var tipWidth=node.clientWidth;var tipHeight=node.clientHeight;var _state2=this.state;var effect=_state2.effect;var place=_state2.place;var offset=_state2.offset;var offsetFromEffect={};var placements=["top","bottom","left","right"];placements.forEach(function(key){offsetFromEffect[key]={x:0,y:0}});if(effect==="float"){offsetFromEffect.top={x:-(tipWidth/2),y:-tipHeight};offsetFromEffect.bottom={x:-(tipWidth/2),y:15};offsetFromEffect.left={x:-(tipWidth+15),y:-(tipHeight/2)};offsetFromEffect.right={x:10,y:-(tipHeight/2)}}var xPosition=0;var yPosition=0;if(Object.prototype.toString.apply(offset)==="[object String]"){offset=JSON.parse(offset.toString().replace(/\'/g,'"'))}for(var key in offset){if(key==="top"){yPosition-=parseInt(offset[key],10)}else if(key==="bottom"){yPosition+=parseInt(offset[key],10)}else if(key==="left"){xPosition-=parseInt(offset[key],10)}else if(key==="right"){xPosition+=parseInt(offset[key],10)}}var x=this.state.x;var y=this.state.y;var windoWidth=window.innerWidth;var windowHeight=window.innerHeight;var getStyleLeft=function getStyleLeft(place){var offsetEffectX=effect==="solid"?0:place?offsetFromEffect[place].x:0;return x+offsetEffectX+xPosition};var getStyleTop=function getStyleTop(place){var offsetEffectY=effect==="solid"?0:place?offsetFromEffect[place].y:0;return y+offsetEffectY+yPosition};var outsideLeft=function outsideLeft(place){var styleLeft=getStyleLeft(place);return styleLeft<0&&x+offsetFromEffect["right"].x+xPosition<=windoWidth};var outsideRight=function outsideRight(place){var styleLeft=getStyleLeft(place);return styleLeft+tipWidth>windoWidth&&x+offsetFromEffect["left"].x+xPosition>=0};var outsideTop=function outsideTop(place){var styleTop=getStyleTop(place);return styleTop<0&&y+offsetFromEffect["bottom"].y+yPosition+tipHeight=windowHeight&&y+offsetFromEffect["top"].y+yPosition>=0};var outside=function outside(place){return outsideTop(place)||outsideRight(place)||outsideBottom(place)||outsideLeft(place)};if(outsideLeft(place)){if(!outside("right")){this.setState({place:"right"});return}}else if(outsideRight(place)){if(!outside("left")){this.setState({place:"left"});return}}else if(outsideTop(place)){if(!outside("bottom")){this.setState({place:"bottom"});return}}else if(outsideBottom(place)){if(!outside("top")){this.setState({place:"top"});return}}node.style.left=getStyleLeft(place)+"px";node.style.top=getStyleTop(place)+"px"}},{key:"setStyleHeader",value:function setStyleHeader(){if(!document.getElementsByTagName("head")[0].querySelector('style[id="react-tooltip"]')){var tag=document.createElement("style");tag.id="react-tooltip";tag.innerHTML=_style2.default;document.getElementsByTagName("head")[0].appendChild(tag)}}},{key:"render",value:function render(){var _state3=this.state;var placeholder=_state3.placeholder;var extraClass=_state3.extraClass;var html=_state3.html;var tooltipClass=(0,_classnames2.default)("__react_component_tooltip",{show:this.state.show},{border:this.state.border},{"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"});if(html){return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip",dangerouslySetInnerHTML:{__html:placeholder}})}else{var content=this.props.children?this.props.children:placeholder;return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip"},content)}}},{key:"trim",value:function trim(string){if(Object.prototype.toString.call(string)!=="[object String]"){return string}var newString=string.split("");var firstCount=0;var lastCount=0;for(var i=0;i=0;i--){if(string[i]!==" "){break}lastCount++}newString.splice(0,firstCount);newString.splice(-lastCount,lastCount);return newString.join("")}}]);return ReactTooltip}(_react.Component);ReactTooltip.propTypes={children:_react.PropTypes.any,place:_react.PropTypes.string,type:_react.PropTypes.string,effect:_react.PropTypes.string,offset:_react.PropTypes.object,multiline:_react.PropTypes.bool,border:_react.PropTypes.bool,"class":_react.PropTypes.string,id:_react.PropTypes.string,html:_react.PropTypes.bool,delayHide:_react.PropTypes.number,delayShow:_react.PropTypes.number,event:_react.PropTypes.any,watchWindow:_react.PropTypes.bool,isCapture:_react.PropTypes.bool};module.exports=ReactTooltip; \ No newline at end of file diff --git a/example/src/index.js b/example/src/index.js index 56a43a5c9..b6419e57c 100755 --- a/example/src/index.js +++ b/example/src/index.js @@ -47,7 +47,7 @@ const Test = React.createClass({

React Tooltip

diff --git a/package.json b/package.json index dfe046b08..cea4a2be1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-tooltip", - "version": "1.2.1", + "version": "2.0.0", "description": "react tooltip component", "main": "index.js", "scripts": { diff --git a/src/index.js b/src/index.js index 2460e9978..c0a3ca5d4 100644 --- a/src/index.js +++ b/src/index.js @@ -67,7 +67,8 @@ class ReactTooltip extends Component { html: false, delayHide: 0, delayShow: 0, - event: props.event || null + event: props.event || null, + isCapture: props.isCapture || false } this.delayShowLoop = null } @@ -195,16 +196,23 @@ class ReactTooltip extends Component { * Used in customer event */ checkStatus (e) { - if (this.props.eventPropagationMode === 'bubble') { - e.stopPropagation() + const {show} = this.state + let isCapture + + if (e.currentTarget.getAttribute('data-iscapture')) { + isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true' + } else { + isCapture = this.state.isCapture } - if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') { + + if (!isCapture) e.stopPropagation() + if (show && e.currentTarget.getAttribute('currentItem') === 'true') { this.hideTooltip(e) } else { e.currentTarget.setAttribute('currentItem', 'true') /* when click other place, the tooltip should be removed */ window.removeEventListener('click', this.bindClickListener) - window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture') + window.addEventListener('click', this.bindClickListener, isCapture) this.showTooltip(e) this.setUntargetItems(e.currentTarget) @@ -638,11 +646,7 @@ ReactTooltip.propTypes = { delayShow: PropTypes.number, event: PropTypes.any, watchWindow: PropTypes.bool, - eventPropagationMode: PropTypes.oneOf(['bubble', 'capture']) -} - -ReactTooltip.defaultProps = { - eventPropagationMode: 'bubble' + isCapture: PropTypes.bool } /* export default not fit for standalone, it will exports {default:...} */ diff --git a/standalone/react-tooltip.js b/standalone/react-tooltip.js index 7ba7548e0..3d4d64537 100644 --- a/standalone/react-tooltip.js +++ b/standalone/react-tooltip.js @@ -147,7 +147,8 @@ var ReactTooltip = function (_Component) { html: false, delayHide: 0, delayShow: 0, - event: props.event || null + event: props.event || null, + isCapture: props.isCapture || false }; _this.delayShowLoop = null; return _this; @@ -311,16 +312,24 @@ var ReactTooltip = function (_Component) { }, { key: 'checkStatus', value: function checkStatus(e) { - if (this.props.eventPropagationMode === 'bubble') { - e.stopPropagation(); + var show = this.state.show; + + var isCapture = undefined; + + if (e.currentTarget.getAttribute('data-iscapture')) { + isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true'; + } else { + isCapture = this.state.isCapture; } - if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') { + + if (!isCapture) e.stopPropagation(); + if (show && e.currentTarget.getAttribute('currentItem') === 'true') { this.hideTooltip(e); } else { e.currentTarget.setAttribute('currentItem', 'true'); /* when click other place, the tooltip should be removed */ window.removeEventListener('click', this.bindClickListener); - window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture'); + window.addEventListener('click', this.bindClickListener, isCapture); this.showTooltip(e); this.setUntargetItems(e.currentTarget); @@ -793,11 +802,7 @@ ReactTooltip.propTypes = { delayShow: _react.PropTypes.number, event: _react.PropTypes.any, watchWindow: _react.PropTypes.bool, - eventPropagationMode: _react.PropTypes.oneOf(['bubble', 'capture']) -}; - -ReactTooltip.defaultProps = { - eventPropagationMode: 'bubble' + isCapture: _react.PropTypes.bool }; /* export default not fit for standalone, it will exports {default:...} */ diff --git a/standalone/react-tooltip.min.js b/standalone/react-tooltip.min.js index 016a7624e..686dadaaa 100644 --- a/standalone/react-tooltip.min.js +++ b/standalone/react-tooltip.min.js @@ -1 +1 @@ -(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactTooltip=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o/;var multiline=e.currentTarget.getAttribute("data-multiline")?e.currentTarget.getAttribute("data-multiline"):this.props.multiline?this.props.multiline:false;var tooltipText=undefined;var multilineCount=0;if(!multiline||multiline==="false"||!regexp.test(originTooltip)){tooltipText=originTooltip}else{tooltipText=originTooltip.split(regexp).map(function(d,i){multilineCount+=1;return _react2.default.createElement("span",{key:i,className:"multi-line"},d)})}var extraClass=e.currentTarget.getAttribute("data-class")?e.currentTarget.getAttribute("data-class"):"";extraClass=this.props.class?this.props.class+" "+extraClass:extraClass;this.setState({placeholder:tooltipText,multilineCount:multilineCount,place:e.currentTarget.getAttribute("data-place")?e.currentTarget.getAttribute("data-place"):this.props.place?this.props.place:"top",type:e.currentTarget.getAttribute("data-type")?e.currentTarget.getAttribute("data-type"):this.props.type?this.props.type:"dark",effect:e.currentTarget.getAttribute("data-effect")?e.currentTarget.getAttribute("data-effect"):this.props.effect?this.props.effect:"float",offset:e.currentTarget.getAttribute("data-offset")?e.currentTarget.getAttribute("data-offset"):this.props.offset?this.props.offset:{},html:e.currentTarget.getAttribute("data-html")?e.currentTarget.getAttribute("data-html"):this.props.html?this.props.html:false,delayShow:e.currentTarget.getAttribute("data-delay-show")?e.currentTarget.getAttribute("data-delay-show"):this.props.delayShow?this.props.delayShow:0,delayHide:e.currentTarget.getAttribute("data-delay-hide")?e.currentTarget.getAttribute("data-delay-hide"):this.props.delayHide?this.props.delayHide:0,border:e.currentTarget.getAttribute("data-border")?e.currentTarget.getAttribute("data-border")==="true":this.props.border?this.props.border:false,extraClass:extraClass,multiline:multiline});this.addScrollListener();this.updateTooltip(e)}},{key:"updateTooltip",value:function updateTooltip(e){var _this3=this;var _state=this.state;var delayShow=_state.delayShow;var show=_state.show;var delayTime=show?0:parseInt(delayShow,10);var eventTarget=e.currentTarget;clearTimeout(this.delayShowLoop);this.delayShowLoop=setTimeout(function(){if(_this3.trim(_this3.state.placeholder).length>0){if(_this3.state.effect==="float"){_this3.setState({show:true,x:e.clientX,y:e.clientY})}else if(_this3.state.effect==="solid"){var _getPosition2=_this3.getPosition(eventTarget);var x=_getPosition2.x;var y=_getPosition2.y;_this3.setState({show:true,x:x,y:y})}}},delayTime)}},{key:"hideTooltip",value:function hideTooltip(){var _this4=this;var delayHide=this.state.delayHide;clearTimeout(this.delayShowLoop);setTimeout(function(){_this4.setState({show:false});_this4.removeScrollListener()},parseInt(delayHide,10))}},{key:"addScrollListener",value:function addScrollListener(){window.addEventListener("scroll",this.hideTooltip)}},{key:"removeScrollListener",value:function removeScrollListener(){window.removeEventListener("scroll",this.hideTooltip)}},{key:"getPosition",value:function getPosition(currentTarget){var _this5=this;var place=this.state.place;var node=_reactDom2.default.findDOMNode(this);var boundingClientRect=currentTarget.getBoundingClientRect();var targetTop=boundingClientRect.top;var targetLeft=boundingClientRect.left;var tipWidth=node.clientWidth;var tipHeight=node.clientHeight;var targetWidth=currentTarget.clientWidth;var targetHeight=currentTarget.clientHeight;var windoWidth=window.innerWidth;var windowHeight=window.innerHeight;var x=undefined;var y=undefined;var defaultTopY=targetTop-tipHeight-8;var defaultBottomY=targetTop+targetHeight+8;var defaultLeftX=targetLeft-tipWidth-6;var defaultRightX=targetLeft+targetWidth+6;var outsideTop=function outsideTop(){return defaultTopY-10<0};var outsideBottom=function outsideBottom(){return targetTop+targetHeight+tipHeight+25>windowHeight};var outsideLeft=function outsideLeft(){return defaultLeftX-10<0};var outsideRight=function outsideRight(){return targetLeft+targetWidth+tipWidth+25>windoWidth};var getTopPositionY=function getTopPositionY(){if(outsideTop(defaultTopY)&&!outsideBottom()){_this5.setState({place:"bottom"});return defaultBottomY}return defaultTopY};var getBottomPositionY=function getBottomPositionY(){if(outsideBottom()&&!outsideTop()){_this5.setState({place:"top"});return defaultTopY}return defaultBottomY};var getLeftPositionX=function getLeftPositionX(){if(outsideLeft()&&!outsideRight()){_this5.setState({place:"right"});return defaultRightX}return defaultLeftX};var getRightPositionX=function getRightPositionX(){if(outsideRight()&&!outsideLeft()){_this5.setState({place:"left"});return defaultLeftX}return defaultRightX};if(place==="top"){x=targetLeft-tipWidth/2+targetWidth/2;y=getTopPositionY()}else if(place==="bottom"){x=targetLeft-tipWidth/2+targetWidth/2;y=getBottomPositionY()}else if(place==="left"){x=getLeftPositionX();y=targetTop+targetHeight/2-tipHeight/2}else if(place==="right"){x=getRightPositionX();y=targetTop+targetHeight/2-tipHeight/2}return{x:x,y:y}}},{key:"updatePosition",value:function updatePosition(){var node=_reactDom2.default.findDOMNode(this);var tipWidth=node.clientWidth;var tipHeight=node.clientHeight;var _state2=this.state;var effect=_state2.effect;var place=_state2.place;var offset=_state2.offset;var offsetFromEffect={};var placements=["top","bottom","left","right"];placements.forEach(function(key){offsetFromEffect[key]={x:0,y:0}});if(effect==="float"){offsetFromEffect.top={x:-(tipWidth/2),y:-tipHeight};offsetFromEffect.bottom={x:-(tipWidth/2),y:15};offsetFromEffect.left={x:-(tipWidth+15),y:-(tipHeight/2)};offsetFromEffect.right={x:10,y:-(tipHeight/2)}}var xPosition=0;var yPosition=0;if(Object.prototype.toString.apply(offset)==="[object String]"){offset=JSON.parse(offset.toString().replace(/\'/g,'"'))}for(var key in offset){if(key==="top"){yPosition-=parseInt(offset[key],10)}else if(key==="bottom"){yPosition+=parseInt(offset[key],10)}else if(key==="left"){xPosition-=parseInt(offset[key],10)}else if(key==="right"){xPosition+=parseInt(offset[key],10)}}var x=this.state.x;var y=this.state.y;var windoWidth=window.innerWidth;var windowHeight=window.innerHeight;var getStyleLeft=function getStyleLeft(place){var offsetEffectX=effect==="solid"?0:place?offsetFromEffect[place].x:0;return x+offsetEffectX+xPosition};var getStyleTop=function getStyleTop(place){var offsetEffectY=effect==="solid"?0:place?offsetFromEffect[place].y:0;return y+offsetEffectY+yPosition};var outsideLeft=function outsideLeft(place){var styleLeft=getStyleLeft(place);return styleLeft<0&&x+offsetFromEffect["right"].x+xPosition<=windoWidth};var outsideRight=function outsideRight(place){var styleLeft=getStyleLeft(place);return styleLeft+tipWidth>windoWidth&&x+offsetFromEffect["left"].x+xPosition>=0};var outsideTop=function outsideTop(place){var styleTop=getStyleTop(place);return styleTop<0&&y+offsetFromEffect["bottom"].y+yPosition+tipHeight=windowHeight&&y+offsetFromEffect["top"].y+yPosition>=0};var outside=function outside(place){return outsideTop(place)||outsideRight(place)||outsideBottom(place)||outsideLeft(place)};if(outsideLeft(place)){if(!outside("right")){this.setState({place:"right"});return}}else if(outsideRight(place)){if(!outside("left")){this.setState({place:"left"});return}}else if(outsideTop(place)){if(!outside("bottom")){this.setState({place:"bottom"});return}}else if(outsideBottom(place)){if(!outside("top")){this.setState({place:"top"});return}}node.style.left=getStyleLeft(place)+"px";node.style.top=getStyleTop(place)+"px"}},{key:"setStyleHeader",value:function setStyleHeader(){if(!document.getElementsByTagName("head")[0].querySelector('style[id="react-tooltip"]')){var tag=document.createElement("style");tag.id="react-tooltip";tag.innerHTML=_style2.default;document.getElementsByTagName("head")[0].appendChild(tag)}}},{key:"render",value:function render(){var _state3=this.state;var placeholder=_state3.placeholder;var extraClass=_state3.extraClass;var html=_state3.html;var tooltipClass=(0,_classnames2.default)("__react_component_tooltip",{show:this.state.show},{border:this.state.border},{"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"});if(html){return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip",dangerouslySetInnerHTML:{__html:placeholder}})}else{var content=this.props.children?this.props.children:placeholder;return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip"},content)}}},{key:"trim",value:function trim(string){if(Object.prototype.toString.call(string)!=="[object String]"){return string}var newString=string.split("");var firstCount=0;var lastCount=0;for(var i=0;i=0;i--){if(string[i]!==" "){break}lastCount++}newString.splice(0,firstCount);newString.splice(-lastCount,lastCount);return newString.join("")}}]);return ReactTooltip}(_react.Component);ReactTooltip.propTypes={children:_react.PropTypes.any,place:_react.PropTypes.string,type:_react.PropTypes.string,effect:_react.PropTypes.string,offset:_react.PropTypes.object,multiline:_react.PropTypes.bool,border:_react.PropTypes.bool,"class":_react.PropTypes.string,id:_react.PropTypes.string,html:_react.PropTypes.bool,delayHide:_react.PropTypes.number,delayShow:_react.PropTypes.number,event:_react.PropTypes.any,watchWindow:_react.PropTypes.bool,eventPropagationMode:_react.PropTypes.oneOf(["bubble","capture"])};ReactTooltip.defaultProps={eventPropagationMode:"bubble"};module.exports=ReactTooltip}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"./style":3,classnames:1}],3:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default='.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out , margin-top 0.3s ease-out, margin-left 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top:6px solid #222}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom:6px solid #222}.__react_component_tooltip.type-dark.place-left:after{border-left:6px solid #222}.__react_component_tooltip.type-dark.place-right:after{border-right:6px solid #222}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top:6px solid #8DC572}.__react_component_tooltip.type-success.place-bottom:after{border-bottom:6px solid #8DC572}.__react_component_tooltip.type-success.place-left:after{border-left:6px solid #8DC572}.__react_component_tooltip.type-success.place-right:after{border-right:6px solid #8DC572}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-left:after{border-left:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-right:after{border-right:6px solid #F0AD4E}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top:6px solid #BE6464}.__react_component_tooltip.type-error.place-bottom:after{border-bottom:6px solid #BE6464}.__react_component_tooltip.type-error.place-left:after{border-left:6px solid #BE6464}.__react_component_tooltip.type-error.place-right:after{border-right:6px solid #BE6464}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top:6px solid #337AB7}.__react_component_tooltip.type-info.place-bottom:after{border-bottom:6px solid #337AB7}.__react_component_tooltip.type-info.place-left:after{border-left:6px solid #337AB7}.__react_component_tooltip.type-info.place-right:after{border-right:6px solid #337AB7}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top:6px solid #fff}.__react_component_tooltip.type-light.place-bottom:after{border-bottom:6px solid #fff}.__react_component_tooltip.type-light.place-left:after{border-left:6px solid #fff}.__react_component_tooltip.type-light.place-right:after{border-right:6px solid #fff}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}'},{}]},{},[2])(2)}); \ No newline at end of file +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactTooltip=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o/;var multiline=e.currentTarget.getAttribute("data-multiline")?e.currentTarget.getAttribute("data-multiline"):this.props.multiline?this.props.multiline:false;var tooltipText=undefined;var multilineCount=0;if(!multiline||multiline==="false"||!regexp.test(originTooltip)){tooltipText=originTooltip}else{tooltipText=originTooltip.split(regexp).map(function(d,i){multilineCount+=1;return _react2.default.createElement("span",{key:i,className:"multi-line"},d)})}var extraClass=e.currentTarget.getAttribute("data-class")?e.currentTarget.getAttribute("data-class"):"";extraClass=this.props.class?this.props.class+" "+extraClass:extraClass;this.setState({placeholder:tooltipText,multilineCount:multilineCount,place:e.currentTarget.getAttribute("data-place")?e.currentTarget.getAttribute("data-place"):this.props.place?this.props.place:"top",type:e.currentTarget.getAttribute("data-type")?e.currentTarget.getAttribute("data-type"):this.props.type?this.props.type:"dark",effect:e.currentTarget.getAttribute("data-effect")?e.currentTarget.getAttribute("data-effect"):this.props.effect?this.props.effect:"float",offset:e.currentTarget.getAttribute("data-offset")?e.currentTarget.getAttribute("data-offset"):this.props.offset?this.props.offset:{},html:e.currentTarget.getAttribute("data-html")?e.currentTarget.getAttribute("data-html"):this.props.html?this.props.html:false,delayShow:e.currentTarget.getAttribute("data-delay-show")?e.currentTarget.getAttribute("data-delay-show"):this.props.delayShow?this.props.delayShow:0,delayHide:e.currentTarget.getAttribute("data-delay-hide")?e.currentTarget.getAttribute("data-delay-hide"):this.props.delayHide?this.props.delayHide:0,border:e.currentTarget.getAttribute("data-border")?e.currentTarget.getAttribute("data-border")==="true":this.props.border?this.props.border:false,extraClass:extraClass,multiline:multiline});this.addScrollListener();this.updateTooltip(e)}},{key:"updateTooltip",value:function updateTooltip(e){var _this3=this;var _state=this.state;var delayShow=_state.delayShow;var show=_state.show;var delayTime=show?0:parseInt(delayShow,10);var eventTarget=e.currentTarget;clearTimeout(this.delayShowLoop);this.delayShowLoop=setTimeout(function(){if(_this3.trim(_this3.state.placeholder).length>0){if(_this3.state.effect==="float"){_this3.setState({show:true,x:e.clientX,y:e.clientY})}else if(_this3.state.effect==="solid"){var _getPosition2=_this3.getPosition(eventTarget);var x=_getPosition2.x;var y=_getPosition2.y;_this3.setState({show:true,x:x,y:y})}}},delayTime)}},{key:"hideTooltip",value:function hideTooltip(){var _this4=this;var delayHide=this.state.delayHide;clearTimeout(this.delayShowLoop);setTimeout(function(){_this4.setState({show:false});_this4.removeScrollListener()},parseInt(delayHide,10))}},{key:"addScrollListener",value:function addScrollListener(){window.addEventListener("scroll",this.hideTooltip)}},{key:"removeScrollListener",value:function removeScrollListener(){window.removeEventListener("scroll",this.hideTooltip)}},{key:"getPosition",value:function getPosition(currentTarget){var _this5=this;var place=this.state.place;var node=_reactDom2.default.findDOMNode(this);var boundingClientRect=currentTarget.getBoundingClientRect();var targetTop=boundingClientRect.top;var targetLeft=boundingClientRect.left;var tipWidth=node.clientWidth;var tipHeight=node.clientHeight;var targetWidth=currentTarget.clientWidth;var targetHeight=currentTarget.clientHeight;var windoWidth=window.innerWidth;var windowHeight=window.innerHeight;var x=undefined;var y=undefined;var defaultTopY=targetTop-tipHeight-8;var defaultBottomY=targetTop+targetHeight+8;var defaultLeftX=targetLeft-tipWidth-6;var defaultRightX=targetLeft+targetWidth+6;var outsideTop=function outsideTop(){return defaultTopY-10<0};var outsideBottom=function outsideBottom(){return targetTop+targetHeight+tipHeight+25>windowHeight};var outsideLeft=function outsideLeft(){return defaultLeftX-10<0};var outsideRight=function outsideRight(){return targetLeft+targetWidth+tipWidth+25>windoWidth};var getTopPositionY=function getTopPositionY(){if(outsideTop(defaultTopY)&&!outsideBottom()){_this5.setState({place:"bottom"});return defaultBottomY}return defaultTopY};var getBottomPositionY=function getBottomPositionY(){if(outsideBottom()&&!outsideTop()){_this5.setState({place:"top"});return defaultTopY}return defaultBottomY};var getLeftPositionX=function getLeftPositionX(){if(outsideLeft()&&!outsideRight()){_this5.setState({place:"right"});return defaultRightX}return defaultLeftX};var getRightPositionX=function getRightPositionX(){if(outsideRight()&&!outsideLeft()){_this5.setState({place:"left"});return defaultLeftX}return defaultRightX};if(place==="top"){x=targetLeft-tipWidth/2+targetWidth/2;y=getTopPositionY()}else if(place==="bottom"){x=targetLeft-tipWidth/2+targetWidth/2;y=getBottomPositionY()}else if(place==="left"){x=getLeftPositionX();y=targetTop+targetHeight/2-tipHeight/2}else if(place==="right"){x=getRightPositionX();y=targetTop+targetHeight/2-tipHeight/2}return{x:x,y:y}}},{key:"updatePosition",value:function updatePosition(){var node=_reactDom2.default.findDOMNode(this);var tipWidth=node.clientWidth;var tipHeight=node.clientHeight;var _state2=this.state;var effect=_state2.effect;var place=_state2.place;var offset=_state2.offset;var offsetFromEffect={};var placements=["top","bottom","left","right"];placements.forEach(function(key){offsetFromEffect[key]={x:0,y:0}});if(effect==="float"){offsetFromEffect.top={x:-(tipWidth/2),y:-tipHeight};offsetFromEffect.bottom={x:-(tipWidth/2),y:15};offsetFromEffect.left={x:-(tipWidth+15),y:-(tipHeight/2)};offsetFromEffect.right={x:10,y:-(tipHeight/2)}}var xPosition=0;var yPosition=0;if(Object.prototype.toString.apply(offset)==="[object String]"){offset=JSON.parse(offset.toString().replace(/\'/g,'"'))}for(var key in offset){if(key==="top"){yPosition-=parseInt(offset[key],10)}else if(key==="bottom"){yPosition+=parseInt(offset[key],10)}else if(key==="left"){xPosition-=parseInt(offset[key],10)}else if(key==="right"){xPosition+=parseInt(offset[key],10)}}var x=this.state.x;var y=this.state.y;var windoWidth=window.innerWidth;var windowHeight=window.innerHeight;var getStyleLeft=function getStyleLeft(place){var offsetEffectX=effect==="solid"?0:place?offsetFromEffect[place].x:0;return x+offsetEffectX+xPosition};var getStyleTop=function getStyleTop(place){var offsetEffectY=effect==="solid"?0:place?offsetFromEffect[place].y:0;return y+offsetEffectY+yPosition};var outsideLeft=function outsideLeft(place){var styleLeft=getStyleLeft(place);return styleLeft<0&&x+offsetFromEffect["right"].x+xPosition<=windoWidth};var outsideRight=function outsideRight(place){var styleLeft=getStyleLeft(place);return styleLeft+tipWidth>windoWidth&&x+offsetFromEffect["left"].x+xPosition>=0};var outsideTop=function outsideTop(place){var styleTop=getStyleTop(place);return styleTop<0&&y+offsetFromEffect["bottom"].y+yPosition+tipHeight=windowHeight&&y+offsetFromEffect["top"].y+yPosition>=0};var outside=function outside(place){return outsideTop(place)||outsideRight(place)||outsideBottom(place)||outsideLeft(place)};if(outsideLeft(place)){if(!outside("right")){this.setState({place:"right"});return}}else if(outsideRight(place)){if(!outside("left")){this.setState({place:"left"});return}}else if(outsideTop(place)){if(!outside("bottom")){this.setState({place:"bottom"});return}}else if(outsideBottom(place)){if(!outside("top")){this.setState({place:"top"});return}}node.style.left=getStyleLeft(place)+"px";node.style.top=getStyleTop(place)+"px"}},{key:"setStyleHeader",value:function setStyleHeader(){if(!document.getElementsByTagName("head")[0].querySelector('style[id="react-tooltip"]')){var tag=document.createElement("style");tag.id="react-tooltip";tag.innerHTML=_style2.default;document.getElementsByTagName("head")[0].appendChild(tag)}}},{key:"render",value:function render(){var _state3=this.state;var placeholder=_state3.placeholder;var extraClass=_state3.extraClass;var html=_state3.html;var tooltipClass=(0,_classnames2.default)("__react_component_tooltip",{show:this.state.show},{border:this.state.border},{"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"});if(html){return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip",dangerouslySetInnerHTML:{__html:placeholder}})}else{var content=this.props.children?this.props.children:placeholder;return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip"},content)}}},{key:"trim",value:function trim(string){if(Object.prototype.toString.call(string)!=="[object String]"){return string}var newString=string.split("");var firstCount=0;var lastCount=0;for(var i=0;i=0;i--){if(string[i]!==" "){break}lastCount++}newString.splice(0,firstCount);newString.splice(-lastCount,lastCount);return newString.join("")}}]);return ReactTooltip}(_react.Component);ReactTooltip.propTypes={children:_react.PropTypes.any,place:_react.PropTypes.string,type:_react.PropTypes.string,effect:_react.PropTypes.string,offset:_react.PropTypes.object,multiline:_react.PropTypes.bool,border:_react.PropTypes.bool,"class":_react.PropTypes.string,id:_react.PropTypes.string,html:_react.PropTypes.bool,delayHide:_react.PropTypes.number,delayShow:_react.PropTypes.number,event:_react.PropTypes.any,watchWindow:_react.PropTypes.bool,isCapture:_react.PropTypes.bool};module.exports=ReactTooltip}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"./style":3,classnames:1}],3:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default='.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out , margin-top 0.3s ease-out, margin-left 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top:6px solid #222}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom:6px solid #222}.__react_component_tooltip.type-dark.place-left:after{border-left:6px solid #222}.__react_component_tooltip.type-dark.place-right:after{border-right:6px solid #222}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top:6px solid #8DC572}.__react_component_tooltip.type-success.place-bottom:after{border-bottom:6px solid #8DC572}.__react_component_tooltip.type-success.place-left:after{border-left:6px solid #8DC572}.__react_component_tooltip.type-success.place-right:after{border-right:6px solid #8DC572}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-left:after{border-left:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-right:after{border-right:6px solid #F0AD4E}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top:6px solid #BE6464}.__react_component_tooltip.type-error.place-bottom:after{border-bottom:6px solid #BE6464}.__react_component_tooltip.type-error.place-left:after{border-left:6px solid #BE6464}.__react_component_tooltip.type-error.place-right:after{border-right:6px solid #BE6464}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top:6px solid #337AB7}.__react_component_tooltip.type-info.place-bottom:after{border-bottom:6px solid #337AB7}.__react_component_tooltip.type-info.place-left:after{border-left:6px solid #337AB7}.__react_component_tooltip.type-info.place-right:after{border-right:6px solid #337AB7}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top:6px solid #fff}.__react_component_tooltip.type-light.place-bottom:after{border-bottom:6px solid #fff}.__react_component_tooltip.type-light.place-left:after{border-left:6px solid #fff}.__react_component_tooltip.type-light.place-right:after{border-right:6px solid #fff}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}'},{}]},{},[2])(2)}); \ No newline at end of file