Last active
July 6, 2017 05:30
-
-
Save pH200/f91654fe0f0018c215de to your computer and use it in GitHub Desktop.
Small Todo by using Cycle.js
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
| import Cycle, {Rx, h} from 'cyclejs'; | |
| Cycle.registerCustomElement('TodoList', (rootElem$, props) => { | |
| let vtree$ = props.get('items$').map(items => | |
| h('div', h('ul', items.map((itemText, index) => | |
| h('li', { key: index + itemText }, itemText))))); | |
| rootElem$.inject(vtree$); | |
| }); | |
| let vtree$ = Cycle.createStream(function (interaction$) { | |
| var textChange$ = interaction$.choose('.field', 'change') | |
| .map(ev => data => { | |
| data.text = ev.target.value; | |
| return data; | |
| }); | |
| var submit$ = interaction$.choose('form', 'submit') | |
| .do(ev => ev.preventDefault()) | |
| .map(() => data => { | |
| data.items = data.items.concat(data.text); | |
| data.text = ''; | |
| return data; | |
| }); | |
| return Rx.Observable.merge(textChange$, submit$) | |
| .startWith({ | |
| text: '', | |
| items: [] | |
| }) | |
| .scan((data, modifier) => modifier(data)) | |
| .map(data => h('div', [ | |
| h('h3', 'TODO'), | |
| h('TodoList', { key: 0, items: data.items }), | |
| h('form', { 'onsubmit': e => e.preventDefault() }, [ | |
| h('input.field', { value: data.text }), | |
| h('input.submit', { | |
| type: 'submit', | |
| value: 'Add #' + (data.items.length + 1) | |
| }) | |
| ]) | |
| ])); | |
| }); | |
| let interaction$ = Cycle.createStream(vtree$ => | |
| Cycle.render(vtree$, '.js-container').interaction$ | |
| ); | |
| interaction$.inject(vtree$).inject(interaction$); |
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
| var TodoList = React.createClass({ | |
| render: function() { | |
| var createItem = function(itemText, index) { | |
| return <li key={index + itemText}>{itemText}</li>; | |
| }; | |
| return <ul>{this.props.items.map(createItem)}</ul>; | |
| } | |
| }); | |
| var TodoApp = React.createClass({ | |
| getInitialState: function() { | |
| return {items: [], text: ''}; | |
| }, | |
| onChange: function(e) { | |
| this.setState({text: e.target.value}); | |
| }, | |
| handleSubmit: function(e) { | |
| e.preventDefault(); | |
| var nextItems = this.state.items.concat([this.state.text]); | |
| var nextText = ''; | |
| this.setState({items: nextItems, text: nextText}); | |
| }, | |
| render: function() { | |
| return ( | |
| <div> | |
| <h3>TODO</h3> | |
| <TodoList items={this.state.items} /> | |
| <form onSubmit={this.handleSubmit}> | |
| <input onChange={this.onChange} value={this.state.text} /> | |
| <button>{'Add #' + (this.state.items.length + 1)}</button> | |
| </form> | |
| </div> | |
| ); | |
| } | |
| }); | |
| React.render(<TodoApp />, mountNode); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment