reactjs-popup - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

package.json

 {
   "name": "reactjs-popup",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React Popup Component",
@@ -5,0 +5,0 @@ "main": "reactjsPopup.es.js",

reactjs-popup.dev.js

@@ -301,21 +301,16 @@ (function (global, factory) {
       var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
-      return React.createElement(
-        React.Fragment,
-        null,
-        React.createElement("div", {
-          style: { position: "absolute", top: "0px", left: "0px" },
-          ref: this.setHelperRef
-        }),
-        this.state.isOpen && React.createElement(
-          "div",
-          {
-            className: "popup-overlay",
-            style: Object.assign({}, ovStyle, overlayStyle),
-            onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
-          },
-          modal && this.renderContent()
-        ),
-        this.state.isOpen && !modal && this.renderContent(),
-        this.renderTrigger()
-      );
+      return [React.createElement("div", {
+        key: "H",
+        style: { position: "absolute", top: "0px", left: "0px" },
+        ref: this.setHelperRef
+      }), this.state.isOpen && React.createElement(
+        "div",
+        {
+          key: "O",
+          className: "popup-overlay",
+          style: Object.assign({}, ovStyle, overlayStyle),
+          onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
+        },
+        modal && this.renderContent()
+      ), this.state.isOpen && !modal && this.renderContent(), this.renderTrigger()];
     }
@@ -322,0 +317,0 @@ }]);

reactjs-popup.js

@@ -301,21 +301,16 @@ (function (global, factory) {
       var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
-      return React.createElement(
-        React.Fragment,
-        null,
-        React.createElement("div", {
-          style: { position: "absolute", top: "0px", left: "0px" },
-          ref: this.setHelperRef
-        }),
-        this.state.isOpen && React.createElement(
-          "div",
-          {
-            className: "popup-overlay",
-            style: Object.assign({}, ovStyle, overlayStyle),
-            onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
-          },
-          modal && this.renderContent()
-        ),
-        this.state.isOpen && !modal && this.renderContent(),
-        this.renderTrigger()
-      );
+      return [React.createElement("div", {
+        key: "H",
+        style: { position: "absolute", top: "0px", left: "0px" },
+        ref: this.setHelperRef
+      }), this.state.isOpen && React.createElement(
+        "div",
+        {
+          key: "O",
+          className: "popup-overlay",
+          style: Object.assign({}, ovStyle, overlayStyle),
+          onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
+        },
+        modal && this.renderContent()
+      ), this.state.isOpen && !modal && this.renderContent(), this.renderTrigger()];
     }
@@ -322,0 +317,0 @@ }]);

reactjs-popup.min.js

