Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fluxible-addons-react: removed some deprecated react API's #653

211 changes: 0 additions & 211 deletions packages/fluxible-addons-react/FluxibleMixin.js

This file was deleted.

2 changes: 1 addition & 1 deletion packages/fluxible-addons-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ Join the #fluxible channel of the [Reactiflux](http://reactiflux.com) Discord co

* [connectToStores](https://github.com/yahoo/fluxible/blob/master/packages/fluxible-addons-react/docs/api/connectToStores.md)
* [FluxibleComponent](https://github.com/yahoo/fluxible/blob/master/packages/fluxible-addons-react/docs/api/FluxibleComponent.md)
* [FluxibleMixin](https://github.com/yahoo/fluxible/blob/master/packages/fluxible-addons-react/docs/api/FluxibleMixin.md) (legacy)
* [provideContext](https://github.com/yahoo/fluxible/blob/master/packages/fluxible-addons-react/docs/api/provideContext.md)
* [createElementWithContext](https://github.com/yahoo/fluxible/blob/master/packages/fluxible-addons-react/docs/api/createElementWithContext.md)
* [batchedUpdatePlugin](https://github.com/yahoo/fluxible/blob/master/packages/fluxible-addons-react/docs/api/batchedUpdatePlugin.md)
Expand All @@ -25,6 +24,7 @@ Join the #fluxible channel of the [Reactiflux](http://reactiflux.com) Discord co

| Compatible React Version | fluxible-addons-react Version |
|--------------------------|-------------------------------|
| 16.3 | >= 1.x |
| 16.0 | >= 0.2.14 |
| 15.0 | >= 0.2.6 |
| 0.14 | >= 0.2.x |
Expand Down
32 changes: 5 additions & 27 deletions packages/fluxible-addons-react/connectToStores.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ function createComponent(Component, stores, getStateFromStores, customContextTyp
this.state = this.getStateFromStores();
this._onStoreChange = null;
this._isMounted = false;
this.wrappedElementRef = React.createRef();
}

inherits(StoreConnector, React.Component);
Expand All @@ -41,7 +42,7 @@ function createComponent(Component, stores, getStateFromStores, customContextTyp
this.context.getStore(Store).removeListener('change', this._onStoreChange);
}, this);
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps){
UNSAFE_componentWillReceiveProps: function UNSAFE_componentWillReceiveProps(nextProps){
this.setState(this.getStateFromStores(nextProps));
},
getStateFromStores: function (props) {
Expand All @@ -54,7 +55,9 @@ function createComponent(Component, stores, getStateFromStores, customContextTyp
}
},
render: function render() {
var props = Component.prototype && Component.prototype.isReactComponent ? {ref: 'wrappedElement'} : null;
var props = (Component.prototype && Component.prototype.isReactComponent)
? {ref: this.wrappedElementRef}
: null;
return React.createElement(Component, Object.assign({}, this.props, this.state, props));
}
});
Expand All @@ -79,20 +82,6 @@ function createComponent(Component, stores, getStateFromStores, customContextTyp
* }
* })
*
* Also supports the decorator pattern:
* @connectToStores([FooStore], {
* FooStore: function (store, props) {
* return {
* foo: store.getFoo()
* }
* }
* })
* class ConnectedComponent extends React.Component {
* render() {
* return <div/>;
* }
* }
*
* @method connectToStores
* @param {React.Component} [Component] component to pass state as props to.
* @param {array} stores List of stores to listen for changes
Expand All @@ -103,16 +92,5 @@ function createComponent(Component, stores, getStateFromStores, customContextTyp
* @returns {React.Component} or {Function} if using decorator pattern
*/
module.exports = function connectToStores(Component, stores, getStateFromStores, customContextTypes) {

// support decorator pattern
if (typeof Component !== 'function') {
var _stores = Component;
var _getStateFromStores = stores;
var _customContextTypes = getStateFromStores;
return function connectToStoresDecorator(ComponentToDecorate) {
return createComponent(ComponentToDecorate, _stores, _getStateFromStores, _customContextTypes);
};
}

return createComponent.apply(null, arguments);
};
57 changes: 0 additions & 57 deletions packages/fluxible-addons-react/docs/api/FluxibleMixin.md

This file was deleted.

28 changes: 1 addition & 27 deletions packages/fluxible-addons-react/docs/api/connectToStores.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import connectToStores from 'fluxible-addons-react/connectToStores';

Takes the following parameters:

* `Component` - the component that should receive the state as props, optional if using decorator pattern
* `Component` - the component that should receive the state as props
* `stores` - array of store constructors to listen for changes
* `getStateFromStores` - function that receives all stores and should return the full state object. Receives `stores` hash and component `props` as arguments
* `customContextTypes` (*optional*) - additional `contextTypes` that could be accessed from your `getStateFromStores` function
Expand Down Expand Up @@ -36,29 +36,3 @@ Component = connectToStores(Component, [FooStore, BarStore], (context, props) =>

export default Component;
```

### Decorator

***Decorators are an evolving proposal and should be used with caution
as the API may change at any point. Decorator support in
fluxible-addons-react was built against Babel 5's implementation of
decorators. As of Babel 6, support for decorators has been removed although
third party transforms have been attempted with limited success.

Decorators are also only proposed for classes and properties and therefore
will not work with stateless functional components. See
[decorator pattern](https://github.com/wycats/javascript-decorators) for
more information on the proposal.***

```js
@connectToStores([FooStore, BarStore], (context, props) => ({
foo: context.getStore(FooStore).getFoo(),
bar: context.getStore(BarStore).getBar()
}))
class Component extends React.Component {
render() {
return <div/>;
}
}
export default Component;
```
Loading