Skip to content

Commit 3a2977a

Browse files
wangxueliangwangxueliang
committed
feat: update form
1 parent 300fc9a commit 3a2977a

17 files changed

+55
-43
lines changed

‎components/form/Form.jsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ import createFormField from '../vc-form/src/createFormField';
88
import FormItem from './FormItem';
99
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
1010
import { initDefaultProps } from '../_util/props-util';
11+
import { ConfigConsumerProps } from '../config-provider';
1112

1213
export const FormCreateOption = {
1314
onFieldsChange: PropTypes.func,
1415
onValuesChange: PropTypes.func,
1516
mapPropsToFields: PropTypes.func,
1617
validateMessages: PropTypes.any,
1718
withRef: PropTypes.bool,
19+
name: PropTypes.string,
1820
};
1921

2022
// function create
@@ -119,15 +121,11 @@ export const ValidationRule = {
119121
const Form = {
120122
name: 'AForm',
121123
props: initDefaultProps(FormProps, {
122-
prefixCls: 'ant-form',
123124
layout: 'horizontal',
124125
hideRequiredMark: false,
125126
}),
126-
127127
Item: FormItem,
128-
129128
createFormField: createFormField,
130-
131129
create: (options = {}) => {
132130
return createDOMForm({
133131
fieldNameProp: 'id',
@@ -166,6 +164,9 @@ const Form = {
166164
: () => {},
167165
};
168166
},
167+
inject: {
168+
configProvider: { default: () => ({}) },
169+
},
169170
watch: {
170171
form() {
171172
this.$forceUpdate();
@@ -196,14 +197,16 @@ const Form = {
196197

197198
render() {
198199
const {
199-
prefixCls,
200+
prefixCls: customizePrefixCls,
200201
hideRequiredMark,
201202
layout,
202203
onSubmit,
203204
$slots,
204205
autoFormCreate,
205206
options = {},
206207
} = this;
208+
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
209+
const prefixCls = getPrefixCls('form', customizePrefixCls);
207210

208211
const formClassName = classNames(prefixCls, {
209212
[`${prefixCls}-horizontal`]: layout === 'horizontal',

‎components/form/FormItem.jsx

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import getTransitionProps from '../_util/getTransitionProps';
1818
import BaseMixin from '../_util/BaseMixin';
1919
import { cloneElement, cloneVNodes } from '../_util/vnode';
2020
import Icon from '../icon';
21+
import { ConfigConsumerProps } from '../config-provider';
2122

2223
function noop() {}
2324
export const FormItemProps = {
@@ -65,6 +66,7 @@ export default {
6566
FormProps: { default: () => ({}) },
6667
decoratorFormProps: { default: () => ({}) },
6768
collectFormItemContext: { default: () => noop },
69+
configProvider: { default: () => ({}) },
6870
},
6971
data() {
7072
return { helpShow: false };
@@ -197,8 +199,7 @@ export default {
197199
}
198200
},
199201

200-
renderHelp() {
201-
const prefixCls = this.prefixCls;
202+
renderHelp(prefixCls) {
202203
const help = this.getHelpMessage();
203204
const children = help ? (
204205
<div class={`${prefixCls}-explain`} key="help">
@@ -219,8 +220,7 @@ export default {
219220
);
220221
},
221222

222-
renderExtra() {
223-
const { prefixCls } = this;
223+
renderExtra(prefixCls) {
224224
const extra = getComponentFromProp(this, 'extra');
225225
return extra ? <div class={`${prefixCls}-extra`}>{extra}</div> : null;
226226
},
@@ -244,17 +244,17 @@ export default {
244244
return '';
245245
},
246246

247-
renderValidateWrapper(c1, c2, c3) {
247+
renderValidateWrapper(prefixCls, c1, c2, c3) {
248248
const props = this.$props;
249249
const onlyControl = this.getOnlyControl;
250250
const validateStatus =
251251
props.validateStatus === undefined && onlyControl
252252
? this.getValidateStatus()
253253
: props.validateStatus;
254254

255-
let classes = `${props.prefixCls}-item-control`;
255+
let classes = `${prefixCls}-item-control`;
256256
if (validateStatus) {
257-
classes = classNames(`${props.prefixCls}-item-control`, {
257+
classes = classNames(`${prefixCls}-item-control`, {
258258
'has-feedback': props.hasFeedback || validateStatus === 'validating',
259259
'has-success': validateStatus === 'success',
260260
'has-warning': validateStatus === 'warning',
@@ -282,13 +282,13 @@ export default {
282282
}
283283
const icon =
284284
props.hasFeedback && iconType ? (
285-
<span class={`${props.prefixCls}-item-children-icon`}>
285+
<span class={`${prefixCls}-item-children-icon`}>
286286
<Icon type={iconType} theme={iconType === 'loading' ? 'outlined' : 'filled'} />
287287
</span>
288288
) : null;
289289
return (
290290
<div class={classes}>
291-
<span class={`${props.prefixCls}-item-children`}>
291+
<span class={`${prefixCls}-item-children`}>
292292
{c1}
293293
{icon}
294294
</span>
@@ -298,8 +298,8 @@ export default {
298298
);
299299
},
300300

301-
renderWrapper(children) {
302-
const { prefixCls, wrapperCol = {} } = this;
301+
renderWrapper(prefixCls, children) {
302+
const { wrapperCol = {} } = this;
303303
const { class: cls, style, id, on, ...restProps } = wrapperCol;
304304
const className = classNames(`${prefixCls}-item-control-wrapper`, cls);
305305
const colProps = {
@@ -353,8 +353,8 @@ export default {
353353
}
354354
},
355355

356-
renderLabel() {
357-
const { prefixCls, labelCol = {}, colon, id } = this;
356+
renderLabel(prefixCls) {
357+
const { labelCol = {}, colon, id } = this;
358358
const label = getComponentFromProp(this, 'label');
359359
const required = this.isRequired();
360360
const {
@@ -398,21 +398,29 @@ export default {
398398
</Col>
399399
) : null;
400400
},
401-
renderChildren() {
401+
renderChildren(prefixCls) {
402402
return [
403-
this.renderLabel(),
403+
this.renderLabel(prefixCls),
404404
this.renderWrapper(
405-
this.renderValidateWrapper(this.slotDefault, this.renderHelp(), this.renderExtra()),
405+
prefixCls,
406+
this.renderValidateWrapper(
407+
prefixCls,
408+
this.slotDefault,
409+
this.renderHelp(prefixCls),
410+
this.renderExtra(prefixCls)
411+
),
406412
),
407413
];
408414
},
409-
renderFormItem(children) {
410-
const props = this.$props;
411-
const prefixCls = props.prefixCls;
415+
renderFormItem() {
416+
const { prefixCls: customizePrefixCls, colon } = this.$props;
417+
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
418+
const prefixCls = getPrefixCls('form', customizePrefixCls);
419+
const children = this.renderChildren(prefixCls);
412420
const itemClassName = {
413421
[`${prefixCls}-item`]: true,
414422
[`${prefixCls}-item-with-help`]: this.helpShow,
415-
[`${prefixCls}-item-no-colon`]: !props.colon,
423+
[`${prefixCls}-item-no-colon`]: !colon,
416424
};
417425

418426
return <Row class={classNames(itemClassName)}>{children}</Row>;
@@ -478,8 +486,6 @@ export default {
478486
} else {
479487
this.slotDefault = child;
480488
}
481-
482-
const children = this.renderChildren();
483-
return this.renderFormItem(children);
489+
return this.renderFormItem();
484490
},
485491
};

‎components/form/demo/advanced-search.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default {
7777
data () {
7878
return {
7979
expand: false,
80-
form: this.$form.createForm(this),
80+
form: this.$form.createForm(this, { name: 'advanced_search' }),
8181
};
8282
},
8383
computed: {

‎components/form/demo/coordinated.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default {
6565
data () {
6666
return {
6767
formLayout: 'horizontal',
68-
form: this.$form.createForm(this),
68+
form: this.$form.createForm(this, { name: 'coordinated' }),
6969
};
7070
},
7171
methods: {

‎components/form/demo/customized-form-controls.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export default {
111111
PriceInput,
112112
},
113113
beforeCreate () {
114-
this.form = this.$form.createForm(this);
114+
this.form = this.$form.createForm(this, { name: 'customized_form_controls' });
115115
},
116116
methods: {
117117
handleSubmit (e) {

‎components/form/demo/dynamic-form-item.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default {
8989
};
9090
},
9191
beforeCreate () {
92-
this.form = this.$form.createForm(this);
92+
this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
9393
this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
9494
},
9595
methods: {
@@ -112,7 +112,7 @@ export default {
112112
const { form } = this;
113113
// can use data-binding to get
114114
const keys = form.getFieldValue('keys');
115-
const nextKeys = keys.concat(++id);
115+
const nextKeys = keys.concat(id++);
116116
// can use data-binding to set
117117
// important! notify form to detect changes
118118
form.setFieldsValue({

‎components/form/demo/dynamic-rule.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default {
7777
checkNick: false,
7878
formItemLayout,
7979
formTailLayout,
80-
form: this.$form.createForm(this),
80+
form: this.$form.createForm(this, { name: 'dynamic_rule' }),
8181
};
8282
},
8383
methods: {

‎components/form/demo/form-in-modal.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ When user visit a page with a list of items, and want to create a new item. The
2929
const CollectionCreateForm = {
3030
props: ['visible'],
3131
beforeCreate () {
32-
this.form = this.$form.createForm(this);
32+
this.form = this.$form.createForm(this, { name: 'form_in_modal' });
3333
},
3434
template: `
3535
<a-modal

‎components/form/demo/global-state.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const CustomizedForm = {
4848
`,
4949
created () {
5050
this.form = this.$form.createForm(this, {
51+
name: 'global_state',
5152
onFieldsChange: (_, changedFields) => {
5253
this.$emit('change', changedFields);
5354
},

‎components/form/demo/horizontal-login.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default {
7272
data () {
7373
return {
7474
hasErrors,
75-
form: this.$form.createForm(this),
75+
form: this.$form.createForm(this, { name: 'horizontal_login' }),
7676
};
7777
},
7878
mounted () {

0 commit comments

Comments
 (0)