reactjs-popup - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

 {
   "name": "reactjs-popup",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React Popup Component - Modals,Tooltips and Menus —  All in one",
@@ -5,0 +5,0 @@ "main": "reactjs-popup.es.js",

reactjs-popup.cjs.js

 /*!
- * reactjs-popup v1.0.6
+ * reactjs-popup v1.0.7
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -426,3 +426,4 @@ * Released under the MIT License.
       overlayStyle,
-      closeOnDocumentClick
+      closeOnDocumentClick,
+      on
     } = this.props;
@@ -432,2 +433,3 @@ const {
     } = this.state;
+    const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
     const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
@@ -442,7 +444,7 @@ return [this.state.isOpen && React.createElement("div", {
       ref: this.setHelperRef
-    }), this.state.isOpen && React.createElement("div", {
+    }), overlay && React.createElement("div", {
       key: "O",
       className: "popup-overlay",
       style: Object.assign({}, ovStyle, overlayStyle),
-      onClick: closeOnDocumentClick ? this.closePopup : undefined
+      onClick: this.closePopup
     }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
@@ -466,3 +468,3 @@ innerRef: this.setTriggerRef,
     open: false,
-    closeOnDocumentClick: false,
+    closeOnDocumentClick: true,
     closeOnEscape: true,
@@ -469,0 +471,0 @@ on: ["click"],

reactjs-popup.es.js

 /*!
- * reactjs-popup v1.0.6
+ * reactjs-popup v1.0.7
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -422,3 +422,4 @@ * Released under the MIT License.
       overlayStyle,
-      closeOnDocumentClick
+      closeOnDocumentClick,
+      on
     } = this.props;
@@ -428,2 +429,3 @@ const {
     } = this.state;
+    const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
     const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
@@ -438,7 +440,7 @@ return [this.state.isOpen && React.createElement("div", {
       ref: this.setHelperRef
-    }), this.state.isOpen && React.createElement("div", {
+    }), overlay && React.createElement("div", {
       key: "O",
       className: "popup-overlay",
       style: Object.assign({}, ovStyle, overlayStyle),
-      onClick: closeOnDocumentClick ? this.closePopup : undefined
+      onClick: this.closePopup
     }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
@@ -462,3 +464,3 @@ innerRef: this.setTriggerRef,
     open: false,
-    closeOnDocumentClick: false,
+    closeOnDocumentClick: true,
     closeOnEscape: true,
@@ -465,0 +467,0 @@ on: ["click"],

reactjs-popup.js

 /*!
- * reactjs-popup v1.0.6
+ * reactjs-popup v1.0.7
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -427,3 +427,4 @@ * Released under the MIT License.
         overlayStyle,
-        closeOnDocumentClick
+        closeOnDocumentClick,
+        on
       } = this.props;
@@ -433,2 +434,3 @@ const {
       } = this.state;
+      const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
       const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
@@ -443,7 +445,7 @@ return [this.state.isOpen && React.createElement("div", {
         ref: this.setHelperRef
-      }), this.state.isOpen && React.createElement("div", {
+      }), overlay && React.createElement("div", {
         key: "O",
         className: "popup-overlay",
         style: Object.assign({}, ovStyle, overlayStyle),
-        onClick: closeOnDocumentClick ? this.closePopup : undefined
+        onClick: this.closePopup
       }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
@@ -467,3 +469,3 @@ innerRef: this.setTriggerRef,
       open: false,
-      closeOnDocumentClick: false,
+      closeOnDocumentClick: true,
       closeOnEscape: true,
@@ -470,0 +472,0 @@ on: ["click"],

reactjs-popup.min.js

 /*!
- * reactjs-popup v1.0.6
+ * reactjs-popup v1.0.7
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
  * Released under the MIT License.
  */
-!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.reactjsPopup=t(e.React,e.reactDom)}(this,function(e,t){"use strict";function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}e=e&&e.hasOwnProperty("default")?e.default:e;var r={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"}}};class s extends e.PureComponent{constructor(t){super(t),Object.defineProperty(this,"state",{configurable:!0,enumerable:!0,writable:!0,value:{isOpen:this.props.open||this.props.defaultOpen,modal:!!this.props.modal||!this.props.trigger}}),Object.defineProperty(this,"lockScroll",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}}),Object.defineProperty(this,"resetScroll",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")}}),Object.defineProperty(this,"togglePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen?this.closePopup():this.openPopup()}}),Object.defineProperty(this,"openPopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen||this.setState({isOpen:!0},()=>{this.setPosition(),this.props.onOpen(),this.lockScroll()})}}),Object.defineProperty(this,"closePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen&&this.setState({isOpen:!1},()=>{this.props.onClose(),this.resetScroll()})}}),Object.defineProperty(this,"onMouseEnter",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseEnterDelay:e}=this.props;this.timeOut=setTimeout(()=>this.openPopup(),e)}}),Object.defineProperty(this,"onMouseLeave",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseLeaveDelay:e}=this.props;this.timeOut=setTimeout(()=>this.closePopup(),e)}}),Object.defineProperty(this,"setPosition",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{arrow:e,position:t,offsetX:o,offsetY:r}=this.props,{modal:s}=this.state;if(s)return;const i=this.HelperEl.getBoundingClientRect(),n=function(e,t,o,r,s){const i=r?8:0,n=i+s.offsetX,l=i+s.offsetY,p=o.split(" "),a=e.top+e.height/2,c=e.left+e.width/2,{height:h,width:u}=t;let d=a-h/2,f=c-u/2,g="",b="0%",m="0%";switch(p[0]){case"top":d-=h/2+e.height/2+l,g="rotate(45deg)",b="100%",m="50%";break;case"bottom":d+=h/2+e.height/2+l,g="rotate(225deg)",m="50%";break;case"left":f-=u/2+e.width/2+n,g=" rotate(-45deg)",m="100%",b="50%";break;case"right":f+=u/2+e.width/2+n,g="rotate(135deg)",b="50%"}switch(p[1]){case"top":d=e.top,b=e.height/2+"px";break;case"bottom":d=e.top-h+e.height,b=h-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:d,left:f,transform:g,arrowLeft:m,arrowTop:b}}(this.TriggerEl.getBoundingClientRect(),this.ContentEl.getBoundingClientRect(),t,e,{offsetX:o,offsetY:r});this.ContentEl.style.top=n.top-i.top+"px",this.ContentEl.style.left=n.left-i.left+"px",e&&(this.ArrowEl.style.transform=n.transform,this.ArrowEl.style["-ms-transform"]=n.transform,this.ArrowEl.style["-webkit-transform"]=n.transform,this.ArrowEl.style.top=n.arrowTop,this.ArrowEl.style.left=n.arrowLeft),"static"!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")||(this.TriggerEl.style.position="relative")}}),Object.defineProperty(this,"addWarperAction",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{contentStyle:e,className:t,on:o}=this.props,{modal:s}=this.state,i=s?r.popupContent.modal:r.popupContent.tooltip,n={className:`popup-content ${t}`,style:Object.assign({},i,e),ref:this.setContentRef,onClick:e=>{e.stopPropagation()}};return!s&&o.includes("hover")&&(n.onMouseEnter=this.onMouseEnter,n.onMouseLeave=this.onMouseLeave),n}}),Object.defineProperty(this,"renderTrigger",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const t={key:"T"},{on:o,trigger:r}=this.props,s=Array.isArray(o)?o:[o];for(let e=0,o=s.length;e<o;e++)switch(s[e]){case"click":t.onClick=this.togglePopup;break;case"hover":t.onMouseEnter=this.onMouseEnter,t.onMouseLeave=this.onMouseLeave;case"focus":t.onFocus=this.onMouseEnter}return"function"==typeof r?e.cloneElement(r(this.state.isOpen),t):e.cloneElement(r,t)}}),Object.defineProperty(this,"renderContent",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{arrow:t,arrowStyle:s}=this.props,{modal:i}=this.state;return e.createElement("div",o({},this.addWarperAction(),{key:"C"}),t&&!i&&e.createElement("div",{ref:this.setArrowRef,style:Object.assign({},r.popupArrow,s)}),"function"==typeof this.props.children?this.props.children(this.closePopup,this.state.isOpen):this.props.children)}}),this.setTriggerRef=(e=>this.TriggerEl=e),this.setContentRef=(e=>this.ContentEl=e),this.setArrowRef=(e=>this.ArrowEl=e),this.setHelperRef=(e=>this.HelperEl=e),this.timeOut=0}componentDidMount(){const{closeOnEscape:e,defaultOpen:t}=this.props;t&&this.setPosition(),e&&window.addEventListener("keyup",e=>{"Escape"===e.key&&this.closePopup()})}componentWillReceiveProps(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}componentWillUnmount(){clearTimeout(this.timeOut)}render(){const{overlayStyle:t,closeOnDocumentClick:o}=this.props,{modal:s}=this.state,n=s?r.overlay.modal:r.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({},n,t),onClick:o?this.closePopup:void 0},s&&this.renderContent()),this.state.isOpen&&!s&&this.renderContent(),!!this.props.trigger&&e.createElement(i,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}Object.defineProperty(s,"defaultProps",{configurable:!0,enumerable:!0,writable:!0,value:{children:()=>e.createElement("span",null," Your Content Here !!"),trigger:null,onOpen:()=>{},onClose:()=>{},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}});class i extends e.PureComponent{constructor(e){super(e)}componentDidMount(){const{innerRef:e}=this.props;e&&e(t.findDOMNode(this))}render(){const{children:t}=this.props;return e.Children.only(t)}}return s});
+!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.reactjsPopup=t(e.React,e.reactDom)}(this,function(e,t){"use strict";function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}e=e&&e.hasOwnProperty("default")?e.default:e;var r={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"}}};class s extends e.PureComponent{constructor(t){super(t),Object.defineProperty(this,"state",{configurable:!0,enumerable:!0,writable:!0,value:{isOpen:this.props.open||this.props.defaultOpen,modal:!!this.props.modal||!this.props.trigger}}),Object.defineProperty(this,"lockScroll",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}}),Object.defineProperty(this,"resetScroll",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")}}),Object.defineProperty(this,"togglePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen?this.closePopup():this.openPopup()}}),Object.defineProperty(this,"openPopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen||this.setState({isOpen:!0},()=>{this.setPosition(),this.props.onOpen(),this.lockScroll()})}}),Object.defineProperty(this,"closePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen&&this.setState({isOpen:!1},()=>{this.props.onClose(),this.resetScroll()})}}),Object.defineProperty(this,"onMouseEnter",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseEnterDelay:e}=this.props;this.timeOut=setTimeout(()=>this.openPopup(),e)}}),Object.defineProperty(this,"onMouseLeave",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseLeaveDelay:e}=this.props;this.timeOut=setTimeout(()=>this.closePopup(),e)}}),Object.defineProperty(this,"setPosition",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{arrow:e,position:t,offsetX:o,offsetY:r}=this.props,{modal:s}=this.state;if(s)return;const i=this.HelperEl.getBoundingClientRect(),n=function(e,t,o,r,s){const i=r?8:0,n=i+s.offsetX,l=i+s.offsetY,p=o.split(" "),a=e.top+e.height/2,c=e.left+e.width/2,{height:h,width:u}=t;let d=a-h/2,f=c-u/2,g="",b="0%",m="0%";switch(p[0]){case"top":d-=h/2+e.height/2+l,g="rotate(45deg)",b="100%",m="50%";break;case"bottom":d+=h/2+e.height/2+l,g="rotate(225deg)",m="50%";break;case"left":f-=u/2+e.width/2+n,g=" rotate(-45deg)",m="100%",b="50%";break;case"right":f+=u/2+e.width/2+n,g="rotate(135deg)",b="50%"}switch(p[1]){case"top":d=e.top,b=e.height/2+"px";break;case"bottom":d=e.top-h+e.height,b=h-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:d,left:f,transform:g,arrowLeft:m,arrowTop:b}}(this.TriggerEl.getBoundingClientRect(),this.ContentEl.getBoundingClientRect(),t,e,{offsetX:o,offsetY:r});this.ContentEl.style.top=n.top-i.top+"px",this.ContentEl.style.left=n.left-i.left+"px",e&&(this.ArrowEl.style.transform=n.transform,this.ArrowEl.style["-ms-transform"]=n.transform,this.ArrowEl.style["-webkit-transform"]=n.transform,this.ArrowEl.style.top=n.arrowTop,this.ArrowEl.style.left=n.arrowLeft),"static"!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")||(this.TriggerEl.style.position="relative")}}),Object.defineProperty(this,"addWarperAction",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{contentStyle:e,className:t,on:o}=this.props,{modal:s}=this.state,i=s?r.popupContent.modal:r.popupContent.tooltip,n={className:`popup-content ${t}`,style:Object.assign({},i,e),ref:this.setContentRef,onClick:e=>{e.stopPropagation()}};return!s&&o.includes("hover")&&(n.onMouseEnter=this.onMouseEnter,n.onMouseLeave=this.onMouseLeave),n}}),Object.defineProperty(this,"renderTrigger",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const t={key:"T"},{on:o,trigger:r}=this.props,s=Array.isArray(o)?o:[o];for(let e=0,o=s.length;e<o;e++)switch(s[e]){case"click":t.onClick=this.togglePopup;break;case"hover":t.onMouseEnter=this.onMouseEnter,t.onMouseLeave=this.onMouseLeave;case"focus":t.onFocus=this.onMouseEnter}return"function"==typeof r?e.cloneElement(r(this.state.isOpen),t):e.cloneElement(r,t)}}),Object.defineProperty(this,"renderContent",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{arrow:t,arrowStyle:s}=this.props,{modal:i}=this.state;return e.createElement("div",o({},this.addWarperAction(),{key:"C"}),t&&!i&&e.createElement("div",{ref:this.setArrowRef,style:Object.assign({},r.popupArrow,s)}),"function"==typeof this.props.children?this.props.children(this.closePopup,this.state.isOpen):this.props.children)}}),this.setTriggerRef=(e=>this.TriggerEl=e),this.setContentRef=(e=>this.ContentEl=e),this.setArrowRef=(e=>this.ArrowEl=e),this.setHelperRef=(e=>this.HelperEl=e),this.timeOut=0}componentDidMount(){const{closeOnEscape:e,defaultOpen:t}=this.props;t&&this.setPosition(),e&&window.addEventListener("keyup",e=>{"Escape"===e.key&&this.closePopup()})}componentWillReceiveProps(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}componentWillUnmount(){clearTimeout(this.timeOut)}render(){const{overlayStyle:t,closeOnDocumentClick:o,on:s}=this.props,{modal:n}=this.state,l=this.state.isOpen&&!s.includes("hover")&&o,p=n?r.overlay.modal:r.overlay.tooltip;return[this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),l&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},p,t),onClick:this.closePopup},n&&this.renderContent()),this.state.isOpen&&!n&&this.renderContent(),!!this.props.trigger&&e.createElement(i,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}Object.defineProperty(s,"defaultProps",{configurable:!0,enumerable:!0,writable:!0,value:{children:()=>e.createElement("span",null," Your Content Here !!"),trigger:null,onOpen:()=>{},onClose:()=>{},defaultOpen:!1,open:!1,closeOnDocumentClick:!0,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}});class i extends e.PureComponent{constructor(e){super(e)}componentDidMount(){const{innerRef:e}=this.props;e&&e(t.findDOMNode(this))}render(){const{children:t}=this.props;return e.Children.only(t)}}return s});
 //# sourceMappingURL=reactjs-popup.min.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80281

increased by0.36%

Lines of code

1483

increased by0.47%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes