|
@@ -89,17 +89,75 @@ const PasswordConfirm = ({min, char=false, bigChar=false, number=false}) => {
|
|
|
|
|
|
|
|
|
const Timer = ({seconds=100}) => {
|
|
|
+ const [counter, setCounter] = useState(seconds)
|
|
|
+ const [paused, setPause] = useState(false)
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ setCounter(seconds)
|
|
|
+ }, [seconds])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ let interval = null
|
|
|
+ if (counter > 0 && !paused) {
|
|
|
+ interval = setInterval(() => {
|
|
|
+ setCounter(counter => counter - 1)
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ return () => {
|
|
|
+ clearInterval(interval)
|
|
|
+ }
|
|
|
+ }, [paused, counter])
|
|
|
+
|
|
|
+
|
|
|
+ let h = Math.floor(counter / 3600)
|
|
|
+ let m = Math.floor(counter % 3600 / 60)
|
|
|
+ let s = counter % 60
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <h2>{h >= 10 ? h : '0'+h}:{m >= 10 ? m : '0'+m}:{s >= 10 ? s : '0'+s}</h2>
|
|
|
+ <button onClick={() => setPause(!paused)}>{paused ? 'Го' : 'Пауза'}</button>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const TimerControl = ({setSeconds}) => {
|
|
|
+ const [s, setS] = useState(0)
|
|
|
+ const [m, setM] = useState(0)
|
|
|
+ const [h, setH] = useState(0)
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
- <h6></h6>
|
|
|
- <button>Пауза</button>
|
|
|
+ <input value={h} min="0" max="none" type="number" onChange={(e) => setH(e.target.value)}/>
|
|
|
+ <input value={m} min="0" max="60" type="number" onChange={(e) => setM(e.target.value)}/>
|
|
|
+ <input value={s} min="0" max="60" type="number" onChange={(e) => setS(e.target.value)}/>
|
|
|
+ <button onClick={() => setSeconds(+h*3600 + +m*60 + +s) }>Start</button>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
|
|
|
+const SecondsTimer = ({seconds}) => (
|
|
|
+ <h2>{seconds}</h2>
|
|
|
+)
|
|
|
+
|
|
|
+const TimerContainer = ({seconds=100, refresh=100, render}) => {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const DisplayEl = render
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <DisplayEl seconds={200} />
|
|
|
+ </>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
function App() {
|
|
|
+ const [seconds, setSeconds] = useState(200)
|
|
|
+
|
|
|
return (
|
|
|
<>
|
|
|
<Spoiler header={<h1>Заголовок</h1>} open={false}>
|
|
@@ -108,14 +166,17 @@ function App() {
|
|
|
лорем ипсум траливали и тп.
|
|
|
</p>
|
|
|
</Spoiler>
|
|
|
-
|
|
|
+
|
|
|
<RangeInput min={2} max={10} />
|
|
|
|
|
|
<PasswordConfirm min={3} char={true} bigChar={true} number={true}/>
|
|
|
|
|
|
|
|
|
-
|
|
|
+ <Timer seconds={seconds} />
|
|
|
+ <TimerControl setSeconds={setSeconds}/>
|
|
|
+
|
|
|
|
|
|
+ <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
|
|
|
|
|
|
</>
|
|
|
);
|