Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import { SearchOutlined } from '@ant-design/icons';
import { Button, Col, DatePicker, Form, Input, Row } from 'antd';
import React from 'react';
interface FilterProps {
onSearch?: (
values:
| {
userId?: string;
userName?: string;
treasureId?: string;
treasureName?: string;
startedAt?: string;
endedAt?: string;
}
| undefined
) => void;
}
export default function Filter({ onSearch }: FilterProps) {
const [data, setData] = React.useState<{
userId?: string;
userName?: string;
treasureId?: string;
treasureName?: string;
startedAt?: string;
endedAt?: string;
}>();
const handleSubmit = () => {
onSearch?.(data);
};
return (
<Form>
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }} wrap={false}>
<Col flex={1}>
<Input
placeholder="유저 ID를 입력해주세요."
onChange={(e) => setData((prev) => ({ ...prev, userId: e.target.value }))}
/>
</Col>
<Col flex={1}>
<Input
placeholder="유저 닉네임을 입력해주세요."
onChange={(e) => setData((prev) => ({ ...prev, userName: e.target.value }))}
/>
</Col>
<Col flex={1}>
<Input
placeholder="보물 ID를 입력해주세요."
onChange={(e) => setData((prev) => ({ ...prev, treasureId: e.target.value }))}
/>
</Col>
<Col flex={1}>
<Input
placeholder="보물 이름을 입력해주세요."
onChange={(e) => setData((prev) => ({ ...prev, treasureName: e.target.value }))}
/>
</Col>
<Col flex={1}>
<DatePicker.RangePicker
onChange={(value) =>
setData((prev) => ({
...prev,
startedAt: value?.[0]?.format('YYYY-MM-DDT00:00:00'),
endedAt: value?.[1]?.format('YYYY-MM-DDT23:59:59')
}))
}
allowEmpty={[true, true]}
/>
</Col>
<Col style={{ float: 'right' }}>
<Button type="primary" onClick={handleSubmit}>
<SearchOutlined />
</Button>
</Col>
</Row>
</Form>
);
}
|