Merge pull request #9 from xJkit/enhance/provider-rerender

Refactor Provider with bound object

Author: xJkit

README.md

@@ -170,7 +170,7 @@ ReactDom.render(
 | isShow       | Boolean  | false   | While `when` prop is true, `isShow` will be true when routing transition occurs. You can put your dialog component here.        |
 | handleOk     | function |         | Allow routing transition and make `isShow` to be **false** again.                                                               |
 | handleCancel | function |         | Block routing transition and make `isShow` to be **false** again.                                                               |
-| pass         | function |         | Low-level api under `handleOk` and `handleCancel`; pass **true** will allow routing transitions, while pass **false** will not. |
+| handlePass         | function |         | Low-level api under `handleOk` and `handleCancel`; pass **true** or **false** will allow/block routing transitions. Use this function to do your additional actions. |
 
 ## License
 

example/src/Containers/Settings.js

@@ -3,6 +3,14 @@ import React from 'react';
 import Modal from '../components/Modal';
 import GoodBye from 'react-goodbye';
 
+const styles = {
+  btnStyle: {
+    color: 'white',
+    marginRight: '8px',
+    padding: '8px 12px'
+  }
+}
+
 class Settings extends React.Component {
   constructor(props) {
     super(props);
@@ -32,18 +40,19 @@ class Settings extends React.Component {
                 </p>
                 <div style={{ textAlign: 'right' }}>
                   <button
+                    onClick={handleOk}
                     style={{
-                      color: 'white',
-                      backgroundColor: 'red',
-                      marginRight: '8px',
-                      padding: '8px 12px'
-                    }} onClick={handleOk}>
+                      ...styles.btnStyle,
+                      backgroundColor: 'red'
+                    }}
+                  >
                     Leave
                   </button>
                   <button
                     onClick={handleCancel}
                     style={{
-                      padding: '8px 12px'
+                      ...styles.btnStyle,
+                      color: 'black'
                     }}
                   >
                     Stay

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-goodbye",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "keywords": [
     "react",
     "react-router",

src/GoodByeProvider.js

@@ -8,9 +8,13 @@ class Provider extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isShow: false
+      isShow: false,
+      handleOk: this.handleOk,
+      handleCancel: this.handleCancel,
+      handlePass: this.handlePass
     };
     this.pass = undefined;
+
     invariant(
       React.createContext,
       'react-goodbye only support React 16.3+ context api, please upgrade your react to the latest version.'
@@ -19,9 +23,7 @@ class Provider extends React.Component {
 
   handleGetUserConfirm = (message, pass) => {
     this.pass = pass;
-    this.setState({
-      isShow: true
-    });
+    this.setState({ isShow: true });
   };
 
   handleOk = () => {
@@ -34,19 +36,16 @@ class Provider extends React.Component {
     this.setState({ isShow: false });
   };
 
+  handlePass = bool => {
+    this.pass(bool);
+    this.setState({ isShow: false });
+  }
+
   render() {
+    const { children } = this.props;
     return (
-      <GoodByeContext.Provider
-        value={{
-          isShow: this.state.isShow,
-          handleOk: this.handleOk,
-          handleCancel: this.handleCancel,
-          pass: this.pass
-        }}
-      >
-        {this.props.children({
-          handleGetUserConfirm: this.handleGetUserConfirm
-        })}
+      <GoodByeContext.Provider value={this.state}>
+        {children({ handleGetUserConfirm: this.handleGetUserConfirm })}
       </GoodByeContext.Provider>
     );
   }