Refactor components

Author: xJkit

src/GoodByeContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const GoodByeContext = React.createContext();
+
+export default GoodByeContext;

src/GoodByeProvider.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import invariant from 'invariant';
+
+import GoodByeContext from './GoodByeContext';
+
+class Provider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShow: false
+    };
+    this.pass = undefined;
+    invariant(
+      React.createContext,
+      'react-goodbye only support React 16.3+ context api, please upgrade your react to the latest version.'
+    )
+  }
+
+  handleGetUserConfirm = (message, pass) => {
+    this.pass = pass;
+    this.setState({
+      isShow: true
+    });
+  };
+
+  handleOk = () => {
+    this.pass(true);
+    this.setState({ isShow: false });
+  };
+
+  handleCancel = () => {
+    this.pass(false);
+    this.setState({ isShow: false });
+  };
+
+  render() {
+    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>
+    );
+  }
+}
+
+Provider.propTypes = {
+  children: PropTypes.func
+}
+
+export default Provider;

src/index.js

@@ -1,81 +1,12 @@
 import React, { Fragment, createFactory } from 'react';
 import PropTypes from 'prop-types';
 import { Prompt as ReactRouterPrompt } from 'react-router';
-import invariant from 'invariant';
 
-const __DEV__ = process.env.NODE_ENV !== 'production';
-const GoodByeContext = React.createContext();
-
-export class Provider extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShow: false
-    };
-    this.pass = undefined;
-    invariant(
-      React.createContext,
-      'react-goodbye only support React 16.3+ context api, please upgrade your react to the latest version.'
-    )
-  }
-
-  handleGetUserConfirm = (message, pass) => {
-    this.pass = pass;
-    this.setState({
-      isShow: true
-    });
-  };
-
-  handleOk = () => {
-    this.pass(true);
-    this.setState({ isShow: false });
-  };
-
-  handleCancel = () => {
-    this.pass(false);
-    this.setState({ isShow: false });
-  };
+import GoodByeContext from './GoodByeContext';
+import Provider from './GoodByeProvider';
+import withGoodBye from './withGoodBye';
 
-  render() {
-    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>
-    );
-  }
-}
-
-export const withGoodBye = BaseRouterComponent => {
-  const factory = createFactory(BaseRouterComponent);
-  const WithGoodBye = props => (
-    <Provider>
-      {({ handleGetUserConfirm }) => (
-        factory({
-          ...props,
-          getUserConfirmation: handleGetUserConfirm
-        })
-      )}
-    </Provider>
-  );
-
-  if (__DEV__) {
-    const baseRouterName = BaseRouterComponent.displayName || BaseRouterComponent.name || 'Component';
-    WithGoodBye.displayName = `withGoodBye(${baseRouterName})`;
-
-    return WithGoodBye;
-  }
-
-  return WithGoodBye;
-};
+const __DEV__ = process.env.NODE_ENV !== 'production';
 
 class GoodBye extends React.Component {
   handleBeforeUnload = evt => {
@@ -121,4 +52,9 @@ GoodBye.defaultProps = {
   alertMessage: '' // only work for IE
 };
 
+export {
+  Provider,
+  withGoodBye,
+};
+
 export default GoodBye;

src/withGoodBye.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Provider from './GoodByeProvider';
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
+const withGoodBye = BaseRouterComponent => {
+  const factory = React.createFactory(BaseRouterComponent);
+  const WithGoodBye = props => (
+    <Provider>
+      {({ handleGetUserConfirm }) => (
+        factory({
+          ...props,
+          getUserConfirmation: handleGetUserConfirm
+        })
+      )}
+    </Provider>
+  );
+
+  if (__DEV__) {
+    const baseRouterName = BaseRouterComponent.displayName || BaseRouterComponent.name || 'Component';
+    WithGoodBye.displayName = `withGoodBye(${baseRouterName})`;
+
+    return WithGoodBye;
+  }
+
+  return WithGoodBye;
+};
+
+export default withGoodBye;