Socket
Socket
Sign inDemoInstall

reactjs-popup

Package Overview
Dependencies
6
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.2 to 1.0.3

2

package.json
{
"name": "reactjs-popup",
"version": "1.0.2",
"version": "1.0.3",
"description": "React Popup Component",

@@ -5,0 +5,0 @@ "main": "reactjsPopup.es.js",

@@ -163,10 +163,12 @@ (function (global, factory) {

_this.lockScroll = function () {
if (_this.props.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";
};
_this.togglePopup = function () {
_this.setState(function (prevState) {
return {
isOpen: !prevState.isOpen
};
}, function () {
return _this.state.isOpen && _this.setPosition();
});
if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
};

@@ -179,2 +181,3 @@

_this.props.onOpen();
_this.lockScroll();
});

@@ -185,3 +188,6 @@ };

if (!_this.state.isOpen) return;
_this.setState({ isOpen: false }, _this.props.onClose());
_this.setState({ isOpen: false }, function () {
_this.props.onClose();
_this.resetScroll();
});
};

@@ -330,3 +336,4 @@

modal = _props.modal,
overlayStyle = _props.overlayStyle;
overlayStyle = _props.overlayStyle,
closeOnDocumentClick = _props.closeOnDocumentClick;

@@ -344,3 +351,3 @@ var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;

style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
onClick: closeOnDocumentClick ? this.closePopup : undefined
},

@@ -374,2 +381,3 @@ modal && this.renderContent()

modal: false,
lockScroll: true,
arrow: true,

@@ -390,2 +398,3 @@ offset: 0,

closeOnDocumentClick: PropTypes.bool,
lockScroll: PropTypes.bool,
offset: PropTypes.number,

@@ -392,0 +401,0 @@ mouseEnterDelay: PropTypes.number,

@@ -163,10 +163,12 @@ (function (global, factory) {

_this.lockScroll = function () {
if (_this.props.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";
};
_this.togglePopup = function () {
_this.setState(function (prevState) {
return {
isOpen: !prevState.isOpen
};
}, function () {
return _this.state.isOpen && _this.setPosition();
});
if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
};

@@ -179,2 +181,3 @@

_this.props.onOpen();
_this.lockScroll();
});

@@ -185,3 +188,6 @@ };

if (!_this.state.isOpen) return;
_this.setState({ isOpen: false }, _this.props.onClose());
_this.setState({ isOpen: false }, function () {
_this.props.onClose();
_this.resetScroll();
});
};

@@ -330,3 +336,4 @@

modal = _props.modal,
overlayStyle = _props.overlayStyle;
overlayStyle = _props.overlayStyle,
closeOnDocumentClick = _props.closeOnDocumentClick;

@@ -344,3 +351,3 @@ var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;

style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
onClick: closeOnDocumentClick ? this.closePopup : undefined
},

@@ -374,2 +381,3 @@ modal && this.renderContent()

modal: false,
lockScroll: true,
arrow: true,

@@ -390,2 +398,3 @@ offset: 0,

closeOnDocumentClick: PropTypes.bool,
lockScroll: PropTypes.bool,
offset: PropTypes.number,

