-
Notifications
You must be signed in to change notification settings - Fork 321
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #177 from goatslacker/115
Implements connectToStores HoC
- Loading branch information
Showing
7 changed files
with
380 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| /** | ||
| * 'Higher Order Component' that controls the props of a wrapped | ||
| * component via stores. | ||
| * | ||
| * Expects the Component to have two static methods: | ||
| * - getStores(): Should return an array of stores. | ||
| * - getPropsFromStores(props): Should return the props from the stores. | ||
| * | ||
| * Example using old React.createClass() style: | ||
| * | ||
| * const MyComponent = React.createClass({ | ||
| * statics: { | ||
| * getStores() { | ||
| * return [myStore] | ||
| * }, | ||
| * getPropsFromStores(props) { | ||
| * return myStore.getState() | ||
| * } | ||
| * }, | ||
| * render() { | ||
| * // Use this.props like normal ... | ||
| * } | ||
| * }) | ||
| * MyComponent = connectToStores(MyComponent) | ||
| * | ||
| * | ||
| * Example using ES6 Class: | ||
| * | ||
| * class MyComponent extends React.Component { | ||
| * static getStores() { | ||
| * return [myStore] | ||
| * } | ||
| * static getPropsFromStores(props) { | ||
| * return myStore.getState() | ||
| * } | ||
| * render() { | ||
| * // Use this.props like normal ... | ||
| * } | ||
| * } | ||
| * MyComponent = connectToStores(MyComponent) | ||
| * | ||
| * A great explanation of the merits of higher order components can be found at | ||
| * http://bit.ly/1abPkrP | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import assign from 'object-assign' | ||
|
|
||
| function connectToStores(Component) { | ||
|
|
||
| // Check for required static methods. | ||
| if (typeof Component.getStores !== 'function') { | ||
| throw new Error('connectToStores() expects the wrapped component to have a static getStores() method') | ||
| } | ||
| if (typeof Component.getPropsFromStores !== 'function') { | ||
| throw new Error('connectToStores() expects the wrapped component to have a static getPropsFromStores() method') | ||
| } | ||
|
|
||
| // Cache stores. | ||
| const stores = Component.getStores() | ||
|
|
||
| // Wrapper Component. | ||
| const StoreConnection = React.createClass({ | ||
| getInitialState() { | ||
| return Component.getPropsFromStores(this.props) | ||
| }, | ||
|
|
||
| componentDidMount() { | ||
| stores.forEach((store) => { | ||
| store.listen(this.onChange) | ||
| }) | ||
| }, | ||
|
|
||
| componentWillUnmount() { | ||
| stores.forEach((store) => { | ||
| store.unlisten(this.onChange) | ||
| }) | ||
| }, | ||
|
|
||
| onChange() { | ||
| this.setState(Component.getPropsFromStores(this.props)) | ||
| }, | ||
|
|
||
| render() { | ||
| return React.createElement( | ||
| Component, | ||
| assign({}, this.props, this.state) | ||
| ) | ||
| } | ||
| }) | ||
|
|
||
| return StoreConnection | ||
| } | ||
|
|
||
| export default connectToStores |
Oops, something went wrong.