Updates for React.StrictMode compliance (#205)

* updated to new context api

* fixed warning about setState on unmounted component

* added build

* moved context provider inside of Tag

* re-removed build folder

* removed dist folder

Author: shoeman22

src/CarouselProvider/CarouselConsumer.jsx

@@ -0,0 +1,3 @@
+import Context from './context';
+
+export default Context.Consumer;

src/CarouselProvider/CarouselProvider.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Context from './context';
 import Store from '../Store/Store';
 import {
   CarouselPropTypes, slideSize, slideTraySize, cn,
@@ -31,10 +32,6 @@ const CarouselProvider = class CarouselProvider extends React.Component {
     infinite: PropTypes.bool,
   };
 
-  static childContextTypes = {
-    carouselStore: PropTypes.object,
-  };
-
   static defaultProps = {
     className: null,
     currentSlide: 0,
@@ -56,8 +53,8 @@ const CarouselProvider = class CarouselProvider extends React.Component {
     infinite: false,
   };
 
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
     const options = {
       currentSlide: props.currentSlide,
       disableAnimation: props.disableAnimation,
@@ -88,10 +85,6 @@ const CarouselProvider = class CarouselProvider extends React.Component {
     this.carouselStore = new Store(options);
   }
 
-  getChildContext() {
-    return { carouselStore: this.carouselStore };
-  }
-
   componentDidUpdate(prevProps) {
     const newStoreState = {};
 
@@ -189,7 +182,9 @@ const CarouselProvider = class CarouselProvider extends React.Component {
 
     return (
       <Tag className={newClassName} {...filteredProps}>
-        {this.props.children}
+        <Context.Provider value={this.carouselStore}>
+          {this.props.children}
+        </Context.Provider>
       </Tag>
     );
   }

src/CarouselProvider/context.js

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

src/CarouselProvider/index.js

@@ -1,3 +1,11 @@
 import CarouselProvider from './CarouselProvider';
+import CarouselContext from './context';
+import CarouselConsumer from './CarouselConsumer';
+
+export {
+  CarouselProvider,
+  CarouselContext,
+  CarouselConsumer,
+};
 
 export default CarouselProvider;

src/Store/WithStore.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import equal from 'equals';
 import deepMerge from 'deepmerge';
-import propTypes from 'prop-types';
 import { CarouselPropTypes } from '../helpers';
+import { CarouselContext } from '../CarouselProvider';
 
 export default function WithStore(
   WrappedComponent,
   /* istanbul ignore next */ mapStateToProps = () => ({}),
 ) {
   class Wrapper extends React.Component {
+    static contextType = CarouselContext
+
     static propTypes = {
       children: CarouselPropTypes.children,
     };
@@ -17,15 +19,14 @@ export default function WithStore(
       children: null,
     };
 
-    static contextTypes = {
-      carouselStore: propTypes.object,
-    };
-
     constructor(props, context) {
       super(props, context);
-      this.state = mapStateToProps({ ...context.carouselStore.state });
+      this.state = mapStateToProps({ ...context.state });
       this.updateStateProps = this.updateStateProps.bind(this);
-      this.context.carouselStore.subscribe(this.updateStateProps);
+    }
+
+    componentDidMount() {
+      this.context.subscribe(this.updateStateProps);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -34,11 +35,11 @@ export default function WithStore(
     }
 
     componentWillUnmount() {
-      this.context.carouselStore.unsubscribe(this.updateStateProps);
+      this.context.unsubscribe(this.updateStateProps);
     }
 
     updateStateProps() {
-      this.setState(mapStateToProps({ ...this.context.carouselStore.state }));
+      this.setState(mapStateToProps({ ...this.context.state }));
     }
 
     render() {
@@ -51,13 +52,13 @@ export default function WithStore(
           }} // allows access to refs in wrapped components.
           {...props}
           carouselStore={{
-            getStoreState: this.context.carouselStore.getStoreState,
-            masterSpinnerError: this.context.carouselStore.masterSpinnerError,
-            masterSpinnerSuccess: this.context.carouselStore.masterSpinnerSuccess,
-            setStoreState: this.context.carouselStore.setStoreState,
-            subscribeMasterSpinner: this.context.carouselStore.subscribeMasterSpinner,
-            unsubscribeAllMasterSpinner: this.context.carouselStore.unsubscribeAllMasterSpinner,
-            unsubscribeMasterSpinner: this.context.carouselStore.unsubscribeMasterSpinner,
+            getStoreState: this.context.getStoreState,
+            masterSpinnerError: this.context.masterSpinnerError,
+            masterSpinnerSuccess: this.context.masterSpinnerSuccess,
+            setStoreState: this.context.setStoreState,
+            subscribeMasterSpinner: this.context.subscribeMasterSpinner,
+            unsubscribeAllMasterSpinner: this.context.unsubscribeAllMasterSpinner,
+            unsubscribeMasterSpinner: this.context.unsubscribeMasterSpinner,
           }}
         >
           {this.props.children}

src/app.js

@@ -3,4 +3,4 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import DevelopmentApp from './App/App';
 
-ReactDOM.render(<DevelopmentApp />, document.getElementById('app'));
+ReactDOM.render(<React.StrictMode><DevelopmentApp /></React.StrictMode>, document.getElementById('app'));