|
@@ -351,17 +351,14 @@ const TimerContainerReset = ({ seconds, refresh, render }) => {
|
|
}, [btnState]);
|
|
}, [btnState]);
|
|
const Render = (props) => { return render(props) };
|
|
const Render = (props) => { return render(props) };
|
|
pauseState = counter;
|
|
pauseState = counter;
|
|
- return <><TimerControlInput counter={counter} handleUserInput={handleUserInput} time={ time}/>
|
|
|
|
- <Render seconds={counter.toFixed(2)} />
|
|
|
|
- <div className='controlsWrapper'>
|
|
|
|
- <button className='timerBtn' onClick={handleClick}> { btnState ? "Pause" : "Start"}</button>
|
|
|
|
- <button className='timerBtn' onClick={() => clearFunc() }> Reset</button>
|
|
|
|
- </div>
|
|
|
|
- </>
|
|
|
|
|
|
+ return <> <Render seconds={counter.toFixed(2)} />
|
|
|
|
+ <TimerControlInput counter={counter} handleUserInput={handleUserInput} time={time} handleClick={handleClick} clearFunc={clearFunc} btnState={btnState} />
|
|
|
|
+
|
|
|
|
+ </>
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
-const TimerControlInput = ({ counter, handleUserInput, time}) => {
|
|
|
|
|
|
+const TimerControlInput = ({ counter, handleUserInput, time, handleClick, clearFunc, btnState}) => {
|
|
return <>
|
|
return <>
|
|
<div className='timerBoard ms'>
|
|
<div className='timerBoard ms'>
|
|
<input className="timeCell" name="inputHours" maxLength="2" disabled={!counter ? false : true} value={time.hours} placeholder="hh" onInput={e => { handleUserInput(e.target.value, 'hours') }} />
|
|
<input className="timeCell" name="inputHours" maxLength="2" disabled={!counter ? false : true} value={time.hours} placeholder="hh" onInput={e => { handleUserInput(e.target.value, 'hours') }} />
|
|
@@ -369,7 +366,11 @@ const TimerControlInput = ({ counter, handleUserInput, time}) => {
|
|
<input className="timeCell"name="inputMins" maxLength="2" disabled={!counter?false:true } value={time.mins} placeholder="mm" onInput={e => {handleUserInput(e.target.value, 'mins') }}/>
|
|
<input className="timeCell"name="inputMins" maxLength="2" disabled={!counter?false:true } value={time.mins} placeholder="mm" onInput={e => {handleUserInput(e.target.value, 'mins') }}/>
|
|
<span>:</span>
|
|
<span>:</span>
|
|
<input className="timeCell" name="inputSecs" maxLength="2" disabled={!counter ? false : true} value={time.secs} placeholder="ss" onInput={e => {handleUserInput(e.target.value, 'secs') }}/>
|
|
<input className="timeCell" name="inputSecs" maxLength="2" disabled={!counter ? false : true} value={time.secs} placeholder="ss" onInput={e => {handleUserInput(e.target.value, 'secs') }}/>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div className='controlsWrapper'>
|
|
|
|
+ <button className='timerBtn' onClick={handleClick}> { btnState ? "Pause" : "Start"}</button>
|
|
|
|
+ <button className='timerBtn' onClick={() => clearFunc() }> Reset</button>
|
|
|
|
+ </div>
|
|
</>
|
|
</>
|
|
}
|
|
}
|
|
|
|
|