@@ -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",boxShadow:"rgba(0, 0, 0, 0.2) 2px 2px 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=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),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)}(n,e.Component);function n(o){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n);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,(n.__proto__||Object.getPrototypeOf(n)).call(this,o));return r.state={isOpen:r.props.defaultOpen},r.timeOut=0,r.togglePopup=function(){r.setState(function(e){return{isOpen:!e.isOpen}},function(){return r.state.isOpen&&r.setPosition()})},r.openPopup=function(){r.setState({isOpen:!0},function(){return r.setPosition()})},r.closePopup=function(){r.setState({isOpen:!1})},r.onMouseEnter=function(){clearTimeout(r.timeOut),r.openPopup()},r.onMouseLeave=function(){clearTimeout(r.timeOut),r.timeOut=setTimeout(function(){return r.closePopup()},300)},r.setPosition=function(){var e=r.props,t=e.modal,o=e.arrow,n=e.position;if(!t){var i=r.HelperEl.getBoundingClientRect(),p=function(e,t,o,r){var n=r?8:0,i=o.split(" "),p=e.top+e.height/2,s=e.left+e.width/2,a=t.height,l=t.width,u=p-a/2,c=s-l/2,f="",d="0%",g="0%";switch(i[0]){case"top":u-=a/2+e.height/2+n,f="rotate(45deg)",d="100%",g="50%";break;case"bottom":u+=a/2+e.height/2+n,f="rotate(225deg)",g="50%";break;case"left":c-=l/2+e.width/2+n,f=" rotate(-45deg)",g="100%",d="50%";break;case"right":c+=l/2+e.width/2+n,f="rotate(135deg)",d="50%"}switch(i[1]){case"top":u=e.top,d=e.height/2+"px";break;case"bottom":u=e.top-a+e.height,d=a-e.height/2+"px";break;case"left":c=e.left,g=e.width/2+"px";break;case"right":c=e.left-l+e.width,g=l-e.width/2+"px"}return{top:u,left:c,transform:f,arrowLeft:g,arrowTop:d}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),n,o);r.ContentEl.style.top=p.top-i.top+"px",r.ContentEl.style.left=p.left-i.left+"px",o&&(r.ArrowEl.style.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,p=e.triggerOn,s=i?t.popupContent.modal:t.popupContent.tooltip,a={className:"popup-content "+n,style:Object.assign({},s,o),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return i||"hover"!==p||(a.onMouseEnter=r.onMouseEnter,a.onMouseLeave=r.onMouseLeave),a},r.renderTrigger=function(){var t={},o=r.props.triggerOn;switch(t.ref=r.setTriggerRef,o){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave}return e.cloneElement(r.props.trigger,t)},r.renderContent=function(){var o=r.props,n=o.arrow,i=o.modal,p=o.arrowStyle;return e.createElement("div",r.addWarperAction(),n&&!i&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},t.popupArrow,p)}),"function"==typeof r.props.children?r.props.children(r.state.isOpen,r.closePopup):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}return o(n,[{key:"componentDidMount",value:function(){this.props.defaultOpen&&this.setPosition()}},{key:"render",value:function(){var o=this.props,r=o.modal,n=o.overlayStyle,i=r?t.overlay.modal:t.overlay.tooltip;return e.createElement(e.Fragment,null,e.createElement("div",{style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),this.state.isOpen&&e.createElement("div",{className:"popup-overlay",style:Object.assign({},i,n),onClick:this.props.closeOnDocumentClick?this.closePopup:void 0},r&&this.renderContent()),this.state.isOpen&&!r&&this.renderContent(),this.renderTrigger())}}]),n}();return r.defaultProps={closeOnDocumentClick:!1,defaultOpen:!1,triggerOn:"click",contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,arrow:!0,children:function(){return e.createElement("span",null," Your Content Here !!")}},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",boxShadow:"rgba(0, 0, 0, 0.2) 2px 2px 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=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),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)}(n,e.Component);function n(o){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n);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,(n.__proto__||Object.getPrototypeOf(n)).call(this,o));return r.state={isOpen:r.props.defaultOpen},r.timeOut=0,r.togglePopup=function(){r.setState(function(e){return{isOpen:!e.isOpen}},function(){return r.state.isOpen&&r.setPosition()})},r.openPopup=function(){r.setState({isOpen:!0},function(){return r.setPosition()})},r.closePopup=function(){r.setState({isOpen:!1})},r.onMouseEnter=function(){clearTimeout(r.timeOut),r.openPopup()},r.onMouseLeave=function(){clearTimeout(r.timeOut),r.timeOut=setTimeout(function(){return r.closePopup()},300)},r.setPosition=function(){var e=r.props,t=e.modal,o=e.arrow,n=e.position;if(!t){var i=r.HelperEl.getBoundingClientRect(),p=function(e,t,o,r){var n=r?8:0,i=o.split(" "),p=e.top+e.height/2,s=e.left+e.width/2,a=t.height,l=t.width,u=p-a/2,c=s-l/2,f="",d="0%",g="0%";switch(i[0]){case"top":u-=a/2+e.height/2+n,f="rotate(45deg)",d="100%",g="50%";break;case"bottom":u+=a/2+e.height/2+n,f="rotate(225deg)",g="50%";break;case"left":c-=l/2+e.width/2+n,f=" rotate(-45deg)",g="100%",d="50%";break;case"right":c+=l/2+e.width/2+n,f="rotate(135deg)",d="50%"}switch(i[1]){case"top":u=e.top,d=e.height/2+"px";break;case"bottom":u=e.top-a+e.height,d=a-e.height/2+"px";break;case"left":c=e.left,g=e.width/2+"px";break;case"right":c=e.left-l+e.width,g=l-e.width/2+"px"}return{top:u,left:c,transform:f,arrowLeft:g,arrowTop:d}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),n,o);r.ContentEl.style.top=p.top-i.top+"px",r.ContentEl.style.left=p.left-i.left+"px",o&&(r.ArrowEl.style.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,p=e.triggerOn,s=i?t.popupContent.modal:t.popupContent.tooltip,a={className:"popup-content "+n,style:Object.assign({},s,o),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return i||"hover"!==p||(a.onMouseEnter=r.onMouseEnter,a.onMouseLeave=r.onMouseLeave),a},r.renderTrigger=function(){var t={},o=r.props.triggerOn;switch(t.ref=r.setTriggerRef,o){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave}return e.cloneElement(r.props.trigger,t)},r.renderContent=function(){var o=r.props,n=o.arrow,i=o.modal,p=o.arrowStyle;return e.createElement("div",r.addWarperAction(),n&&!i&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},t.popupArrow,p)}),"function"==typeof r.props.children?r.props.children(r.state.isOpen,r.closePopup):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}return o(n,[{key:"componentDidMount",value:function(){this.props.defaultOpen&&this.setPosition()}},{key:"render",value:function(){var o=this.props,r=o.modal,n=o.overlayStyle,i=r?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,n),onClick:this.props.closeOnDocumentClick?this.closePopup:void 0},r&&this.renderContent()),this.state.isOpen&&!r&&this.renderContent(),this.renderTrigger()]}}]),n}();return r.defaultProps={closeOnDocumentClick:!1,defaultOpen:!1,triggerOn:"click",contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,arrow:!0,children:function(){return e.createElement("span",null," Your Content Here !!")}},r});

