Merge pull request #3 from myaskevich/2.x

Added new showModal event

Author: Maxim Yaskevich

README.md

@@ -7,6 +7,55 @@
 npm i --save react-redux-modal-provider
 ```
 
+## What's new in `v2`
+
+No need to use `connect()` anymore!
+
+### Before:
+
+```jsx
+// app.jsx
+import { connect } from 'react-redux';
+import { showModal } from 'react-redux-modal-provider';
+import MyModal from './myModal';
+
+const App = (props) => (
+  <div>
+    <p>
+      Hello world
+    </p>
+    <button
+      type="button"
+      onClick={() => props.showModal(MyModal, { message: 'Hello' })}>
+      Present modal
+    </button>
+  </div>
+);
+
+export default connect(null, { showModal })(App);
+```
+
+### After:
+
+```jsx
+// app.jsx
+import { showModal } from 'react-redux-modal-provider';
+import MyModal from './myModal';
+
+export default (props) => (
+  <div>
+    <p>
+      Hello world
+    </p>
+    <button
+      type="button"
+      onClick={() => showModal(MyModal, { message: 'Hello' })}>
+      Present modal
+    </button>
+  </div>
+);
+```
+
 ## Usage
 
 #### 1. Add `<ModalProvider>` to your root component.
@@ -38,24 +87,22 @@ export default combineReducers({
 #### 3. Add modal creation code.
 
 ```jsx
-import { connect } from 'react-redux';
+// app.jsx
 import { showModal } from 'react-redux-modal-provider';
 import MyModal from './myModal';
 
