Skip to content

Commit 8a58efd

Browse files
mortalYoungmortalYoung
authored
feat(Form): develop Form.Table (#293)
* feat(Form): develop Form.Table * fix(form): improve form item style * feat(form): improve form.table * test(form): update test cases
1 parent ba11f4f commit 8a58efd

File tree

14 files changed

+1013
-0
lines changed

14 files changed

+1013
-0
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"devDependencies": {
7070
"@commitlint/cli": "^17.1.2",
7171
"@commitlint/config-conventional": "^17.1.0",
72+
"@faker-js/faker": "^7.6.0",
7273
"@testing-library/jest-dom": "^5.16.5",
7374
"@testing-library/react": "^13.4.0",
7475
"@testing-library/react-hooks": "^8.0.1",

‎pnpm-lock.yaml‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/form/__tests__/__snapshots__/table.test.tsx.snap‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Form.Table Component Should match snapshot 1`] = `
4+
<DocumentFragment>
5+
<form
6+
class="ant-form ant-form-vertical"
7+
style="height: 400px;"
8+
>
9+
<div
10+
class="ant-table-wrapper dtc-form__table"
11+
>
12+
<div
13+
class="ant-spin-nested-loading"
14+
>
15+
<div
16+
class="ant-spin-container"
17+
>
18+
<div
19+
class="ant-table"
20+
>
21+
<div
22+
class="ant-table-container"
23+
>
24+
<div
25+
class="ant-table-content"
26+
>
27+
<table
28+
style="table-layout: auto;"
29+
>
30+
<colgroup />
31+
<thead
32+
class="ant-table-thead"
33+
>
34+
<tr>
35+
<th
36+
class="ant-table-cell"
37+
>
38+
<span
39+
class="dtc-form__table__column--required"
40+
/>
41+
Name
42+
</th>
43+
</tr>
44+
</thead>
45+
<tbody
46+
class="ant-table-tbody"
47+
>
48+
<tr
49+
class="ant-table-row ant-table-row-level-0"
50+
data-row-key="0"
51+
>
52+
<td
53+
class="ant-table-cell"
54+
>
55+
<div
56+
class="ant-form-item"
57+
>
58+
<div
59+
class="ant-row ant-form-item-row"
60+
>
61+
<div
62+
class="ant-col ant-form-item-control"
63+
>
64+
<div
65+
class="ant-form-item-control-input"
66+
>
67+
<div
68+
class="ant-form-item-control-input-content"
69+
>
70+
<input
71+
class="ant-input"
72+
id="data_0_name"
73+
placeholder="Name"
74+
type="text"
75+
value="dtstack"
76+
/>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</td>
83+
</tr>
84+
</tbody>
85+
</table>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</form>
93+
</DocumentFragment>
94+
`;

‎src/form/__tests__/table.test.tsx‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import { Input } from 'antd';
4+
import Form from '../';
5+
6+
describe('Test Form.Table Component', () => {
7+
it('Should match snapshot', () => {
8+
const { asFragment } = render(
9+
<Form
10+
layout="vertical"
11+
style={{ height: 400 }}
12+
initialValues={{
13+
data: [{ name: 'dtstack' }],
14+
}}
15+
>
16+
<Form.Table
17+
name="data"
18+
columns={[
19+
{
20+
key: 'name',
21+
title: 'Name',
22+
dataIndex: 'name',
23+
required: true,
24+
render: () => <Input placeholder="Name" />,
25+
},
26+
]}
27+
/>
28+
</Form>
29+
);
30+
31+
expect(asFragment()).toMatchSnapshot();
32+
});
33+
34+
it('Should support dependencies', () => {
35+
const { getByTestId } = render(
36+
<Form
37+
layout="vertical"
38+
style={{ height: 400 }}
39+
initialValues={{
40+
data: [
41+
{ name: 'dtstack', age: 12 },
42+
{ name: 'mmm', age: 10 },
43+
],
44+
}}
45+
>
46+
<Form.Table
47+
name="data"
48+
columns={[
49+
{
50+
key: 'name',
51+
title: 'Name',
52+
dataIndex: 'name',
53+
required: true,
54+
render: () => <Input placeholder="Name" />,
55+
},
56+
{
57+
key: 'age',
58+
title: 'Age',
59+
dataIndex: 'age',
60+
dependencies: ([name]) => ['data', name, 'name'],
61+
render: ({ name }, _, form) => {
62+
return form?.getFieldValue?.(['data', name, 'name']) ===
63+
'dtstack' ? (
64+
<span data-testid={`age-${name}`}>--</span>
65+
) : (
66+
<Input data-testid={`age-${name}`} placeholder="age" />
67+
);
68+
},
69+
},
70+
]}
71+
/>
72+
</Form>
73+
);
74+
75+
expect(getByTestId('age-0').innerHTML).toBe('--');
76+
expect(getByTestId('age-1').innerHTML).not.toBe('--');
77+
});
78+
79+
it('Should support multiple dependencies', () => {
80+
const { getByTestId } = render(
81+
<Form
82+
layout="vertical"
83+
style={{ height: 400 }}
84+
initialValues={{
85+
data: [
86+
{ name: 'dtstack', age: 12 },
87+
{ name: 'dtstack', age: 8 },
88+
],
89+
}}
90+
>
91+
<Form.Table
92+
name="data"
93+
columns={[
94+
{
95+
key: 'name',
96+
title: 'Name',
97+
dataIndex: 'name',
98+
required: true,
99+
render: () => <Input placeholder="Name" />,
100+
},
101+
{
102+
key: 'age',
103+
title: 'Age',
104+
dataIndex: 'age',
105+
render: () => <Input placeholder="Age" />,
106+
},
107+
{
108+
key: 'test',
109+
title: 'test',
110+
dependencies: ['name', 'age'],
111+
render: ({ name }, _, form) => {
112+
return (
113+
<span data-testid={`test-${name}`}>
114+
{form?.getFieldValue?.(['data', name, 'name']) ===
115+
'dtstack' &&
116+
form?.getFieldValue?.(['data', name, 'age']) > 10
117+
? 'larger'
118+
: 'smaller'}
119+
</span>
120+
);
121+
},
122+
},
123+
]}
124+
/>
125+
</Form>
126+
);
127+
128+
expect(getByTestId('test-0').innerHTML).toBe('larger');
129+
expect(getByTestId('test-1').innerHTML).toBe('smaller');
130+
});
131+
132+
it("Should render required on columns' title", () => {
133+
const { container } = render(
134+
<Form
135+
layout="vertical"
136+
style={{ height: 400 }}
137+
initialValues={{
138+
data: [{ name: 'dtstack' }],
139+
}}
140+
>
141+
<Form.Table
142+
name="data"
143+
columns={[
144+
{
145+
key: 'name',
146+
title: 'Name',
147+
dataIndex: 'name',
148+
required: true,
149+
render: () => <Input placeholder="Name" />,
150+
},
151+
{
152+
key: 'age',
153+
title: 'Age',
154+
dataIndex: 'age',
155+
render: () => <Input placeholder="age" />,
156+
},
157+
{
158+
key: 'sex',
159+
title: 'Sex',
160+
dataIndex: 'sex',
161+
rules: [{ required: true }],
162+
render: () => <Input placeholder="sex" />,
163+
},
164+
{
165+
key: 'sex',
166+
title: 'Sex',
167+
dataIndex: 'sex',
168+
rules: [
169+
({ getFieldValue }, [name]) => ({
170+
required: getFieldValue(['data', name, 'name']) === 'dtstack',
171+
}),
172+
],
173+
render: () => <Input placeholder="sex" />,
174+
},
175+
]}
176+
/>
177+
</Form>
178+
);
179+
180+
const rows = container.querySelectorAll('th.ant-table-cell');
181+
expect(rows.length).toBe(4);
182+
expect(rows[0].querySelector('.dtc-form__table__column--required')).not.toBeNull();
183+
expect(rows[1].querySelector('.dtc-form__table__column--required')).toBeNull();
184+
expect(rows[2].querySelector('.dtc-form__table__column--required')).not.toBeNull();
185+
expect(rows[3].querySelector('.dtc-form__table__column--required')).toBeNull();
186+
});
187+
});

0 commit comments

Comments
 (0)