diff --git a/README.md b/README.md index 1847e2a..e1c7a4f 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,8 @@ - Modal, Tooltip, MenuΒ : All in one πŸ‹οΈ - Full style customization πŸ‘Œ - Easy to use. πŸš€ -- IE Support. +- IE Support.πŸš€ +- TypeScript Support πŸ‘Œ - All these clocks in at around 3 kB zipped. ⚑️ Requires React >= 16.0 diff --git a/docs/src/markdown/componentApi.md b/docs/src/markdown/componentApi.md index 96139a4..e565ee4 100644 --- a/docs/src/markdown/componentApi.md +++ b/docs/src/markdown/componentApi.md @@ -31,7 +31,7 @@ The reactjs-popup API is inspired by semantic popup docs | contentStyle | | {object} | Custom popup content style | | overlayStyle | | {object} | Custom overlay style
Note: `top` and `left` property will not be overridden. | | arrowStyle | | {object} | Custom arrow style
Note: `transform` property will not be overridden. | -| keepTooltipInside | | {bool,string} | html selector, class name or id element that the tooltip must be inside (defaults to `window` if keepTooltipInside = true) default false | +| keepTooltipInside | true | {bool,string} | html selector, class name or id element that the tooltip must be inside (defaults to `window` if keepTooltipInside = true) default false | ### Example : on focus diff --git a/docs/src/markdown/welcome.md b/docs/src/markdown/welcome.md index f063acb..4ceda88 100644 --- a/docs/src/markdown/welcome.md +++ b/docs/src/markdown/welcome.md @@ -15,7 +15,8 @@ Reactjs-popup is a simple react popup component with a lot of benefits : - Modal, Tooltip, MenuΒ : All in one πŸ‹οΈ - Full style customization πŸ‘Œ - Easy to use. πŸš€ -- IE Support. +- IE Support. πŸš€ +- TypeScript Support πŸ‘Œ - All these clocks in at around 3 kB zipped. ⚑️ Requires React >= 16.0 diff --git a/lib/README.md b/lib/README.md index 1847e2a..e1c7a4f 100644 --- a/lib/README.md +++ b/lib/README.md @@ -25,7 +25,8 @@ - Modal, Tooltip, MenuΒ : All in one πŸ‹οΈ - Full style customization πŸ‘Œ - Easy to use. πŸš€ -- IE Support. +- IE Support.πŸš€ +- TypeScript Support πŸ‘Œ - All these clocks in at around 3 kB zipped. ⚑️ Requires React >= 16.0 diff --git a/lib/index.d.ts b/lib/index.d.ts index 40266ce..9650a16 100644 --- a/lib/index.d.ts +++ b/lib/index.d.ts @@ -5,7 +5,7 @@ declare module 'reactjs-popup' { type Position = 'top left' | 'top right' | 'bottom right' | 'bottom left' | 'right center' | 'left center' | 'top center' | 'bottom center'; interface Props { - trigger: JSX.Element | ((isOpen: boolean) => JSX.Element); + trigger?: JSX.Element | ((isOpen: boolean) => JSX.Element); open?: boolean; defaultOpen?: boolean; on?: EventType | EventType[]; diff --git a/lib/package.json b/lib/package.json index 42ad1d0..301d1f1 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.2.0", + "version": "1.3.0", "description": "React Popup Component - Modals,Tooltips and Menusβ€Šβ€”β€Š All in one", "main": "reactjs-popup.cjs.js", "module": "reactjs-popup.es.js", diff --git a/lib/reactjs-popup.cjs.js b/lib/reactjs-popup.cjs.js index c92d385..57182ba 100644 --- a/lib/reactjs-popup.cjs.js +++ b/lib/reactjs-popup.cjs.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.2.0 + * reactjs-popup v1.3.0 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -384,7 +384,8 @@ function (_React$PureComponent) { position = _this$props.position, offsetX = _this$props.offsetX, offsetY = _this$props.offsetY, - keepTooltipInside = _this$props.keepTooltipInside; + keepTooltipInside = _this$props.keepTooltipInside, + arrowStyle = _this$props.arrowStyle; var modal = _this.state.modal; if (modal) return; @@ -410,8 +411,8 @@ function (_React$PureComponent) { _this.ArrowEl.style["transform"] = cords.transform; _this.ArrowEl.style["-ms-transform"] = cords.transform; _this.ArrowEl.style["-webkit-transform"] = cords.transform; - _this.ArrowEl.style.top = cords.arrowTop; - _this.ArrowEl.style.left = cords.arrowLeft; + _this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop; + _this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft; } if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative"; @@ -455,6 +456,7 @@ function (_React$PureComponent) { case "hover": triggerProps.onMouseEnter = _this.onMouseEnter; triggerProps.onMouseLeave = _this.onMouseLeave; + break; case "focus": triggerProps.onFocus = _this.onMouseEnter; @@ -535,7 +537,10 @@ function (_React$PureComponent) { var modal = this.state.modal; var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; - return [this.state.isOpen && React.createElement("div", { + return [!!this.props.trigger && React.createElement(Ref, { + innerRef: this.setTriggerRef, + key: "R" + }, this.renderTrigger()), this.state.isOpen && React.createElement("div", { key: "H", style: { position: "absolute", @@ -548,10 +553,7 @@ function (_React$PureComponent) { className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), onClick: closeOnDocumentClick ? this.closePopup : undefined - }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { - innerRef: this.setTriggerRef, - key: "R" - }, this.renderTrigger())]; + }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent()]; } }]); diff --git a/lib/reactjs-popup.es.js b/lib/reactjs-popup.es.js index e98e6f6..d145a11 100644 --- a/lib/reactjs-popup.es.js +++ b/lib/reactjs-popup.es.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.2.0 + * reactjs-popup v1.3.0 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -380,7 +380,8 @@ function (_React$PureComponent) { position = _this$props.position, offsetX = _this$props.offsetX, offsetY = _this$props.offsetY, - keepTooltipInside = _this$props.keepTooltipInside; + keepTooltipInside = _this$props.keepTooltipInside, + arrowStyle = _this$props.arrowStyle; var modal = _this.state.modal; if (modal) return; @@ -406,8 +407,8 @@ function (_React$PureComponent) { _this.ArrowEl.style["transform"] = cords.transform; _this.ArrowEl.style["-ms-transform"] = cords.transform; _this.ArrowEl.style["-webkit-transform"] = cords.transform; - _this.ArrowEl.style.top = cords.arrowTop; - _this.ArrowEl.style.left = cords.arrowLeft; + _this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop; + _this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft; } if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative"; @@ -451,6 +452,7 @@ function (_React$PureComponent) { case "hover": triggerProps.onMouseEnter = _this.onMouseEnter; triggerProps.onMouseLeave = _this.onMouseLeave; + break; case "focus": triggerProps.onFocus = _this.onMouseEnter; @@ -531,7 +533,10 @@ function (_React$PureComponent) { var modal = this.state.modal; var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; - return [this.state.isOpen && React.createElement("div", { + return [!!this.props.trigger && React.createElement(Ref, { + innerRef: this.setTriggerRef, + key: "R" + }, this.renderTrigger()), this.state.isOpen && React.createElement("div", { key: "H", style: { position: "absolute", @@ -544,10 +549,7 @@ function (_React$PureComponent) { className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), onClick: closeOnDocumentClick ? this.closePopup : undefined - }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { - innerRef: this.setTriggerRef, - key: "R" - }, this.renderTrigger())]; + }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent()]; } }]); diff --git a/lib/reactjs-popup.js b/lib/reactjs-popup.js index 4fe9338..f17453d 100644 --- a/lib/reactjs-popup.js +++ b/lib/reactjs-popup.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.2.0 + * reactjs-popup v1.3.0 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -385,7 +385,8 @@ position = _this$props.position, offsetX = _this$props.offsetX, offsetY = _this$props.offsetY, - keepTooltipInside = _this$props.keepTooltipInside; + keepTooltipInside = _this$props.keepTooltipInside, + arrowStyle = _this$props.arrowStyle; var modal = _this.state.modal; if (modal) return; @@ -411,8 +412,8 @@ _this.ArrowEl.style["transform"] = cords.transform; _this.ArrowEl.style["-ms-transform"] = cords.transform; _this.ArrowEl.style["-webkit-transform"] = cords.transform; - _this.ArrowEl.style.top = cords.arrowTop; - _this.ArrowEl.style.left = cords.arrowLeft; + _this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop; + _this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft; } if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative"; @@ -456,6 +457,7 @@ case "hover": triggerProps.onMouseEnter = _this.onMouseEnter; triggerProps.onMouseLeave = _this.onMouseLeave; + break; case "focus": triggerProps.onFocus = _this.onMouseEnter; @@ -536,7 +538,10 @@ var modal = this.state.modal; var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; - return [this.state.isOpen && React.createElement("div", { + return [!!this.props.trigger && React.createElement(Ref, { + innerRef: this.setTriggerRef, + key: "R" + }, this.renderTrigger()), this.state.isOpen && React.createElement("div", { key: "H", style: { position: "absolute", @@ -549,10 +554,7 @@ className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), onClick: closeOnDocumentClick ? this.closePopup : undefined - }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { - innerRef: this.setTriggerRef, - key: "R" - }, this.renderTrigger())]; + }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent()]; } }]); diff --git a/lib/reactjs-popup.min.js b/lib/reactjs-popup.min.js index 7bf33ad..99ddb39 100644 --- a/lib/reactjs-popup.min.js +++ b/lib/reactjs-popup.min.js @@ -1,7 +1,7 @@ /*! - * reactjs-popup v1.2.0 + * reactjs-popup v1.3.0 * (c) 2018-present Youssouf EL AZIZI * 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(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var o=0;o=i.top+i.height||u.left+u.width>=i.left+i.width))break;a++}return p}(l,a,c,t,{offsetX:n,offsetY:i},u);r.ContentEl.style.top=h.top-s.top+"px",r.ContentEl.style.left=h.left-s.left+"px",t&&(r.ArrowEl.style.transform=h.transform,r.ArrowEl.style["-ms-transform"]=h.transform,r.ArrowEl.style["-webkit-transform"]=h.transform,r.ArrowEl.style.top=h.arrowTop,r.ArrowEl.style.left=h.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}}),"addWarperAction",function(){var e=r.props,t=e.contentStyle,o=e.className,n=e.on,i=r.state.modal,p=i?h.popupContent.modal:h.popupContent.tooltip,s={className:"popup-content ".concat(o),style:Object.assign({},p,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(s.onMouseEnter=r.onMouseEnter,s.onMouseLeave=r.onMouseLeave),s}),"renderTrigger",function(){for(var t={key:"T"},o=r.props,n=o.on,i=o.trigger,p=Array.isArray(n)?n:[n],s=0,l=p.length;s=0),s=i?h.overlay.modal:h.overlay.tooltip;return[this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),p&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},s,o),onClick:n?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent(),!!this.props.trigger&&e.createElement(y,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}]),s(n,t),n}((e=e&&e.hasOwnProperty("default")?e.default:e).PureComponent);i(m,"defaultProps",{children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,closeOnDocumentClick:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100,keepTooltipInside:!1});var y=function(n){function i(e){return o(this,i),c(this,l(i).call(this,e))}return r(i,[{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)}}]),s(i,n),i}(e.PureComponent);return m}); +!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(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var o=0;o=i.top+i.height||u.left+u.width>=i.left+i.width))break;a++}return p}(a,u,h,t,{offsetX:n,offsetY:i},c);r.ContentEl.style.top=m.top-l.top+"px",r.ContentEl.style.left=m.left-l.left+"px",t&&(r.ArrowEl.style.transform=m.transform,r.ArrowEl.style["-ms-transform"]=m.transform,r.ArrowEl.style["-webkit-transform"]=m.transform,r.ArrowEl.style.top=s.top||m.arrowTop,r.ArrowEl.style.left=s.left||m.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}}),"addWarperAction",function(){var e=r.props,t=e.contentStyle,o=e.className,n=e.on,i=r.state.modal,p=i?h.popupContent.modal:h.popupContent.tooltip,s={className:"popup-content ".concat(o),style:Object.assign({},p,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(s.onMouseEnter=r.onMouseEnter,s.onMouseLeave=r.onMouseLeave),s}),"renderTrigger",function(){for(var t={key:"T"},o=r.props,n=o.on,i=o.trigger,p=Array.isArray(n)?n:[n],s=0,l=p.length;s=0),s=i?h.overlay.modal:h.overlay.tooltip;return[!!this.props.trigger&&e.createElement(y,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger()),this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),p&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},s,o),onClick:n?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent()]}}]),s(n,t),n}((e=e&&e.hasOwnProperty("default")?e.default:e).PureComponent);i(m,"defaultProps",{children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,closeOnDocumentClick:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100,keepTooltipInside:!1});var y=function(n){function i(e){return o(this,i),c(this,l(i).call(this,e))}return r(i,[{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)}}]),s(i,n),i}(e.PureComponent);return m}); //# sourceMappingURL=reactjs-popup.min.js.map diff --git a/lib/reactjs-popup.min.js.map b/lib/reactjs-popup.min.js.map index f0d2605..637f467 100644 --- a/lib/reactjs-popup.min.js.map +++ b/lib/reactjs-popup.min.js.map @@ -1 +1 @@ -{"version":3,"file":"reactjs-popup.min.js","sources":["../src/Utils.js","../src/popup.css.js","../src/Popup.js"],"sourcesContent":["/* Algo to calculate position\n 1. center position for popup content : the center of the trigger will be the center of the content content\n so the popup content position will be like this :\n top => the y of the center for the trigger element : trigger.top + trigger.height/2\n left => the x of the center for the trigger element : trigger.left + trigger.width/2\n\n 2. translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n we need to handle the first argument in the position: 'left' => that's mean we need to translate the popup content according to the X axis by - content.width/2\n\n 3.translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n the second argument 'top' => translate popup content by + content.height*4/5\n\n 4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element\n*/\n\nfunction getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n { offsetX, offsetY }\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const args = position.split(\" \");\n // the step N 1 : center the popup content => ok\n const CenterTop = triggerBounding.top + triggerBounding.height / 2;\n const CenterLeft = triggerBounding.left + triggerBounding.width / 2;\n const { height, width } = ContentBounding;\n let top = CenterTop - height / 2;\n let left = CenterLeft - width / 2;\n let transform = \"\";\n let arrowTop = \"0%\";\n let arrowLeft = \"0%\";\n // the step N 2 : => ok\n switch (args[0]) {\n case \"top\":\n top -= height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + margin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + margin;\n transform = `rotate(135deg)`;\n arrowTop = \"50%\";\n\n break;\n }\n switch (args[1]) {\n case \"top\":\n top = triggerBounding.top;\n arrowTop = triggerBounding.height / 2 + \"px\";\n break;\n case \"bottom\":\n top = triggerBounding.top - height + triggerBounding.height;\n arrowTop = height - triggerBounding.height / 2 + \"px\";\n break;\n case \"left\":\n left = triggerBounding.left;\n arrowLeft = triggerBounding.width / 2 + \"px\";\n break;\n case \"right\":\n left = triggerBounding.left - width + triggerBounding.width;\n arrowLeft = width - triggerBounding.width / 2 + \"px\";\n break;\n }\n\n top = args[0] === \"top\" ? top - offsetY : top + offsetY;\n left = args[0] === \"left\" ? left - offsetX : left + offsetX;\n\n return { top, left, transform, arrowLeft, arrowTop };\n}\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n positions,\n arrow,\n { offsetX, offsetY },\n wrapperBox\n) {\n let bestCoords;\n let i = 0;\n while (i < positions.length) {\n bestCoords = getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n positions[i],\n arrow,\n { offsetX, offsetY }\n );\n\n const contentBox = {\n top: bestCoords.top,\n left: bestCoords.left,\n width: ContentBounding.width,\n height: ContentBounding.height\n };\n\n if (\n contentBox.top <= wrapperBox.top ||\n contentBox.left <= wrapperBox.left ||\n contentBox.top + contentBox.height >=\n wrapperBox.top + wrapperBox.height ||\n contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width\n ) {\n i++;\n } else {\n break;\n }\n }\n\n return bestCoords;\n}\n","export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\nconst POSITION_TYPES = [\n \"top left\",\n \"top center\",\n \"top right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n];\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n closeOnDocumentClick: true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: false,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100,\n keepTooltipInside: false\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen } = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", e => {\n if (e.key === \"Escape\") this.closePopup();\n });\n }\n }\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.props.onClose();\n this.setState({ isOpen: false }, () => {\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n getTooltipBoundary = () => {\n const { keepTooltipInside } = this.props;\n let boundingBox = {\n top: 0,\n left: 0,\n width: window.innerWidth,\n height: window.innerHeight\n };\n if (typeof keepTooltipInside === \"string\") {\n const selector = document.querySelector(keepTooltipInside);\n if (process.env.NODE_ENV !== \"production\") {\n if (selector === null)\n throw new Error(\n `${keepTooltipInside} selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id' or a boolean value`\n );\n }\n boundingBox = selector.getBoundingClientRect();\n }\n return boundingBox;\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY, keepTooltipInside } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const boundingBox = this.getTooltipBoundary();\n let positions = Array.isArray(position) ? position : [position];\n\n // keepTooltipInside would be activated if the keepTooltipInside exist or the position is Array\n if (keepTooltipInside || Array.isArray(position))\n positions = [...positions, ...POSITION_TYPES];\n\n const cords = calculatePosition(\n trigger,\n content,\n positions,\n arrow,\n {\n offsetX,\n offsetY\n },\n boundingBox\n );\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = cords.arrowTop;\n this.ArrowEl.style.left = cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.indexOf(\"hover\") >= 0) {\n childrenElementProps.onMouseEnter = this.onMouseEnter;\n childrenElementProps.onMouseLeave = this.onMouseLeave;\n }\n return childrenElementProps;\n };\n renderTrigger = () => {\n const triggerProps = { key: \"T\" };\n const { on, trigger } = this.props;\n const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay = this.state.isOpen && !(on.indexOf(\"hover\") >= 0);\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n \n ),\n this.state.isOpen && !modal && this.renderContent(),\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n )\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n const TRIGGER_TYPES = [\"hover\", \"click\", \"focus\"];\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf(TRIGGER_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOfType([\n PropTypes.oneOf(POSITION_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))\n ]),\n keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n };\n}\n\nclass Ref extends React.PureComponent {\n constructor(props) {\n super(props);\n }\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n"],"names":["getCoordinatesForPosition","triggerBounding","ContentBounding","position","arrow","offsetX","offsetY","margin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","POSITION_TYPES","Popup","props","_this","open","defaultOpen","modal","trigger","state","lockScroll","document","getElementsByTagName","style","overflow","isOpen","closePopup","openPopup","setState","setPosition","onOpen","onClose","resetScroll","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","keepTooltipInside","boundingBox","window","innerWidth","innerHeight","querySelector","getBoundingClientRect","helper","HelperEl","TriggerEl","content","ContentEl","getTooltipBoundary","positions","Array","isArray","cords","wrapperBox","bestCoords","i","length","contentBox","calculatePosition","ArrowEl","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","indexOf","onMouseEnter","onMouseLeave","triggerProps","onAsArray","len","onClick","togglePopup","onFocus","React","cloneElement","arrowStyle","addWarperAction","setArrowRef","popupArrow","children","setTriggerRef","r","setHelperRef","this","closeOnEscape","addEventListener","e","key","_this2","nextProps","overlayStyle","closeOnDocumentClick","overlay","ovStyle","undefined","renderContent","Ref","renderTrigger","PureComponent","innerRef","findDOMNode","Children","only"],"mappings":";;;;;wvDAmBA,SAASA,EACPC,EACAC,EACAC,EACAC,SACEC,IAAAA,QAASC,IAAAA,QAGLC,EAASH,EAAQ,EAAI,EACrBI,EAAOL,EAASM,MAAM,KAEtBC,EAAYT,EAAgBU,IAAMV,EAAgBW,OAAS,EAC3DC,EAAaZ,EAAgBa,KAAOb,EAAgBc,MAAQ,EAC1DH,EAAkBV,EAAlBU,OAAQG,EAAUb,EAAVa,MACZJ,EAAMD,EAAYE,EAAS,EAC3BE,EAAOD,EAAaE,EAAQ,EAC5BC,EAAY,GACZC,EAAW,KACXC,EAAY,YAERV,EAAK,QACN,SACII,EAAS,EAAIX,EAAgBW,OAAS,EAAIL,sBAEtC,SACC,gBAET,YACIK,EAAS,EAAIX,EAAgBW,OAAS,EAAIL,uBAErC,gBAET,UACKQ,EAAQ,EAAId,EAAgBc,MAAQ,EAAIR,wBAEpC,SACD,gBAER,WACKQ,EAAQ,EAAId,EAAgBc,MAAQ,EAAIR,uBAErC,aAIPC,EAAK,QACN,QACGP,EAAgBU,MACXV,EAAgBW,OAAS,EAAI,eAErC,WACGX,EAAgBU,IAAMC,EAASX,EAAgBW,SAC1CA,EAASX,EAAgBW,OAAS,EAAI,eAE9C,SACIX,EAAgBa,OACXb,EAAgBc,MAAQ,EAAI,eAErC,UACId,EAAgBa,KAAOC,EAAQd,EAAgBc,QAC1CA,EAAQd,EAAgBc,MAAQ,EAAI,kBAIlC,QAAZP,EAAK,GAAeG,EAAML,EAAUK,EAAML,SAC7B,SAAZE,EAAK,GAAgBM,EAAOT,EAAUS,EAAOT,6ECjFtC,kBACF,UACD,iIAIE,uBAGC,iDAEH,aACC,qDAEC,2BAIH,aACD,gBACG,sBACE,+BACD,uBACH,cACA,eACG,6DAIC,YACL,WACG,SACF,UACC,qBAGG,YACL,WACG,SACF,UACC,2CAEE,cACD,SCzCRc,GACJ,WACA,aACA,YACA,YACA,eACA,eACA,cACA,gBACA,eACA,WACA,cACA,eAGmBC,yBA+BPC,gFACJA,sBANEC,EAAKD,MAAME,MAAQD,EAAKD,MAAMG,oBAC/BF,EAAKD,MAAMI,QAAgBH,EAAKD,MAAMK,uBAgClC,WACPJ,EAAKK,MAAMF,OAASH,EAAKD,MAAMO,aACjCC,SAASC,qBAAqB,QAAQ,GAAGC,MAAMC,SAAW,0BAEhD,WACRV,EAAKK,MAAMF,OAASH,EAAKD,MAAMO,aACjCC,SAASC,qBAAqB,QAAQ,GAAGC,MAAMC,SAAW,wBAGhD,WACRV,EAAKK,MAAMM,OAAQX,EAAKY,aACvBZ,EAAKa,0BAEA,WACNb,EAAKK,MAAMM,UACVG,kBAAmB,GAAQ,aACzBC,gBACAhB,MAAMiB,WACNV,8BAGI,WACNN,EAAKK,MAAMM,WACXZ,MAAMkB,YACNH,kBAAmB,GAAS,aAC1BI,kCAGM,wBACAlB,EAAKmB,aACVC,EAAoBpB,EAAKD,MAAzBqB,kBACHD,QAAUE,WAAW,kBAAMrB,EAAKa,aAAaO,oBAErC,wBACApB,EAAKmB,aACVG,EAAoBtB,EAAKD,MAAzBuB,kBACHH,QAAUE,WAAW,kBAAMrB,EAAKY,cAAcU,0BAGhC,eACXC,EAAsBvB,EAAKD,MAA3BwB,kBACJC,OACG,OACC,QACCC,OAAOC,kBACND,OAAOE,aAEgB,iBAAtBJ,MACQhB,SAASqB,cAAcL,GAOjBM,gCAElBL,kBAGK,iBACqDxB,EAAKD,MAA9DjB,IAAAA,MAAOD,IAAAA,SAAUE,IAAAA,QAASC,IAAAA,QAASuC,IAAAA,sBACzBvB,EAAKK,MAAfF,WAEF2B,EAAS9B,EAAK+B,SAASF,wBACvBzB,EAAUJ,EAAKgC,UAAUH,wBACzBI,EAAUjC,EAAKkC,UAAUL,wBACzBL,EAAcxB,EAAKmC,qBACrBC,EAAYC,MAAMC,QAAQzD,GAAYA,GAAYA,IAGlD0C,GAAqBc,MAAMC,QAAQzD,MACrCuD,IAAgBA,UAAcvC,QAE1B0C,EFhEK,SACb5D,EACAC,EACAwD,EACAtD,IAEA0D,WAEIC,EAHF1D,IAAAA,QAASC,IAAAA,QAIP0D,EAAI,EACDA,EAAIN,EAAUO,QAAQ,KASrBC,UAROlE,EACXC,EACAC,EACAwD,EAAUM,GACV5D,0BAKgBO,SACVoD,EAAWjD,WACVZ,EAAgBa,aACfb,EAAgBU,aAIxBsD,EAAWvD,KAAOmD,EAAWnD,KAC7BuD,EAAWpD,MAAQgD,EAAWhD,MAC9BoD,EAAWvD,IAAMuD,EAAWtD,QAC1BkD,EAAWnD,IAAMmD,EAAWlD,QAC9BsD,EAAWpD,KAAOoD,EAAWnD,OAAS+C,EAAWhD,KAAOgD,EAAW/C,wBAQhEgD,EEyBSI,CACZzC,EACA6B,EACAG,EACAtD,wBAKA0C,KAEGU,UAAUzB,MAAMpB,IAAMkD,EAAMlD,IAAMyC,EAAOzC,IAAM,OAC/C6C,UAAUzB,MAAMjB,KAAO+C,EAAM/C,KAAOsC,EAAOtC,KAAO,KACnDV,MACGgE,QAAQrC,MAAb,UAAkC8B,EAAM7C,YACnCoD,QAAQrC,MAAM,iBAAmB8B,EAAM7C,YACvCoD,QAAQrC,MAAM,qBAAuB8B,EAAM7C,YAC3CoD,QAAQrC,MAAMpB,IAAMkD,EAAM5C,WAC1BmD,QAAQrC,MAAMjB,KAAO+C,EAAM3C,WAKG,UAFnC6B,OACGsB,iBAAiB/C,EAAKgC,UAAW,MACjCgB,iBAAiB,aAGe,IAFnCvB,OACGsB,iBAAiB/C,EAAKgC,UAAW,MACjCgB,iBAAiB,cAEpBhD,EAAKgC,UAAUvB,MAAM5B,SAAW,iCAGlB,iBACwBmB,EAAKD,MAArCkD,IAAAA,aAAcC,IAAAA,UAAWC,IAAAA,GACzBhD,EAAUH,EAAKK,MAAfF,MACFiD,EAAoBjD,EACtBkD,EAAOC,aAAanD,MACpBkD,EAAOC,aAAaC,QAElBC,qCACwBN,SACrBO,OAAOC,UAAWN,EAAmBH,OACvCjD,EAAK2D,sBACD,cACLC,2BAGDzD,GAASgD,EAAGU,QAAQ,UAAY,MACdC,aAAe9D,EAAK8D,eACpBC,aAAe/D,EAAK+D,cAEpCP,oBAEO,mBACRQ,OAAsB,OACJhE,EAAKD,MAArBoD,IAAAA,GAAI/C,IAAAA,QACN6D,EAAY5B,MAAMC,QAAQa,GAAMA,GAAMA,GACnCT,EAAI,EAAGwB,EAAMD,EAAUtB,OAAQD,EAAIwB,EAAKxB,WACvCuB,EAAUvB,QACX,UACUyB,QAAUnE,EAAKoE,sBAEzB,UACUN,aAAe9D,EAAK8D,eACpBC,aAAe/D,EAAK+D,iBAC9B,UACUM,QAAUrE,EAAK8D,mBAKX,mBAAZ1D,EACFkE,EAAMC,aAAanE,EAAQJ,EAAKK,MAAMM,QAASqD,GAEjDM,EAAMC,aAAanE,EAAS4D,qBAGrB,iBACgBhE,EAAKD,MAA3BjB,IAAAA,MAAO0F,IAAAA,WACPrE,EAAUH,EAAKK,MAAfF,aAENmE,2BAAStE,EAAKyE,uBAAuB,MAClC3F,IACEqB,GACCmE,2BACOtE,EAAK0E,kBACHjB,OAAOC,UAAWL,EAAOsB,WAAYH,KAGlB,mBAAxBxE,EAAKD,MAAM6E,SACf5E,EAAKD,MAAM6E,SAAS5E,EAAKY,WAAYZ,EAAKK,MAAMM,QAChDX,EAAKD,MAAM6E,cA9LdC,cAAgB,mBAAM7E,EAAKgC,UAAY8C,KACvCnB,cAAgB,mBAAM3D,EAAKkC,UAAY4C,KACvCJ,YAAc,mBAAM1E,EAAK8C,QAAUgC,KACnCC,aAAe,mBAAM/E,EAAK+B,SAAW+C,KACrC3D,QAAU,uEAIwB6D,KAAKjF,MAApCkF,IAAAA,gBAAe/E,aACN8E,KAAKjE,cAClBkE,UACKC,iBAAiB,QAAS,YACjB,WAAVC,EAAEC,KAAkBC,EAAKzE,iEAIT0E,GACpBN,KAAKjF,MAAME,OAASqF,EAAUrF,OAC9BqF,EAAUrF,KAAM+E,KAAKnE,YACpBmE,KAAKpE,0EAIGoE,KAAK7D,gDA6KiC6D,KAAKjF,MAAhDwF,IAAAA,aAAcC,IAAAA,qBAAsBrC,IAAAA,GACpChD,EAAU6E,KAAK3E,MAAfF,MACFsF,EAAUT,KAAK3E,MAAMM,UAAYwC,EAAGU,QAAQ,UAAY,GACxD6B,EAAUvF,EAAQkD,EAAOoC,QAAQtF,MAAQkD,EAAOoC,QAAQlC,eAE5DyB,KAAK3E,MAAMM,QACT2D,2BACM,oBACe,eAAiB,WAAa,WAC5CU,KAAKD,eAGdU,GACEnB,2BACM,cACM,sBACHb,OAAOC,UAAWgC,EAASH,WACzBC,EAAuBR,KAAKpE,gBAAa+E,GAEjDxF,GAAS6E,KAAKY,iBAGnBZ,KAAK3E,MAAMM,SAAWR,GAAS6E,KAAKY,kBAClCZ,KAAKjF,MAAMK,SACXkE,gBAACuB,YAAcb,KAAKH,kBAAmB,KACpCG,KAAKc,+EA9PyBC,iBAApBjG,2BAEP,kBAAMwE,8DACP,YACD,qBACC,0BACI,QACP,wBACgB,iBACP,MACV,iEAIM,YACD,uBACH,cACK,SACL,UACE,UACA,kBACQ,oBACA,uBACE,QAoRjBuB,yBACQ9F,0CACJA,8DAGEiG,EAAahB,KAAKjF,MAAlBiG,SACJA,GAAUA,EAASC,cAAYjB,4CAG3BJ,EAAaI,KAAKjF,MAAlB6E,gBACDN,EAAM4B,SAASC,KAAKvB,iBAVbN,EAAMyB"} \ No newline at end of file +{"version":3,"file":"reactjs-popup.min.js","sources":["../src/Utils.js","../src/popup.css.js","../src/Popup.js"],"sourcesContent":["/* Algo to calculate position\n 1. center position for popup content : the center of the trigger will be the center of the content content\n so the popup content position will be like this :\n top => the y of the center for the trigger element : trigger.top + trigger.height/2\n left => the x of the center for the trigger element : trigger.left + trigger.width/2\n\n 2. translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n we need to handle the first argument in the position: 'left' => that's mean we need to translate the popup content according to the X axis by - content.width/2\n\n 3.translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n the second argument 'top' => translate popup content by + content.height*4/5\n\n 4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element\n*/\n\nfunction getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n { offsetX, offsetY }\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const args = position.split(\" \");\n // the step N 1 : center the popup content => ok\n const CenterTop = triggerBounding.top + triggerBounding.height / 2;\n const CenterLeft = triggerBounding.left + triggerBounding.width / 2;\n const { height, width } = ContentBounding;\n let top = CenterTop - height / 2;\n let left = CenterLeft - width / 2;\n let transform = \"\";\n let arrowTop = \"0%\";\n let arrowLeft = \"0%\";\n // the step N 2 : => ok\n switch (args[0]) {\n case \"top\":\n top -= height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + margin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + margin;\n transform = `rotate(135deg)`;\n arrowTop = \"50%\";\n\n break;\n }\n switch (args[1]) {\n case \"top\":\n top = triggerBounding.top;\n arrowTop = triggerBounding.height / 2 + \"px\";\n break;\n case \"bottom\":\n top = triggerBounding.top - height + triggerBounding.height;\n arrowTop = height - triggerBounding.height / 2 + \"px\";\n break;\n case \"left\":\n left = triggerBounding.left;\n arrowLeft = triggerBounding.width / 2 + \"px\";\n break;\n case \"right\":\n left = triggerBounding.left - width + triggerBounding.width;\n arrowLeft = width - triggerBounding.width / 2 + \"px\";\n break;\n }\n\n top = args[0] === \"top\" ? top - offsetY : top + offsetY;\n left = args[0] === \"left\" ? left - offsetX : left + offsetX;\n\n return { top, left, transform, arrowLeft, arrowTop };\n}\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n positions,\n arrow,\n { offsetX, offsetY },\n wrapperBox\n) {\n let bestCoords;\n let i = 0;\n while (i < positions.length) {\n bestCoords = getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n positions[i],\n arrow,\n { offsetX, offsetY }\n );\n\n const contentBox = {\n top: bestCoords.top,\n left: bestCoords.left,\n width: ContentBounding.width,\n height: ContentBounding.height\n };\n\n if (\n contentBox.top <= wrapperBox.top ||\n contentBox.left <= wrapperBox.left ||\n contentBox.top + contentBox.height >=\n wrapperBox.top + wrapperBox.height ||\n contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width\n ) {\n i++;\n } else {\n break;\n }\n }\n\n return bestCoords;\n}\n","export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\nconst POSITION_TYPES = [\n \"top left\",\n \"top center\",\n \"top right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n];\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n closeOnDocumentClick: true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: false,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100,\n keepTooltipInside: false\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen } = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", e => {\n if (e.key === \"Escape\") this.closePopup();\n });\n }\n }\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.props.onClose();\n this.setState({ isOpen: false }, () => {\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n getTooltipBoundary = () => {\n const { keepTooltipInside } = this.props;\n let boundingBox = {\n top: 0,\n left: 0,\n width: window.innerWidth,\n height: window.innerHeight\n };\n if (typeof keepTooltipInside === \"string\") {\n const selector = document.querySelector(keepTooltipInside);\n if (process.env.NODE_ENV !== \"production\") {\n if (selector === null)\n throw new Error(\n `${keepTooltipInside} selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id' or a boolean value`\n );\n }\n boundingBox = selector.getBoundingClientRect();\n }\n return boundingBox;\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY, keepTooltipInside, arrowStyle } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const boundingBox = this.getTooltipBoundary();\n let positions = Array.isArray(position) ? position : [position];\n\n // keepTooltipInside would be activated if the keepTooltipInside exist or the position is Array\n if (keepTooltipInside || Array.isArray(position))\n positions = [...positions, ...POSITION_TYPES];\n\n const cords = calculatePosition(\n trigger,\n content,\n positions,\n arrow,\n {\n offsetX,\n offsetY\n },\n boundingBox\n );\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop;\n this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.indexOf(\"hover\") >= 0) {\n childrenElementProps.onMouseEnter = this.onMouseEnter;\n childrenElementProps.onMouseLeave = this.onMouseLeave;\n }\n return childrenElementProps;\n };\n renderTrigger = () => {\n const triggerProps = { key: \"T\" };\n const { on, trigger } = this.props;\n const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n break;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay = this.state.isOpen && !(on.indexOf(\"hover\") >= 0);\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n ),\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n \n ),\n this.state.isOpen && !modal && this.renderContent(),\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n const TRIGGER_TYPES = [\"hover\", \"click\", \"focus\"];\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf(TRIGGER_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOfType([\n PropTypes.oneOf(POSITION_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))\n ]),\n keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n };\n}\n\nclass Ref extends React.PureComponent {\n constructor(props) {\n super(props);\n }\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n"],"names":["getCoordinatesForPosition","triggerBounding","ContentBounding","position","arrow","offsetX","offsetY","margin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","POSITION_TYPES","Popup","props","_this","open","defaultOpen","modal","trigger","state","lockScroll","document","getElementsByTagName","style","overflow","isOpen","closePopup","openPopup","setState","setPosition","onOpen","onClose","resetScroll","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","keepTooltipInside","boundingBox","window","innerWidth","innerHeight","querySelector","getBoundingClientRect","arrowStyle","helper","HelperEl","TriggerEl","content","ContentEl","getTooltipBoundary","positions","Array","isArray","cords","wrapperBox","bestCoords","i","length","contentBox","calculatePosition","ArrowEl","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","indexOf","onMouseEnter","onMouseLeave","triggerProps","onAsArray","len","onClick","togglePopup","onFocus","React","cloneElement","addWarperAction","setArrowRef","popupArrow","children","setTriggerRef","r","setHelperRef","this","closeOnEscape","addEventListener","e","key","_this2","nextProps","overlayStyle","closeOnDocumentClick","overlay","ovStyle","Ref","renderTrigger","undefined","renderContent","PureComponent","innerRef","findDOMNode","Children","only"],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index 6cb0744..a98fe6b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.2.0", + "version": "1.3.0", "description": "React Popup Component - Modals,Tooltips and Menusβ€Šβ€”β€Š All in one", "main": "reactjs-popup.cjs.js", "module": "reactjs-popup.es.js",