made with esnextbin
Last active
August 1, 2016 18:36
-
-
Save trxcllnt/d30699527ecfeec94acfe058c0bc77db to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains hidden or 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
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ESNextbin Sketch</title> | |
| <!-- put additional styles and scripts here --> | |
| </head> | |
| <body> | |
| <!-- put markup and other contents here --> | |
| <div id="app"></div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| const TodoApp = ({ todos, todos: { length = 0, filter = 'all' }}) => { | |
| return ( | |
| <div> | |
| <section className="todoapp"> | |
| <header className="header"> | |
| <h1>todos</h1> | |
| <TodoTextInput | |
| autoFocus={true} | |
| className="new-todo" | |
| onSave={this._handleTextInputSave} | |
| placeholder="What needs to be done?" | |
| /> | |
| </header> | |
| {props.children} | |
| {hasTodos && <TodoListFooter todos={todos}/>} | |
| </section> | |
| <footer className="info"> | |
| <p>Double-click to edit a todo</p> | |
| <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> | |
| </footer> | |
| </div> | |
| ); | |
| } | |
| const TodoList = ({ todos, filter, onTodoClick }) => ( | |
| <ul> | |
| {todos.map(todo => | |
| <Todo | |
| key={todo.id} | |
| {...todo} | |
| onClick={() => onTodoClick(todo.id)} | |
| /> | |
| )} | |
| </ul> | |
| ); | |
| function mapStateToPaths(falcor, state) { | |
| const { todos = {}} = state, | |
| { filter = 'all' } = todos, | |
| { [`${filter}-items`]: visibleTodos = {} } = todos, | |
| { length: allLength = 0 } = todos, | |
| { length: visibleLength = 0 } = visibleTodos; | |
| return falcor.QL`{ | |
| input: { value }, | |
| todos: { | |
| filter, length, | |
| [0...${allLength}]: { | |
| text, completed | |
| }, | |
| [${filter}-items]: { | |
| length, | |
| [0...${visibleLength}]: { | |
| text, completed | |
| } | |
| } | |
| } | |
| }`; | |
| } | |
| function mapStateToProps(state) { | |
| const { todos: { filter }} = state; | |
| const visibleTodos = state.todos[`${filter}-items`]; | |
| return { | |
| todos: { | |
| filter, ...visibleTodos | |
| } | |
| }; | |
| } | |
| const VisibleTodoList = connect( | |
| mapStateToPaths, | |
| mapStateToProps, | |
| )(TodoApp); |
This file contains hidden or 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
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "babel-runtime": "6.11.6" | |
| } | |
| } |
This file contains hidden or 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
| "use strict"; | |
| var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral"); | |
| var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2); | |
| var _extends2 = require("babel-runtime/helpers/extends"); | |
| var _extends3 = _interopRequireDefault(_extends2); | |
| var _templateObject = (0, _taggedTemplateLiteral3.default)(["{\n input: { value },\n todos: {\n filter, length,\n [0...", "]: {\n text, completed\n },\n [", "-items]: {\n length,\n [0...", "]: {\n text, completed\n }\n }\n }\n }"], ["{\n input: { value },\n todos: {\n filter, length,\n [0...", "]: {\n text, completed\n },\n [", "-items]: {\n length,\n [0...", "]: {\n text, completed\n }\n }\n }\n }"]); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| var TodoApp = function TodoApp(_ref) { | |
| var todos = _ref.todos; | |
| var _ref$todos = _ref.todos; | |
| var _ref$todos$length = _ref$todos.length; | |
| var length = _ref$todos$length === undefined ? 0 : _ref$todos$length; | |
| var _ref$todos$filter = _ref$todos.filter; | |
| var filter = _ref$todos$filter === undefined ? 'all' : _ref$todos$filter; | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "section", | |
| { className: "todoapp" }, | |
| React.createElement( | |
| "header", | |
| { className: "header" }, | |
| React.createElement( | |
| "h1", | |
| null, | |
| "todos" | |
| ), | |
| React.createElement(TodoTextInput, { | |
| autoFocus: true, | |
| className: "new-todo", | |
| onSave: undefined._handleTextInputSave, | |
| placeholder: "What needs to be done?" | |
| }) | |
| ), | |
| props.children, | |
| hasTodos && React.createElement(TodoListFooter, { todos: todos }) | |
| ), | |
| React.createElement( | |
| "footer", | |
| { className: "info" }, | |
| React.createElement( | |
| "p", | |
| null, | |
| "Double-click to edit a todo" | |
| ), | |
| React.createElement( | |
| "p", | |
| null, | |
| "Part of ", | |
| React.createElement( | |
| "a", | |
| { href: "http://todomvc.com" }, | |
| "TodoMVC" | |
| ) | |
| ) | |
| ) | |
| ); | |
| }; | |
| var TodoList = function TodoList(_ref2) { | |
| var todos = _ref2.todos; | |
| var filter = _ref2.filter; | |
| var onTodoClick = _ref2.onTodoClick; | |
| return React.createElement( | |
| "ul", | |
| null, | |
| todos.map(function (todo) { | |
| return React.createElement(Todo, (0, _extends3.default)({ | |
| key: todo.id | |
| }, todo, { | |
| onClick: function onClick() { | |
| return onTodoClick(todo.id); | |
| } | |
| })); | |
| }) | |
| ); | |
| }; | |
| function mapStateToPaths(falcor, state) { | |
| var _state$todos = state.todos; | |
| var todos = _state$todos === undefined ? {} : _state$todos; | |
| var _todos$filter = todos.filter; | |
| var filter = _todos$filter === undefined ? 'all' : _todos$filter; | |
| var _todos$ = todos[filter + "-items"]; | |
| var visibleTodos = _todos$ === undefined ? {} : _todos$; | |
| var _todos$length = todos.length; | |
| var allLength = _todos$length === undefined ? 0 : _todos$length; | |
| var _visibleTodos$length = visibleTodos.length; | |
| var visibleLength = _visibleTodos$length === undefined ? 0 : _visibleTodos$length; | |
| return falcor.QL(_templateObject, allLength, filter, visibleLength); | |
| } | |
| function mapStateToProps(state) { | |
| var filter = state.todos.filter; | |
| var visibleTodos = state.todos[filter + "-items"]; | |
| return { | |
| todos: (0, _extends3.default)({ | |
| filter: filter }, visibleTodos) | |
| }; | |
| } | |
| var VisibleTodoList = connect(mapStateToPaths, mapStateToProps)(TodoApp); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment