reactjs-popup
Advanced tools
Comparing version 1.0.4 to 1.0.5
{ | ||
"name": "reactjs-popup", | ||
"version": "1.0.4", | ||
"version": "1.0.5", | ||
"description": "React Popup Component", | ||
@@ -5,0 +5,0 @@ "main": "reactjsPopup.es.js", |
@@ -152,4 +152,4 @@ (function (global, factory) { | ||
var Popup = function (_React$Component) { | ||
_inherits(Popup, _React$Component); | ||
var Popup = function (_React$PureComponent) { | ||
_inherits(Popup, _React$PureComponent); | ||
@@ -162,11 +162,13 @@ function Popup(props) { | ||
_this.state = { | ||
isOpen: _this.props.defaultOpen | ||
isOpen: _this.props.open || _this.props.defaultOpen, | ||
modal: _this.props.modal ? true : !_this.props.trigger | ||
// we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe | ||
}; | ||
_this.lockScroll = function () { | ||
if (_this.props.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; | ||
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; | ||
}; | ||
_this.resetScroll = function () { | ||
if (_this.props.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto"; | ||
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto"; | ||
}; | ||
@@ -215,3 +217,2 @@ | ||
var _this$props = _this.props, | ||
modal = _this$props.modal, | ||
arrow = _this$props.arrow, | ||
@@ -221,2 +222,3 @@ position = _this$props.position, | ||
offsetY = _this$props.offsetY; | ||
var modal = _this.state.modal; | ||
@@ -247,4 +249,4 @@ if (modal) return; | ||
className = _this$props2.className, | ||
modal = _this$props2.modal, | ||
on = _this$props2.on; | ||
var modal = _this.state.modal; | ||
@@ -297,4 +299,4 @@ var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip; | ||
arrow = _this$props4.arrow, | ||
modal = _this$props4.modal, | ||
arrowStyle = _this$props4.arrowStyle; | ||
var modal = _this.state.modal; | ||
@@ -345,4 +347,11 @@ return React.createElement( | ||
}, { | ||
key: "componentWillReceiveProps", | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.open === nextProps.open) return; | ||
if (nextProps.open) this.openPopup();else this.closePopup(); | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
// kill any function to execute if the component is unmounted | ||
clearTimeout(this.timeOut); | ||
@@ -354,8 +363,8 @@ } | ||
var _props2 = this.props, | ||
modal = _props2.modal, | ||
overlayStyle = _props2.overlayStyle, | ||
closeOnDocumentClick = _props2.closeOnDocumentClick; | ||
var modal = this.state.modal; | ||
var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; | ||
return [React.createElement("div", { | ||
return [this.state.isOpen && React.createElement("div", { | ||
key: "H", | ||
@@ -373,3 +382,3 @@ style: { position: "absolute", top: "0px", left: "0px" }, | ||
modal && this.renderContent() | ||
), this.state.isOpen && !modal && this.renderContent(), React.createElement( | ||
), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement( | ||
Ref, | ||
@@ -383,3 +392,3 @@ { innerRef: this.setTriggerRef, key: "R" }, | ||
return Popup; | ||
}(React.Component); | ||
}(React.PureComponent); | ||
@@ -394,7 +403,9 @@ Popup.defaultProps = { | ||
}, | ||
trigger: null, | ||
onOpen: function onOpen() {}, | ||
onClose: function onClose() {}, | ||
defaultOpen: false, | ||
open: false, | ||
closeOnDocumentClick: false, | ||
closeOnEscape: true, | ||
defaultOpen: false, | ||
on: ["click"], | ||
@@ -431,3 +442,5 @@ contentStyle: {}, | ||
onClose: PropTypes.func, | ||
trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, | ||
open: PropTypes.bool, | ||
defaultOpen: PropTypes.bool, | ||
trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element | ||
on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]), | ||
@@ -439,4 +452,4 @@ children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired, | ||
var Ref = function (_React$Component2) { | ||
_inherits(Ref, _React$Component2); | ||
var Ref = function (_React$PureComponent2) { | ||
_inherits(Ref, _React$PureComponent2); | ||
@@ -466,3 +479,3 @@ function Ref(props) { | ||
return Ref; | ||
}(React.Component); | ||
}(React.PureComponent); | ||
@@ -469,0 +482,0 @@ return Popup; |
@@ -152,4 +152,4 @@ (function (global, factory) { | ||
var Popup = function (_React$Component) { | ||
_inherits(Popup, _React$Component); | ||
var Popup = function (_React$PureComponent) { | ||
_inherits(Popup, _React$PureComponent); | ||
@@ -162,11 +162,13 @@ function Popup(props) { | ||
_this.state = { | ||
isOpen: _this.props.defaultOpen | ||
isOpen: _this.props.open || _this.props.defaultOpen, | ||
modal: _this.props.modal ? true : !_this.props.trigger | ||
// we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe | ||
}; | ||
_this.lockScroll = function () { | ||
if (_this.props.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; | ||
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; | ||
}; | ||
_this.resetScroll = function () { | ||
if (_this.props.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto"; | ||
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto"; | ||
}; | ||
@@ -215,3 +217,2 @@ | ||
var _this$props = _this.props, | ||
modal = _this$props.modal, | ||
arrow = _this$props.arrow, | ||
@@ -221,2 +222,3 @@ position = _this$props.position, | ||
offsetY = _this$props.offsetY; | ||
var modal = _this.state.modal; | ||
@@ -247,4 +249,4 @@ if (modal) return; | ||
className = _this$props2.className, | ||
modal = _this$props2.modal, | ||
on = _this$props2.on; | ||
var modal = _this.state.modal; | ||
@@ -297,4 +299,4 @@ var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip; | ||
arrow = _this$props4.arrow, | ||
modal = _this$props4.modal, | ||
arrowStyle = _this$props4.arrowStyle; | ||
var modal = _this.state.modal; | ||
@@ -345,4 +347,11 @@ return React.createElement( | ||
}, { | ||
key: "componentWillReceiveProps", | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.open === nextProps.open) return; | ||
if (nextProps.open) this.openPopup();else this.closePopup(); | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
// kill any function to execute if the component is unmounted | ||
clearTimeout(this.timeOut); | ||
@@ -354,8 +363,8 @@ } | ||
var _props2 = this.props, | ||
modal = _props2.modal, | ||
overlayStyle = _props2.overlayStyle, | ||
closeOnDocumentClick = _props2.closeOnDocumentClick; | ||
var modal = this.state.modal; | ||
var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; | ||
return [React.createElement("div", { | ||
return [this.state.isOpen && React.createElement("div", { | ||
key: "H", | ||
@@ -373,3 +382,3 @@ style: { position: "absolute", top: "0px", left: "0px" }, | ||
modal && this.renderContent() | ||
), this.state.isOpen && !modal && this.renderContent(), React.createElement( | ||
), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement( | ||
Ref, | ||
@@ -383,3 +392,3 @@ { innerRef: this.setTriggerRef, key: "R" }, | ||
return Popup; | ||
}(React.Component); | ||
}(React.PureComponent); | ||
@@ -394,7 +403,9 @@ Popup.defaultProps = { | ||
}, | ||
trigger: null, | ||
onOpen: function onOpen() {}, | ||
onClose: function onClose() {}, | ||
defaultOpen: false, | ||
open: false, | ||
closeOnDocumentClick: false, | ||
closeOnEscape: true, | ||
defaultOpen: false, | ||
on: ["click"], | ||
@@ -431,3 +442,5 @@ contentStyle: {}, | ||
onClose: PropTypes.func, | ||
trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, | ||
open: PropTypes.bool, | ||
defaultOpen: PropTypes.bool, | ||
trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element | ||
on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]), | ||
@@ -439,4 +452,4 @@ children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired, | ||
var Ref = function (_React$Component2) { | ||
_inherits(Ref, _React$Component2); | ||
var Ref = function (_React$PureComponent2) { | ||
_inherits(Ref, _React$PureComponent2); | ||
@@ -466,3 +479,3 @@ function Ref(props) { | ||
return Ref; | ||
}(React.Component); | ||
}(React.PureComponent); | ||
@@ -469,0 +482,0 @@ return Popup; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e["reactjs-popup"]=t(e.React,e.reactDom)}(this,function(e,t){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o={popupContent:{tooltip:{position:"absolute",zIndex:"2",width:"200px",background:"rgb(255, 255, 255)",border:"1px solid rgb(187, 187, 187)",boxShadow:"rgba(0, 0, 0, 0.2) 0px 1px 3px",padding:"5px"},modal:{position:"relative",background:"rgb(255, 255, 255)",width:"50%",margin:"auto",border:"1px solid rgb(187, 187, 187)",padding:"5px"}},popupArrow:{height:"10px",width:"10px",position:"absolute",background:"rgb(255, 255, 255)",transform:"rotate(45deg)",margin:"-5px",zIndex:"-1",boxShadow:"rgba(0, 0, 0, 0.2) 1px 1px 1px"},overlay:{tooltip:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0"},modal:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",background:"rgba(0, 0, 0,0.5)",display:"flex",zIndex:"999"}}},n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},r=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function p(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var l=function(t){p(l,e.Component);function l(t){i(this,l);var r=s(this,(l.__proto__||Object.getPrototypeOf(l)).call(this,t));return r.state={isOpen:r.props.defaultOpen},r.lockScroll=function(){r.props.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")},r.resetScroll=function(){r.props.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")},r.togglePopup=function(){r.state.isOpen?r.closePopup():r.openPopup()},r.openPopup=function(){r.state.isOpen||r.setState({isOpen:!0},function(){r.setPosition(),r.props.onOpen(),r.lockScroll()})},r.closePopup=function(){r.state.isOpen&&r.setState({isOpen:!1},function(){r.props.onClose(),r.resetScroll()})},r.onMouseEnter=function(){clearTimeout(r.timeOut);var e=r.props.mouseEnterDelay;r.timeOut=setTimeout(function(){return r.openPopup()},e)},r.onMouseLeave=function(){clearTimeout(r.timeOut);var e=r.props.mouseLeaveDelay;r.timeOut=setTimeout(function(){return r.closePopup()},e)},r.setPosition=function(){var e=r.props,t=e.modal,o=e.arrow,n=e.position,i=e.offsetX,s=e.offsetY;if(!t){var p=r.HelperEl.getBoundingClientRect(),l=function(e,t,o,n,r){var i=n?8:0,s=i+r.offsetX,p=i+r.offsetY,l=o.split(" "),a=e.top+e.height/2,u=e.left+e.width/2,c=t.height,f=t.width,d=a-c/2,g=u-f/2,m="",h="0%",y="0%";switch(l[0]){case"top":d-=c/2+e.height/2+p,m="rotate(45deg)",h="100%",y="50%";break;case"bottom":d+=c/2+e.height/2+p,m="rotate(225deg)",y="50%";break;case"left":g-=f/2+e.width/2+s,m=" rotate(-45deg)",y="100%",h="50%";break;case"right":g+=f/2+e.width/2+s,m="rotate(135deg)",h="50%"}switch(l[1]){case"top":d=e.top,h=e.height/2+"px";break;case"bottom":d=e.top-c+e.height,h=c-e.height/2+"px";break;case"left":g=e.left,y=e.width/2+"px";break;case"right":g=e.left-f+e.width,y=f-e.width/2+"px"}return{top:d,left:g,transform:m,arrowLeft:y,arrowTop:h}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),n,o,{offsetX:i,offsetY:s});r.ContentEl.style.top=l.top-p.top+"px",r.ContentEl.style.left=l.left-p.left+"px",o&&(r.ArrowEl.style.transform=l.transform,r.ArrowEl.style["-ms-transform"]=l.transform,r.ArrowEl.style["-webkit-transform"]=l.transform,r.ArrowEl.style.top=l.arrowTop,r.ArrowEl.style.left=l.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}},r.addWarperAction=function(){var e=r.props,t=e.contentStyle,n=e.className,i=e.modal,s=e.on,p=i?o.popupContent.modal:o.popupContent.tooltip,l={className:"popup-content "+n,style:Object.assign({},p,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&s.includes("hover")&&(l.onMouseEnter=r.onMouseEnter,l.onMouseLeave=r.onMouseLeave),l},r.renderTrigger=function(){for(var t={key:"T"},o=r.props,n=o.on,i=o.trigger,s=Array.isArray(n)?n:[n],p=0,l=s.length;p<l;p++)switch(s[p]){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave;case"focus":t.onFocus=r.onMouseEnter}return"function"==typeof i?e.cloneElement(i(r.state.isOpen),t):e.cloneElement(i,t)},r.renderContent=function(){var t=r.props,i=t.arrow,s=t.modal,p=t.arrowStyle;return e.createElement("div",n({},r.addWarperAction(),{key:"C"}),i&&!s&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},o.popupArrow,p)}),"function"==typeof r.props.children?r.props.children(r.closePopup,r.state.isOpen):r.props.children)},r.setTriggerRef=function(e){return r.TriggerEl=e},r.setContentRef=function(e){return r.ContentEl=e},r.setArrowRef=function(e){return r.ArrowEl=e},r.setHelperRef=function(e){return r.HelperEl=e},r.timeOut=0,r}return r(l,[{key:"componentDidMount",value:function(){var e=this,t=this.props,o=t.closeOnEscape;t.defaultOpen&&this.setPosition(),o&&window.addEventListener("keyup",function(t){"Escape"===t.key&&e.closePopup()})}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var t=this.props,n=t.modal,r=t.overlayStyle,i=t.closeOnDocumentClick,s=n?o.overlay.modal:o.overlay.tooltip;return[e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),this.state.isOpen&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},s,r),onClick:i?this.closePopup:void 0},n&&this.renderContent()),this.state.isOpen&&!n&&this.renderContent(),e.createElement(a,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}]),l}();l.defaultProps={children:function(){return e.createElement("span",null," Your Content Here !!")},onOpen:function(){},onClose:function(){},closeOnDocumentClick:!1,closeOnEscape:!0,defaultOpen:!1,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!0,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100};var a=function(o){p(n,e.Component);function n(e){return i(this,n),s(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e))}return r(n,[{key:"componentDidMount",value:function(){var e=this.props.innerRef;e&&e(t.findDOMNode(this))}},{key:"render",value:function(){var t=this.props.children;return e.Children.only(t)}}]),n}();return l}); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e["reactjs-popup"]=t(e.React,e.reactDom)}(this,function(e,t){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o={popupContent:{tooltip:{position:"absolute",zIndex:"2",width:"200px",background:"rgb(255, 255, 255)",border:"1px solid rgb(187, 187, 187)",boxShadow:"rgba(0, 0, 0, 0.2) 0px 1px 3px",padding:"5px"},modal:{position:"relative",background:"rgb(255, 255, 255)",width:"50%",margin:"auto",border:"1px solid rgb(187, 187, 187)",padding:"5px"}},popupArrow:{height:"10px",width:"10px",position:"absolute",background:"rgb(255, 255, 255)",transform:"rotate(45deg)",margin:"-5px",zIndex:"-1",boxShadow:"rgba(0, 0, 0, 0.2) 1px 1px 1px"},overlay:{tooltip:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0"},modal:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",background:"rgba(0, 0, 0,0.5)",display:"flex",zIndex:"999"}}},n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},r=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function p(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var l=function(t){p(l,e.PureComponent);function l(t){i(this,l);var r=s(this,(l.__proto__||Object.getPrototypeOf(l)).call(this,t));return r.state={isOpen:r.props.open||r.props.defaultOpen,modal:!!r.props.modal||!r.props.trigger},r.lockScroll=function(){r.state.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")},r.resetScroll=function(){r.state.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")},r.togglePopup=function(){r.state.isOpen?r.closePopup():r.openPopup()},r.openPopup=function(){r.state.isOpen||r.setState({isOpen:!0},function(){r.setPosition(),r.props.onOpen(),r.lockScroll()})},r.closePopup=function(){r.state.isOpen&&r.setState({isOpen:!1},function(){r.props.onClose(),r.resetScroll()})},r.onMouseEnter=function(){clearTimeout(r.timeOut);var e=r.props.mouseEnterDelay;r.timeOut=setTimeout(function(){return r.openPopup()},e)},r.onMouseLeave=function(){clearTimeout(r.timeOut);var e=r.props.mouseLeaveDelay;r.timeOut=setTimeout(function(){return r.closePopup()},e)},r.setPosition=function(){var e=r.props,t=e.arrow,o=e.position,n=e.offsetX,i=e.offsetY;if(!r.state.modal){var s=r.HelperEl.getBoundingClientRect(),p=function(e,t,o,n,r){var i=n?8:0,s=i+r.offsetX,p=i+r.offsetY,l=o.split(" "),a=e.top+e.height/2,u=e.left+e.width/2,c=t.height,f=t.width,d=a-c/2,g=u-f/2,h="",m="0%",y="0%";switch(l[0]){case"top":d-=c/2+e.height/2+p,h="rotate(45deg)",m="100%",y="50%";break;case"bottom":d+=c/2+e.height/2+p,h="rotate(225deg)",y="50%";break;case"left":g-=f/2+e.width/2+s,h=" rotate(-45deg)",y="100%",m="50%";break;case"right":g+=f/2+e.width/2+s,h="rotate(135deg)",m="50%"}switch(l[1]){case"top":d=e.top,m=e.height/2+"px";break;case"bottom":d=e.top-c+e.height,m=c-e.height/2+"px";break;case"left":g=e.left,y=e.width/2+"px";break;case"right":g=e.left-f+e.width,y=f-e.width/2+"px"}return{top:d,left:g,transform:h,arrowLeft:y,arrowTop:m}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),o,t,{offsetX:n,offsetY:i});r.ContentEl.style.top=p.top-s.top+"px",r.ContentEl.style.left=p.left-s.left+"px",t&&(r.ArrowEl.style.transform=p.transform,r.ArrowEl.style["-ms-transform"]=p.transform,r.ArrowEl.style["-webkit-transform"]=p.transform,r.ArrowEl.style.top=p.arrowTop,r.ArrowEl.style.left=p.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}},r.addWarperAction=function(){var e=r.props,t=e.contentStyle,n=e.className,i=e.on,s=r.state.modal,p=s?o.popupContent.modal:o.popupContent.tooltip,l={className:"popup-content "+n,style:Object.assign({},p,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!s&&i.includes("hover")&&(l.onMouseEnter=r.onMouseEnter,l.onMouseLeave=r.onMouseLeave),l},r.renderTrigger=function(){for(var t={key:"T"},o=r.props,n=o.on,i=o.trigger,s=Array.isArray(n)?n:[n],p=0,l=s.length;p<l;p++)switch(s[p]){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave;case"focus":t.onFocus=r.onMouseEnter}return"function"==typeof i?e.cloneElement(i(r.state.isOpen),t):e.cloneElement(i,t)},r.renderContent=function(){var t=r.props,i=t.arrow,s=t.arrowStyle,p=r.state.modal;return e.createElement("div",n({},r.addWarperAction(),{key:"C"}),i&&!p&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},o.popupArrow,s)}),"function"==typeof r.props.children?r.props.children(r.closePopup,r.state.isOpen):r.props.children)},r.setTriggerRef=function(e){return r.TriggerEl=e},r.setContentRef=function(e){return r.ContentEl=e},r.setArrowRef=function(e){return r.ArrowEl=e},r.setHelperRef=function(e){return r.HelperEl=e},r.timeOut=0,r}return r(l,[{key:"componentDidMount",value:function(){var e=this,t=this.props,o=t.closeOnEscape;t.defaultOpen&&this.setPosition(),o&&window.addEventListener("keyup",function(t){"Escape"===t.key&&e.closePopup()})}},{key:"componentWillReceiveProps",value:function(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var t=this.props,n=t.overlayStyle,r=t.closeOnDocumentClick,i=this.state.modal,s=i?o.overlay.modal:o.overlay.tooltip;return[this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),this.state.isOpen&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},s,n),onClick:r?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent(),!!this.props.trigger&&e.createElement(a,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}]),l}();l.defaultProps={children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,closeOnDocumentClick:!1,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!0,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100};var a=function(o){p(n,e.PureComponent);function n(e){return i(this,n),s(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e))}return r(n,[{key:"componentDidMount",value:function(){var e=this.props.innerRef;e&&e(t.findDOMNode(this))}},{key:"render",value:function(){var t=this.props.children;return e.Children.only(t)}}]),n}();return l}); |
@@ -151,4 +151,4 @@ 'use strict'; | ||
var Popup = function (_React$Component) { | ||
_inherits(Popup, _React$Component); | ||
var Popup = function (_React$PureComponent) { | ||
_inherits(Popup, _React$PureComponent); | ||
@@ -161,11 +161,13 @@ function Popup(props) { | ||
_this.state = { | ||
isOpen: _this.props.defaultOpen | ||
isOpen: _this.props.open || _this.props.defaultOpen, | ||
modal: _this.props.modal ? true : !_this.props.trigger | ||
// we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe | ||
}; | ||
_this.lockScroll = function () { | ||
if (_this.props.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; | ||
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; | ||
}; | ||
_this.resetScroll = function () { | ||
if (_this.props.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto"; | ||
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto"; | ||
}; | ||
@@ -214,3 +216,2 @@ | ||
var _this$props = _this.props, | ||
modal = _this$props.modal, | ||
arrow = _this$props.arrow, | ||
@@ -220,2 +221,3 @@ position = _this$props.position, | ||
offsetY = _this$props.offsetY; | ||
var modal = _this.state.modal; | ||
@@ -246,4 +248,4 @@ if (modal) return; | ||
className = _this$props2.className, | ||
modal = _this$props2.modal, | ||
on = _this$props2.on; | ||
var modal = _this.state.modal; | ||
@@ -296,4 +298,4 @@ var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip; | ||
arrow = _this$props4.arrow, | ||
modal = _this$props4.modal, | ||
arrowStyle = _this$props4.arrowStyle; | ||
var modal = _this.state.modal; | ||
@@ -344,4 +346,11 @@ return React.createElement( | ||
}, { | ||
key: "componentWillReceiveProps", | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.open === nextProps.open) return; | ||
if (nextProps.open) this.openPopup();else this.closePopup(); | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
// kill any function to execute if the component is unmounted | ||
clearTimeout(this.timeOut); | ||
@@ -353,8 +362,8 @@ } | ||
var _props2 = this.props, | ||
modal = _props2.modal, | ||
overlayStyle = _props2.overlayStyle, | ||
closeOnDocumentClick = _props2.closeOnDocumentClick; | ||
var modal = this.state.modal; | ||
var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; | ||
return [React.createElement("div", { | ||
return [this.state.isOpen && React.createElement("div", { | ||
key: "H", | ||
@@ -372,3 +381,3 @@ style: { position: "absolute", top: "0px", left: "0px" }, | ||
modal && this.renderContent() | ||
), this.state.isOpen && !modal && this.renderContent(), React.createElement( | ||
), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement( | ||
Ref, | ||
@@ -382,3 +391,3 @@ { innerRef: this.setTriggerRef, key: "R" }, | ||
return Popup; | ||
}(React.Component); | ||
}(React.PureComponent); | ||
@@ -393,7 +402,9 @@ Popup.defaultProps = { | ||
}, | ||
trigger: null, | ||
onOpen: function onOpen() {}, | ||
onClose: function onClose() {}, | ||
defaultOpen: false, | ||
open: false, | ||
closeOnDocumentClick: false, | ||
closeOnEscape: true, | ||
defaultOpen: false, | ||
on: ["click"], | ||
@@ -413,4 +424,4 @@ contentStyle: {}, | ||
}; | ||
var Ref = function (_React$Component2) { | ||
_inherits(Ref, _React$Component2); | ||
var Ref = function (_React$PureComponent2) { | ||
_inherits(Ref, _React$PureComponent2); | ||
@@ -440,5 +451,5 @@ function Ref(props) { | ||
return Ref; | ||
}(React.Component); | ||
}(React.PureComponent); | ||
module.exports = Popup; | ||
//# sourceMappingURL=reactjsPopup.browser.js.map |
@@ -217,4 +217,4 @@ import React from 'react'; | ||
var Popup = function (_React$Component) { | ||
inherits(Popup, _React$Component); | ||
var Popup = function (_React$PureComponent) { | ||
inherits(Popup, _React$PureComponent); | ||
@@ -227,11 +227,13 @@ function Popup(props) { | ||
_this.state = { | ||
isOpen: _this.props.defaultOpen | ||
isOpen: _this.props.open || _this.props.defaultOpen, | ||
modal: _this.props.modal ? true : !_this.props.trigger | ||
// we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe | ||
}; | ||
_this.lockScroll = function () { | ||
if (_this.props.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; | ||
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; | ||
}; | ||
_this.resetScroll = function () { | ||
if (_this.props.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto"; | ||
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto"; | ||
}; | ||
@@ -280,3 +282,2 @@ | ||
var _this$props = _this.props, | ||
modal = _this$props.modal, | ||
arrow = _this$props.arrow, | ||
@@ -286,2 +287,3 @@ position = _this$props.position, | ||
offsetY = _this$props.offsetY; | ||
var modal = _this.state.modal; | ||
@@ -312,4 +314,4 @@ if (modal) return; | ||
className = _this$props2.className, | ||
modal = _this$props2.modal, | ||
on = _this$props2.on; | ||
var modal = _this.state.modal; | ||
@@ -362,4 +364,4 @@ var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip; | ||
arrow = _this$props4.arrow, | ||
modal = _this$props4.modal, | ||
arrowStyle = _this$props4.arrowStyle; | ||
var modal = _this.state.modal; | ||
@@ -410,4 +412,11 @@ return React.createElement( | ||
}, { | ||
key: "componentWillReceiveProps", | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.open === nextProps.open) return; | ||
if (nextProps.open) this.openPopup();else this.closePopup(); | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
// kill any function to execute if the component is unmounted | ||
clearTimeout(this.timeOut); | ||
@@ -419,8 +428,8 @@ } | ||
var _props2 = this.props, | ||
modal = _props2.modal, | ||
overlayStyle = _props2.overlayStyle, | ||
closeOnDocumentClick = _props2.closeOnDocumentClick; | ||
var modal = this.state.modal; | ||
var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; | ||
return [React.createElement("div", { | ||
return [this.state.isOpen && React.createElement("div", { | ||
key: "H", | ||
@@ -438,3 +447,3 @@ style: { position: "absolute", top: "0px", left: "0px" }, | ||
modal && this.renderContent() | ||
), this.state.isOpen && !modal && this.renderContent(), React.createElement( | ||
), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement( | ||
Ref, | ||
@@ -447,3 +456,3 @@ { innerRef: this.setTriggerRef, key: "R" }, | ||
return Popup; | ||
}(React.Component); | ||
}(React.PureComponent); | ||
@@ -458,7 +467,9 @@ Popup.defaultProps = { | ||
}, | ||
trigger: null, | ||
onOpen: function onOpen() {}, | ||
onClose: function onClose() {}, | ||
defaultOpen: false, | ||
open: false, | ||
closeOnDocumentClick: false, | ||
closeOnEscape: true, | ||
defaultOpen: false, | ||
on: ["click"], | ||
@@ -495,3 +506,5 @@ contentStyle: {}, | ||
onClose: PropTypes.func, | ||
trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, | ||
open: PropTypes.bool, | ||
defaultOpen: PropTypes.bool, | ||
trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element | ||
on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]), | ||
@@ -503,4 +516,4 @@ children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired, | ||
var Ref = function (_React$Component2) { | ||
inherits(Ref, _React$Component2); | ||
var Ref = function (_React$PureComponent2) { | ||
inherits(Ref, _React$PureComponent2); | ||
@@ -528,5 +541,5 @@ function Ref(props) { | ||
return Ref; | ||
}(React.Component); | ||
}(React.PureComponent); | ||
export default Popup; | ||
//# sourceMappingURL=reactjsPopup.es.js.map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
169932
1711