Client-side framework for web application

2 files changed, 173 insertions, 0 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
new file mode 100644
index 00000000..f251bd35
--- /dev/null
+++ b/web/src/vendor/react-router/docs/api/mixins/ActiveState.md
@@ -0,0 +1,58 @@
+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
new file mode 100644
index 00000000..e3a40c8c
--- /dev/null
+++ b/web/src/vendor/react-router/docs/api/mixins/AsyncState.md
@@ -0,0 +1,115 @@
+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>
+    );
+  }
+});
+```
+