Last active
September 5, 2017 22:31
-
-
Save rbiggs/d808e1efd1d3a22bcb53748c5242eecf to your computer and use it in GitHub Desktop.
Example of dynamic counters with Composi.
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 {h, Component, uuid} from 'composi' | |
| import {counters} from './counters' | |
| import {Counter} from './counter' | |
| import {counterSum} from './counterSum' | |
| // Callback for adding counter | |
| const addCounter = () => { | |
| const counter = new Counter({ | |
| root: '#counter', | |
| state: {disabled: false, number: 1, id: uuid(true)}, | |
| componentDidRender: (component) => { | |
| console.log(`Just rendered the counter. It's new value is: ${counter.state.number}.`) | |
| console.log(component.element) | |
| }, | |
| componentWillUnmount: () => { | |
| console.log(`Just deleted the counter.`) | |
| } | |
| }) | |
| counter.update() | |
| // Add new counter to counter tracker: | |
| counters.push(counter) | |
| counterSum.state = counters.reduce((a,b) => a + b.state.number, 0) | |
| } | |
| // Add counter to screen | |
| addCounter() | |
| document.querySelector('#addCounter').addEventListener('click', addCounter) | |
| const fruits = [ | |
| 'Apples', 'Oranges', 'Bananas', 'Pineapples' | |
| ] | |
| const list = new Component({ | |
| root: '#fruitsDiv', | |
| state: fruits, | |
| render: (fruits) => ( | |
| <ul id='list' class='list'> | |
| {fruits.map((fruit, idx) => <li>{idx +1}: {fruit}</li>)} | |
| </ul> | |
| ), | |
| styles: { | |
| '#list': { | |
| margin: 20, | |
| border: 'solid 1px #ccc' | |
| } | |
| }, | |
| componentDidRender: (node) => { | |
| console.log('The component did render.') | |
| } | |
| }) | |
| list.update() | |
| window.list = list |
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 {counters} from './counters' | |
| import {h, Component, uuid} from 'composi' | |
| import {counterSum} from './counterSum' | |
| import {dispatch, subscribe} from 'composi' | |
| // Define counter class: | |
| export class Counter extends Component { | |
| constructor (opts) { | |
| super(opts), | |
| this.styles = { | |
| div: { | |
| margin: 20, | |
| span: { | |
| display: 'inline-block', | |
| border: 'solid 1px #007aff', | |
| padding:' 5px 10px 5px', | |
| minWidth: '20px', | |
| textAlign: 'center' | |
| } | |
| } | |
| } | |
| } | |
| render(data) { | |
| return ( | |
| <div class='counter' id={uuid()}> | |
| <button key='beezle' disabled={data.disabled} onclick={this.decrease.bind(this)} id="decrease">-</button> | |
| <span>{data.number}</span> | |
| <button onclick={this.increase.bind(this)} id="increase">+</button> | |
| <button onclick={this.delete.bind(this)} className="class">Delete</button> | |
| </div> | |
| ) | |
| } | |
| increase() { | |
| this.setState({disabled: false, number: this.state.number + 1}) | |
| counterSum.state = counters.reduce((a,b) => a + b.state.number, 0) | |
| dispatch('do-something', 'Bozo the Clown') | |
| } | |
| decrease() { | |
| if (this.state.number < 2) { | |
| this.setState({disabled: true, number: this.state.number - 1}) | |
| counterSum.state = counters.reduce((a,b) => a + b.state.number, 0) | |
| } else { | |
| this.setState({disabled: false, number: this.state.number - 1}) | |
| counterSum.state = counters.reduce((a,b) => a + b.state.number, 0) | |
| } | |
| } | |
| delete() { | |
| const id = this.state.id | |
| const counter = counters.filter(counter => id == counter.state.id)[0] | |
| const position = counters.indexOf(counter) | |
| counters.splice(position, 1) | |
| counter.unmount() | |
| counterSum.state = counters.reduce((a,b) => a + b.state.number, 0) | |
| } | |
| sum(number) { | |
| this.state = this.state.number + number | |
| } | |
| } |
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 {h, Component} from 'composi' | |
| // Define component for counter sum: | |
| export const counterSum = new Component({ | |
| element: 'section', | |
| state: 0, | |
| render: (sum) => ( | |
| <p id='sum'> | |
| <span>The sum of all counters is: </span> | |
| <strong>{sum}</strong> | |
| </p> | |
| ) | |
| }) |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <meta name="msapplication-tap-highlight" content="no"> | |
| <title>Counters</title> | |
| <link rel="stylesheet" href="./css/chui-ios.css"> | |
| <link rel="stylesheet" href="./css/styles.css"> | |
| </head> | |
| <body> | |
| <ui-screen class="current" id="main"> | |
| <nav> | |
| <h1>Counter Example</h1> | |
| </nav> | |
| <section> | |
| <p><button id="addCounter">Add Counter</button></p> | |
| <p id='counter'></p> | |
| <p id="dingo"></p> | |
| <p id="names"></p> | |
| <div id="fruitsDiv"></div> | |
| </section> | |
| </ui-screen> | |
| <script src="./js/app.js"></script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment