Skip to content

Commit af96748

Browse files
author
zsen.liao
committed
[update] used arco.design form component, add field rules
1 parent 6e61dd2 commit af96748

File tree

3 files changed

+173
-171
lines changed

3 files changed

+173
-171
lines changed

‎components/table_form.js

Lines changed: 152 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useState, useEffect, useRef, forwardRef } from 'react';
2-
import { Button, Space, Input, Card, Popconfirm } from '@arco-design/web-react';
2+
import { Button, Space, Input, Card, Popconfirm, Form, Checkbox, Select } from '@arco-design/web-react';
33
import classNames from 'classnames';
4-
import SelectInput from './select_input';
54
import fieldTypes from '../data/filed_typs';
65

76
/**
@@ -11,7 +10,7 @@ import fieldTypes from '../data/filed_typs';
1110
* @param ref - This is a reference to the form element.
1211
* @returns A React component
1312
*/
14-
function TableFormItem(props, ref) {
13+
function TableFormItem(props) {
1514
/**
1615
* If the index of the current field is greater than 0, then swap the current field with the field
1716
* above it
@@ -48,9 +47,11 @@ function TableFormItem(props, ref) {
4847
});
4948
};
5049

50+
const { field } = props;
51+
const index = `A${props.index}`;
52+
5153
return (
52-
<form
53-
ref={ref}
54+
<Card
5455
className={classNames({
5556
dropping:
5657
props.draggingId &&
@@ -77,106 +78,87 @@ function TableFormItem(props, ref) {
7778
props.onDrop(props.field.id);
7879
}}
7980
>
80-
<Card>
81-
<input
82-
type="hidden"
83-
name="id"
84-
defaultValue={props.field.id || ''}
85-
/>
86-
<Space direction="vertical">
87-
<Space>
88-
<label className="table-form-label">Name:</label>
89-
<Input
90-
type="text"
91-
name="name"
92-
defaultValue={props.field.name || ''}
93-
/>
94-
<label className="table-form-label">Type:</label>
95-
<SelectInput
96-
defaultValue={props.field.type || ''}
97-
options={fieldTypes}
98-
width={150}
99-
name="type"
100-
></SelectInput>
101-
</Space>
102-
<Space>
103-
<label className="table-form-label">Note:</label>
81+
<Form.Item hidden field={`${index}.id`} initialValue={field.id}>
82+
<Input />
83+
</Form.Item>
84+
<Space direction="vertical" style={{ width: '100%' }}>
85+
<Space className="table-form-item">
86+
<Form.Item
87+
label="Name"
88+
field={`${index}.name`}
89+
initialValue={field.name}
90+
rules={[{ required: true, message: 'Please enter field name' }]}
91+
>
92+
<Input allowClear />
93+
</Form.Item>
94+
<Form.Item
95+
label="Type"
96+
field={`${index}.type`}
97+
initialValue={field.type}
98+
rules={[{ required: true, message: 'Please choose field type' }]}
99+
>
100+
<Select style={{ width: '100%' }} allowCreate>
101+
{fieldTypes.map(item => (
102+
<Select.Option key={item} value={item}>
103+
{item}
104+
</Select.Option>
105+
))}
106+
</Select>
107+
</Form.Item>
108+
</Space>
109+
<Space className="table-form-item">
110+
<Form.Item label="Comment" field={`${index}.note`} initialValue={field.note || ''}>
111+
<Input allowClear placeholder="note" />
112+
</Form.Item>
113+
<Form.Item label="Default" field={`${index}.dbdefault`} initialValue={field.dbdefault || ''}>
114+
<Input allowClear placeholder="default" />
115+
</Form.Item>
116+
</Space>
117+
<Space className="table-form-item">
118+
<Form.Item noStyle field={`${index}.pk`} initialValue={field.pk}>
119+
<Checkbox defaultChecked={field.pk}>Primary</Checkbox>
120+
</Form.Item>
121+
<Form.Item noStyle field={`${index}.unique`} initialValue={field.unique}>
122+
<Checkbox defaultChecked={field.unique}>Unique</Checkbox>
123+
</Form.Item>
124+
<Form.Item noStyle field={`${index}.not_null`} initialValue={field.not_null}>
125+
<Checkbox defaultChecked={field.not_null}>Not Null</Checkbox>
126+
</Form.Item>
127+
<Form.Item noStyle field={`${index}.increment`} initialValue={field.increment}>
128+
<Checkbox defaultChecked={field.increment}>Increment</Checkbox>
129+
</Form.Item>
130+
</Space>
104131

105-
<Input
106-
type="text"
107-
name="note"
108-
placeholder="note"
109-
defaultValue={props.field.note || ''}
110-
/>
111-
<label className="table-form-label">Default:</label>
112-
<Input
113-
type="text"
114-
name="dbdefault"
115-
placeholder="default"
116-
defaultValue={props.field.dbdefault || ''}
117-
/>
118-
</Space>
119-
<Space
120-
style={{
121-
width: '100%',
122-
justifyContent: 'space-between',
132+
<Space className="table-form-item">
133+
<Button onClick={moveUp} type="primary" size="small" long>
134+
↑ Move up
135+
</Button>
136+
<Button onClick={moveDown} type="primary" size="small" long>
137+
↓ Move down
138+
</Button>
139+
140+
<Popconfirm
141+
title="Are you sure delete this field?"
142+
onOk={() => {
143+
props.removeItem(props.field.id);
123144
}}
145+
okText="Yes"
146+
cancelText="No"
124147
>
125-
<label>
126-
Primary&nbsp;
127-
<input
128-
type="checkbox"
129-
name="pk"
130-
defaultChecked={props.field.pk || false}
131-
/>
132-
</label>
133-
<label>
134-
Unique&nbsp;
135-
<input
136-
type="checkbox"
137-
name="unique"
138-
defaultChecked={props.field.unique || false}
139-
/>
140-
</label>
141-
<label>
142-
Not Null&nbsp;
143-
<input
144-
type="checkbox"
145-
name="not_null"
146-
defaultChecked={props.field.not_null || false}
147-
/>
148-
</label>
149-
<label>
150-
Increment&nbsp;
151-
<input
152-
type="checkbox"
153-
name="increment"
154-
defaultChecked={props.field.increment || false}
155-
/>
156-
</label>
157-
</Space>
158-
<Space>
159-
<Button onClick={moveUp} type="primary">
160-
↑ Move up
161-
</Button>
162-
<Button onClick={moveDown} type="primary">
163-
↓ Move down
164-
</Button>
165-
166-
<Popconfirm
167-
title="Are you sure delete this field?"
168-
onOk={() => {
169-
props.removeItem(props.field.id);
170-
}}
171-
okText="Yes"
172-
cancelText="No"
173-
>
174-
<Button status="danger">Remove field</Button>
175-
</Popconfirm>
176-
</Space>
148+
<Button status="danger" size="small" long>Remove field</Button>
149+
</Popconfirm>
150+
<Button
151+
onClick={() => props.addItem(props.index)}
152+
type="outline"
153+
status="success"
154+
size="small"
155+
long
156+
>
157+
+ Add field after
158+
</Button>
177159
</Space>
178-
</Card>
179-
</form>
160+
</Space>
161+
</Card>
180162
);
181163
}
182164

@@ -191,48 +173,37 @@ const TableRefFormItem = forwardRef(TableFormItem);
191173
export default function TableForm(props) {
192174
const [fields, setFields] = useState(props.table.fields);
193175
const [name, setName] = useState(props.table.name);
194-
const forms = useRef([]);
176+
const [form] = Form.useForm();
195177

196178
useEffect(() => {
197179
setFields(props.table.fields);
198180
}, [props.table]);
199181

200-
useEffect(() => {
201-
forms.current = forms.current.slice(0, fields.length);
202-
}, [fields]);
203-
204-
const save = () => {
205-
const updatedFields = forms.current.map(form => {
206-
return [...new FormData(form).entries()].reduce((prev, cur) => {
207-
prev[cur[0]] = cur[1];
208-
return prev;
209-
}, {});
210-
});
211-
const table = { ...props.table, name, fields: updatedFields };
182+
const save = (values) => {
183+
const table = { ...props.table, name, fields: Object.values(values) };
212184
delete table.x;
213185
delete table.y;
186+
187+
console.log(table);
214188
props.updateTable(table);
215189
props.setCommitting(false);
216190
};
217191

218192
useEffect(() => {
219193
if (props.committing) {
220-
save();
194+
form.submit();
221195
}
222196
}, [props.committing]);
223197

224-
const addItem = () => {
225-
setFields(state => {
226-
return [
227-
...state,
228-
{
229-
id: window.crypto.randomUUID(),
230-
name: 'new item' + state.length,
231-
type: 'INTEGER',
232-
unique: false,
233-
},
234-
];
198+
const addItem = (index) => {
199+
const newState = [...fields];
200+
newState.splice(index + 1, 0, {
201+
id: window.crypto.randomUUID(),
202+
name: 'new item' + newState.length,
203+
type: '',
204+
unique: false,
235205
});
206+
setFields(newState);
236207
};
237208

238209
const removeItem = id => {
@@ -302,7 +273,7 @@ export default function TableForm(props) {
302273
};
303274

304275
return (
305-
<Space direction="vertical">
276+
<Space direction="vertical" style={{ width: '100%' }}>
306277
<div
307278
className={droppingId === 'root' ? 'dropping' : ''}
308279
onDragOver={e => {
@@ -312,51 +283,62 @@ export default function TableForm(props) {
312283
onDrop={e => {
313284
unShiftFields();
314285
}}
286+
style={{ display: 'flex', alignItems: 'center' }}
315287
>
316-
<Space>
317-
<label>Table Name:</label>
318-
<Input
319-
defaultValue={props.table.name}
320-
type="text"
321-
onChange={value => {
322-
setName(value);
323-
}}
324-
></Input>
325-
<Popconfirm
326-
position="br"
327-
title="Are you sure you want to delete this table?"
328-
okText="Yes"
329-
cancelText="No"
330-
onOk={() => {
331-
props.removeTable(props.table.id);
332-
}}
333-
>
334-
<Button type="outline" status="warning">
335-
Delete table
336-
</Button>
337-
</Popconfirm>
338-
</Space>
339-
</div>
340-
{fields.map((field, index) => (
341-
<TableRefFormItem
342-
field={field}
343-
key={field.id}
344-
index={index}
345-
ref={dom => (forms.current[index] = dom)}
346-
removeItem={removeItem}
347-
setFields={setFields}
348-
onDragStart={onDragStart}
349-
onDrop={onDrop}
350-
draggingIndex={draggingIndex}
351-
draggingId={draggingId}
352-
droppingId={droppingId}
353-
setDroppingId={setDroppingId}
354-
setDraggingId={setDraggingId}
288+
<label>Table Name:</label>
289+
<Input
290+
defaultValue={props.table.name}
291+
type="text"
292+
onChange={value => {
293+
setName(value);
294+
}}
295+
style={{ width: 200, margin: '0 8px' }}
355296
/>
356-
))}
357-
<Button onClick={addItem} type="outline" long>
358-
+ Add field
359-
</Button>
297+
<Popconfirm
298+
position="br"
299+
title="Are you sure you want to delete this table?"
300+
okText="Yes"
301+
cancelText="No"
302+
onOk={() => {
303+
props.removeTable(props.table.id);
304+
}}
305+
>
306+
<Button type="outline" status="warning">
307+
Delete table
308+
</Button>
309+
</Popconfirm>
310+
</div>
311+
312+
<Form
313+
onSubmit={save}
314+
form={form}
315+
labelAlign="left"
316+
requiredSymbol={false}
317+
labelCol={{ span: 6 }}
318+
wrapperCol={{ span: 18 }}
319+
onValuesChange={(changedValues, allValues) => {
320+
if (!props.formChange) props.setFormChange(true);
321+
}}
322+
scrollToFirstError
323+
>
324+
{fields.map((field, index) => (
325+
<TableFormItem
326+
field={field}
327+
key={field.id}
328+
index={index}
329+
addItem={addItem}
330+
removeItem={removeItem}
331+
setFields={setFields}
332+
onDragStart={onDragStart}
333+
onDrop={onDrop}
334+
draggingIndex={draggingIndex}
335+
draggingId={draggingId}
336+
droppingId={droppingId}
337+
setDroppingId={setDroppingId}
338+
setDraggingId={setDraggingId}
339+
/>
340+
))}
341+
</Form>
360342
</Space>
361343
);
362344
}

0 commit comments

Comments
 (0)