1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import { DeleteTwoTone, PlayCircleFilled, StopFilled, LeftCircleFilled, RightCircleFilled, DownCircleFilled, UpCircleFilled, EditFilled } from "@ant-design/icons";
import { Button, Card, Col, Input, Progress, Space, Popconfirm, Grid } from "antd";
import ButtonGroup from "antd/lib/button/button-group";
import { useState } from "react";
import TimePicker from "./TimePicker";
const { useBreakpoint } = Grid;
const Timer = ({ name, started, start, stop, setName, initialTime, time, setTime, remove, index, first, last, moveTimer }) => {
const [edit, setEdit] = useState(false);
const toggleEdit = () => {
setEdit(!edit);
}
const screens = useBreakpoint();
let seconds = ("0" + (Math.floor(time) % 60)).slice(-2);
let minutes = ("0" + (Math.floor(time / 60) % 60)).slice(-2);
let hours = ("0" + Math.floor(time / 3600)).slice(-2);
return <Col xs={24} sm={12} md={12} lg={8} xl={6}>
<Card
index={index}
title={
edit
? (<Input value={name} onChange={ev => setName(ev.target.value)} />)
: (<div style={{ height: 32, overflow: 'hidden', textOverflow: 'ellipsis', width: '100%' }}>{name}</div>)
}
actions={[
<Button type='primary' block title='Запуск' onClick={start} disabled={started || initialTime === 0} icon={<PlayCircleFilled />}>Запуск</Button>,
<Button type='danger' block title='Стоп' onClick={stop} disabled={!started} icon={<StopFilled />}>Стоп</Button>,
]}
bodyStyle={{ padding: 4 }}
style={{ padding: 4, margin: 4 }}
>
<Space align="baseline" style={{ justifyContent: "flex-end", display: "flex" }}>
{edit
? (<ButtonGroup>
<Popconfirm
title="Удалить таймер?"
onConfirm={remove}
okText="Да"
cancelText="Нет">
<Button icon={<DeleteTwoTone />}></Button>
</Popconfirm>
<Button onClick={toggleEdit} icon={<EditFilled />}></Button>
</ButtonGroup>)
: (<ButtonGroup>
<Button disabled={first} onClick={() => moveTimer(-1)} icon={screens.sm ? <LeftCircleFilled /> : <UpCircleFilled />}></Button>
<Button disabled={last} onClick={() => moveTimer(1)} icon={screens.sm ? <RightCircleFilled /> : <DownCircleFilled />}></Button>
<Button onClick={toggleEdit} icon={<EditFilled />}></Button>
</ButtonGroup>)}
</Space>
<Space direction="vertical" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
{screens.sm
? (<Progress type="circle" status="active" percent={100 - (time / initialTime * 100)} format={percent => `${hours}:${minutes}:${seconds}`} width={200} />)
: (<Progress size="large" status="active" percent={100 - (time / initialTime * 100)} format={percent => `${hours}:${minutes}:${seconds}`} width={200} style={{ width: "200px" }} />)
}
<TimePicker disabled={started} time={initialTime} setTime={setTime} />
</Space>
</Card>
</Col>;
}
export default Timer;
|
