From db57be4d53da9898c84af71bfc0afd826dcf5364 Mon Sep 17 00:00:00 2001 From: Pablo Palacios Date: Sun, 25 Oct 2020 16:05:24 +0100 Subject: [PATCH] fluxible-addons-react: replace obsolete react context API --- .../src/FluxibleComponent.js | 21 +++++-------------- .../src/connectToStores.js | 6 ++---- .../src/createElementWithContext.js | 17 +++++++-------- .../src/provideContext.js | 21 ++++++------------- .../tests/unit/lib/connectToStores.js | 6 ++---- 5 files changed, 22 insertions(+), 49 deletions(-) diff --git a/packages/fluxible-addons-react/src/FluxibleComponent.js b/packages/fluxible-addons-react/src/FluxibleComponent.js index 3017d809..27a6f93a 100644 --- 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 index e623b26b..f68a7a03 100644 --- 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 index 56ecefbe..49e6bdf6 100644 --- 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 index a206e75e..126eb4c4 100644 --- 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 index 3a25ffca..361e8f03 100644 --- 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();