Created
July 24, 2015 11:03
-
-
Save anonymous/71998c2f2c4dc5f6508b to your computer and use it in GitHub Desktop.
setState くりっく かうんたー
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> | |
<head> | |
<meta charset="utf-8" /> | |
<title>setState くりっく かうんたー</title> | |
<link rel="stylesheet" | |
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" /> | |
</head> | |
<body> | |
<div class="container"> | |
<h2>setState くりっく かうんたー</h2> | |
<div id="content"></div> | |
<p> | |
<code>setStat()</code>のみを使用しました。 | |
</p> | |
<p></p> | |
<p> | |
時を巻き戻して、そして進める能力を手に入れた! | |
なお、記録される履歴はメモリが許す限り無限なので、メモリ不足になる前に適当に忘却してください。 | |
</p> | |
<p> | |
時を記録する能力を手に入れた! | |
履歴もあわせて保存されます。 | |
</p> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.17.0/ramda.min.js"></script> | |
<script type="text/babel"> | |
"use strict"; | |
class ClickCounter extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
counts: R.repeat(0, props.number), | |
total: 0, | |
prev: null, | |
next: null, | |
save: null | |
}; | |
} | |
_clickCount(number) { | |
this.setState({ | |
counts: R.set(R.lensIndex(number), this.state.counts[number] + 1, this.state.counts), | |
total: this.state.total + 1, | |
prev: this.state, | |
next: null | |
}); | |
} | |
_clickUndo() { | |
this.setState(R.merge(this.state.prev, {next: this.state})); | |
} | |
_clickRedo() { | |
this.setState(R.merge(this.state.next, {prev: this.state})); | |
} | |
_clickForget() { | |
this.setState({prev: null, next: null}); | |
} | |
_clickSave() { | |
this.setState({save: this.state}); | |
} | |
_clickLoad() { | |
this.setState(R.merge(this.state.save, {save: this.state.save})); | |
} | |
render() { | |
return ( | |
<div className="clickCounter"> | |
<ChildrenCounter counts={this.state.counts} total={this.state.total} | |
onCount={this._clickCount.bind(this)}/> | |
<UndoRedo enableUndo={this.state.prev != null} enableRedo={this.state.next != null} | |
clickUndo={this._clickUndo.bind(this)} clickRedo={this._clickRedo.bind(this)} | |
clickForget={this._clickForget.bind(this)}/> | |
<SaveLoad enableSave={true} enableLoad={this.state.save != null} | |
clickSave={this._clickSave.bind(this)} clickLoad={this._clickLoad.bind(this)}/> | |
</div> | |
); | |
} | |
} | |
class ChildrenCounter extends React.Component { | |
render() { | |
const children = this.props.counts.map((v, i) => { | |
return <ChildCounter number={i} count={v} total={this.props.total} onCount={this.props.onCount} key={i}/>; | |
}); | |
return ( | |
<div className="childrenCounter row"> | |
{children} | |
</div> | |
); | |
} | |
} | |
class ChildCounter extends React.Component { | |
_onClick() { | |
return this.props.onCount(this.props.number); | |
} | |
render() { | |
return ( | |
<div className="childCounter col-sm-3 col-md-2 panel panel-default text-center btn btn-default" | |
onClick={this._onClick.bind(this)}> | |
<h3>ばんごう {this.props.number}</h3> | |
<p>このわく <span className="badge">{this.props.count}</span></p> | |
<p>とーたる <span className="badge">{this.props.total}</span></p> | |
</div> | |
); | |
} | |
} | |
class Button extends React.Component { | |
render() { | |
const classes = [ | |
this.props.name + "Button", | |
"btn", | |
"btn-" + this.props.level | |
].join(" "); | |
if (this.props.enabled) { | |
return ( | |
<button name={this.props.name} className={classes} onClick={this.props.onClick}> | |
{this.props.text} | |
</button> | |
); | |
} else { | |
return ( | |
<button name={this.props.name} className={classes} disabled="disabled"> | |
{this.props.text} | |
</button> | |
); | |
} | |
} | |
} | |
Button.defaultProps = {level: "default"}; | |
class UndoRedo extends React.Component { | |
render() { | |
return ( | |
<p className="undoRedo"> | |
<Button name="undo" text="時よ戻れ!" level="primary" | |
enabled={this.props.enableUndo} onClick={this.props.clickUndo}/> | |
| |
<Button name="redo" text="時よ進め!" level="primary" | |
enabled={this.props.enableRedo} onClick={this.props.clickRedo}/> | |
| |
<Button name="forget" text="記憶を忘却" | |
enabled={this.props.enableUndo || this.props.enableRedo} onClick={this.props.clickForget}/> | |
</p> | |
); | |
} | |
} | |
class SaveLoad extends React.Component { | |
render() { | |
return ( | |
<p className="saveLoad"> | |
<Button name="save" text="保存" | |
enabled={this.props.enableSave} onClick={this.props.clickSave}/> | |
| |
<Button name="load" text="読込" | |
enabled={this.props.enableLoad} onClick={this.props.clickLoad}/> | |
</p> | |
); | |
} | |
} | |
React.render(<ClickCounter number={4}/>, document.getElementById('content')); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment