Created
May 7, 2015 09:57
-
-
Save ishiduca/dd30fc1539f17f367d21 to your computer and use it in GitHub Desktop.
React.jsで簡単な通知コンポーネント の試作。
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 merge = require('deepmerge') | |
| var semaphore = require('./index') | |
| var Sem1 = semaphore(1) | |
| var Sem3 = semaphore(3) | |
| var events = require('events') | |
| var store = new events.EventEmitter | |
| var styles = { | |
| base: { | |
| zIndex: '10' | |
| , margin : '6px' | |
| , padding: '6px' | |
| , borderRadius: '12px' | |
| , opacity: '.75' | |
| } | |
| , none: { | |
| display: 'none' | |
| } | |
| , info: { | |
| backgroundColor: '#00ff00' | |
| } | |
| , error: { | |
| backgroundColor: '#ff9900' | |
| , fontWeight: 'bold' | |
| } | |
| } | |
| var list = [] | |
| var React = require('react') | |
| var App = React.createClass({ | |
| render: function () { | |
| if (this.state.msgs.length === 0) { | |
| return (<section><h3>none</h3></section>) | |
| } | |
| return ( | |
| <section> | |
| { | |
| this.state.msgs.map(function (msg) { | |
| var style = msg ? /error/i.test(msg) ? merge(styles.base, styles.error) | |
| : merge(styles.base, styles.info) | |
| : styles.none | |
| return ( | |
| <div | |
| key={msg} | |
| style={style} | |
| > | |
| {msg} | |
| </div> | |
| ) | |
| }) | |
| } | |
| </section> | |
| ) | |
| } | |
| , componentDidMount: function () { | |
| var me = this | |
| var showTime = 2000 | |
| var showInterval = 400 | |
| var pushInterval = showTime + showInterval + 1200 | |
| store.on('data', function (str) { | |
| Sem3.wait(function () { | |
| setTimeout(Sem3.signal, pushInterval) | |
| Sem1.wait(function () { | |
| setTimeout(function () { | |
| setTimeout(function () { | |
| list.shift() | |
| me.setState({msgs: list}) | |
| }, showTime) | |
| Sem1.signal() | |
| }, showInterval) | |
| list.push(str) | |
| me.setState({msgs: list}) | |
| }) | |
| }) | |
| }) | |
| } | |
| , getInitialState: function () { | |
| return {msgs: list} | |
| } | |
| }) | |
| React.render(<App />, document.body) | |
| window.onload = function () { | |
| ;('ab cd efg hij klm nopq errorman stu vw xyz').split(' ').forEach(function (str) { | |
| store.emit('data', str) | |
| }) | |
| } |
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
| <body> | |
| <script src="./bundle.js"></script> | |
| </body> |
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' | |
| module.exports = function (n) { | |
| var capacity = n || 1 | |
| var current = 0 | |
| var queue = [] | |
| return { | |
| wait: wait | |
| , signal: signal | |
| } | |
| function wait (f) { | |
| ;(current < capacity) ? f() : queue.push(f) | |
| return (current += 1) | |
| } | |
| function signal () { | |
| if (! current) return | |
| current -= 1 | |
| ;('function' === typeof queue[0]) && queue.shift()() | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment