Skip to content
This repository was archived by the owner on Dec 24, 2022. It is now read-only.

Commit 6d279f9

Browse files
todoform added in Modal and Drawer forms
1 parent 79836ec commit 6d279f9

File tree

6 files changed

+58
-17
lines changed

6 files changed

+58
-17
lines changed

src/forms/todo/drawer.form.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useState } from 'react';
2+
import { Drawer, Button } from 'antd';
3+
import { TodoForm } from '../todo';
4+
5+
export default function DrawerForm() {
6+
const [visible, setVisible] = useState(false);
7+
8+
const showDrawer = () => {
9+
setVisible(true);
10+
};
11+
12+
const onClose = () => {
13+
setVisible(false);
14+
};
15+
16+
return (
17+
<>
18+
<Button type="primary" onClick={showDrawer}>
19+
Open
20+
</Button>
21+
<Drawer
22+
title="Add new Todo"
23+
width={720}
24+
placement="right"
25+
closable={false}
26+
onClose={onClose}
27+
visible={visible}
28+
>
29+
<TodoForm />
30+
</Drawer>
31+
</>
32+
);
33+
}

src/forms/todo/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
export { default as DrawerForm } from './drawer.form';
2+
export { default as CreateForm } from './modal.form';
13
export { TodoForm } from './todo.form';

src/forms/todo/create.form.js renamed to src/forms/todo/modal.form.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Modal, Button } from 'antd';
1+
import React, { useState } from 'react';
2+
import { Drawer, Modal, Button } from 'antd';
3+
import { TodoForm } from '../todo';
24

3-
class App extends React.Component {
5+
export default class App extends React.Component {
46
state = { visible: false };
57

68
showModal = () => {
@@ -35,9 +37,7 @@ class App extends React.Component {
3537
onOk={this.handleOk}
3638
onCancel={this.handleCancel}
3739
>
38-
<p>Some contents...</p>
39-
<p>Some contents...</p>
40-
<p>Some contents...</p>
40+
<TodoForm />
4141
</Modal>
4242
</div>
4343
);

src/forms/todo/todo.form.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ import * as Yup from 'yup';
77
import PropTypes from 'prop-types';
88
import { API } from '../../services';
99
import { FormActionButtons } from '../FormActionButtons';
10+
import { TODO_LABEL } from '../../helpers/';
1011

1112
const { Option } = Select;
1213

1314
const TodoSchema = Yup.object({
1415
title: Yup.string().required('Title required'),
1516
description: Yup.string().required('Description required'),
1617
// dueDate: Yup.number().required('Duedate code required'),
17-
// label: Yup.number().required('Label code required'),
18+
label: Yup.number().required('Label code required'),
1819
});
1920

2021
function TodoForm({ onClose, editMode, editableTodo }) {
@@ -75,7 +76,7 @@ function TodoForm({ onClose, editMode, editableTodo }) {
7576
{({ isSubmitting, setFieldValue }) => (
7677
<Form layout="vertical" hideRequiredMark>
7778
<Row gutter={8}>
78-
<Col span={8}>
79+
<Col span={24}>
7980
<Form.Item
8081
name="title"
8182
label="Title"
@@ -85,7 +86,9 @@ function TodoForm({ onClose, editMode, editableTodo }) {
8586
<Input name="title" placeholder="Title" />
8687
</Form.Item>
8788
</Col>
88-
<Col span={8}>
89+
</Row>
90+
<Row gutter={8}>
91+
<Col span={24}>
8992
<Form.Item
9093
name="description"
9194
label="Description"
@@ -98,8 +101,9 @@ function TodoForm({ onClose, editMode, editableTodo }) {
98101
/>
99102
</Form.Item>
100103
</Col>
101-
102-
<Col span={8}>
104+
</Row>
105+
<Row gutter={8}>
106+
<Col span={24}>
103107
<Form.Item
104108
name="label"
105109
label="Label"

src/helpers/constants.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ export const STATUS = [
77
// { id: 4, key: 'Deleted' },
88
];
99

10-
export const LABEL = {
11-
PERSONAL: 1,
12-
WORK: 2,
13-
SHOPPING: 3,
14-
OTHER: 4,
15-
};
10+
export const TODO_LABEL = [
11+
{ id: 1, key: 'PERSONAL' },
12+
{ id: 2, key: 'WORK' },
13+
{ id: 3, key: 'SHOPPING' },
14+
{ id: 4, key: 'OTHER' },
15+
];

src/pages/Todo.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from 'react';
2-
import { TodoForm } from '../forms/todo';
2+
import { CreateForm, DrawerForm, TodoForm } from '../forms/todo';
33
import { TodoList } from '../components/todo';
44

55
export default function Todo() {
66
return (
77
<div className="main-layout">
8+
<CreateForm />
9+
<DrawerForm />
810
<TodoForm />
911
<TodoList />
1012
</div>

0 commit comments

Comments
 (0)