diff options
Diffstat (limited to 'web/src/vendor/react-router/docs/api/mixins')
-rw-r--r-- | web/src/vendor/react-router/docs/api/mixins/ActiveState.md | 58 | ||||
-rw-r--r-- | web/src/vendor/react-router/docs/api/mixins/AsyncState.md | 115 |
2 files changed, 0 insertions, 173 deletions
diff --git a/web/src/vendor/react-router/docs/api/mixins/ActiveState.md b/web/src/vendor/react-router/docs/api/mixins/ActiveState.md deleted file mode 100644 index f251bd35..00000000 --- a/web/src/vendor/react-router/docs/api/mixins/ActiveState.md +++ /dev/null @@ -1,58 +0,0 @@ -API: `ActiveState` (mixin) -========================== - -A mixin for components that need to know about the routes, params, and -query that are currently active (like links). - -Static Methods --------------- - -### `isActive(routeName, params, query)` - -Returns `true` if a route, params, and query are active, `false` -otherwise. - -Lifecycle Methods ------------------ - -### `updateActiveState` - -Called when the active state changes. - -Example -------- - -Let's say you are using bootstrap and want to get `active` on those `li` -tags for the Tabs: - -```js -var Link = require('react-router/Link'); -var ActiveState = require('react-router/ActiveState'); - -var Tab = React.createClass({ - - mixins: [ ActiveState ], - - getInitialState: function () { - return { isActive: false }; - }, - - updateActiveState: function () { - this.setState({ - isActive: Tab.isActive(this.props.to, this.props.params, this.props.query) - }) - }, - - render: function() { - var className = this.state.isActive ? 'active' : ''; - var link = Link(this.props); - return <li className={className}>{link}</li>; - } - -}); - -// use it just like <Link/>, and you'll get an anchor wrapped in an `li` -// with an automatic `active` class on both. -<Tab to="foo">Foo</Tab> -``` - diff --git a/web/src/vendor/react-router/docs/api/mixins/AsyncState.md b/web/src/vendor/react-router/docs/api/mixins/AsyncState.md deleted file mode 100644 index e3a40c8c..00000000 --- a/web/src/vendor/react-router/docs/api/mixins/AsyncState.md +++ /dev/null @@ -1,115 +0,0 @@ -API: `AsyncState` (mixin) -========================= - -A mixin for route handlers that fetch at least part of their state -asynchronously. - -Static Lifecycle Methods ------------------------- - -### `getInitialAsyncState(params, query, setState)` - -Fetches state for a component after it mounts. Much like the familiar -`getInitialState` method, `getInitialAsyncState` should return a hash of -key/value pairs to use in the component's state. The difference is that -the values may be promises. As these values resolve, the component's -state is updated. - -#### Parameters - -##### params (object) - -The url parameters. - -##### query (object) - -The url query parameters - -##### setState (function) - -A function that can be used to `setState` as it is received, useful for -things like `xhr` progress and streamed data. Typically you won't use -this. - -Props ------ - -### `initialAsyncState` - -When testing, use the `initialAsyncState` prop to simulate asynchronous -data fetching. When this prop is present, no attempt is made to retrieve -additional state via `getInitialAsyncState`. - -Examples --------- - -In it simplest form, just return a hash of promises, they become state: - -```js -var User = React.createClass({ - mixins: [ Router.AsyncState ], - - statics: { - getInitialAsyncState: function (params, query, setState) { - return { - user: fetchUser(params.userId), - activity: fetchActivityForUser(params.userId) - } - } - }, - - render: function() { - return this.state.user ? - <LoadingUserProfile/> : - <UserProfile user={this.state.user} activity={this.state.activity} />; - } -}); -``` - -But you can get fancier... - -```js -var User = React.createClass({ - mixins: [ Router.AsyncState ], - - statics: { - getInitialAsyncState: function (params, query, setState) { - var buffer = ''; - - return { - user: getUserByID(params.userID) // may be a promise - activity: {}, // an immediate value (not a promise) - stream: getStreamingData(params.userID, function (chunk) { - // `getStreamingData` returns a promise, but also calls back as - // data is received, giving us a chance to update the UI with - // progress using the `AsyncState` specific `setState` - // function - buffer += chunk; - setState({ streamBuffer: buffer }); - }) - }; - } - }, - - getInitialState: function () { - return { - user: null, // Receives a value when getUserByID resolves. - stream: null, // Receives a value when getStreamingData resolves. - streamBuffer: '' // Used to track data as it loads. - }; - }, - - render: function () { - if (!this.state.user) - return <LoadingUser/>; - - return ( - <div> - <p>Welcome {this.state.user.name}!</p> - <p>So far, you've received {this.state.streamBuffer.length} data!</p> - </div> - ); - } -}); -``` - |