Merge pull request #105 from 8base/mctx

feat(Modal): export modal context instead of consumer

src/atoms/Modal/Modal.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (asStory) => {
-  asStory('ATOMS/Modal (skip shot)', module, (story, { Modal, ModalConsumer, Button }) => {
+  asStory('ATOMS/Modal (skip shot)', module, (story, { Modal, ModalContext, Button }) => {
     story
       .add('multiple modals', () => (
         <React.Fragment>
@@ -46,11 +46,11 @@ export default (asStory) => {
               )
             }
           </Modal>
-          <ModalConsumer>
+          <ModalContext.Consumer>
             {
               ({ openModal }) => <Button onClick={ () => openModal('ID', { foo: '00', bar: '00' }) }>Open</Button>
             }
-          </ModalConsumer>
+          </ModalContext.Consumer>
         </React.Fragment>
       ));
   });

src/atoms/Modal/ModalContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const { Provider, Consumer } = React.createContext('modal');
+const ModalContext = React.createContext('modal');
 
-export { Provider, Consumer };
+export { ModalContext };

src/atoms/Modal/ModalProvider.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { Provider } from './ModalContext';
+import { ModalContext } from './ModalContext';
 
 class ModalProvider extends Component {
   constructor(props) {
@@ -36,9 +36,9 @@ class ModalProvider extends Component {
     const contextValue = this.collectContextValue();
 
     return (
-      <Provider value={ contextValue }>
+      <ModalContext.Provider value={ contextValue }>
         { this.props.children }
-      </Provider>
+      </ModalContext.Provider>
     );
   }
 }

src/atoms/Modal/withModal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Consumer } from './ModalContext';
+import { ModalContext } from './ModalContext';
 
 const withModal = (BaseComponent) => {
   class ModalStateConsumer extends React.Component {
@@ -15,7 +15,7 @@ const withModal = (BaseComponent) => {
     }
 
     render() {
-      return <Consumer>{ this.renderBaseComponent }</Consumer>;
+      return <ModalContext.Consumer>{ this.renderBaseComponent }</ModalContext.Consumer>;
     }
   }
 

src/atoms/Modal/withModalState.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Consumer } from './ModalContext';
+import { ModalContext } from './ModalContext';
 
 const withModalState = (BaseComponent) => {
   class ModalStateConsumer extends React.Component {
@@ -21,7 +21,7 @@ const withModalState = (BaseComponent) => {
       const { id, ...rest } = this.props;
 
       if (id) {
-        return <Consumer>{ this.renderBaseComponentWithModalProps }</Consumer>;
+        return <ModalContext.Consumer>{ this.renderBaseComponentWithModalProps }</ModalContext.Consumer>;
       }
 
       return <BaseComponent { ...rest } />;

src/index.js

@@ -4,7 +4,7 @@ export { ThemeProvider } from 'emotion-theming';
 export { defaultTheme, resetGlobal, Z_INDEX } from './theme';
 export * from './atoms';
 export * from './molecules';
-export { Consumer as ModalConsumer } from './atoms/Modal/ModalContext';
+export { ModalContext } from './atoms/Modal/ModalContext';
 export { withModal } from './atoms/Modal/withModal';
 export { EightBaseBoostProvider } from './EightBaseBoostProvider';