reactjsPopup.browser.js

@@ -299,21 +299,16 @@ 'use strict';
       var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
-      return React.createElement(
-        React.Fragment,
-        null,
-        React.createElement("div", {
-          style: { position: "absolute", top: "0px", left: "0px" },
-          ref: this.setHelperRef
-        }),
-        this.state.isOpen && React.createElement(
-          "div",
-          {
-            className: "popup-overlay",
-            style: Object.assign({}, ovStyle, overlayStyle),
-            onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
-          },
-          modal && this.renderContent()
-        ),
-        this.state.isOpen && !modal && this.renderContent(),
-        this.renderTrigger()
-      );
+      return [React.createElement("div", {
+        key: "H",
+        style: { position: "absolute", top: "0px", left: "0px" },
+        ref: this.setHelperRef
+      }), this.state.isOpen && React.createElement(
+        "div",
+        {
+          key: "O",
+          className: "popup-overlay",
+          style: Object.assign({}, ovStyle, overlayStyle),
+          onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
+        },
+        modal && this.renderContent()
+      ), this.state.isOpen && !modal && this.renderContent(), this.renderTrigger()];
     }
@@ -320,0 +315,0 @@ }]);

reactjsPopup.es.js

@@ -353,21 +353,16 @@ import React from 'react';
       var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
-      return React.createElement(
-        React.Fragment,
-        null,
-        React.createElement("div", {
-          style: { position: "absolute", top: "0px", left: "0px" },
-          ref: this.setHelperRef
-        }),
-        this.state.isOpen && React.createElement(
-          "div",
-          {
-            className: "popup-overlay",
-            style: Object.assign({}, ovStyle, overlayStyle),
-            onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
-          },
-          modal && this.renderContent()
-        ),
-        this.state.isOpen && !modal && this.renderContent(),
-        this.renderTrigger()
-      );
+      return [React.createElement("div", {
+        key: "H",
+        style: { position: "absolute", top: "0px", left: "0px" },
+        ref: this.setHelperRef
+      }), this.state.isOpen && React.createElement(
+        "div",
+        {
+          key: "O",
+          className: "popup-overlay",
+          style: Object.assign({}, ovStyle, overlayStyle),
+          onClick: this.props.closeOnDocumentClick ? this.closePopup : undefined
+        },
+        modal && this.renderContent()
+      ), this.state.isOpen && !modal && this.renderContent(), this.renderTrigger()];
     }
@@ -374,0 +369,0 @@ }]);

No alert changes

Worsened metrics

Total package byte prevSize

125962

decreased by-0.34%

Lines of code

1316

decreased by-1.5%

No dependency changes