Skip to content

Instantly share code, notes, and snippets.

Created July 24, 2015 11:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/71998c2f2c4dc5f6508b to your computer and use it in GitHub Desktop.
Save anonymous/71998c2f2c4dc5f6508b to your computer and use it in GitHub Desktop.
setState くりっく かうんたー
<!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}/>
&nbsp;
<Button name="redo" text="時よ進め!" level="primary"
enabled={this.props.enableRedo} onClick={this.props.clickRedo}/>
&nbsp;
<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}/>
&nbsp;
<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