From 71abdfcdee67f2b36a0de6a2e9f07d50caa00426 Mon Sep 17 00:00:00 2001 From: Youssouf Elazizi Date: Fri, 13 Apr 2018 19:26:42 +0100 Subject: [PATCH] release 1.1.0 fix #10 --- __test__/__snapshots__/index.test.js.snap | 50 +++++++++++------------ docs/src/containers/Sidebar.js | 39 ++++++++++-------- lib/package.json | 2 +- lib/reactjs-popup.cjs.js | 6 +-- lib/reactjs-popup.es.js | 6 +-- lib/reactjs-popup.js | 6 +-- lib/reactjs-popup.min.js | 4 +- lib/reactjs-popup.min.js.map | 2 +- package.json | 2 +- src/Popup.js | 5 +-- 10 files changed, 63 insertions(+), 59 deletions(-) diff --git a/__test__/__snapshots__/index.test.js.snap b/__test__/__snapshots__/index.test.js.snap index 6068dde..17234bc 100644 --- a/__test__/__snapshots__/index.test.js.snap +++ b/__test__/__snapshots__/index.test.js.snap @@ -13,7 +13,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 1 closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -120,7 +120,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 2 closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -167,7 +167,7 @@ exports[`it should render correctly 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -204,7 +204,7 @@ exports[`it should render correctly on click 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -309,7 +309,7 @@ exports[`it should render correctly on click (triggerOn = 'click') 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -413,7 +413,7 @@ exports[`it should render correctly on click and will update the the popup conte closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -520,7 +520,7 @@ exports[`it should render correctly on click and will update the the popup conte closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -567,7 +567,7 @@ exports[`it should render correctly on click and will update the trigger text closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -667,7 +667,7 @@ exports[`it should render correctly on click and will update the trigger text closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -713,7 +713,7 @@ exports[`it should render correctly on hover (triggerOn = 'focus') 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -762,7 +762,7 @@ exports[`it should render correctly on hover (triggerOn = 'hover') 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -813,7 +813,7 @@ exports[`it should rendered in the bottom center position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -920,7 +920,7 @@ exports[`it should rendered in the bottom left position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1027,7 +1027,7 @@ exports[`it should rendered in the bottom right position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1134,7 +1134,7 @@ exports[`it should rendered in the left bottom position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1241,7 +1241,7 @@ exports[`it should rendered in the left center position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1348,7 +1348,7 @@ exports[`it should rendered in the left top position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1455,7 +1455,7 @@ exports[`it should rendered in the right bottom position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1562,7 +1562,7 @@ exports[`it should rendered in the right center position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1669,7 +1669,7 @@ exports[`it should rendered in the right top position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1776,7 +1776,7 @@ exports[`it should rendered in the top center position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1883,7 +1883,7 @@ exports[`it should rendered in the top left position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -1990,7 +1990,7 @@ exports[`it should rendered in the top right position 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -2096,7 +2096,7 @@ exports[`it shouldn't close on click outside popup 1`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} @@ -2202,7 +2202,7 @@ exports[`it shouldn't close on click outside popup 2`] = ` closeOnEscape={true} contentStyle={Object {}} defaultOpen={false} - lockScroll={true} + lockScroll={false} modal={false} mouseEnterDelay={100} mouseLeaveDelay={100} diff --git a/docs/src/containers/Sidebar.js b/docs/src/containers/Sidebar.js index 1af6f7d..aaf8da3 100644 --- a/docs/src/containers/Sidebar.js +++ b/docs/src/containers/Sidebar.js @@ -1,13 +1,13 @@ -import React from 'react' -import { NavLink } from 'react-static' -import Popup from '../../../lib/reactjs-popup.es' -import config from '../config.json' +import React from "react"; +import { NavLink } from "react-static"; +import Popup from "../../../lib/reactjs-popup.es"; +import config from "../config.json"; -import '../css/sidebar.css' +import "../css/sidebar.css"; export default class Sidebar extends React.Component { - render () { - const routes = Object.entries(config.menu).map(r => r[0]) + render() { + const routes = Object.entries(config.menu).map(r => r[0]); return [
@@ -15,44 +15,49 @@ export default class Sidebar extends React.Component {
} > {close => } -
, - ] +
+ ]; } } const Menu = ({ routes, close }) => ( -) +); const BurgerIcon = ({ open, ...props }) => ( -
+
-) +); -const contentStyle = { background: 'rgba(255,255,255,0', width: '80%', border: 'none' } +const contentStyle = { + background: "rgba(255,255,255,0", + width: "80%", + border: "none" +}; diff --git a/lib/package.json b/lib/package.json index 3bc4f1a..6cc01c2 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.0.8", + "version": "1.1.0", "description": "React Popup Component - Modals,Tooltips and Menus —  All in one", "main": "reactjs-popup.cjs.js", "module": "reactjs-popup.es.js", diff --git a/lib/reactjs-popup.cjs.js b/lib/reactjs-popup.cjs.js index cf121b7..fc2cdb8 100644 --- a/lib/reactjs-popup.cjs.js +++ b/lib/reactjs-popup.cjs.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.0.8 + * reactjs-popup v1.1.0 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -500,7 +500,7 @@ function (_React$PureComponent) { closeOnDocumentClick = _props2.closeOnDocumentClick, on = _props2.on; var modal = this.state.modal; - var overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick; + var overlay = this.state.isOpen && !on.includes("hover"); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; return [this.state.isOpen && React.createElement("div", { key: "H", @@ -514,7 +514,7 @@ function (_React$PureComponent) { key: "O", className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), - onClick: this.closePopup + onClick: closeOnDocumentClick ? this.closePopup : undefined }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { innerRef: this.setTriggerRef, key: "R" diff --git a/lib/reactjs-popup.es.js b/lib/reactjs-popup.es.js index a420c81..efe8e86 100644 --- a/lib/reactjs-popup.es.js +++ b/lib/reactjs-popup.es.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.0.8 + * reactjs-popup v1.1.0 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -496,7 +496,7 @@ function (_React$PureComponent) { closeOnDocumentClick = _props2.closeOnDocumentClick, on = _props2.on; var modal = this.state.modal; - var overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick; + var overlay = this.state.isOpen && !on.includes("hover"); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; return [this.state.isOpen && React.createElement("div", { key: "H", @@ -510,7 +510,7 @@ function (_React$PureComponent) { key: "O", className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), - onClick: this.closePopup + onClick: closeOnDocumentClick ? this.closePopup : undefined }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { innerRef: this.setTriggerRef, key: "R" diff --git a/lib/reactjs-popup.js b/lib/reactjs-popup.js index b1d23d9..a86716d 100644 --- a/lib/reactjs-popup.js +++ b/lib/reactjs-popup.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.0.8 + * reactjs-popup v1.1.0 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -501,7 +501,7 @@ closeOnDocumentClick = _props2.closeOnDocumentClick, on = _props2.on; var modal = this.state.modal; - var overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick; + var overlay = this.state.isOpen && !on.includes("hover"); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; return [this.state.isOpen && React.createElement("div", { key: "H", @@ -515,7 +515,7 @@ key: "O", className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), - onClick: this.closePopup + onClick: closeOnDocumentClick ? this.closePopup : undefined }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { innerRef: this.setTriggerRef, key: "R" diff --git a/lib/reactjs-popup.min.js b/lib/reactjs-popup.min.js index 40cb9f0..c6cb1e0 100644 --- a/lib/reactjs-popup.min.js +++ b/lib/reactjs-popup.min.js @@ -1,7 +1,7 @@ /*! - * reactjs-popup v1.0.8 + * reactjs-popup v1.1.0 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e.reactjsPopup=t(e.React,e.reactDom)}(this,function(e,t){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var o=0;o Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n closeOnDocumentClick: true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: false,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen } = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", e => {\n if (e.key === \"Escape\") this.closePopup();\n });\n }\n }\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, () => {\n this.props.onClose();\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, {\n offsetX,\n offsetY\n });\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = cords.arrowTop;\n this.ArrowEl.style.left = cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.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 const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay =\n this.state.isOpen && !on.includes(\"hover\") && closeOnDocumentClick;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n )\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf([\"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\nclass Ref extends React.PureComponent {\n constructor(props) {\n super(props);\n }\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n","/* 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 MarginX = margin + offset.offsetX;\n const MarginY = margin + offset.offsetY;\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 + MarginY;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + MarginY;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + MarginX;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + MarginX;\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"],"names":["Popup","props","_this","open","defaultOpen","modal","trigger","state","lockScroll","document","getElementsByTagName","style","overflow","isOpen","closePopup","openPopup","setState","setPosition","onOpen","onClose","resetScroll","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","arrow","position","offsetX","offsetY","helper","HelperEl","getBoundingClientRect","cords","triggerBounding","ContentBounding","offset","margin","MarginX","MarginY","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","calculatePosition","TriggerEl","ContentEl","ArrowEl","window","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","includes","onMouseEnter","onMouseLeave","triggerProps","onAsArray","Array","isArray","i","len","length","onClick","togglePopup","onFocus","React","cloneElement","arrowStyle","addWarperAction","setArrowRef","popupArrow","children","setTriggerRef","r","setHelperRef","PureComponent","this","closeOnEscape","addEventListener","e","key","_this2","nextProps","overlayStyle","closeOnDocumentClick","overlay","ovStyle","renderContent","Ref","renderTrigger","innerRef","findDOMNode","Children","only"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"reactjs-popup.min.js","sources":["../src/popup.css.js","../src/Popup.js","../src/Utils.js"],"sourcesContent":["export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n closeOnDocumentClick: true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: false,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen } = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", e => {\n if (e.key === \"Escape\") this.closePopup();\n });\n }\n }\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, () => {\n this.props.onClose();\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, {\n offsetX,\n offsetY\n });\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = cords.arrowTop;\n this.ArrowEl.style.left = cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.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 const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay = this.state.isOpen && !on.includes(\"hover\");\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n
\n ),\n this.state.isOpen && !modal && this.renderContent(),\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n )\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf([\"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\nclass Ref extends React.PureComponent {\n constructor(props) {\n super(props);\n }\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n","/* 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 MarginX = margin + offset.offsetX;\n const MarginY = margin + offset.offsetY;\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 + MarginY;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + MarginY;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + MarginX;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + MarginX;\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"],"names":["Popup","props","_this","open","defaultOpen","modal","trigger","state","lockScroll","document","getElementsByTagName","style","overflow","isOpen","closePopup","openPopup","setState","setPosition","onOpen","onClose","resetScroll","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","arrow","position","offsetX","offsetY","helper","HelperEl","getBoundingClientRect","cords","triggerBounding","ContentBounding","offset","margin","MarginX","MarginY","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","calculatePosition","TriggerEl","ContentEl","ArrowEl","window","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","stopPropagation","includes","onMouseEnter","onMouseLeave","triggerProps","onAsArray","Array","isArray","i","len","length","onClick","togglePopup","onFocus","React","cloneElement","arrowStyle","addWarperAction","setArrowRef","popupArrow","children","setTriggerRef","r","setHelperRef","PureComponent","this","closeOnEscape","addEventListener","e","key","_this2","nextProps","overlayStyle","closeOnDocumentClick","overlay","ovStyle","undefined","renderContent","Ref","renderTrigger","innerRef","findDOMNode","Children","only"],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index cf3d75c..c4fd73f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.0.8", + "version": "1.1.0", "description": "React Popup Component - Modals,Tooltips and Menus —  All in one", "main": "reactjs-popup.cjs.js", diff --git a/src/Popup.js b/src/Popup.js index b1e9c54..a5f90b8 100644 --- a/src/Popup.js +++ b/src/Popup.js @@ -199,8 +199,7 @@ export default class Popup extends React.PureComponent { render() { const { overlayStyle, closeOnDocumentClick, on } = this.props; const { modal } = this.state; - const overlay = - this.state.isOpen && !on.includes("hover") && closeOnDocumentClick; + const overlay = this.state.isOpen && !on.includes("hover"); const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; return [ this.state.isOpen && ( @@ -215,7 +214,7 @@ export default class Popup extends React.PureComponent { key="O" className="popup-overlay" style={Object.assign({}, ovStyle, overlayStyle)} - onClick={this.closePopup} + onClick={closeOnDocumentClick ? this.closePopup : undefined} > {modal && this.renderContent()}