Last active
August 29, 2015 14:20
-
-
Save ishiduca/f283ade185512762f623 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 React = require('react') | |
| var events = require('events') | |
| var store = new events.EventEmitter | |
| var roll = require('./roll') | |
| var Notify = React.createClass({ | |
| mixins: [roll({timeout: 1500}, store)] | |
| , render: function () { | |
| return ( | |
| <section | |
| onClick={this.handleClick} | |
| style={this.getStyle()} | |
| > | |
| { | |
| this.state.message && (<span>{this.state.message}</span>) | |
| } | |
| </section> | |
| ) | |
| } | |
| }) | |
| var App = React.createClass({ | |
| render: function () { | |
| return ( | |
| <main> | |
| <Notify /> | |
| </main> | |
| ) | |
| } | |
| }) | |
| React.render(<App />, document.body) | |
| window.onload = function () { | |
| ;('foo bar mixinError mixins it uses define').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="./b.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
| { | |
| "dependencies": { | |
| "deepmerge": "^0.2.7", | |
| "object-assign": "^2.0.0", | |
| "react": "^0.12.2" | |
| }, | |
| "devDependencies": { | |
| "reactify": "^1.1.0" | |
| }, | |
| "scripts": { | |
| "build": "browserify ./example-app.js -o ./b.js" | |
| }, | |
| "browserify": { | |
| "transform": [ | |
| "reactify" | |
| ] | |
| } | |
| } |
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 assign = require('object-assign') | |
| var notify = require('./semaphore') | |
| var _styles = { | |
| base: { | |
| position: 'fixed' | |
| , top : '0' | |
| , left : '0' | |
| , width: '100%' | |
| , zIndex: '10' | |
| , padding: '12px' | |
| , fontSize: '20px' | |
| , fontFamilly: 'Arial,sans-serif' | |
| , opacity: '0.75' | |
| , cursor: 'pointer' | |
| } | |
| , info: { | |
| backgroundColor: '#000000' | |
| , color: '#aaaaaa' | |
| } | |
| , error: { | |
| backgroundColor: '#ffaa33' | |
| , fontWeight: 'bold' | |
| } | |
| , none: { | |
| display: 'none' | |
| } | |
| } | |
| var roll = { | |
| getInitialState: getInitialState | |
| , componentDidMount: componentDidMount | |
| , handleClick: handleClick | |
| , getStyle: getStyle | |
| } | |
| function getInitialState () { return getDefault() } | |
| function getDefault () { return {type: 'none', message: ''} } | |
| function componentDidMount () { | |
| this.store.on('data', function (data) { | |
| this.notify.write(data) | |
| }.bind(this)) | |
| this.notify.on('data', function (data) { | |
| this.setState({message: data, type: /error/i.test(data) ? 'error' : 'info'}) | |
| }.bind(this)).on('empty', function () { | |
| this.setState(getDefault()) | |
| }.bind(this)) | |
| } | |
| function handleClick () { this.notify.empty() } | |
| function getStyle () { | |
| return this.state.message | |
| ? merge(this.styles.base, this.styles[this.state.type]) | |
| : this.styles.none | |
| } | |
| module.exports = function (opt, store) { | |
| return assign({notify: notify(opt), store: store, styles: _styles}, roll) | |
| } |
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 events = require('events') | |
| var merge = require('deepmerge') | |
| var assign = require('object-assign') | |
| function write (data) { | |
| if (null === data || 'undefined' === typeof data) return data | |
| ;(this.buffer || (this.buffer = [])).push(data) | |
| this.lock || this.resume() | |
| } | |
| function pause () { | |
| this.timeoutID && clearTimeout(this.timeoutID) | |
| this.lock = true | |
| } | |
| function resume () { | |
| this.pause() | |
| ;(this.buffer.length === 0) | |
| ? _empty.call(this) | |
| : _push.call(this) | |
| } | |
| function empty () { | |
| this.buffer = [] | |
| this.timeoutID && clearTimeout(this.timeoutID) | |
| _empty.call(this) | |
| } | |
| function _push () { | |
| var data = (this.buffer || (this.buffer = [])).shift() | |
| if ('undefined' !== typeof data) this.emit('data', data) | |
| this.timeoutID = setTimeout(function () { | |
| this.timeoutID && clearTimeout(this.timeoutID) | |
| this.lock = false | |
| this.resume() | |
| }.bind(this), this.timeout) | |
| } | |
| function _empty () { | |
| this.lock = false | |
| this.emit('empty') | |
| } | |
| var proto = { | |
| write: write | |
| , pause: pause | |
| , resume: resume | |
| , empty: empty | |
| } | |
| var defaultOption = { | |
| timeout: 1500 | |
| , buffer: [] | |
| } | |
| module.exports = function createTimer (opt) { | |
| return assign({}, events.EventEmitter.prototype, proto, merge(defaultOption, opt || {})) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment