|
@@ -117,7 +117,7 @@ class Timer extends React.Component {
|
|
|
|
|
|
static getDerivedStateFromProps(props, state){
|
|
static getDerivedStateFromProps(props, state){
|
|
console.log('get derived state');
|
|
console.log('get derived state');
|
|
- return /* ({"date": props.time}) */ null
|
|
|
|
|
|
+ return /* ({propsTime: props.time}) */ null
|
|
}
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
componentDidMount() {
|
|
@@ -162,6 +162,58 @@ class Timer extends React.Component {
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
+class TimerControl extends React.Component {
|
|
|
|
+ constructor(props){
|
|
|
|
+ super(props)
|
|
|
|
+ this.state = {hours:0,
|
|
|
|
+ minutes:0,
|
|
|
|
+ seconds:0,
|
|
|
|
+ toSeconds:0,
|
|
|
|
+ addTimer: false}
|
|
|
|
+ this.handlerHours = this.handlerHours.bind(this);
|
|
|
|
+ this.handlerMinutes = this.handlerMinutes.bind(this);
|
|
|
|
+ this.handlerSeconds = this.handlerSeconds.bind(this);
|
|
|
|
+ this.handleAddTimer = this.handleAddTimer.bind(this);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ handlerHours(e){
|
|
|
|
+
|
|
|
|
+ let hourToSeconds = +e*3600
|
|
|
|
+ console.log(hourToSeconds);
|
|
|
|
+ this.setState({hours: hourToSeconds})
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ handlerMinutes(e){
|
|
|
|
+ let minuteToSeconds = +e*60
|
|
|
|
+ console.log(minuteToSeconds);
|
|
|
|
+ this.setState({minutes: minuteToSeconds})
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ handlerSeconds(e){
|
|
|
|
+ console.log(+e);
|
|
|
|
+ this.setState({seconds: +e})
|
|
|
|
+ }
|
|
|
|
+ handleAddTimer() {
|
|
|
|
+ let allTime = this.state.hours + this.state.minutes + this.state.seconds
|
|
|
|
+ this.setState({addTimer:!this.state.addTimer, toSeconds: allTime})
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ render() {
|
|
|
|
+ return(
|
|
|
|
+ <div>
|
|
|
|
+ <label>hours <input type="number" max="24" min="0" onChange={e => this.handlerHours(e.target.value)}/></label>
|
|
|
|
+ <label>minutes <input type="number" max="60" min="0" onChange={e => this.handlerMinutes(e.target.value)}/></label>
|
|
|
|
+ <label>seconds <input type="number" max="60" min="0" onChange={e => this.handlerSeconds(e.target.value)}/></label>
|
|
|
|
+ <button onClick={this.handleAddTimer}>Start</button>
|
|
|
|
+ {this.state.addTimer && <Timer time={this.state.toSeconds}/>}
|
|
|
|
+ </div>
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
function App () {
|
|
function App () {
|
|
return(
|
|
return(
|
|
<div className='App'>
|
|
<div className='App'>
|
|
@@ -173,6 +225,7 @@ function App () {
|
|
</Spoiler>
|
|
</Spoiler>
|
|
<RangeInput min={2} max={10}/>
|
|
<RangeInput min={2} max={10}/>
|
|
<PasswordConfirm min={2}/>
|
|
<PasswordConfirm min={2}/>
|
|
|
|
+ <TimerControl/>
|
|
<Timer time={10000}/>
|
|
<Timer time={10000}/>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|