@@ -392,0 +401,0 @@ mouseEnterDelay: PropTypes.number,

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e["reactjs-popup"]=t(e.React)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t={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"}}},o=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},n=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}}();var r=function(r){!function(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)}(i,e.Component);function i(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);var r=function(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}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,n));return r.state={isOpen:r.props.defaultOpen},r.togglePopup=function(){r.setState(function(e){return{isOpen:!e.isOpen}},function(){return r.state.isOpen&&r.setPosition()})},r.openPopup=function(){r.state.isOpen||r.setState({isOpen:!0},function(){r.setPosition(),r.props.onOpen()})},r.closePopup=function(){r.state.isOpen&&r.setState({isOpen:!1},r.props.onClose())},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.offset;if(!t){var s=r.HelperEl.getBoundingClientRect(),p=function(e,t,o,n,r){var i=(n?8:0)+r,s=o.split(" "),p=e.top+e.height/2,a=e.left+e.width/2,l=t.height,u=t.width,c=p-l/2,f=a-u/2,d="",g="0%",h="0%";switch(s[0]){case"top":c-=l/2+e.height/2+i,d="rotate(45deg)",g="100%",h="50%";break;case"bottom":c+=l/2+e.height/2+i,d="rotate(225deg)",h="50%";break;case"left":f-=u/2+e.width/2+i,d=" rotate(-45deg)",h="100%",g="50%";break;case"right":f+=u/2+e.width/2+i,d="rotate(135deg)",g="50%"}switch(s[1]){case"top":c=e.top,g=e.height/2+"px";break;case"bottom":c=e.top-l+e.height,g=l-e.height/2+"px";break;case"left":f=e.left,h=e.width/2+"px";break;case"right":f=e.left-u+e.width,h=u-e.width/2+"px"}return{top:c,left:f,transform:d,arrowLeft:h,arrowTop:g}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),n,o,i);r.ContentEl.style.top=p.top-s.top+"px",r.ContentEl.style.left=p.left-s.left+"px",o&&(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"!=r.TriggerEl.style.position&&""!=r.TriggerEl.style.position||(r.TriggerEl.style.position="relative")}},r.addWarperAction=function(){var e=r.props,o=e.contentStyle,n=e.className,i=e.modal,s=e.on,p=i?t.popupContent.modal:t.popupContent.tooltip,a={className:"popup-content "+n,style:Object.assign({},p,o),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&s.includes("hover")&&(a.onMouseEnter=r.onMouseEnter,a.onMouseLeave=r.onMouseLeave),a},r.renderTrigger=function(){var t={key:"T"},o=r.props,n=o.on,i=o.trigger;t.ref=r.setTriggerRef;for(var s=Array.isArray(n)?n:[n],p=0,a=s.length;p<a;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 n=r.props,i=n.arrow,s=n.modal,p=n.arrowStyle;return e.createElement("div",o({},r.addWarperAction(),{key:"C"}),i&&!s&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},t.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 n(i,[{key:"componentDidMount",value:function(){this.props.defaultOpen&&this.setPosition()}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var o=this.props,n=o.modal,r=o.overlayStyle,i=n?t.overlay.modal:t.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({},i,r),onClick:this.props.closeOnDocumentClick?this.closePopup:void 0},n&&this.renderContent()),this.state.isOpen&&!n&&this.renderContent(),this.renderTrigger()]}}]),i}();return r.defaultProps={children:function(){return e.createElement("span",null," Your Content Here !!")},onOpen:function(){},onClose:function(){},closeOnDocumentClick:!1,defaultOpen:!1,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,arrow:!0,offset:0,mouseEnterDelay:100,mouseLeaveDelay:100},r});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e["reactjs-popup"]=t(e.React)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t={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"}}},o=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},n=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}}();var r=function(r){!function(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)}(i,e.Component);function i(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);var r=function(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}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,n));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.offset;if(!t){var s=r.HelperEl.getBoundingClientRect(),p=function(e,t,o,n,r){var i=(n?8:0)+r,s=o.split(" "),p=e.top+e.height/2,l=e.left+e.width/2,a=t.height,u=t.width,c=p-a/2,f=l-u/2,d="",g="0%",m="0%";switch(s[0]){case"top":c-=a/2+e.height/2+i,d="rotate(45deg)",g="100%",m="50%";break;case"bottom":c+=a/2+e.height/2+i,d="rotate(225deg)",m="50%";break;case"left":f-=u/2+e.width/2+i,d=" rotate(-45deg)",m="100%",g="50%";break;case"right":f+=u/2+e.width/2+i,d="rotate(135deg)",g="50%"}switch(s[1]){case"top":c=e.top,g=e.height/2+"px";break;case"bottom":c=e.top-a+e.height,g=a-e.height/2+"px";break;case"left":f=e.left,m=e.width/2+"px";break;case"right":f=e.left-u+e.width,m=u-e.width/2+"px"}return{top:c,left:f,transform:d,arrowLeft:m,arrowTop:g}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),n,o,i);r.ContentEl.style.top=p.top-s.top+"px",r.ContentEl.style.left=p.left-s.left+"px",o&&(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"!=r.TriggerEl.style.position&&""!=r.TriggerEl.style.position||(r.TriggerEl.style.position="relative")}},r.addWarperAction=function(){var e=r.props,o=e.contentStyle,n=e.className,i=e.modal,s=e.on,p=i?t.popupContent.modal:t.popupContent.tooltip,l={className:"popup-content "+n,style:Object.assign({},p,o),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(){var t={key:"T"},o=r.props,n=o.on,i=o.trigger;t.ref=r.setTriggerRef;for(var 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 n=r.props,i=n.arrow,s=n.modal,p=n.arrowStyle;return e.createElement("div",o({},r.addWarperAction(),{key:"C"}),i&&!s&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},t.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 n(i,[{key:"componentDidMount",value:function(){this.props.defaultOpen&&this.setPosition()}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var o=this.props,n=o.modal,r=o.overlayStyle,i=o.closeOnDocumentClick,s=n?t.overlay.modal:t.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(),this.renderTrigger()]}}]),i}();return r.defaultProps={children:function(){return e.createElement("span",null," Your Content Here !!")},onOpen:function(){},onClose:function(){},closeOnDocumentClick:!1,defaultOpen:!1,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!0,arrow:!0,offset:0,mouseEnterDelay:100,mouseLeaveDelay:100},r});