-const App = (props) => (
+export default (props) => (
   <div>
     <p>
       Hello world
     </p>
     <button
       type="button"
-      onClick={() => props.showModal(MyModal, { message: 'Hello' })}>
+      onClick={() => showModal(MyModal, { message: 'Hello' })}>
       Present modal
     </button>
   </div>
 );
-
-export default connect(null, { showModal })(App);
 ```
 
 #### 4. Handle modal closing.
@@ -101,7 +148,7 @@ export default render(
 
 ### `SingleModalProvider`
 
-One modal at a time. Each new modal triggers `hideModal` on previous modal.
+One modal at a time. Each new modal triggers `hideModal` on previous one.
 
 ```jsx
 import { SingleModalProvider } from 'react-redux-modal-provider';
@@ -124,7 +171,10 @@ export default render(
 2. No need to `connect()` your modal component to Redux, unless you want it to be able to create other modals itself.
 
 ## Acknowledgements
-Thanks [@yesmeck](https://github.com/yesmeck), author of [`redux-modal`](https://github.com/yesmeck/redux-modal), for webpack config I borrowed.
+
+* Thanks [@yesmeck](https://github.com/yesmeck), author of [`redux-modal`](https://github.com/yesmeck/redux-modal), for webpack config I borrowed.
+
+* Thanks [@diegoddox](https://github.com/diegoddox), author of [`react-redux-toastr`](https://github.com/diegoddox/react-redux-toastr), for the idea how to dispatch actions from anywhere using `EventEmitter`.
 
 ## License
 MIT

example/src/app.js

@@ -1,6 +1,5 @@
-import React, {Component, PropTypes} from 'react';
-import {connect} from 'react-redux';
-import {showModal} from 'react-redux-modal-provider';
+import React, { Component } from 'react';
+import { showModal } from 'react-redux-modal-provider';
 
 import ExampleModal from './exampleModal';
 
@@ -25,7 +24,7 @@ class App extends Component {
           <button
             type="button"
             className="btn btn-primary btn-lg"
-            onClick={() => this.props.showModal(ExampleModal, {
+            onClick={() => showModal(ExampleModal, {
               message: this.state.message
             })}>
             Launch demo modal
@@ -36,10 +35,4 @@ class App extends Component {
   }
 }
 
-App.propTypes = {
-  showModal: PropTypes.func.isRequired,
-}
-
-export default connect(null, {
-  showModal,
-})(App);
+export default App;

example/src/exampleModal.js

@@ -1,11 +1,8 @@
 import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
 import { Button, Modal } from 'react-bootstrap';
 import { showModal } from 'react-redux-modal-provider';
 
-let ExampleModal;
-
-const ExampleModalComponent = props => (
+const ExampleModal = props => (
   <Modal show={props.show}>
     <Modal.Header>
       <Modal.Title>Hello {props.index}</Modal.Title>
@@ -19,7 +16,7 @@ const ExampleModalComponent = props => (
       <Button onClick={props.hideModal}>Close</Button>
       <Button
         bsStyle="primary"
-        onClick={() => props.showModal(ExampleModal, {
+        onClick={() => showModal(ExampleModal, {
           index: props.index + 1,
           message: props.message,
         })}
@@ -30,20 +27,15 @@ const ExampleModalComponent = props => (
   </Modal>
 );
 
-ExampleModalComponent.propTypes = {
+ExampleModal.propTypes = {
   show: PropTypes.bool.isRequired,
   hideModal: PropTypes.func.isRequired,
-  showModal: PropTypes.func.isRequired,
   index: PropTypes.number,
   message: PropTypes.string.isRequired,
 }
 
-ExampleModalComponent.defaultProps = {
+ExampleModal.defaultProps = {
   index: 1,
 };
 
-ExampleModal = connect(null, { showModal })(ExampleModalComponent);
-
-const ExampleModalToExport = ExampleModal;
-
-export default ExampleModalToExport;
+export default ExampleModal;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-modal-provider",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Redux-powered abstract React modal state manager",
   "main": "lib/index.js",
   "scripts": {
@@ -54,5 +54,7 @@
     "react-redux": "^5.0.3",
     "redux": "^3.6.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "eventemitter3": "^2.0.3"
+  }
 }

src/baseModalProvider.js

@@ -1,6 +1,16 @@
 import React, { Component, PropTypes } from 'react';
 
+import eventEmitter from './eventEmitter';
+
 export default class BaseModalProvider extends Component {
+  componentWillMount() {
+    eventEmitter.on('showModal', (args) => this.props.showModal(...args));
+  }
+
+  componentWillUnmount() {
+    eventEmitter.removeListener('showModal');
+  }
+
   hideModal(id) {
     this.props.hideModal(id);
     setTimeout(
@@ -28,6 +38,7 @@ export default class BaseModalProvider extends Component {
 }
 
 BaseModalProvider.propTypes = {
+  showModal: PropTypes.func.isRequired,
   hideModal: PropTypes.func.isRequired,
   removeModal: PropTypes.func.isRequired,
   modalProvider: PropTypes.shape({

src/eventEmitter.js

@@ -0,0 +1,4 @@
+
+import EventEmitter from 'eventemitter3';
+
+export default new EventEmitter();

src/events.js

@@ -0,0 +1,4 @@
+
+import eventEmitter from './eventEmitter';
+
+export default (...args) => eventEmitter.emit('showModal', args);

src/index.js

@@ -2,6 +2,6 @@ export default from './stackableModalProvider';
 export StackableModalProvider from './stackableModalProvider';
 export SingleModalProvider from './singleModalProvider';
 
-export { showModal } from './action';
+export showModal from './events';
 
 export reducer from './reducer';

src/singleModalProvider.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import { hideModal, removeModal } from './action';
+import { showModal, hideModal, removeModal } from './action';
 import BaseModalProviderComponent from './baseModalProvider';
 
 class SingleModalProvider extends BaseModalProviderComponent {
@@ -21,6 +21,7 @@ export default connect(
     modalProvider,
   }),
   {
+    showModal,
     hideModal,
     removeModal,
   },

src/stackableModalProvider.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import { hideModal, removeModal } from './action';
+import { showModal, hideModal, removeModal } from './action';
 import BaseModalProviderComponent from './baseModalProvider';
 
 class StackableModalProvider extends BaseModalProviderComponent {
@@ -11,6 +11,7 @@ export default connect(
     modalProvider,
   }),
   {
+    showModal,
     hideModal,
     removeModal,
   },