Skip to content

Commit 480dcd0

Browse files
zombieJzombieJ
authored
feat: v5 compatible v3 form (#152)
* chore: init form * chore: form part less * chore: more form style * chore: motion? * chore: rm motion * chore: fix lint * chore: update deps * test: update snapshot
1 parent 8b633fd commit 480dcd0

35 files changed

+2839
-18
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@
2525
.umi-production
2626
.umi-test
2727
.env.local
28+
29+
~*

‎docs/demo/Form.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Form
2+
3+
<code src="../examples/Form.tsx" />

‎docs/examples/Form.tsx‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
import React from 'react';
2+
import {
3+
Row,
4+
Col,
5+
Input,
6+
Select,
7+
DatePicker,
8+
Button,
9+
TimePicker,
10+
Cascader,
11+
InputNumber,
12+
} from 'antd';
13+
import { Icon, Form } from '../../src';
14+
15+
const { Option } = Select;
16+
17+
const LAYOUT = {
18+
ROW: { gutter: 24 },
19+
COL: { span: 8 },
20+
NORMAL: {
21+
labelCol: { span: 3 },
22+
wrapperCol: { span: 21 },
23+
},
24+
WIDTH: {
25+
labelCol: { span: 6 },
26+
wrapperCol: { span: 18 },
27+
},
28+
};
29+
30+
const { MonthPicker, RangePicker } = DatePicker;
31+
32+
const formItemLayout = {
33+
labelCol: {
34+
xs: { span: 24 },
35+
sm: { span: 5 },
36+
},
37+
wrapperCol: {
38+
xs: { span: 24 },
39+
sm: { span: 12 },
40+
},
41+
};
42+
43+
const config = {
44+
rules: [{ type: 'object', required: true, message: 'Please select time!' }],
45+
};
46+
const rangeConfig = {
47+
rules: [{ type: 'array', required: true, message: 'Please select time!' }],
48+
};
49+
50+
class FormVertical extends React.Component<any> {
51+
onSubmit = async event => {
52+
event.preventDefault();
53+
const { validateFields } = this.props.form;
54+
const values = await validateFields();
55+
console.log(values);
56+
};
57+
58+
render() {
59+
const { getFieldDecorator } = this.props.form;
60+
return (
61+
<div>
62+
<Form layout="vertical">
63+
<Row {...LAYOUT.ROW}>
64+
<Col {...LAYOUT.COL}>
65+
<Form.Item label="input">
66+
{getFieldDecorator('input')(<Input placeholder="请输入" />)}
67+
</Form.Item>
68+
</Col>
69+
<Col {...LAYOUT.COL}>
70+
<Form.Item label="select">
71+
{getFieldDecorator('select')(
72+
<Select defaultValue="1">
73+
<Option value="1">Option 1</Option>
74+
<Option value="2">Option 2</Option>
75+
<Option value="3">Option 3</Option>
76+
</Select>,
77+
)}
78+
</Form.Item>
79+
</Col>
80+
<Col {...LAYOUT.COL}>
81+
<Form.Item label="input2">
82+
{getFieldDecorator('input2')(<Input placeholder="请输入" />)}
83+
</Form.Item>
84+
</Col>
85+
</Row>
86+
</Form>
87+
<div
88+
style={{
89+
maxWidth: 800,
90+
}}
91+
>
92+
<Form layout="inline" onSubmit={this.onSubmit}>
93+
<Form.Item hasFeedback validateStatus="warning">
94+
{getFieldDecorator('username', {
95+
rules: [{ required: true, message: 'Please input your username!' }],
96+
})(
97+
<Input
98+
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
99+
placeholder="Username"
100+
/>,
101+
)}
102+
</Form.Item>
103+
<Form.Item>
104+
{getFieldDecorator('password', {
105+
rules: [{ required: true, message: 'Please input your Password!' }],
106+
})(
107+
<Input
108+
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
109+
type="password"
110+
placeholder="Password"
111+
/>,
112+
)}
113+
</Form.Item>
114+
<Form.Item>
115+
<Button type="primary" htmlType="submit">
116+
Log in
117+
</Button>
118+
</Form.Item>
119+
</Form>
120+
<Form layout="horizontal">
121+
<Form.Item label="Field A">
122+
<Input placeholder="input placeholder" />
123+
</Form.Item>
124+
<Form.Item label="Field B">
125+
<Input placeholder="input placeholder" />
126+
</Form.Item>
127+
</Form>
128+
<Form layout="vertical">
129+
<Form.Item label="Field A">
130+
<Input placeholder="input placeholder" />
131+
</Form.Item>
132+
<Form.Item label="Field B">
133+
<Input placeholder="input placeholder" />
134+
</Form.Item>
135+
</Form>
136+
<Form layout="inline">
137+
<Form.Item label="Field A">
138+
<Input placeholder="input placeholder" />
139+
</Form.Item>
140+
<Form.Item label="Field B">
141+
<Input placeholder="input placeholder" />
142+
</Form.Item>
143+
</Form>
144+
<Form {...formItemLayout}>
145+
<Form.Item
146+
label="Fail"
147+
validateStatus="error"
148+
help="Should be combination of numbers & alphabets"
149+
>
150+
<Input placeholder="unavailable choice" id="error" />
151+
</Form.Item>
152+
153+
<Form.Item label="Warning" validateStatus="warning">
154+
<Input placeholder="Warning" id="warning" />
155+
</Form.Item>
156+
157+
<Form.Item
158+
label="Validating"
159+
hasFeedback
160+
validateStatus="validating"
161+
help="The information is being validated..."
162+
>
163+
<Input placeholder="I'm the content is being validated" id="validating" />
164+
</Form.Item>
165+
166+
<Form.Item label="Success" hasFeedback validateStatus="success">
167+
<Input placeholder="I'm the content" id="success" />
168+
</Form.Item>
169+
170+
<Form.Item label="Warning" hasFeedback validateStatus="warning">
171+
<Input placeholder="Warning" id="warning2" />
172+
</Form.Item>
173+
174+
<Form.Item
175+
label="Fail"
176+
hasFeedback
177+
validateStatus="error"
178+
help="Should be combination of numbers & alphabets"
179+
>
180+
<Input placeholder="unavailable choice" id="error2" />
181+
</Form.Item>
182+
183+
<Form.Item label="Success" hasFeedback validateStatus="success">
184+
<DatePicker style={{ width: '100%' }} />
185+
</Form.Item>
186+
187+
<Form.Item label="Warning" hasFeedback validateStatus="warning">
188+
<TimePicker style={{ width: '100%' }} />
189+
</Form.Item>
190+
191+
<Form.Item label="Error" hasFeedback validateStatus="error">
192+
<Select defaultValue="1">
193+
<Option value="1">Option 1</Option>
194+
<Option value="2">Option 2</Option>
195+
<Option value="3">Option 3</Option>
196+
</Select>
197+
</Form.Item>
198+
199+
<Form.Item
200+
label="Validating"
201+
hasFeedback
202+
validateStatus="validating"
203+
help="The information is being validated..."
204+
>
205+
<Cascader defaultValue={['1']} options={[]} />
206+
</Form.Item>
207+
208+
<Form.Item label="inline" style={{ marginBottom: 0 }}>
209+
<Form.Item
210+
validateStatus="error"
211+
help="Please select the correct date"
212+
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
213+
>
214+
<DatePicker />
215+
</Form.Item>
216+
<span
217+
style={{
218+
display: 'inline-block',
219+
width: '24px',
220+
textAlign: 'center',
221+
}}
222+
>
223+
-
224+
</span>
225+
<Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
226+
<DatePicker />
227+
</Form.Item>
228+
</Form.Item>
229+
230+
<Form.Item label="Success" hasFeedback validateStatus="success">
231+
<InputNumber style={{ width: '100%' }} />
232+
</Form.Item>
233+
234+
<Form.Item label="Success" hasFeedback validateStatus="success">
235+
<Input allowClear placeholder="with allowClear" />
236+
</Form.Item>
237+
238+
<Form.Item label="Warning" hasFeedback validateStatus="warning">
239+
<Input.Password placeholder="with input password" />
240+
</Form.Item>
241+
242+
<Form.Item label="Error" hasFeedback validateStatus="error">
243+
<Input.Password allowClear placeholder="with input password and allowClear" />
244+
</Form.Item>
245+
<Form.Item name="date-picker" label="DatePicker" {...config}>
246+
<DatePicker />
247+
</Form.Item>
248+
<Form.Item name="date-time-picker" label="DatePicker[showTime]" {...config}>
249+
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
250+
</Form.Item>
251+
<Form.Item name="month-picker" label="MonthPicker" {...config}>
252+
<MonthPicker />
253+
</Form.Item>
254+
<Form.Item name="range-picker" label="RangePicker" {...rangeConfig}>
255+
<RangePicker />
256+
</Form.Item>
257+
<Form.Item name="range-time-picker" label="RangePicker[showTime]" {...rangeConfig}>
258+
<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
259+
</Form.Item>
260+
<Form.Item name="time-picker" label="TimePicker" {...config}>
261+
<TimePicker />
262+
</Form.Item>
263+
<Form.Item
264+
wrapperCol={{
265+
xs: { span: 24, offset: 0 },
266+
sm: { span: 16, offset: 8 },
267+
}}
268+
>
269+
<Button type="primary" htmlType="submit">
270+
Submit
271+
</Button>
272+
</Form.Item>
273+
</Form>
274+
</div>
275+
</div>
276+
);
277+
}
278+
}
279+
export default Form.create()(FormVertical);

‎package.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,15 @@
4141
"license": "MIT",
4242
"dependencies": {
4343
"classnames": "^2.2.6",
44-
"dayjs": "^1.11.4"
44+
"dayjs": "^1.11.4",
45+
"lodash.camelcase": "^4.3.0",
46+
"lodash.upperfirst": "^4.3.1",
47+
"rc-animate": "^3.1.1",
48+
"rc-form": "^2.4.12",
49+
"rc-util": "^5.24.5"
4550
},
4651
"peerDependencies": {
47-
"antd": "^5.0.0",
52+
"antd": "^5.0.1",
4853
"react": ">=16.0.0",
4954
"react-dom": ">=16.0.0"
5055
},
@@ -59,7 +64,7 @@
5964
"@types/react": "^18.0.0",
6065
"@types/react-dom": "^18.0.0",
6166
"@umijs/fabric": "^2.5.2",
62-
"antd": "^5.0.0",
67+
"antd": "^5.0.1",
6368
"dumi": "^1.1.0",
6469
"eslint": "^7.18.0",
6570
"father": "^4.0.0-rc.8",

‎src/CompatibleConsumer.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ConfigProvider } from 'antd';
2+
import type { ConfigConsumerProps } from 'antd/lib/config-provider';
3+
4+
export { ConfigConsumerProps };
5+
6+
const MergedConfigConsumer = ConfigProvider.ConfigContext.Consumer;
7+
8+
export default MergedConfigConsumer;

