Skip to content

Commit f1d987b

Browse files
tangjinzhoutangjinzhou
committed
feat: add vc-form demo
1 parent 29b9c51 commit f1d987b

File tree

8 files changed

+645
-32
lines changed

8 files changed

+645
-32
lines changed

‎components/_util/vnode.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export function cloneElement (n, nodeProps, deep) {
6060
return null
6161
}
6262
const node = cloneVNode(ele, deep)
63-
const { props = {}, key, on = {}, children } = nodeProps
63+
const { props = {}, key, on = {}, children, directives = [] } = nodeProps
6464
const data = node.data || {}
6565
let cls = {}
6666
let style = {}
@@ -101,6 +101,7 @@ export function cloneElement (n, nodeProps, deep) {
101101
class: cls,
102102
domProps: { ...data.domProps, ...domProps },
103103
scopedSlots: { ...data.scopedSlots, ...scopedSlots },
104+
directives: [...(data.directives || []), ...directives],
104105
})
105106

106107
if (node.componentOptions) {

‎components/vc-form/demo/async-init.js

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/* eslint react/no-multi-comp:0, no-console:0 */
2+
3+
import { createForm } from '../index'
4+
import { regionStyle, errorStyle } from './styles'
5+
import BaseMixin from '../../_util/BaseMixin'
6+
7+
const Email = {
8+
props: {
9+
form: Object,
10+
},
11+
methods: {
12+
checkSpecial (rule, value, callback) {
13+
setTimeout(() => {
14+
if (value === '[email protected]') {
15+
callback('can not be!')
16+
} else {
17+
callback()
18+
}
19+
}, 1000)
20+
},
21+
},
22+
23+
render () {
24+
const { getFieldProps, getFieldError, isFieldValidating } = this.form
25+
const errors = getFieldError('email')
26+
return (<div style={ regionStyle }>
27+
<div>email validate onBlur</div>
28+
<div>
29+
<input {...getFieldProps('email', {
30+
initialValue: '',
31+
validateFirst: true,
32+
rules: [
33+
{
34+
required: true,
35+
},
36+
{
37+
type: 'email',
38+
message: '错误的 email 格式',
39+
},
40+
this.checkSpecial,
41+
],
42+
validateTrigger: 'blur',
43+
})}
44+
/></div>
45+
<div style={errorStyle}>
46+
{errors ? errors.join(',') : null}
47+
</div>
48+
<div style={errorStyle}>
49+
{isFieldValidating('email') ? 'validating' : null}
50+
</div>
51+
</div>)
52+
},
53+
}
54+
55+
const Form = {
56+
mixins: [BaseMixin],
57+
props: {
58+
form: Object,
59+
},
60+
data () {
61+
return {
62+
loading: true,
63+
}
64+
},
65+
66+
mounted () {
67+
setTimeout(() => {
68+
this.setState({
69+
loading: false,
70+
}, () => {
71+
setTimeout(() => {
72+
this.form.setFieldsInitialValue({
73+
email: '[email protected]',
74+
})
75+
}, 1000)
76+
})
77+
}, 1000)
78+
},
79+
methods: {
80+
onSubmit (e) {
81+
e.preventDefault()
82+
this.form.submit((callback) => {
83+
setTimeout(() => {
84+
this.form.validateFields((error, values) => {
85+
if (!error) {
86+
console.log('ok', values)
87+
} else {
88+
console.log('error', error, values)
89+
}
90+
callback()
91+
})
92+
}, 1000)
93+
})
94+
},
95+
96+
reset (e) {
97+
e.preventDefault()
98+
this.form.resetFields()
99+
},
100+
},
101+
102+
render () {
103+
if (this.loading) {
104+
return <b>loading</b>
105+
}
106+
const { form } = this
107+
const disabled = form.isFieldsValidating() || form.isSubmitting()
108+
return (<div style={{ margin: 20 }}>
109+
<h2>async init field</h2>
110+
<form onSubmit={this.onSubmit}>
111+
<Email form={ form }/>
112+
113+
<div style={ regionStyle }>
114+
<button disabled={disabled} type='submit'>submit</button>
115+
&nbsp;{disabled ? <span style={{ color: 'red' }}>disabled</span> : null}&nbsp;
116+
<button disabled={disabled} onClick={this.reset}>reset</button>
117+
</div>
118+
</form>
119+
</div>)
120+
},
121+
}
122+
123+
export default createForm()(Form)

‎components/vc-form/demo/dynamic-fields.js

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
/* eslint react/no-multi-comp:0, no-console:0 */
2+
3+
import { createForm } from '../index'
4+
import BaseMixin from '../../_util/BaseMixin'
5+
6+
const Form1 = {
7+
mixins: [BaseMixin],
8+
props: {
9+
form: Object,
10+
},
11+
data () {
12+
return {
13+
useInput: true,
14+
}
15+
},
16+
methods: {
17+
onSubmit (e) {
18+
e.preventDefault()
19+
this.form.validateFields((error, values) => {
20+
if (!error) {
21+
console.log('ok', values)
22+
} else {
23+
console.log('error', error, values)
24+
}
25+
})
26+
},
27+
changeUseInput (e) {
28+
this.setState({
29+
useInput: e.target.checked,
30+
})
31+
},
32+
},
33+
34+
render () {
35+
const { getFieldError, getFieldDecorator } = this.form
36+
37+
return (
38+
<form onSubmit={this.onSubmit}>
39+
<h2>situation 1</h2>
40+
{this.useInput ? getFieldDecorator('name', {
41+
initialValue: '',
42+
rules: [{
43+
required: true,
44+
message: 'What\'s your name 1?',
45+
}],
46+
})(<input/>) : null}
47+
<span>text content</span>
48+
{this.useInput ? null : getFieldDecorator('name', {
49+
initialValue: '',
50+
rules: [{
51+
required: true,
52+
message: 'What\'s your name 2?',
53+
}],
54+
})(<input />)}
55+
<div>
56+
<label>
57+
<input type='checkbox' checked={this.useInput} onInput={this.changeUseInput} />
58+
change input
59+
</label>
60+
{(getFieldError('name') || []).join(', ')}
61+
</div>
62+
<button>Submit</button>
63+
</form>
64+
)
65+
},
66+
}
67+
68+
const Form2 = {
69+
mixins: [BaseMixin],
70+
props: {
71+
form: Object,
72+
},
73+
data () {
74+
return {
75+
useInput: true,
76+
}
77+
},
78+
beforeMount () {
79+
const { getFieldDecorator } = this.form
80+
this.nameDecorator = getFieldDecorator('name', {
81+
initialValue: '',
82+
rules: [{
83+
required: true,
84+
message: 'What\'s your name?',
85+
}],
86+
})
87+
},
88+
methods: {
89+
onSubmit (e) {
90+
e.preventDefault()
91+
this.form.validateFields((error, values) => {
92+
if (!error) {
93+
console.log('ok', values)
94+
} else {
95+
console.log('error', error, values)
96+
}
97+
})
98+
},
99+
changeUseInput (e) {
100+
this.setState({
101+
useInput: e.target.checked,
102+
})
103+
},
104+
},
105+
106+
render () {
107+
const { getFieldError } = this.form
108+
return (
109+
<form onSubmit={this.onSubmit}>
110+
<h2>situation 2</h2>
111+
{this.useInput ? this.nameDecorator(<input />) : null}
112+
<span>text content</span>
113+
{this.useInput ? null : this.nameDecorator(<input />)}
114+
<div>
115+
<label>
116+
<input type='checkbox' checked={this.useInput} onInput={this.changeUseInput} />
117+
change input
118+
</label>
119+
{(getFieldError('name') || []).join(', ')}
120+
</div>
121+
<button>Submit</button>
122+
</form>
123+
)
124+
},
125+
}
126+
127+
const Form3 = {
128+
mixins: [BaseMixin],
129+
props: {
130+
form: Object,
131+
},
132+
data () {
133+
return {
134+
useInput: false,
135+
}
136+
},
137+
methods: {
138+
onSubmit (e) {
139+
e.preventDefault()
140+
this.form.validateFields((error, values) => {
141+
if (!error) {
142+
console.log('ok', values)
143+
} else {
144+
console.log('error', error, values)
145+
}
146+
})
147+
},
148+
changeUseInput (e) {
149+
this.setState({
150+
useInput: e.target.checked,
151+
})
152+
},
153+
},
154+
155+
render () {
156+
const { getFieldError, getFieldDecorator } = this.form
157+
return (
158+
<form onSubmit={this.onSubmit}>
159+
<h2>situation 3</h2>
160+
{getFieldDecorator('name', {
161+
initialValue: '',
162+
rules: [{
163+
required: true,
164+
message: 'What\'s your name 1?',
165+
}],
166+
})(<input />)}
167+
{this.useInput ? null : getFieldDecorator('name2', {
168+
initialValue: '',
169+
rules: [{
170+
required: true,
171+
message: 'What\'s your name 2?',
172+
}],
173+
})(<input />)}
174+
<div>
175+
<label>
176+
<input type='checkbox' checked={this.useInput} onInput={this.changeUseInput} />
177+
Hide second input
178+
</label>
179+
{(getFieldError('name') || []).join(', ')}
180+
</div>
181+
<button>Submit</button>
182+
</form>
183+
)
184+
},
185+
}
186+
187+
const WrappedForm1 = createForm()(Form1)
188+
const WrappedForm2 = createForm()(Form2)
189+
const WrappedForm3 = createForm()(Form3)
190+
191+
export default {
192+
render () {
193+
return (
194+
<div>
195+
<WrappedForm1 />
196+
<WrappedForm2 />
197+
<WrappedForm3 />
198+
</div>
199+
)
200+
},
201+
}

0 commit comments

Comments
 (0)