diff --git a/__test__/__snapshots__/index.test.js.snap b/__test__/__snapshots__/index.test.js.snap index d27c4de..2b256b9 100644 --- a/__test__/__snapshots__/index.test.js.snap +++ b/__test__/__snapshots__/index.test.js.snap @@ -16,7 +16,11 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 1 mouseEnterDelay={100} mouseLeaveDelay={100} offset={0} - on="click" + on={ + Array [ + "click", + ] + } onClose={[Function]} onOpen={[Function]} overlayStyle={Object {}} @@ -110,7 +114,11 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 2 mouseEnterDelay={100} mouseLeaveDelay={100} offset={0} - on="click" + on={ + Array [ + "click", + ] + } onClose={[Function]} onOpen={[Function]} overlayStyle={Object {}} @@ -154,7 +162,11 @@ exports[`it should render correctly 1`] = ` mouseEnterDelay={100} mouseLeaveDelay={100} offset={0} - on="click" + on={ + Array [ + "click", + ] + } onClose={[Function]} onOpen={[Function]} overlayStyle={Object {}} @@ -183,7 +195,11 @@ exports[`it should render correctly on click 1`] = ` mouseEnterDelay={100} mouseLeaveDelay={100} offset={0} - on="click" + on={ + Array [ + "click", + ] + } onClose={[Function]} onOpen={[Function]} overlayStyle={Object {}} @@ -274,7 +290,11 @@ exports[`it should render correctly on click (triggerOn = 'click') 1`] = ` mouseEnterDelay={100} mouseLeaveDelay={100} offset={0} - on="click" + on={ + Array [ + "click", + ] + } onClose={[Function]} onOpen={[Function]} overlayStyle={Object {}} @@ -351,6 +371,286 @@ exports[`it should render correctly on click (triggerOn = 'click') 1`] = ` `; +exports[`it should render correctly on click and will update the the popup content text 1`] = ` + + + Trigger + + } + > +
+
+
+
+
+ Popup content + open + +
+
+ + + +`; + +exports[`it should render correctly on click and will update the the popup content text 2`] = ` + + + Trigger + + } + > +
+ + + +`; + +exports[`it should render correctly on click and will update the trigger text 1`] = ` + + +
+
+
+
+ popup content +
+ + + +`; + +exports[`it should render correctly on click and will update the trigger text 2`] = ` + + +
+ + + +`; + exports[`it should render correctly on hover (triggerOn = 'focus') 1`] = ` ( popup content ); - +const PopupTriggerFunction = props => ( + } + > + popup content + +); +const PopupContentAsFunction = props => ( + Trigger}> + {(close, open) =>
Popup content {open ? "open" : "close"}
} + +); test("it should render correctly ", () => { const popup = shallow(); expect(shallowToJson(popup)).toMatchSnapshot(); @@ -45,7 +57,26 @@ test("it should render correctly on hover (triggerOn = 'focus') ", () => { expect(shallowToJson(popup)).toMatchSnapshot(); }); -// closeOnDocumentClick Tests +// trigger as function + +test("it should render correctly on click and will update the trigger text ", () => { + const popup = mount(); + popup.find("button").simulate("click"); + expect(shallowToJson(popup)).toMatchSnapshot(); + popup.find("button").simulate("click"); + expect(shallowToJson(popup)).toMatchSnapshot(); +}); + +// content as function +test("it should render correctly on click and will update the the popup content text ", () => { + const popup = mount(); + popup.find("button").simulate("click"); + expect(shallowToJson(popup)).toMatchSnapshot(); + popup.find("button").simulate("click"); + expect(shallowToJson(popup)).toMatchSnapshot(); +}); + +// closeOnDocumentClick Tests PopupContentAsFunction test("it shouldn't close on click outside popup ", () => { const popup = mount(); diff --git a/lib/README.md b/lib/README.md index 13b43c0..f75fafb 100644 --- a/lib/README.md +++ b/lib/README.md @@ -26,6 +26,18 @@ Requires React >= 16.0 ![alt text](https://cdn-images-1.medium.com/max/800/1*x-TqQwyT2ADmnb51oRJCOg.gif) +## TO DO + +* [x] Create repository && publish package +* [x] Create reactjs-popup Home page +* [x] Tooltip Support +* [x] Modal Support +* [x] Menu & Nested Menu Support +* [x] Add Live examples +* [ ] Animation API +* [ ] Toast Support +* [ ] suggest a feature [here](https://github.com/yjose/reactjs-popup/labels/Features) + ## Installing / Getting started This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers. diff --git a/lib/package.json b/lib/package.json index 549263b..79e1a5a 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.0.1", + "version": "1.0.2", "description": "React Popup Component", "main": "reactjsPopup.es.js", "module": "reactjsPopup.es.js", diff --git a/lib/reactjs-popup.dev.js b/lib/reactjs-popup.dev.js index 5b08c36..6d5fcf7 100644 --- a/lib/reactjs-popup.dev.js +++ b/lib/reactjs-popup.dev.js @@ -216,9 +216,9 @@ var Popup = function (_React$Component) { _this.ContentEl.style.top = cords.top - helper.top + "px"; _this.ContentEl.style.left = cords.left - helper.left + "px"; if (arrow) { - _this.ArrowEl.style['transform'] = cords.transform; - _this.ArrowEl.style['-ms-transform'] = cords.transform; - _this.ArrowEl.style['-webkit-transform'] = cords.transform; + _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; } @@ -242,7 +242,7 @@ var Popup = function (_React$Component) { e.stopPropagation(); } }; - if (!modal && on === "hover") { + if (!modal && on.includes("hover")) { childrenElementProps.onMouseEnter = _this.onMouseEnter; childrenElementProps.onMouseLeave = _this.onMouseLeave; } @@ -251,28 +251,36 @@ var Popup = function (_React$Component) { _this.renderTrigger = function () { var triggerProps = { key: "T" }; - var on = _this.props.on; + var _this$props3 = _this.props, + on = _this$props3.on, + trigger = _this$props3.trigger; triggerProps.ref = _this.setTriggerRef; - switch (on) { - case "click": - triggerProps.onClick = _this.togglePopup; - break; - case "hover": - triggerProps.onMouseEnter = _this.onMouseEnter; - triggerProps.onMouseLeave = _this.onMouseLeave; - case "focus": - triggerProps.onFocus = _this.onMouseEnter; - break; + var onAsArray = Array.isArray(on) ? on : [on]; + for (var i = 0, len = onAsArray.length; i < len; i++) { + switch (onAsArray[i]) { + case "click": + triggerProps.onClick = _this.togglePopup; + break; + case "hover": + triggerProps.onMouseEnter = _this.onMouseEnter; + triggerProps.onMouseLeave = _this.onMouseLeave; + case "focus": + triggerProps.onFocus = _this.onMouseEnter; + break; + } } - return React.cloneElement(_this.props.trigger, triggerProps); + + if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps); + + return React.cloneElement(trigger, triggerProps); }; _this.renderContent = function () { - var _this$props3 = _this.props, - arrow = _this$props3.arrow, - modal = _this$props3.modal, - arrowStyle = _this$props3.arrowStyle; + var _this$props4 = _this.props, + arrow = _this$props4.arrow, + modal = _this$props4.modal, + arrowStyle = _this$props4.arrowStyle; return React.createElement( "div", @@ -351,7 +359,7 @@ Popup.defaultProps = { onClose: function onClose() {}, closeOnDocumentClick: false, defaultOpen: false, - on: "click", + on: ["click"], contentStyle: {}, arrowStyle: {}, overlayStyle: {}, @@ -378,8 +386,8 @@ if (process.env.NODE_ENV !== "production") { mouseLeaveDelay: PropTypes.number, onOpen: PropTypes.func, onClose: PropTypes.func, - trigger: PropTypes.element.isRequired, - on: PropTypes.oneOf(["hover", "click", "focus"]), + trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, + on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]), children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired, position: PropTypes.oneOf(["top left", "top center", "top right", "bottom left", "bottom center", "bottom right", "right top", "right center", "right bottom", "left top", "left center", "left bottom"]) }; diff --git a/lib/reactjs-popup.dev.js.map b/lib/reactjs-popup.dev.js.map index 2748147..e3f0458 100644 --- a/lib/reactjs-popup.dev.js.map +++ b/lib/reactjs-popup.dev.js.map @@ -1 +1 @@ -{"version":3,"file":"reactjs-popup.dev.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*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const totalMargin = margin + offset;\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 + totalMargin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + totalMargin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + totalMargin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + totalMargin;\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 return { top, left, transform, arrowLeft, arrowTop };\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 calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.Component {\n static defaultProps = {\n children: () => Your Content Here !!,\n onOpen: () => {},\n onClose: () => {},\n closeOnDocumentClick: false,\n defaultOpen: false,\n on: \"click\",\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n arrow: true,\n offset: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.defaultOpen\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 if (this.props.defaultOpen) this.setPosition();\n }\n componentWillUnmount() {\n clearTimeout(this.timeOut);\n }\n\n togglePopup = () => {\n this.setState(\n prevState => ({\n isOpen: !prevState.isOpen\n }),\n () => this.state.isOpen && this.setPosition()\n );\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, this.props.onClose());\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 setPosition = () => {\n const { modal, arrow, position, offset } = this.props;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, offset);\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 this.TriggerEl.style.position == \"static\" ||\n this.TriggerEl.style.position == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, modal, on } = this.props;\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 === \"hover\") {\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 } = this.props;\n triggerProps.ref = this.setTriggerRef;\n switch (on) {\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 return React.cloneElement(this.props.trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, modal, arrowStyle } = this.props;\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 { modal, overlayStyle } = this.props;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n this.renderTrigger()\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\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 offset: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n trigger: PropTypes.element.isRequired,\n on: PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n"],"names":["calculatePosition","triggerBounding","ContentBounding","position","arrow","offset","margin","totalMargin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","Popup","props","state","defaultOpen","togglePopup","setState","prevState","isOpen","setPosition","openPopup","onOpen","closePopup","onClose","onMouseEnter","timeOut","mouseEnterDelay","setTimeout","onMouseLeave","mouseLeaveDelay","modal","helper","HelperEl","getBoundingClientRect","trigger","TriggerEl","content","ContentEl","cords","style","ArrowEl","addWarperAction","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","renderTrigger","triggerProps","key","ref","setTriggerRef","onClick","onFocus","React","cloneElement","renderContent","arrowStyle","setArrowRef","popupArrow","children","r","setHelperRef","overlayStyle","ovStyle","overlay","closeOnDocumentClick","undefined","Component","defaultProps","process","env","NODE_ENV","PropTypes","require","propTypes","object","string","bool","number","func","element","isRequired","oneOf","oneOfType"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"reactjs-popup.dev.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*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const totalMargin = margin + offset;\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 + totalMargin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + totalMargin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + totalMargin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + totalMargin;\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 return { top, left, transform, arrowLeft, arrowTop };\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 calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.Component {\n static defaultProps = {\n children: () => Your Content Here !!,\n onOpen: () => {},\n onClose: () => {},\n closeOnDocumentClick: false,\n defaultOpen: false,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n arrow: true,\n offset: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.defaultOpen\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 if (this.props.defaultOpen) this.setPosition();\n }\n componentWillUnmount() {\n clearTimeout(this.timeOut);\n }\n\n togglePopup = () => {\n this.setState(\n prevState => ({\n isOpen: !prevState.isOpen\n }),\n () => this.state.isOpen && this.setPosition()\n );\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, this.props.onClose());\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 setPosition = () => {\n const { modal, arrow, position, offset } = this.props;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, offset);\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 this.TriggerEl.style.position == \"static\" ||\n this.TriggerEl.style.position == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, modal, on } = this.props;\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.includes(\"hover\")) {\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 triggerProps.ref = this.setTriggerRef;\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, modal, arrowStyle } = this.props;\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 { modal, overlayStyle } = this.props;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n this.renderTrigger()\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\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 offset: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element])\n .isRequired,\n on: PropTypes.oneOfType([\n PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n PropTypes.arrayOf(PropTypes.oneOf([\"hover\", \"click\", \"focus\"]))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n"],"names":["calculatePosition","triggerBounding","ContentBounding","position","arrow","offset","margin","totalMargin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","Popup","props","state","defaultOpen","togglePopup","setState","prevState","isOpen","setPosition","openPopup","onOpen","closePopup","onClose","onMouseEnter","timeOut","mouseEnterDelay","setTimeout","onMouseLeave","mouseLeaveDelay","modal","helper","HelperEl","getBoundingClientRect","trigger","TriggerEl","content","ContentEl","cords","style","ArrowEl","addWarperAction","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","includes","renderTrigger","triggerProps","key","ref","setTriggerRef","onAsArray","Array","isArray","i","len","length","onClick","onFocus","React","cloneElement","renderContent","arrowStyle","setArrowRef","popupArrow","children","r","setHelperRef","overlayStyle","ovStyle","overlay","closeOnDocumentClick","undefined","Component","defaultProps","process","env","NODE_ENV","PropTypes","require","propTypes","object","string","bool","number","func","oneOfType","element","isRequired","oneOf","arrayOf"],"mappings":"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"} \ No newline at end of file diff --git a/lib/reactjs-popup.js b/lib/reactjs-popup.js index f5e422d..98bd38b 100644 --- a/lib/reactjs-popup.js +++ b/lib/reactjs-popup.js @@ -216,9 +216,9 @@ var Popup = function (_React$Component) { _this.ContentEl.style.top = cords.top - helper.top + "px"; _this.ContentEl.style.left = cords.left - helper.left + "px"; if (arrow) { - _this.ArrowEl.style['transform'] = cords.transform; - _this.ArrowEl.style['-ms-transform'] = cords.transform; - _this.ArrowEl.style['-webkit-transform'] = cords.transform; + _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; } @@ -242,7 +242,7 @@ var Popup = function (_React$Component) { e.stopPropagation(); } }; - if (!modal && on === "hover") { + if (!modal && on.includes("hover")) { childrenElementProps.onMouseEnter = _this.onMouseEnter; childrenElementProps.onMouseLeave = _this.onMouseLeave; } @@ -251,28 +251,36 @@ var Popup = function (_React$Component) { _this.renderTrigger = function () { var triggerProps = { key: "T" }; - var on = _this.props.on; + var _this$props3 = _this.props, + on = _this$props3.on, + trigger = _this$props3.trigger; triggerProps.ref = _this.setTriggerRef; - switch (on) { - case "click": - triggerProps.onClick = _this.togglePopup; - break; - case "hover": - triggerProps.onMouseEnter = _this.onMouseEnter; - triggerProps.onMouseLeave = _this.onMouseLeave; - case "focus": - triggerProps.onFocus = _this.onMouseEnter; - break; + var onAsArray = Array.isArray(on) ? on : [on]; + for (var i = 0, len = onAsArray.length; i < len; i++) { + switch (onAsArray[i]) { + case "click": + triggerProps.onClick = _this.togglePopup; + break; + case "hover": + triggerProps.onMouseEnter = _this.onMouseEnter; + triggerProps.onMouseLeave = _this.onMouseLeave; + case "focus": + triggerProps.onFocus = _this.onMouseEnter; + break; + } } - return React.cloneElement(_this.props.trigger, triggerProps); + + if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps); + + return React.cloneElement(trigger, triggerProps); }; _this.renderContent = function () { - var _this$props3 = _this.props, - arrow = _this$props3.arrow, - modal = _this$props3.modal, - arrowStyle = _this$props3.arrowStyle; + var _this$props4 = _this.props, + arrow = _this$props4.arrow, + modal = _this$props4.modal, + arrowStyle = _this$props4.arrowStyle; return React.createElement( "div", @@ -351,7 +359,7 @@ Popup.defaultProps = { onClose: function onClose() {}, closeOnDocumentClick: false, defaultOpen: false, - on: "click", + on: ["click"], contentStyle: {}, arrowStyle: {}, overlayStyle: {}, @@ -378,8 +386,8 @@ Popup.defaultProps = { mouseLeaveDelay: PropTypes.number, onOpen: PropTypes.func, onClose: PropTypes.func, - trigger: PropTypes.element.isRequired, - on: PropTypes.oneOf(["hover", "click", "focus"]), + trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, + on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]), children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired, position: PropTypes.oneOf(["top left", "top center", "top right", "bottom left", "bottom center", "bottom right", "right top", "right center", "right bottom", "left top", "left center", "left bottom"]) }; diff --git a/lib/reactjs-popup.js.map b/lib/reactjs-popup.js.map index 9ebd3ca..df75f18 100644 --- a/lib/reactjs-popup.js.map +++ b/lib/reactjs-popup.js.map @@ -1 +1 @@ -{"version":3,"file":"reactjs-popup.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*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const totalMargin = margin + offset;\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 + totalMargin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + totalMargin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + totalMargin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + totalMargin;\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 return { top, left, transform, arrowLeft, arrowTop };\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 calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.Component {\n static defaultProps = {\n children: () => Your Content Here !!,\n onOpen: () => {},\n onClose: () => {},\n closeOnDocumentClick: false,\n defaultOpen: false,\n on: \"click\",\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n arrow: true,\n offset: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.defaultOpen\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 if (this.props.defaultOpen) this.setPosition();\n }\n componentWillUnmount() {\n clearTimeout(this.timeOut);\n }\n\n togglePopup = () => {\n this.setState(\n prevState => ({\n isOpen: !prevState.isOpen\n }),\n () => this.state.isOpen && this.setPosition()\n );\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, this.props.onClose());\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 setPosition = () => {\n const { modal, arrow, position, offset } = this.props;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, offset);\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 this.TriggerEl.style.position == \"static\" ||\n this.TriggerEl.style.position == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, modal, on } = this.props;\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 === \"hover\") {\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 } = this.props;\n triggerProps.ref = this.setTriggerRef;\n switch (on) {\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 return React.cloneElement(this.props.trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, modal, arrowStyle } = this.props;\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 { modal, overlayStyle } = this.props;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n this.renderTrigger()\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\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 offset: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n trigger: PropTypes.element.isRequired,\n on: PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n"],"names":["calculatePosition","triggerBounding","ContentBounding","position","arrow","offset","margin","totalMargin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","Popup","props","state","defaultOpen","togglePopup","setState","prevState","isOpen","setPosition","openPopup","onOpen","closePopup","onClose","onMouseEnter","timeOut","mouseEnterDelay","setTimeout","onMouseLeave","mouseLeaveDelay","modal","helper","HelperEl","getBoundingClientRect","trigger","TriggerEl","content","ContentEl","cords","style","ArrowEl","addWarperAction","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","renderTrigger","triggerProps","key","ref","setTriggerRef","onClick","onFocus","React","cloneElement","renderContent","arrowStyle","setArrowRef","popupArrow","children","r","setHelperRef","overlayStyle","ovStyle","overlay","closeOnDocumentClick","undefined","Component","defaultProps","PropTypes","require","propTypes","object","string","bool","number","func","element","isRequired","oneOf","oneOfType"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"reactjs-popup.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*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const totalMargin = margin + offset;\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 + totalMargin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + totalMargin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + totalMargin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + totalMargin;\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 return { top, left, transform, arrowLeft, arrowTop };\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 calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.Component {\n static defaultProps = {\n children: () => Your Content Here !!,\n onOpen: () => {},\n onClose: () => {},\n closeOnDocumentClick: false,\n defaultOpen: false,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n arrow: true,\n offset: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.defaultOpen\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 if (this.props.defaultOpen) this.setPosition();\n }\n componentWillUnmount() {\n clearTimeout(this.timeOut);\n }\n\n togglePopup = () => {\n this.setState(\n prevState => ({\n isOpen: !prevState.isOpen\n }),\n () => this.state.isOpen && this.setPosition()\n );\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, this.props.onClose());\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 setPosition = () => {\n const { modal, arrow, position, offset } = this.props;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, offset);\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 this.TriggerEl.style.position == \"static\" ||\n this.TriggerEl.style.position == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, modal, on } = this.props;\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.includes(\"hover\")) {\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 triggerProps.ref = this.setTriggerRef;\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, modal, arrowStyle } = this.props;\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 { modal, overlayStyle } = this.props;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n this.renderTrigger()\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\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 offset: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element])\n .isRequired,\n on: PropTypes.oneOfType([\n PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n PropTypes.arrayOf(PropTypes.oneOf([\"hover\", \"click\", \"focus\"]))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n"],"names":["calculatePosition","triggerBounding","ContentBounding","position","arrow","offset","margin","totalMargin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","Popup","props","state","defaultOpen","togglePopup","setState","prevState","isOpen","setPosition","openPopup","onOpen","closePopup","onClose","onMouseEnter","timeOut","mouseEnterDelay","setTimeout","onMouseLeave","mouseLeaveDelay","modal","helper","HelperEl","getBoundingClientRect","trigger","TriggerEl","content","ContentEl","cords","style","ArrowEl","addWarperAction","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","includes","renderTrigger","triggerProps","key","ref","setTriggerRef","onAsArray","Array","isArray","i","len","length","onClick","onFocus","React","cloneElement","renderContent","arrowStyle","setArrowRef","popupArrow","children","r","setHelperRef","overlayStyle","ovStyle","overlay","closeOnDocumentClick","undefined","Component","defaultProps","PropTypes","require","propTypes","object","string","bool","number","func","oneOfType","element","isRequired","oneOf","arrayOf"],"mappings":"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"} \ No newline at end of file diff --git a/lib/reactjs-popup.min.js b/lib/reactjs-popup.min.js index 69c4de6..9dd32f5 100644 --- a/lib/reactjs-popup.min.js +++ b/lib/reactjs-popup.min.js @@ -1 +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 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*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const totalMargin = margin + offset;\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 + totalMargin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + totalMargin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + totalMargin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + totalMargin;\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 return { top, left, transform, arrowLeft, arrowTop };\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 calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.Component {\n static defaultProps = {\n children: () => Your Content Here !!,\n onOpen: () => {},\n onClose: () => {},\n closeOnDocumentClick: false,\n defaultOpen: false,\n on: \"click\",\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n arrow: true,\n offset: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.defaultOpen\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 if (this.props.defaultOpen) this.setPosition();\n }\n componentWillUnmount() {\n clearTimeout(this.timeOut);\n }\n\n togglePopup = () => {\n this.setState(\n prevState => ({\n isOpen: !prevState.isOpen\n }),\n () => this.state.isOpen && this.setPosition()\n );\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, this.props.onClose());\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 setPosition = () => {\n const { modal, arrow, position, offset } = this.props;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, offset);\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 this.TriggerEl.style.position == \"static\" ||\n this.TriggerEl.style.position == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, modal, on } = this.props;\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 === \"hover\") {\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 } = this.props;\n triggerProps.ref = this.setTriggerRef;\n switch (on) {\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 return React.cloneElement(this.props.trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, modal, arrowStyle } = this.props;\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 { modal, overlayStyle } = this.props;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n this.renderTrigger()\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\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 offset: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n trigger: PropTypes.element.isRequired,\n on: PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n"],"names":["calculatePosition","triggerBounding","ContentBounding","position","arrow","offset","margin","totalMargin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","Popup","props","state","defaultOpen","togglePopup","setState","prevState","isOpen","setPosition","openPopup","onOpen","closePopup","onClose","onMouseEnter","timeOut","mouseEnterDelay","setTimeout","onMouseLeave","mouseLeaveDelay","modal","helper","HelperEl","getBoundingClientRect","trigger","TriggerEl","content","ContentEl","cords","style","ArrowEl","addWarperAction","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","renderTrigger","triggerProps","key","ref","setTriggerRef","onClick","onFocus","React","cloneElement","renderContent","arrowStyle","setArrowRef","popupArrow","children","r","setHelperRef","overlayStyle","ovStyle","overlay","closeOnDocumentClick","undefined","Component","defaultProps"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"reactjsPopup.browser.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*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const totalMargin = margin + offset;\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 + totalMargin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + totalMargin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + totalMargin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + totalMargin;\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 return { top, left, transform, arrowLeft, arrowTop };\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 calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.Component {\n static defaultProps = {\n children: () => Your Content Here !!,\n onOpen: () => {},\n onClose: () => {},\n closeOnDocumentClick: false,\n defaultOpen: false,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n arrow: true,\n offset: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.defaultOpen\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 if (this.props.defaultOpen) this.setPosition();\n }\n componentWillUnmount() {\n clearTimeout(this.timeOut);\n }\n\n togglePopup = () => {\n this.setState(\n prevState => ({\n isOpen: !prevState.isOpen\n }),\n () => this.state.isOpen && this.setPosition()\n );\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, this.props.onClose());\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 setPosition = () => {\n const { modal, arrow, position, offset } = this.props;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, offset);\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 this.TriggerEl.style.position == \"static\" ||\n this.TriggerEl.style.position == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, modal, on } = this.props;\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.includes(\"hover\")) {\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 triggerProps.ref = this.setTriggerRef;\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, modal, arrowStyle } = this.props;\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 { modal, overlayStyle } = this.props;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n this.renderTrigger()\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\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 offset: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element])\n .isRequired,\n on: PropTypes.oneOfType([\n PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n PropTypes.arrayOf(PropTypes.oneOf([\"hover\", \"click\", \"focus\"]))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n"],"names":["calculatePosition","triggerBounding","ContentBounding","position","arrow","offset","margin","totalMargin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","Popup","props","state","defaultOpen","togglePopup","setState","prevState","isOpen","setPosition","openPopup","onOpen","closePopup","onClose","onMouseEnter","timeOut","mouseEnterDelay","setTimeout","onMouseLeave","mouseLeaveDelay","modal","helper","HelperEl","getBoundingClientRect","trigger","TriggerEl","content","ContentEl","cords","style","ArrowEl","addWarperAction","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","includes","renderTrigger","triggerProps","key","ref","setTriggerRef","onAsArray","Array","isArray","i","len","length","onClick","onFocus","React","cloneElement","renderContent","arrowStyle","setArrowRef","popupArrow","children","r","setHelperRef","overlayStyle","ovStyle","overlay","closeOnDocumentClick","undefined","Component","defaultProps"],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;AAkBA,AAAe,SAASA,iBAAT,CACbC,eADa,EAEbC,eAFa,EAGbC,QAHa,EAIbC,KAJa,EAKbC,MALa,EAMb;MAEMC,SAASF,QAAQ,CAAR,GAAY,CAA3B;MACMG,cAAcD,SAASD,MAA7B;MACMG,OAAOL,SAASM,KAAT,CAAe,GAAf,CAAb;;MAEMC,YAAYT,gBAAgBU,GAAhB,GAAsBV,gBAAgBW,MAAhB,GAAyB,CAAjE;MACMC,aAAaZ,gBAAgBa,IAAhB,GAAuBb,gBAAgBc,KAAhB,GAAwB,CAAlE;MACQH,MARR,GAQ0BV,eAR1B,CAQQU,MARR;MAQgBG,KARhB,GAQ0Bb,eAR1B,CAQgBa,KARhB;;MASIJ,MAAMD,YAAYE,SAAS,CAA/B;MACIE,OAAOD,aAAaE,QAAQ,CAAhC;MACIC,YAAY,EAAhB;MACIC,WAAW,IAAf;MACIC,YAAY,IAAhB;;UAEQV,KAAK,CAAL,CAAR;SACO,KAAL;aACSI,SAAS,CAAT,GAAaX,gBAAgBW,MAAhB,GAAyB,CAAtC,GAA0CL,WAAjD;;iBAEW,MAAX;kBACY,KAAZ;;SAEG,QAAL;aACSK,SAAS,CAAT,GAAaX,gBAAgBW,MAAhB,GAAyB,CAAtC,GAA0CL,WAAjD;;kBAEY,KAAZ;;SAEG,MAAL;cACUQ,QAAQ,CAAR,GAAYd,gBAAgBc,KAAhB,GAAwB,CAApC,GAAwCR,WAAhD;;kBAEY,MAAZ;iBACW,KAAX;;SAEG,OAAL;cACUQ,QAAQ,CAAR,GAAYd,gBAAgBc,KAAhB,GAAwB,CAApC,GAAwCR,WAAhD;;iBAEW,KAAX;;;;UAIIC,KAAK,CAAL,CAAR;SACO,KAAL;YACQP,gBAAgBU,GAAtB;iBACWV,gBAAgBW,MAAhB,GAAyB,CAAzB,GAA6B,IAAxC;;SAEG,QAAL;YACQX,gBAAgBU,GAAhB,GAAsBC,MAAtB,GAA+BX,gBAAgBW,MAArD;iBACWA,SAASX,gBAAgBW,MAAhB,GAAyB,CAAlC,GAAsC,IAAjD;;SAEG,MAAL;aACSX,gBAAgBa,IAAvB;kBACYb,gBAAgBc,KAAhB,GAAwB,CAAxB,GAA4B,IAAxC;;SAEG,OAAL;aACSd,gBAAgBa,IAAhB,GAAuBC,KAAvB,GAA+Bd,gBAAgBc,KAAtD;kBACYA,QAAQd,gBAAgBc,KAAhB,GAAwB,CAAhC,GAAoC,IAAhD;;;;SAIG,EAAEJ,QAAF,EAAOG,UAAP,EAAaE,oBAAb,EAAwBE,oBAAxB,EAAmCD,kBAAnC,EAAP;;;ACnFF,aAAe;gBACC;aACH;gBACG,UADH;cAEC,GAFD;aAGA,OAHA;sCAAA;4CAAA;iDAAA;eAOE;KARC;WAUL;gBACK,UADL;sCAAA;aAGE,KAHF;cAIG,MAJH;4CAAA;eAMI;;GAjBA;cAoBD;YACF,MADE;WAEH,MAFG;cAGA,UAHA;gBAIE,oBAJF;eAKC,eALD;YAMF,MANE;YAOF,IAPE;eAQC;GA5BA;WA8BJ;aACE;gBACG,OADH;WAEF,GAFE;cAGC,GAHD;YAID,GAJC;aAKA;KANF;WAQA;gBACK,OADL;WAEA,GAFA;cAGG,GAHH;YAIC,GAJD;aAKE,GALF;qCAAA;eAOI,MAPJ;cAQG;;;CA9Cd;;;;;;;;;;;;ACAA,IAKqBE;;;iBAuBPC,KAAZ,EAAmB;;;8GACXA,KADW;;UAJnBC,KAImB,GAJX;cACE,MAAKD,KAAL,CAAWE;KAGF;;UAgBnBC,WAhBmB,GAgBL,YAAM;YACbC,QAAL,CACE;eAAc;kBACJ,CAACC,UAAUC;SADrB;OADF,EAIE;eAAM,MAAKL,KAAL,CAAWK,MAAX,IAAqB,MAAKC,WAAL,EAA3B;OAJF;KAjBiB;;UAwBnBC,SAxBmB,GAwBP,YAAM;UACZ,MAAKP,KAAL,CAAWK,MAAf,EAAuB;YAClBF,QAAL,CAAc,EAAEE,QAAQ,IAAV,EAAd,EAAgC,YAAM;cAC/BC,WAAL;cACKP,KAAL,CAAWS,MAAX;OAFF;KA1BiB;;UA+BnBC,UA/BmB,GA+BN,YAAM;UACb,CAAC,MAAKT,KAAL,CAAWK,MAAhB,EAAwB;YACnBF,QAAL,CAAc,EAAEE,QAAQ,KAAV,EAAd,EAAiC,MAAKN,KAAL,CAAWW,OAAX,EAAjC;KAjCiB;;UAmCnBC,YAnCmB,GAmCJ,YAAM;mBACN,MAAKC,OAAlB;UACQC,eAFW,GAES,MAAKd,KAFd,CAEXc,eAFW;;YAGdD,OAAL,GAAeE,WAAW;eAAM,MAAKP,SAAL,EAAN;OAAX,EAAmCM,eAAnC,CAAf;KAtCiB;;UAwCnBE,YAxCmB,GAwCJ,YAAM;mBACN,MAAKH,OAAlB;UACQI,eAFW,GAES,MAAKjB,KAFd,CAEXiB,eAFW;;YAGdJ,OAAL,GAAeE,WAAW;eAAM,MAAKL,UAAL,EAAN;OAAX,EAAoCO,eAApC,CAAf;KA3CiB;;UA8CnBV,WA9CmB,GA8CL,YAAM;wBACyB,MAAKP,KAD9B;UACVkB,KADU,eACVA,KADU;UACHlC,KADG,eACHA,KADG;UACID,QADJ,eACIA,QADJ;UACcE,MADd,eACcA,MADd;;UAEdiC,KAAJ,EAAW;UACLC,SAAS,MAAKC,QAAL,CAAcC,qBAAd,EAAf;UACMC,UAAU,MAAKC,SAAL,CAAeF,qBAAf,EAAhB;UACMG,UAAU,MAAKC,SAAL,CAAeJ,qBAAf,EAAhB;UACMK,QAAQ9C,kBAAkB0C,OAAlB,EAA2BE,OAA3B,EAAoCzC,QAApC,EAA8CC,KAA9C,EAAqDC,MAArD,CAAd;YACKwC,SAAL,CAAeE,KAAf,CAAqBpC,GAArB,GAA2BmC,MAAMnC,GAAN,GAAY4B,OAAO5B,GAAnB,GAAyB,IAApD;YACKkC,SAAL,CAAeE,KAAf,CAAqBjC,IAArB,GAA4BgC,MAAMhC,IAAN,GAAayB,OAAOzB,IAApB,GAA2B,IAAvD;UACIV,KAAJ,EAAW;cACJ4C,OAAL,CAAaD,KAAb,CAAmB,WAAnB,IAAkCD,MAAM9B,SAAxC;cACKgC,OAAL,CAAaD,KAAb,CAAmB,eAAnB,IAAsCD,MAAM9B,SAA5C;cACKgC,OAAL,CAAaD,KAAb,CAAmB,mBAAnB,IAA0CD,MAAM9B,SAAhD;cACKgC,OAAL,CAAaD,KAAb,CAAmBpC,GAAnB,GAAyBmC,MAAM7B,QAA/B;cACK+B,OAAL,CAAaD,KAAb,CAAmBjC,IAAnB,GAA0BgC,MAAM5B,SAAhC;;UAGA,MAAKyB,SAAL,CAAeI,KAAf,CAAqB5C,QAArB,IAAiC,QAAjC,IACA,MAAKwC,SAAL,CAAeI,KAAf,CAAqB5C,QAArB,IAAiC,EAFnC,EAIE,MAAKwC,SAAL,CAAeI,KAAf,CAAqB5C,QAArB,GAAgC,UAAhC;KAlEe;;UAqEnB8C,eArEmB,GAqED,YAAM;yBACyB,MAAK7B,KAD9B;UACd8B,YADc,gBACdA,YADc;UACAC,SADA,gBACAA,SADA;UACWb,KADX,gBACWA,KADX;UACkBc,EADlB,gBACkBA,EADlB;;UAEhBC,oBAAoBf,QACtBgB,OAAOC,YAAP,CAAoBjB,KADE,GAEtBgB,OAAOC,YAAP,CAAoBC,OAFxB;;UAIMC,uBAAuB;sCACCN,SADD;eAEpBO,OAAOC,MAAP,CAAc,EAAd,EAAkBN,iBAAlB,EAAqCH,YAArC,CAFoB;aAGtB,MAAKU,aAHiB;iBAIlB,oBAAK;YACVC,eAAF;;OALJ;UAQI,CAACvB,KAAD,IAAUc,GAAGU,QAAH,CAAY,OAAZ,CAAd,EAAoC;6BACb9B,YAArB,GAAoC,MAAKA,YAAzC;6BACqBI,YAArB,GAAoC,MAAKA,YAAzC;;aAEKqB,oBAAP;KAvFiB;;UAyFnBM,aAzFmB,GAyFH,YAAM;UACdC,eAAe,EAAEC,KAAK,GAAP,EAArB;yBACwB,MAAK7C,KAFT;UAEZgC,EAFY,gBAEZA,EAFY;UAERV,OAFQ,gBAERA,OAFQ;;mBAGPwB,GAAb,GAAmB,MAAKC,aAAxB;UACMC,YAAYC,MAAMC,OAAN,CAAclB,EAAd,IAAoBA,EAApB,GAAyB,CAACA,EAAD,CAA3C;WACK,IAAImB,IAAI,CAAR,EAAWC,MAAMJ,UAAUK,MAAhC,EAAwCF,IAAIC,GAA5C,EAAiDD,GAAjD,EAAsD;gBAC5CH,UAAUG,CAAV,CAAR;eACO,OAAL;yBACeG,OAAb,GAAuB,MAAKnD,WAA5B;;eAEG,OAAL;yBACeS,YAAb,GAA4B,MAAKA,YAAjC;yBACaI,YAAb,GAA4B,MAAKA,YAAjC;eACG,OAAL;yBACeuC,OAAb,GAAuB,MAAK3C,YAA5B;;;;;UAKF,OAAOU,OAAP,KAAmB,UAAvB,EACE,OAAOkC,MAAMC,YAAN,CAAmBnC,QAAQ,MAAKrB,KAAL,CAAWK,MAAnB,CAAnB,EAA+CsC,YAA/C,CAAP;;aAEKY,MAAMC,YAAN,CAAmBnC,OAAnB,EAA4BsB,YAA5B,CAAP;KA/GiB;;UAkHnBc,aAlHmB,GAkHH,YAAM;yBACiB,MAAK1D,KADtB;UACZhB,KADY,gBACZA,KADY;UACLkC,KADK,gBACLA,KADK;UACEyC,UADF,gBACEA,UADF;;aAGlB;;qBAAS,MAAK9B,eAAL,EAAT,IAAiC,KAAI,GAArC;iBAEI,CAACX,KADF,IAEG;eACO,MAAK0C,WADZ;iBAEStB,OAAOC,MAAP,CAAc,EAAd,EAAkBL,OAAO2B,UAAzB,EAAqCF,UAArC;UALf;eAQU,MAAK3D,KAAL,CAAW8D,QAAlB,KAA+B,UAA/B,GACG,MAAK9D,KAAL,CAAW8D,QAAX,CAAoB,MAAKpD,UAAzB,EAAqC,MAAKT,KAAL,CAAWK,MAAhD,CADH,GAEG,MAAKN,KAAL,CAAW8D;OAXnB;KApHiB;;UAEZf,aAAL,GAAqB;aAAM,MAAKxB,SAAL,GAAiBwC,CAAvB;KAArB;UACKvB,aAAL,GAAqB;aAAM,MAAKf,SAAL,GAAiBsC,CAAvB;KAArB;UACKH,WAAL,GAAmB;aAAM,MAAKhC,OAAL,GAAemC,CAArB;KAAnB;UACKC,YAAL,GAAoB;aAAM,MAAK5C,QAAL,GAAgB2C,CAAtB;KAApB;UACKlD,OAAL,GAAe,CAAf;;;;;;wCAGkB;UACd,KAAKb,KAAL,CAAWE,WAAf,EAA4B,KAAKK,WAAL;;;;2CAEP;mBACR,KAAKM,OAAlB;;;;6BAuHO;mBACyB,KAAKb,KAD9B;UACCkB,KADD,UACCA,KADD;UACQ+C,YADR,UACQA,YADR;;UAEDC,UAAUhD,QAAQgB,OAAOiC,OAAP,CAAejD,KAAvB,GAA+BgB,OAAOiC,OAAP,CAAe/B,OAA9D;aACO,CACL;aACM,GADN;eAES,EAAErD,UAAU,UAAZ,EAAwBQ,KAAK,KAA7B,EAAoCG,MAAM,KAA1C,EAFT;aAGO,KAAKsE;QAJP,EAML,KAAK/D,KAAL,CAAWK,MAAX,IACE;;;eACM,GADN;qBAEY,eAFZ;iBAGSgC,OAAOC,MAAP,CAAc,EAAd,EAAkB2B,OAAlB,EAA2BD,YAA3B,CAHT;mBAKI,KAAKjE,KAAL,CAAWoE,oBAAX,GAAkC,KAAK1D,UAAvC,GAAoD2D;;iBAG5C,KAAKX,aAAL;OAfT,EAkBL,KAAKzD,KAAL,CAAWK,MAAX,IAAqB,CAACY,KAAtB,IAA+B,KAAKwC,aAAL,EAlB1B,EAmBL,KAAKf,aAAL,EAnBK,CAAP;;;;;EA9J+Ba,MAAMc;;AAApBvE,MACZwE,eAAe;YACV;WAAM;;;;KAAN;GADU;UAEZ,kBAAM,EAFM;WAGX,mBAAM,EAHK;wBAIE,KAJF;eAKP,KALO;MAMhB,CAAC,OAAD,CANgB;gBAON,EAPM;cAQR,EARQ;gBASN,EATM;aAUT,EAVS;YAWV,eAXU;SAYb,KAZa;SAab,IAba;UAcZ,CAdY;mBAeH,GAfG;mBAgBH;;;;;"} \ No newline at end of file diff --git a/lib/reactjsPopup.es.js b/lib/reactjsPopup.es.js index 58493dd..82c0caf 100644 --- a/lib/reactjsPopup.es.js +++ b/lib/reactjsPopup.es.js @@ -280,9 +280,9 @@ var Popup = function (_React$Component) { _this.ContentEl.style.top = cords.top - helper.top + "px"; _this.ContentEl.style.left = cords.left - helper.left + "px"; if (arrow) { - _this.ArrowEl.style['transform'] = cords.transform; - _this.ArrowEl.style['-ms-transform'] = cords.transform; - _this.ArrowEl.style['-webkit-transform'] = cords.transform; + _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; } @@ -306,7 +306,7 @@ var Popup = function (_React$Component) { e.stopPropagation(); } }; - if (!modal && on === "hover") { + if (!modal && on.includes("hover")) { childrenElementProps.onMouseEnter = _this.onMouseEnter; childrenElementProps.onMouseLeave = _this.onMouseLeave; } @@ -315,28 +315,36 @@ var Popup = function (_React$Component) { _this.renderTrigger = function () { var triggerProps = { key: "T" }; - var on = _this.props.on; + var _this$props3 = _this.props, + on = _this$props3.on, + trigger = _this$props3.trigger; triggerProps.ref = _this.setTriggerRef; - switch (on) { - case "click": - triggerProps.onClick = _this.togglePopup; - break; - case "hover": - triggerProps.onMouseEnter = _this.onMouseEnter; - triggerProps.onMouseLeave = _this.onMouseLeave; - case "focus": - triggerProps.onFocus = _this.onMouseEnter; - break; + var onAsArray = Array.isArray(on) ? on : [on]; + for (var i = 0, len = onAsArray.length; i < len; i++) { + switch (onAsArray[i]) { + case "click": + triggerProps.onClick = _this.togglePopup; + break; + case "hover": + triggerProps.onMouseEnter = _this.onMouseEnter; + triggerProps.onMouseLeave = _this.onMouseLeave; + case "focus": + triggerProps.onFocus = _this.onMouseEnter; + break; + } } - return React.cloneElement(_this.props.trigger, triggerProps); + + if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps); + + return React.cloneElement(trigger, triggerProps); }; _this.renderContent = function () { - var _this$props3 = _this.props, - arrow = _this$props3.arrow, - modal = _this$props3.modal, - arrowStyle = _this$props3.arrowStyle; + var _this$props4 = _this.props, + arrow = _this$props4.arrow, + modal = _this$props4.modal, + arrowStyle = _this$props4.arrowStyle; return React.createElement( "div", @@ -414,7 +422,7 @@ Popup.defaultProps = { onClose: function onClose() {}, closeOnDocumentClick: false, defaultOpen: false, - on: "click", + on: ["click"], contentStyle: {}, arrowStyle: {}, overlayStyle: {}, @@ -441,8 +449,8 @@ if (process.env.NODE_ENV !== "production") { mouseLeaveDelay: PropTypes.number, onOpen: PropTypes.func, onClose: PropTypes.func, - trigger: PropTypes.element.isRequired, - on: PropTypes.oneOf(["hover", "click", "focus"]), + trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, + on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]), children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired, position: PropTypes.oneOf(["top left", "top center", "top right", "bottom left", "bottom center", "bottom right", "right top", "right center", "right bottom", "left top", "left center", "left bottom"]) }; diff --git a/lib/reactjsPopup.es.js.map b/lib/reactjsPopup.es.js.map index ffa0cb6..0aece65 100644 --- a/lib/reactjsPopup.es.js.map +++ b/lib/reactjsPopup.es.js.map @@ -1 +1 @@ -{"version":3,"file":"reactjsPopup.es.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*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const totalMargin = margin + offset;\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 + totalMargin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + totalMargin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + totalMargin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + totalMargin;\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 return { top, left, transform, arrowLeft, arrowTop };\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 calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.Component {\n static defaultProps = {\n children: () => Your Content Here !!,\n onOpen: () => {},\n onClose: () => {},\n closeOnDocumentClick: false,\n defaultOpen: false,\n on: \"click\",\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n arrow: true,\n offset: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.defaultOpen\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 if (this.props.defaultOpen) this.setPosition();\n }\n componentWillUnmount() {\n clearTimeout(this.timeOut);\n }\n\n togglePopup = () => {\n this.setState(\n prevState => ({\n isOpen: !prevState.isOpen\n }),\n () => this.state.isOpen && this.setPosition()\n );\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, this.props.onClose());\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 setPosition = () => {\n const { modal, arrow, position, offset } = this.props;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, offset);\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 this.TriggerEl.style.position == \"static\" ||\n this.TriggerEl.style.position == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, modal, on } = this.props;\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 === \"hover\") {\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 } = this.props;\n triggerProps.ref = this.setTriggerRef;\n switch (on) {\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 return React.cloneElement(this.props.trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, modal, arrowStyle } = this.props;\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 { modal, overlayStyle } = this.props;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n this.renderTrigger()\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\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 offset: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n trigger: PropTypes.element.isRequired,\n on: PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n"],"names":["calculatePosition","triggerBounding","ContentBounding","position","arrow","offset","margin","totalMargin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","Popup","props","state","defaultOpen","togglePopup","setState","prevState","isOpen","setPosition","openPopup","onOpen","closePopup","onClose","onMouseEnter","timeOut","mouseEnterDelay","setTimeout","onMouseLeave","mouseLeaveDelay","modal","helper","HelperEl","getBoundingClientRect","trigger","TriggerEl","content","ContentEl","cords","style","ArrowEl","addWarperAction","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","renderTrigger","triggerProps","key","ref","setTriggerRef","onClick","onFocus","React","cloneElement","renderContent","arrowStyle","setArrowRef","popupArrow","children","r","setHelperRef","overlayStyle","ovStyle","overlay","closeOnDocumentClick","undefined","Component","defaultProps","process","env","NODE_ENV","PropTypes","require","propTypes","object","string","bool","number","func","element","isRequired","oneOf","oneOfType"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"reactjsPopup.es.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*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const totalMargin = margin + offset;\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 + totalMargin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + totalMargin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + totalMargin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + totalMargin;\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 return { top, left, transform, arrowLeft, arrowTop };\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 calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.Component {\n static defaultProps = {\n children: () => Your Content Here !!,\n onOpen: () => {},\n onClose: () => {},\n closeOnDocumentClick: false,\n defaultOpen: false,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n arrow: true,\n offset: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.defaultOpen\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 if (this.props.defaultOpen) this.setPosition();\n }\n componentWillUnmount() {\n clearTimeout(this.timeOut);\n }\n\n togglePopup = () => {\n this.setState(\n prevState => ({\n isOpen: !prevState.isOpen\n }),\n () => this.state.isOpen && this.setPosition()\n );\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, this.props.onClose());\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 setPosition = () => {\n const { modal, arrow, position, offset } = this.props;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, offset);\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 this.TriggerEl.style.position == \"static\" ||\n this.TriggerEl.style.position == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, modal, on } = this.props;\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.includes(\"hover\")) {\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 triggerProps.ref = this.setTriggerRef;\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, modal, arrowStyle } = this.props;\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 { modal, overlayStyle } = this.props;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n this.renderTrigger()\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\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 offset: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element])\n .isRequired,\n on: PropTypes.oneOfType([\n PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n PropTypes.arrayOf(PropTypes.oneOf([\"hover\", \"click\", \"focus\"]))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n"],"names":["calculatePosition","triggerBounding","ContentBounding","position","arrow","offset","margin","totalMargin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","Popup","props","state","defaultOpen","togglePopup","setState","prevState","isOpen","setPosition","openPopup","onOpen","closePopup","onClose","onMouseEnter","timeOut","mouseEnterDelay","setTimeout","onMouseLeave","mouseLeaveDelay","modal","helper","HelperEl","getBoundingClientRect","trigger","TriggerEl","content","ContentEl","cords","style","ArrowEl","addWarperAction","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","includes","renderTrigger","triggerProps","key","ref","setTriggerRef","onAsArray","Array","isArray","i","len","length","onClick","onFocus","React","cloneElement","renderContent","arrowStyle","setArrowRef","popupArrow","children","r","setHelperRef","overlayStyle","ovStyle","overlay","closeOnDocumentClick","undefined","Component","defaultProps","process","env","NODE_ENV","PropTypes","require","propTypes","object","string","bool","number","func","oneOfType","element","isRequired","oneOf","arrayOf"],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index 9a73d8c..8025dc3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.0.1", + "version": "1.0.2", "description": "React Popup Component", "main": "reactjsPopup.es.js", "module": "reactjsPopup.es.js", @@ -31,6 +31,7 @@ "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "cross-env": "^5.1.1", + "del": "^3.0.0", "enzyme": "^3.2.0", "enzyme-adapter-react-16": "^1.1.1", "enzyme-to-json": "^3.3.0",