‎src/_util/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
2+
3+
export const tuple = <T extends string[]>(...args: T) => args;

‎src/_util/upgradeMessage.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import warning from './warning';
2+
3+
export default (component: string) =>
4+
warning(
5+
false,
6+
component,
7+
`The legacy component has been deprecated, and ant design 4.0 now released! Please follow https://ant.design/components/${component.toLowerCase()}${
8+
component === 'Mention' ? 's' : ''
9+
} to upgrade.`,
10+
);

‎src/_util/warning.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import warning from 'rc-util/lib/warning';
2+
3+
export default (valid: boolean, component: string, message: string): void => {
4+
warning(valid, `[antd-compatible: ${component}] ${message}`);
5+
};

‎src/comment/style/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as React from 'react';
44
import type { CSSInterpolation } from '@ant-design/cssinjs';
55
import { useStyleRegister } from '@ant-design/cssinjs';
66
import { theme as antdTheme, ConfigProvider } from 'antd';
7-
import type { GlobalToken } from 'antd/es/theme/interface';
7+
import type { GlobalToken } from 'antd/lib/theme/interface';
88
import { resetComponent } from 'antd/lib/style';
99

1010
interface MergedToken extends GlobalToken {
@@ -32,7 +32,7 @@ const genSharedButtonStyle = (token: MergedToken): CSSInterpolation => {
3232

3333
return {
3434
[componentCls]: {
35-
...resetComponent(token),
35+
...resetComponent(token) as any,
3636

3737
position: 'relative',
3838
backgroundColor: colorBgContainer,

0 commit comments

Comments
 (0)