Skip to content

Commit d718914

Browse files
tangjinzhoutangjinzhou
committed
Merge branch 'feat-form-template'
2 parents 61193ee + 5836adb commit d718914

File tree

12 files changed

+279
-194
lines changed

12 files changed

+279
-194
lines changed

‎components/form/Form.jsx‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ export const FormProps = {
5757
// onSubmit: React.FormEventHandler<any>;
5858
prefixCls: PropTypes.string,
5959
hideRequiredMark: PropTypes.bool,
60+
autoFormCreate: PropTypes.func,
61+
options: PropTypes.object,
6062
}
6163

6264
export const ValidationRule = {
@@ -143,23 +145,6 @@ export default {
143145
fieldDataProp: FIELD_DATA_PROP,
144146
})
145147
},
146-
147-
// constructor (props) {
148-
// super(props)
149-
150-
// warning(!props.form, 'It is unnecessary to pass `form` to `Form` after [email protected].')
151-
// }
152-
153-
// shouldComponentUpdate(...args) {
154-
// return PureRenderMixin.shouldComponentUpdate.apply(this, args);
155-
// }
156-
157-
// getChildContext () {
158-
// const { layout } = this.props
159-
// return {
160-
// vertical: layout === 'vertical',
161-
// }
162-
// },
163148
provide () {
164149
return {
165150
FormProps: this.$props,
@@ -178,7 +163,7 @@ export default {
178163

179164
render () {
180165
const {
181-
prefixCls, hideRequiredMark, layout, onSubmit, $slots,
166+
prefixCls, hideRequiredMark, layout, onSubmit, $slots, autoFormCreate, options = {},
182167
} = this
183168

184169
const formClassName = classNames(prefixCls, {
@@ -187,6 +172,43 @@ export default {
187172
[`${prefixCls}-inline`]: layout === 'inline',
188173
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
189174
})
175+
if (autoFormCreate) {
176+
const DomForm = this.DomForm || createDOMForm({
177+
fieldNameProp: 'id',
178+
...options,
179+
fieldMetaProp: FIELD_META_PROP,
180+
fieldDataProp: FIELD_DATA_PROP,
181+
templateContext: this.$parent,
182+
})({
183+
provide () {
184+
return {
185+
decoratorFormProps: this.$props,
186+
}
187+
},
188+
data () {
189+
return {
190+
children: $slots.default,
191+
formClassName: formClassName,
192+
submit: onSubmit,
193+
}
194+
},
195+
created () {
196+
autoFormCreate(this.form)
197+
},
198+
render () {
199+
const { children, formClassName, submit } = this
200+
return <form onSubmit={submit} class={formClassName}>{children}</form>
201+
},
202+
})
203+
if (this.domForm) {
204+
this.domForm.children = $slots.default
205+
this.domForm.submit = onSubmit
206+
this.domForm.formClassName = formClassName
207+
}
208+
this.DomForm = DomForm
209+
210+
return <DomForm wrappedComponentRef={(inst) => { this.domForm = inst }}/>
211+
}
190212

191213
return <form onSubmit={onSubmit} class={formClassName}>{$slots.default}</form>
192214
},

‎components/form/FormItem.jsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const FormItemProps = {
2020
hasFeedback: PropTypes.bool,
2121
required: PropTypes.bool,
2222
colon: PropTypes.bool,
23+
fieldDecoratorId: PropTypes.string,
24+
fieldDecoratorOptions: PropTypes.object,
2325
}
2426

2527
export default {
@@ -33,21 +35,18 @@ export default {
3335
}),
3436
inject: {
3537
FormProps: { default: {}},
38+
decoratorFormProps: { default: {}},
3639
},
3740
data () {
3841
return { helpShow: false }
3942
},
4043
mounted () {
4144
warning(
42-
this.getControls(this.$slots.default, true).length <= 1,
45+
this.getControls(this.slotDefault, true).length <= 1,
4346
'`Form.Item` cannot generate `validateStatus` and `help` automatically, ' +
4447
'while there are more than one `getFieldDecorator` in it.',
4548
)
4649
},
47-
48-
// shouldComponentUpdate(...args: any[]) {
49-
// return PureRenderMixin.shouldComponentUpdate.apply(this, args);
50-
// }
5150
methods: {
5251
getHelpMsg () {
5352
const help = getComponentFromProp(this, 'help')
@@ -90,7 +89,7 @@ export default {
9089
},
9190

9291
getOnlyControl () {
93-
const child = this.getControls(this.$slots.default, false)[0]
92+
const child = this.getControls(this.slotDefault, false)[0]
9493
return child !== undefined ? child : null
9594
},
9695

@@ -303,12 +302,11 @@ export default {
303302
) : null
304303
},
305304
renderChildren () {
306-
const { $slots } = this
307305
return [
308306
this.renderLabel(),
309307
this.renderWrapper(
310308
this.renderValidateWrapper(
311-
filterEmpty($slots.default || []),
309+
this.slotDefault,
312310
this.renderHelp(),
313311
this.renderExtra(),
314312
),
@@ -333,6 +331,18 @@ export default {
333331
},
334332

335333
render () {
334+
const { $slots, decoratorFormProps, fieldDecoratorId, fieldDecoratorOptions = {}} = this
335+
const child = filterEmpty($slots.default || [])
336+
if (decoratorFormProps.form && fieldDecoratorId && child.length) {
337+
const getFieldDecorator = decoratorFormProps.form.getFieldDecorator
338+
child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions)(child[0])
339+
warning(
340+
!(child.length > 1),
341+
'`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children',
342+
)
343+
}
344+
345+
this.slotDefault = child
336346
const children = this.renderChildren()
337347
return this.renderFormItem(children)
338348
},

‎components/form/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.vue correctly 1`] = `
221221
`;
222222
223223
exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `
224-
<div>
224+
<form class="ant-form ant-form-horizontal">
225225
<div class="ant-row ant-form-item">
226226
<div class="ant-col-4 ant-form-item-label">
227227
<label for="username" title="Name" class="ant-form-item-required">Name</label>
@@ -244,7 +244,9 @@ exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `
244244
</div>
245245
<div class="ant-row ant-form-item">
246246
<div class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
247-
<div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Nickname is required</span></label>
247+
<div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>
248+
Nickname is required
249+
</span></label>
248250
</span>
249251
<!---->
250252
</div>
@@ -258,7 +260,7 @@ exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `
258260
</div>
259261
</div>
260262
</div>
261-
</div>
263+
</form>
262264
`;
263265
264266
exports[`renders ./components/form/demo/form-in-modal.vue correctly 1`] = `
@@ -314,7 +316,7 @@ exports[`renders ./components/form/demo/horizontal-login.vue correctly 1`] = `
314316
</div>
315317
<div class="ant-row ant-form-item">
316318
<div class="ant-form-item-control-wrapper">
317-
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary" disabled="disabled"><span>Log in</span></button>
319+
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button>
318320
</span>
319321
<!---->
320322
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin
1313

1414
<script>
1515
import { Form } from 'vue-antd-ui'
16+
import { setTimeout } from 'timers'
1617
1718
const AdvancedSearchForm = {
1819
data () {

‎components/form/demo/coordinated.vue‎

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,49 @@ Use `setFieldsValue` to set other control's value programmaticly.
99
</us>
1010

1111

12-
<script>
13-
import { Form } from 'vue-antd-ui'
12+
<template>
13+
<a-form @submit="handleSubmit" :autoFormCreate="(form)=>{this.form = form}">
14+
<a-form-item
15+
label='Note'
16+
:labelCol="{ span: 5 }"
17+
:wrapperCol="{ span: 12 }"
18+
fieldDecoratorId="note"
19+
:fieldDecoratorOptions="{rules: [{ required: true, message: 'Please input your note!' }]}"
20+
>
21+
<a-input />
22+
</a-form-item>
23+
<a-form-item
24+
label='Gender'
25+
:labelCol="{ span: 5 }"
26+
:wrapperCol="{ span: 12 }"
27+
fieldDecoratorId="gender"
28+
:fieldDecoratorOptions="{rules: [{ required: true, message: 'Please select your gender!' }]}"
29+
>
30+
<a-select
31+
placeholder='Select a option and change input text above'
32+
@change="this.handleSelectChange"
33+
>
34+
<a-select-option value='male'>male</a-select-option>
35+
<a-select-option value='female'>female</a-select-option>
36+
</a-select>
37+
</a-form-item>
38+
<a-form-item
39+
:wrapperCol="{ span: 12, offset: 5 }"
40+
>
41+
<a-button type='primary' htmlType='submit'>
42+
Submit
43+
</a-button>
44+
</a-form-item>
45+
</a-form>
46+
</template>
1447

15-
const CoordinatedForm = {
48+
<script>
49+
export default {
50+
data () {
51+
return {
52+
formLayout: 'horizontal',
53+
}
54+
},
1655
methods: {
1756
handleSubmit (e) {
1857
e.preventDefault()
@@ -29,54 +68,10 @@ const CoordinatedForm = {
2968
})
3069
},
3170
},
32-
33-
render () {
34-
const { getFieldDecorator } = this.form
35-
return (
36-
<a-form onSubmit={this.handleSubmit}>
37-
<a-form-item
38-
label='Note'
39-
labelCol={{ span: 5 }}
40-
wrapperCol={{ span: 12 }}
41-
>
42-
{getFieldDecorator('note', {
43-
rules: [{ required: true, message: 'Please input your note!' }],
44-
})(
45-
<a-input />
46-
)}
47-
</a-form-item>
48-
<a-form-item
49-
label='Gender'
50-
labelCol={{ span: 5 }}
51-
wrapperCol={{ span: 12 }}
52-
>
53-
{getFieldDecorator('gender', {
54-
rules: [{ required: true, message: 'Please select your gender!' }],
55-
})(
56-
<a-select
57-
placeholder='Select a option and change input text above'
58-
onChange={this.handleSelectChange}
59-
>
60-
<a-select-option value='male'>male</a-select-option>
61-
<a-select-option value='female'>female</a-select-option>
62-
</a-select>
63-
)}
64-
</a-form-item>
65-
<a-form-item
66-
wrapperCol={{ span: 12, offset: 5 }}
67-
>
68-
<a-button type='primary' htmlType='submit'>
69-
Submit
70-
</a-button>
71-
</a-form-item>
72-
</a-form>
73-
)
74-
},
7571
}
76-
77-
export default Form.create()(CoordinatedForm)
7872
</script>
7973

8074

8175

8276

77+

0 commit comments

Comments
 (0)