Fixed close popup is not getting removed from the windows mouseup event

ryank109 · May 1, 2018 · d9f0e4c · d9f0e4c
1 parent f961ba0
commit d9f0e4c
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-redux-popup",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "React redux popup",
   "license": "MIT",
   "main": "lib/react-redux-popup",

diff --git a/src/__tests__/popup.jsx b/src/__tests__/popup.jsx
@@ -1,10 +1,12 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { closePopup } from 'rrp/actions';
-import { Popup, closePopupHandler, popupSelector } from 'rrp/popup';
+import { Popup, popupSelector } from 'rrp/popup';
 
 describe('popup', () => {
     // eslint-disable-next-line no-console
     const origConsoleError = console.error;
+    const origAddEventListener = window.addEventListener;
+    const origRemoveEventListener = window.removeEventListener;
 
     const handler = () => true;
     const getRect = () => ({
@@ -18,6 +20,8 @@ describe('popup', () => {
     afterEach(() => {
         // eslint-disable-next-line no-console
         console.error = origConsoleError;
+        window.addEventListener = origAddEventListener;
+        window.removeEventListener = origRemoveEventListener;
     });
 
     it('should get the state', () => {
@@ -78,12 +82,22 @@ describe('popup', () => {
 
     it('should call correct close popup handler', () => {
         const mockDispatch = jest.fn();
-        closePopupHandler('popupId', null, mockDispatch)();
+        const instance = new Popup({
+            dispatch: mockDispatch,
+            id: 'popupId',
+        });
+        instance.closePopupHandler();
         expect(mockDispatch).toHaveBeenCalledTimes(1);
         expect(mockDispatch).toHaveBeenCalledWith(closePopup('popupId'));
 
         const mockClosePopup = jest.fn();
-        closePopupHandler('popupId', mockClosePopup, mockDispatch)();
+        const instance2 = new Popup({
+            closePopup: mockClosePopup,
+            dispatch: mockDispatch,
+            id: 'popupId',
+        });
+
+        instance2.closePopupHandler();
         expect(mockDispatch).toHaveBeenCalledTimes(1);
         expect(mockClosePopup).toHaveBeenCalledTimes(1);
         expect(mockClosePopup).toHaveBeenCalledWith('popupId');

diff --git a/src/popup.jsx b/src/popup.jsx
@@ -1,3 +1,4 @@
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { closePopup } from './actions';
@@ -7,38 +8,43 @@ import TransitionWrapper from './transition-wrapper';
 
 export const popupSelector = state => state.popup;
 
-export function closePopupHandler(id, callback, dispatch) {
-    return () => {
-        if (callback) {
-            callback(id);
-            return;
-        }
-        dispatch(closePopup(id));
-    };
-}
+export class Popup extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.closePopupHandler = () => {
+            if (props.closePopup) {
+                props.closePopup(props.id);
+                return;
+            }
+            props.dispatch(closePopup(props.id));
+        };
+    }
 
-export const Popup = props => (
-    <TransitionWrapper
-        getPortalElement={props.getPortalElement}
-        isOpen={!!props[props.id]}
-        isPortalReady={props.isPortalReady}
-        render={() => (
-            <PopupComponent
-                anchor={props.anchor}
-                className={props.className}
-                closePopup={closePopupHandler(props.id, props.closePopup, props.dispatch)}
-                getRect={props.getRect}
-                offset={props.offset}
-                refreshPosition={props.refreshPosition}
-                render={props.render}
-                style={props.style}
+    render() {
+        return (
+            <TransitionWrapper
+                getPortalElement={this.props.getPortalElement}
+                isOpen={!!this.props[this.props.id]}
+                isPortalReady={this.props.isPortalReady}
+                render={() => (
+                    <PopupComponent
+                        anchor={this.props.anchor}
+                        className={this.props.className}
+                        closePopup={this.closePopupHandler}
+                        getRect={this.props.getRect}
+                        offset={this.props.offset}
+                        refreshPosition={this.props.refreshPosition}
+                        render={this.props.render}
+                        style={this.props.style}
+                    />
+                )}
+                transitionEnterTimeout={this.props.transitionEnterTimeout}
+                transitionExitTimeout={this.props.transitionExitTimeout}
+                transitionName={this.props.transitionName}
             />
-        )}
-        transitionEnterTimeout={props.transitionEnterTimeout}
-        transitionExitTimeout={props.transitionExitTimeout}
-        transitionName={props.transitionName}
-    />
-);
+        );
+    }
+}
 
 Popup.propTypes = {
     anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']).isRequired,