Merge pull request #18 from ryank109/closePopup

Added custom closePopup handler for Popup

README.md

@@ -26,6 +26,7 @@ This is set of higher order components that enable popup behavior using react an
  - **Popup** - creates a popup on the location specified in `options` argument on `openPopup`.  Clicking outside of the popup should close this popup or with dispatching `closePopup` action.
    - Properties:
      - `anchor` - [default to 'bottom'] `bottom`|`left`|`right`|`top`
+     - `closePopup` - optionally define closePopup handler
      - `getRect` - the required function to describe the position that the popup should appear. The return of the function should be same as `element.getBoundingClientRect()` object or use that for simplicity. i.e. `getRect={() => element.getBoundingClientRect()}`
      - `id` - required id
      - `popupClassName` - the popup class name

example-app/app/menus.jsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { connect } from 'react-redux';
-import { openPopup } from 'react-redux-popup';
+import { closePopup, openPopup } from 'react-redux-popup';
 import PopupMenu from 'app/components/popup-menu';
 
 const menu1 = [
@@ -83,4 +83,4 @@ class Menus extends Component {
     }
 }
 
-export default connect(null, { openPopup })(Menus);
+export default connect(null, { closePopup, openPopup })(Menus);

example-app/app/store.js

@@ -7,5 +7,8 @@ const reducers = combineReducers({
     popup: popupReducer
 });
 const createStoreWithMiddleware = compose(
-    window.devToolsExtension ? window.devToolsExtension() : f => f)(createStore);
+    window.__REDUX_DEVTOOLS_EXTENSION__
+        ? window.__REDUX_DEVTOOLS_EXTENSION__()
+        : f => f
+)(createStore);
 export default createStoreWithMiddleware(reducers);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-popup",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React redux popup",
   "main": "lib/react-redux-popup",
   "scripts": {

src/__tests__/higher-order-popup-component.jsx

@@ -73,6 +73,21 @@ describe('higher-order-popup-component', function() {
         expect(closePopup).toHaveBeenCalledWith('testPopup');
     });
 
+    it('should dispatch closePopup action when closePopup is not specified', function() {
+        const dispatch = jest.fn();
+        const wrapper = mount(
+            <TestComponent
+                dispatch={dispatch}
+                id="testPopup"
+                prop1="prop1_value"
+                updatePopupProps={handler}
+            />
+        );
+        wrapper.unmount();
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith(closePopup('testPopup'));
+    });
+
     it('should update the props in the collection and call updatePopupProps', function() {
         const updatePopupProps = jest.fn();
         const wrapper = mount(

src/__tests__/popup.jsx

@@ -1,6 +1,7 @@
 import { mount, shallow } from 'enzyme';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
+import { closePopup } from 'rrp/actions';
 import ConnectedComponent, { HOCPopup } from 'rrp/popup';
 import { clearAll } from 'rrp/popup-collection';
 
@@ -208,6 +209,25 @@ describe('popup', function() {
         wrapper.unmount();
     });
 
+    it('should dispatch closePopup action when closePopup is not specified on window mouseup event', function() {
+        const getRect = () => ({ bottom: 11, left: 22, right: 33, top: 44 });
+        const dispatch = jest.fn();
+        const wrapper = mount(
+            <TestPopup
+                dispatch={dispatch}
+                getRect={getRect}
+                id="testPopup"
+                prop1="prop1_value"
+                updatePopupProps={handler}
+            />
+        );
+        window.dispatchEvent(new Event('mouseup'));
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith(closePopup('testPopup'));
+
+        wrapper.unmount();
+    });
+
     it('should close on window resize event', function() {
         const getRect = () => ({ bottom: 11, left: 22, right: 33, top: 44 });
         const requestAnimationFrame = callback => callback();

src/higher-order-popup-component.jsx

@@ -23,7 +23,11 @@ export const HigherOrderPopupComponent = (ComposedComponent, type) => {
 
         componentWillUnmount() {
             remove(this.props.id);
-            this.props.closePopup(this.props.id);
+            if (this.props.closePopup) {
+                this.props.closePopup(this.props.id);
+                return;
+            }
+            this.props.dispatch(closePopup(this.props.id));
         }
 
         render() {
@@ -33,7 +37,8 @@ export const HigherOrderPopupComponent = (ComposedComponent, type) => {
 
     PopupComponent.displayName = 'HigherOrderPopupComponent';
     PopupComponent.propTypes = {
-        closePopup: PropTypes.func.isRequired,
+        closePopup: PropTypes.func,
+        dispatch: PropTypes.func,
         id: PropTypes.string.isRequired,
         updatePopupProps: PropTypes.func.isRequired
     };
@@ -43,5 +48,5 @@ export const HigherOrderPopupComponent = (ComposedComponent, type) => {
 
 export default (ComposedComponent, type) => connect(
     null,
-    { updatePopupProps, closePopup }
+    { updatePopupProps }
 )(HigherOrderPopupComponent(ComposedComponent, type));

src/popup.jsx

@@ -9,7 +9,8 @@ import { getPopupPosition } from 'rrp/utils';
 
 const PROP_TYPES = {
     anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
-    closePopup: PropTypes.func.isRequired,
+    closePopup: PropTypes.func,
+    dispatch: PropTypes.func,
     getRect: PropTypes.func.isRequired,
     id: PropTypes.string.isRequired,
     popupClassName: PropTypes.string,
@@ -24,7 +25,11 @@ export const HOCPopup = ComposedComponent => {
             this.state = {};
 
             this.closePopup = () => {
-                props.closePopup(props.id);
+                if (props.closePopup) {
+                    props.closePopup(props.id);
+                    return;
+                }
+                props.dispatch(closePopup(props.id));
             };
             this.refreshPositionHandler = () => this.refreshPosition();
         }
@@ -92,4 +97,4 @@ export const HOCPopup = ComposedComponent => {
 };
 
 export default ComposedComponent => HigherOrderPopupComponent(
-    connect(popupSelector, { closePopup })(HOCPopup(ComposedComponent)), TYPE_POPUP);
+    connect(popupSelector)(HOCPopup(ComposedComponent)), TYPE_POPUP);