From 78b928b631d94a11ba6d0dc98cc99db3844393d9 Mon Sep 17 00:00:00 2001 From: Youssouf El Azizi Date: Thu, 13 Dec 2018 00:18:08 +0100 Subject: [PATCH 1/4] recalculate popup Position On windows Resize --- src/index.js | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 84ff5cd..c498050 100644 --- a/src/index.js +++ b/src/index.js @@ -28,6 +28,7 @@ export default class Popup extends React.PureComponent { open: false, disabled: false, closeOnDocumentClick: true, + repositionOnResize:true, closeOnEscape: true, on: ["click"], contentStyle: {}, @@ -60,13 +61,21 @@ export default class Popup extends React.PureComponent { } componentDidMount() { - const { closeOnEscape, defaultOpen } = this.props; + const { closeOnEscape, defaultOpen ,repositionOnResize} = this.props; if (defaultOpen) this.setPosition(); if (closeOnEscape) { - window.addEventListener("keyup", e => { - if (e.key === "Escape") this.closePopup(); - }); + window.addEventListener("keyup", this.onEscape); } + if(repositionOnResize){ + window.addEventListener('resize', this.rerepositionOnResize); + } + } + + rerepositionOnResize = () => { + this.setPosition() + } + onEscape = (e) => { + if (e.key === "Escape") this.closePopup(); } componentWillReceiveProps(nextProps) { @@ -86,6 +95,15 @@ export default class Popup extends React.PureComponent { componentWillUnmount() { // kill any function to execute if the component is unmounted clearTimeout(this.timeOut); + + const { closeOnEscape ,repositionOnResize} = this.props; + // remove events listeners + if (closeOnEscape) { + window.removeEventListener("keyup", this.onEscape); + } + if(repositionOnResize){ + window.removeEventListener('resize', this.rerepositionOnResize); + } } lockScroll = () => { @@ -302,6 +320,7 @@ if (process.env.NODE_ENV !== "production") { className: PropTypes.string, modal: PropTypes.bool, closeOnDocumentClick: PropTypes.bool, + repositionOnResize:PropTypes.bool, disabled: PropTypes.bool, lockScroll: PropTypes.bool, offsetX: PropTypes.number, From 08cf5390229e4878948b14dc74146d472e2bdf55 Mon Sep 17 00:00:00 2001 From: Youssouf El Azizi Date: Thu, 13 Dec 2018 00:19:27 +0100 Subject: [PATCH 2/4] fix test failed using babel7 --- __test__/__snapshots__/index.test.js.snap | 21 + jest.config.js | 9 + package-lock.json | 5876 +++++++++++++++++++++ package.json | 13 +- yarn.lock | 1948 +++---- 5 files changed, 6594 insertions(+), 1273 deletions(-) create mode 100644 jest.config.js create mode 100644 package-lock.json diff --git a/__test__/__snapshots__/index.test.js.snap b/__test__/__snapshots__/index.test.js.snap index c02300d..eaaa797 100644 --- a/__test__/__snapshots__/index.test.js.snap +++ b/__test__/__snapshots__/index.test.js.snap @@ -27,6 +27,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 1 open={false} overlayStyle={Object {}} position="bottom center" + repositionOnResize={true} trigger={