import React from "react"; import styled from 'styled-components'; import dayjs from 'dayjs'; import PropTypes from "prop-types"; import { Form, Input, Tooltip, Button, Slider } from 'antd'; import DatePicker from "./DatePicker"; import { QuestionCircleOutlined, UnorderedListOutlined } from '@ant-design/icons'; const StyledForm = styled(Form)` padding: 16px; `; const StyledButton = styled(Button)` margin-top: 16px; `; const Submission = ({ onSubmit }) => { const [form] = Form.useForm(); const onFinish = values => { onSubmit(values); form.resetFields(); }; return ( <StyledForm requiredMark={false} form={form} onFinish={onFinish}> <Form.Item name="name" label={ <span> Name <Tooltip title="What's your plan/goal?"> <QuestionCircleOutlined /> </Tooltip> </span> } hasFeedback rules={[{ required: true, message: 'Please input your plan/goal', whitespace: true }]}> <Input placeholder="My ultimate goal" /> </Form.Item> <Form.Item name="start" label={ <span> Start <Tooltip title="Goal's Start Date"> <QuestionCircleOutlined /> </Tooltip> </span> } initialValue={dayjs()} hasFeedback dependencies={['end']} rules={[ { type: 'object', required: true, message: 'Please select start time' }, ({ getFieldValue }) => ({ validator(rule, value) { if (!value || getFieldValue('end') > value) { return Promise.resolve(); } return Promise.reject('The start date should be before end date'); }, })]}> <DatePicker initialValues={dayjs()} className="full-width" /> </Form.Item> <Form.Item name="end" label={ <span> End <Tooltip title="Goal's End Date"> <QuestionCircleOutlined /> </Tooltip> </span> } hasFeedback initialValue={dayjs().add(1, 'y')} dependencies={['start']} rules={[ { type: 'object', required: true, message: 'Please select end time' }, ({ getFieldValue }) => ({ validator(rule, value) { if (!value || getFieldValue('start') < value) { return Promise.resolve(); } return Promise.reject('The end date should be after start date'); }, })]}> <DatePicker initialValues={dayjs().add(1, 'y')} className="full-width" /> </Form.Item> <Form.Item name="priority" style={{ width: '100%' }} hasFeedback label={ <span> Priority <Tooltip title="Goal's Priority"> <QuestionCircleOutlined /> </Tooltip> </span> }> <Slider style={{ width: '85%' }} defaultValue={0.5} max={1.0} min={0.0} marks={false} step={0.01} /> </Form.Item> <Form.Item> <StyledButton size="large" icon={<UnorderedListOutlined />} shape="round" className="centered" type="primary" htmlType="submit"> Add to List </StyledButton> </Form.Item> </StyledForm> ); } Submission.propTypes = { onSubmit: PropTypes.func.isRequired } export default Submission;