fluxible-addons-react: replace obsolete react context API

yahoo · Oct 26, 2020 · db57be4 · db57be4
1 parent 701d9c4
commit db57be4
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 49 deletions.
diff --git a/packages/fluxible-addons-react/src/FluxibleComponent.js b/packages/fluxible-addons-react/src/FluxibleComponent.js
@@ -2,21 +2,15 @@
  * Copyright 2015, Yahoo Inc.
  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  */
-import { Component, cloneElement } from 'react';
+import { Component, cloneElement, createElement } from 'react';
 import { func, object, node } from 'prop-types';
+import { FluxibleProvider } from './FluxibleContext';
 
 class FluxibleComponent extends Component {
-    getChildContext() {
-        return {
-            getStore: this.props.context.getStore,
-            executeAction: this.props.context.executeAction
-        };
-    }
-
     render() {
-        return cloneElement(this.props.children, {
-            context: this.props.context
-        });
+        const { children, context } = this.props;
+        const childrenWithContext = cloneElement(children, { context });
+        return createElement(FluxibleProvider, { context }, childrenWithContext);
     }
 }
 
@@ -25,9 +19,4 @@ FluxibleComponent.propTypes = {
     context: object.isRequired
 };
 
-FluxibleComponent.childContextTypes = {
-    executeAction: func.isRequired,
-    getStore: func.isRequired
-};
-
 export default FluxibleComponent;
diff --git a/packages/fluxible-addons-react/src/connectToStores.js b/packages/fluxible-addons-react/src/connectToStores.js
@@ -3,8 +3,8 @@
  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  */
 import { Component as ReactComponent, createRef, createElement } from 'react';
-import { func } from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { FluxibleContext } from './FluxibleContext';
 
 /**
  * Registers change listeners and retrieves state from stores using the `getStateFromStores`
@@ -73,9 +73,7 @@ function connectToStores(Component, stores, getStateFromStores) {
 
     StoreConnector.displayName = `storeConnector(${Component.displayName || Component.name || 'Component'})`;
 
-    StoreConnector.contextTypes = {
-        getStore: func.isRequired,
-    },
+    StoreConnector.contextType = FluxibleContext;
 
     StoreConnector.WrappedComponent = Component;
 

diff --git a/packages/fluxible-addons-react/src/createElementWithContext.js b/packages/fluxible-addons-react/src/createElementWithContext.js
@@ -17,18 +17,15 @@ function createElementWithContext(fluxibleContext, props) {
     if (!Component) {
         throw new Error('A top-level component was not passed to the Fluxible constructor.');
     }
+
+    const context = fluxibleContext.getComponentContext();
+
     if (Component.displayName && Component.displayName.includes('contextProvider')) {
-        return createElement(
-            Component,
-            {context: fluxibleContext.getComponentContext(), ...props},
-        );
+        return createElement(Component, { context, ...props});
     }
-    const componentInstance = createElement(Component, props);
-    return createElement(
-        FluxibleComponent,
-        {context: fluxibleContext.getComponentContext()},
-        componentInstance
-    );
+
+    const children = createElement(Component, props);
+    return createElement(FluxibleComponent, { context }, children);
 }
 
 export default createElementWithContext;
diff --git a/packages/fluxible-addons-react/src/provideContext.js b/packages/fluxible-addons-react/src/provideContext.js
@@ -5,6 +5,7 @@
 import { Component as ReactComponent, createRef, createElement } from 'react';
 import { func, object } from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { FluxibleProvider } from './FluxibleContext';
 
 /**
  * Provides context prop to all children as React context
@@ -16,7 +17,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
  *
  * @method provideContext
  * @param {React.Component} [Component] component to wrap
-  * @returns {React.Component} or {Function} if using decorator pattern
+ * @returns {React.Component}
  */
 function provideContext(Component) {
     class ContextProvider extends ReactComponent {
@@ -25,27 +26,17 @@ function provideContext(Component) {
             this.wrappedElementRef = createRef();
         }
 
-        getChildContext() {
-            const childContext = {
-                executeAction: this.props.context.executeAction,
-                getStore: this.props.context.getStore
-            };
-            return childContext;
-        }
-
         render() {
             const props = (Component.prototype && Component.prototype.isReactComponent)
                 ? {ref: this.wrappedElementRef}
                 : null;
-            return createElement(Component, {...this.props, ...props});
+
+            const { context } = this.props;
+            const children = createElement(Component, {...this.props, ...props});
+            return createElement(FluxibleProvider, { context }, children);
         }
     }
 
-    ContextProvider.childContextTypes = {
-        executeAction: func.isRequired,
-        getStore: func.isRequired,
-    };
-
     ContextProvider.propTypes = {
         context: object.isRequired
     };

diff --git a/packages/fluxible-addons-react/tests/unit/lib/connectToStores.js b/packages/fluxible-addons-react/tests/unit/lib/connectToStores.js
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { JSDOM } from 'jsdom';
 import createMockComponentContext from 'fluxible/utils/createMockComponentContext';
 
-import { connectToStores, provideContext } from '../../../';
+import { connectToStores, provideContext, FluxibleContext } from '../../../';
 import FooStore from '../../fixtures/stores/FooStore';
 import BarStore from '../../fixtures/stores/BarStore';
 
@@ -35,9 +35,7 @@ describe('fluxible-addons-react', () => {
 
         it('should get the state from the stores', (done) => {
             class Component extends React.Component {
-                static contextTypes = {
-                    executeAction: PropTypes.func.isRequired,
-                }
+                static contextType = FluxibleContext
 
                 constructor() {
                     super();