facebook · petehunt · Sep 2, 2013 · Sep 1, 2013
diff --git a/examples/todomvc-director/README.md b/examples/todomvc-director/README.md
@@ -0,0 +1,11 @@
+# TodoMVC-director
+
+This is the exact copy of the React-powered [TodoMVC](http://todomvc.com/labs/architecture-examples/react/). To test it, use [bower](http://bower.io) to fetch the dependencies:
+
+`bower install`
+
+Then fire up a server here:
+
+`python -m SimpleHTTPServer`
+
+And go visit `localhost:8000`.
diff --git a/examples/todomvc-director/bower.json b/examples/todomvc-director/bower.json
@@ -0,0 +1,9 @@
+{
+  "name": "todomvc-react",
+  "version": "0.0.0",
+  "dependencies": {
+    "todomvc-common": "~0.1.7",
+    "react": "~0.4.0",
+    "director": "~1.2.0"
+  }
+}
diff --git a/examples/todomvc-director/index.html b/examples/todomvc-director/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en" data-framework="react">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<title>React • TodoMVC</title>
+		<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
+	</head>
+	<body>
+		<section id="todoapp"></section>
+		<footer id="info"></footer>
+		<div id="benchmark"></div>
+
+		<script src="bower_components/todomvc-common/base.js"></script>
+		<script src="bower_components/react/react.js"></script>
+		<script src="bower_components/react/JSXTransformer.js"></script>
+		<script src="bower_components/director/build/director.min.js"></script>
+
+		<script type="text/jsx" src="js/utils.jsx"></script>
+		<script type="text/jsx" src="js/todoItem.jsx"></script>
+		<script type="text/jsx" src="js/footer.jsx"></script>
+		<script type="text/jsx" src="js/app.jsx"></script>
+	</body>
+</html>
diff --git a/examples/todomvc-director/js/app.jsx b/examples/todomvc-director/js/app.jsx
@@ -0,0 +1,207 @@
+/**
+ * @jsx React.DOM
+ */
+/*jshint quotmark:false */
+/*jshint white:false */
+/*jshint trailing:false */
+/*jshint newcap:false */
+/*global Utils, ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS,
+	TodoItem, TodoFooter, React, Router*/
+
+(function (window, React) {
+	'use strict';
+
+	window.ALL_TODOS = 'all';
+	window.ACTIVE_TODOS = 'active';
+	window.COMPLETED_TODOS = 'completed';
+
+	var ENTER_KEY = 13;
+
+	var TodoApp = React.createClass({
+		getInitialState: function () {
+			var todos = Utils.store('react-todos');
+			return {
+				todos: todos,
+				nowShowing: ALL_TODOS,
+				editing: null
+			};
+		},
+
+		componentDidMount: function () {
+			var router = Router({
+				'/': this.setState.bind(this, {nowShowing: ALL_TODOS}),
+				'/active': this.setState.bind(this, {nowShowing: ACTIVE_TODOS}),
+				'/completed': this.setState.bind(this, {nowShowing: COMPLETED_TODOS})
+			});
+			router.init();
+			this.refs.newField.getDOMNode().focus();
+		},
+
+		handleNewTodoKeyDown: function (event) {
+			if (event.which !== ENTER_KEY) {
+				return;
+			}
+
+			var val = this.refs.newField.getDOMNode().value.trim();
+			var todos;
+			var newTodo;
+
+			if (val) {
+				todos = this.state.todos;
+				newTodo = {
+					id: Utils.uuid(),
+					title: val,
+					completed: false
+				};
+				this.setState({todos: todos.concat([newTodo])});
+				this.refs.newField.getDOMNode().value = '';
+			}
+
+			return false;
+		},
+
+		toggleAll: function (event) {
+			var checked = event.target.checked;
+
+			this.state.todos.forEach(function (todo) {
+				todo.completed = checked;
+			});
+
+			this.setState({todos: this.state.todos});
+		},
+
+		toggle: function (todo) {
+			todo.completed = !todo.completed;
+			this.setState({todos: this.state.todos});
+		},
+
+		destroy: function (todo) {
+			var newTodos = this.state.todos.filter(function (candidate) {
+				return candidate.id !== todo.id;
+			});
+
+			this.setState({todos: newTodos});
+		},
+
+		edit: function (todo, callback) {
+			// refer to todoItem.js `handleEdit` for the reasoning behind the
+			// callback
+			this.setState({editing: todo.id}, function () {
+				callback();
+			});
+		},
+
+		save: function (todo, text) {
+			todo.title = text;
+			this.setState({todos: this.state.todos, editing: null});
+		},
+
+		cancel: function () {
+			this.setState({editing: null});
+		},
+
+		clearCompleted: function () {
+			var newTodos = this.state.todos.filter(function (todo) {
+				return !todo.completed;
+			});
+
+			this.setState({todos: newTodos});
+		},
+
+		componentDidUpdate: function () {
+			Utils.store('react-todos', this.state.todos);
+		},
+
+		render: function () {
+			var footer = null;
+			var main = null;
+			var todoItems = {};
+			var activeTodoCount;
+			var completedCount;
+
+			var shownTodos = this.state.todos.filter(function (todo) {
+				switch (this.state.nowShowing) {
+				case ACTIVE_TODOS:
+					return !todo.completed;
+				case COMPLETED_TODOS:
+					return todo.completed;
+				default:
+					return true;
+				}
+			}.bind(this));
+
+			shownTodos.forEach(function (todo) {
+				todoItems[todo.id] = (
+					<TodoItem
+						todo={todo}
+						onToggle={this.toggle.bind(this, todo)}
+						onDestroy={this.destroy.bind(this, todo)}
+						onEdit={this.edit.bind(this, todo)}
+						editing={this.state.editing === todo.id}
+						onSave={this.save.bind(this, todo)}
+						onCancel={this.cancel}
+					/>
+				);
+			}.bind(this));
+
+			activeTodoCount = this.state.todos.filter(function (todo) {
+				return !todo.completed;
+			}).length;
+
+			completedCount = this.state.todos.length - activeTodoCount;
+
+			if (activeTodoCount || completedCount) {
+				footer =
+					<TodoFooter
+						count={activeTodoCount}
+						completedCount={completedCount}
+						nowShowing={this.state.nowShowing}
+						onClearCompleted={this.clearCompleted}
+					/>;
+			}
+
+			if (this.state.todos.length) {
+				main = (
+					<section id="main">
+						<input
+							id="toggle-all"
+							type="checkbox"
+							onChange={this.toggleAll}
+							checked={activeTodoCount === 0}
+						/>
+						<ul id="todo-list">
+							{todoItems}
+						</ul>
+					</section>
+				);
+			}
+
+			return (
+				<div>
+					<header id="header">
+						<h1>todos</h1>
+						<input
+							ref="newField"
+							id="new-todo"
+							placeholder="What needs to be done?"
+							onKeyDown={this.handleNewTodoKeyDown}
+						/>
+					</header>
+					{main}
+					{footer}
+				</div>
+			);
+		}
+	});
+
+	React.renderComponent(<TodoApp />, document.getElementById('todoapp'));
+	React.renderComponent(
+		<div>
+			<p>Double-click to edit a todo</p>
+			<p>Created by{' '}
+				<a href="http://github.com/petehunt/">petehunt</a>
+			</p>
+			<p>Part of{' '}<a href="http://todomvc.com">TodoMVC</a></p>
+		</div>,
+		document.getElementById('info'));
+})(window, React);
diff --git a/examples/todomvc-director/js/footer.jsx b/examples/todomvc-director/js/footer.jsx
@@ -0,0 +1,58 @@
+/**
+ * @jsx React.DOM
+ */
+/*jshint quotmark:false */
+/*jshint white:false */
+/*jshint trailing:false */
+/*jshint newcap:false */
+/*global React, ALL_TODOS, ACTIVE_TODOS, Utils, COMPLETED_TODOS */
+(function (window) {
+	'use strict';
+
+	window.TodoFooter = React.createClass({
+		render: function () {
+			var activeTodoWord = Utils.pluralize(this.props.count, 'item');
+			var clearButton = null;
+
+			if (this.props.completedCount > 0) {
+				clearButton = (
+					<button
+						id="clear-completed"
+						onClick={this.props.onClearCompleted}>
+						{''}Clear completed ({this.props.completedCount}){''}
+					</button>
+				);
+			}
+
+			var show = {
+				ALL_TODOS: '',
+				ACTIVE_TODOS: '',
+				COMPLETED_TODOS: ''
+			};
+			show[this.props.nowShowing] = 'selected';
+
+			return (
+				<footer id="footer">
+					<span id="todo-count">
+						<strong>{this.props.count}</strong>
+						{' '}{activeTodoWord}{' '}left{''}
+					</span>
+					<ul id="filters">
+						<li>
+							<a href="#/" class={show[ALL_TODOS]}>All</a>
+						</li>
+						{' '}
+						<li>
+							<a href="#/active" class={show[ACTIVE_TODOS]}>Active</a>
+						</li>
+						{' '}
+						<li>
+							<a href="#/completed" class={show[COMPLETED_TODOS]}>Completed</a>
+						</li>
+					</ul>
+					{clearButton}
+				</footer>
+			);
+		}
+	});
+})(window);