You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.2 KiB
58 lines
1.2 KiB
import React, { Component } from 'react';
|
|
import './App.css';
|
|
|
|
class App extends Component {
|
|
constructor(...stuff) {
|
|
super(...stuff)
|
|
|
|
this.state = {
|
|
wc: 0,
|
|
goal: "",
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const pct = ((this.state.wc / (this.state.goal || 250)) * 100)
|
|
|
|
return (
|
|
<div className="App">
|
|
<textarea ref={this.onRef.bind(this)} onChange={this.onChange.bind(this)}></textarea>
|
|
<div className="App-status">
|
|
<span>{this.state.wc}</span>
|
|
<span> / </span>
|
|
<span><input ref={this.onRef2.bind(this)} placeholder="250" onChange={this.onChange2.bind(this)} value={this.state.goal} /></span>
|
|
<span>{ pct.toFixed(pct < 10 ? 1 : 0) }%</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
onRef(ta) {
|
|
this.ta = ta
|
|
}
|
|
|
|
onRef2(tb) {
|
|
this.tb = tb
|
|
}
|
|
|
|
onChange() {
|
|
clearTimeout(this.timeout)
|
|
this.timeout = setTimeout(() => {
|
|
const wc = this.ta.value.split("\n").join(" ").split(" ").filter(t => t.length > 0).length
|
|
|
|
this.setState({wc})
|
|
}, 100)
|
|
}
|
|
|
|
onChange2() {
|
|
let goal = parseInt(this.tb.value)
|
|
|
|
if (goal > 0) {
|
|
this.setState({goal})
|
|
} else {
|
|
this.setState({goal: ""})
|
|
}
|
|
}
|
|
}
|
|
|
|
export default App;
|