@@ -161,10 +161,12 @@ 'use strict';

_this.lockScroll = function () {
if (_this.props.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";
};
_this.togglePopup = function () {
_this.setState(function (prevState) {
return {
isOpen: !prevState.isOpen
};
}, function () {
return _this.state.isOpen && _this.setPosition();
});
if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
};

@@ -177,2 +179,3 @@

_this.props.onOpen();
_this.lockScroll();
});

@@ -183,3 +186,6 @@ };

if (!_this.state.isOpen) return;
_this.setState({ isOpen: false }, _this.props.onClose());
_this.setState({ isOpen: false }, function () {
_this.props.onClose();
_this.resetScroll();
});
};

@@ -328,3 +334,4 @@

modal = _props.modal,
overlayStyle = _props.overlayStyle;
overlayStyle = _props.overlayStyle,
closeOnDocumentClick = _props.closeOnDocumentClick;

@@ -342,3 +349,3 @@ var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;

style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
onClick: closeOnDocumentClick ? this.closePopup : undefined
},

@@ -372,2 +379,3 @@ modal && this.renderContent()

modal: false,
lockScroll: true,
arrow: true,

@@ -374,0 +382,0 @@ offset: 0,

@@ -227,10 +227,12 @@ import React from 'react';

_this.lockScroll = function () {
if (_this.props.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";
};
_this.togglePopup = function () {
_this.setState(function (prevState) {
return {
isOpen: !prevState.isOpen
};
}, function () {
return _this.state.isOpen && _this.setPosition();
});
if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
};

@@ -243,2 +245,3 @@

_this.props.onOpen();
_this.lockScroll();
});

@@ -249,3 +252,6 @@ };

if (!_this.state.isOpen) return;
_this.setState({ isOpen: false }, _this.props.onClose());
_this.setState({ isOpen: false }, function () {
_this.props.onClose();
_this.resetScroll();
});
};

@@ -394,3 +400,4 @@

modal = _props.modal,
overlayStyle = _props.overlayStyle;
overlayStyle = _props.overlayStyle,
closeOnDocumentClick = _props.closeOnDocumentClick;

@@ -408,3 +415,3 @@ var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;

style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
onClick: closeOnDocumentClick ? this.closePopup : undefined
},

@@ -437,2 +444,3 @@ modal && this.renderContent()

modal: false,
lockScroll: true,
arrow: true,

@@ -453,2 +461,3 @@ offset: 0,

closeOnDocumentClick: PropTypes.bool,
lockScroll: PropTypes.bool,
offset: PropTypes.number,

@@ -455,0 +464,0 @@ mouseEnterDelay: PropTypes.number,

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc