Skip to content

Commit be98a04

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

File tree

13 files changed

+726
-17
lines changed

13 files changed

+726
-17
lines changed

‎components/_util/ContainerRender.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11

22
import Vue from 'vue'
33
import PropTypes from './vue-types'
4+
import antRefDirective from './antRefDirective'
5+
Vue.use(antRefDirective)
46

57
export default {
68
props: {

‎components/_util/antRefDirective.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default {
2+
install: (Vue, options) => {
3+
Vue.directive('ant-ref', {
4+
bind: function (el, binding, vnode) {
5+
binding.value(vnode)
6+
},
7+
unbind: function (el, binding, vnode) {
8+
binding.value()
9+
},
10+
})
11+
},
12+
}

‎components/modal/confirm.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import Vue from 'vue'
22
import ConfirmDialog from './ConfirmDialog'
3+
4+
import antRefDirective from '../_util/antRefDirective'
5+
Vue.use(antRefDirective)
6+
37
export default function confirm (config) {
48
const div = document.createElement('div')
59
const el = document.createElement('div')

‎components/trigger/Trigger.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import Popup from './Popup'
1010
import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils'
1111
import BaseMixin from '../_util/BaseMixin'
1212
import { cloneElement } from '../_util/vnode'
13+
import antRefDirective from '../_util/antRefDirective'
14+
Vue.use(antRefDirective)
1315

1416
function returnEmptyString () {
1517
return ''

‎components/vc-form/demo/modal.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/* eslint react/no-multi-comp:0, no-console:0 */
2+
3+
import BaseMixin from '../../_util/BaseMixin'
4+
import createDOMForm from '../src/createDOMForm'
5+
import { Modal } from 'antd'
6+
import { regionStyle, errorStyle } from './styles'
7+
8+
const Form = {
9+
mixins: [BaseMixin],
10+
props: {
11+
form: Object,
12+
},
13+
14+
data () {
15+
return {
16+
visible: false,
17+
}
18+
},
19+
methods: {
20+
onSubmit (e) {
21+
e.preventDefault()
22+
this.form.validateFieldsAndScroll((error, values) => {
23+
if (!error) {
24+
console.log('ok', values)
25+
} else {
26+
console.log('error', error, values)
27+
}
28+
})
29+
},
30+
31+
onCancel () {
32+
this.setState({
33+
visible: false,
34+
})
35+
},
36+
37+
open () {
38+
this.setState({
39+
visible: true,
40+
})
41+
},
42+
},
43+
44+
render () {
45+
const { getFieldProps, getFieldError } = this.form
46+
return (<div style={{ margin: '20px' }}>
47+
<h2>modal</h2>
48+
<Modal
49+
visible={this.visible}
50+
bodyStyle={{
51+
height: '200px',
52+
overflow: 'auto',
53+
}}
54+
onCancel={this.onCancel}
55+
title='modal'
56+
>
57+
<div ref='dialogContent'>
58+
<form onSubmit={this.onSubmit}>
59+
<input
60+
{...getFieldProps('required', {
61+
rules: [{
62+
required: true,
63+
message: '必填',
64+
}],
65+
})}
66+
/>
67+
<div style={errorStyle}>
68+
{getFieldError('required') ? getFieldError('required').join(',')
69+
: <b style={{ visibility: 'hidden' }}>1</b>}
70+
</div>
71+
<div style={{ marginTop: '300px' }}>
72+
<button>submit</button>
73+
</div>
74+
</form>
75+
</div>
76+
</Modal>
77+
<div style={ regionStyle }>
78+
<button onClick={this.open}>open</button>
79+
</div>
80+
</div>)
81+
},
82+
}
83+
84+
export default createDOMForm()(Form)

‎components/vc-form/demo/nested-field.js

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
/* eslint react/no-multi-comp:0, no-console:0 */
2+
3+
import createForm from '../src/createDOMForm'
4+
5+
const Form = {
6+
props: {
7+
form: Object,
8+
},
9+
methods: {
10+
onSubmit (e) {
11+
e.preventDefault()
12+
console.log('Values of member[0].name.firstname and a[0][1].b.c[0]')
13+
console.log(this.form.getFieldsValue(['member[0].name.firstname', 'a[0][1].b.c[0]']))
14+
console.log('Values of all fields')
15+
console.log(this.form.getFieldsValue())
16+
17+
this.form.validateFieldsAndScroll((error, values) => {
18+
if (!error) {
19+
console.log('ok', values)
20+
} else {
21+
console.log('error', error, values)
22+
}
23+
})
24+
},
25+
26+
onChange (e) {
27+
console.log(e.target.value)
28+
},
29+
30+
setField () {
31+
this.form.setFieldsValue({
32+
member: [
33+
{
34+
name: {
35+
firstname: 'm1 first',
36+
lastname: 'm1 last',
37+
},
38+
},
39+
{
40+
name: {
41+
firstname: 'm2 first',
42+
lastname: 'm2 last',
43+
},
44+
},
45+
],
46+
a: [
47+
[undefined, {
48+
b: {
49+
c: ['Value of a[0][1].b.c[0]'],
50+
},
51+
}],
52+
],
53+
w: {
54+
x: {
55+
y: {
56+
z: ['Value of w.x.y.z[0]'],
57+
},
58+
},
59+
},
60+
})
61+
},
62+
63+
resetFields () {
64+
console.log('reset')
65+
this.form.resetFields()
66+
},
67+
},
68+
69+
render () {
70+
const { getFieldDecorator, getFieldError } = this.form
71+
72+
return (
73+
<form onSubmit={this.onSubmit}>
74+
<div>Member 0 firstname</div>
75+
{getFieldDecorator('member[0].name.firstname', {
76+
initialValue: '',
77+
rules: [{
78+
required: true,
79+
message: 'What\'s the member_0 firstname?',
80+
}],
81+
})(
82+
<input
83+
onInput={this.onChange}
84+
/>
85+
)}
86+
<div style={{ color: 'red' }}>
87+
{(getFieldError('member[0].name.firstname') || []).join(', ')}
88+
</div>
89+
90+
<div>Member 0 lastname</div>
91+
{getFieldDecorator('member[0].name.lastname', {
92+
initialValue: '',
93+
rules: [{
94+
required: true,
95+
message: 'What\'s the member_0 lastname?',
96+
}],
97+
})(
98+
<input
99+
onInput={this.onChange}
100+
/>
101+
)}
102+
<div style={{ color: 'red' }}>
103+
{(getFieldError('member[0].name.firstname') || []).join(', ')}
104+
</div>
105+
106+
<div>Member 1 firstname</div>
107+
{getFieldDecorator('member[1].name.firstname', {
108+
initialValue: '',
109+
rules: [{
110+
required: true,
111+
message: 'What\'s the member_1 fistname?',
112+
}],
113+
})(
114+
<input
115+
onInput={this.onChange}
116+
/>
117+
)}
118+
<div style={{ color: 'red' }}>
119+
{(getFieldError('member[1].name.firstname') || []).join(', ')}
120+
</div>
121+
122+
<div>Member 1 lastname</div>
123+
{getFieldDecorator('member[1].name.lastname', {
124+
initialValue: '',
125+
rules: [{
126+
required: true,
127+
message: 'What\'s the member_1 lastname?',
128+
}],
129+
})(
130+
<input
131+
onInput={this.onChange}
132+
/>
133+
)}
134+
<div style={{ color: 'red' }}>
135+
{(getFieldError('member[1].name.firstname') || []).join(', ')}
136+
</div>
137+
138+
<div>a[0][1].b.c[0]</div>
139+
{getFieldDecorator('a[0][1].b.c[0]', {
140+
initialValue: '',
141+
rules: [{
142+
required: true,
143+
message: 'What\'s a[0][1].b.c[0]?',
144+
}],
145+
})(
146+
<input
147+
onInput={this.onChange}
148+
/>
149+
)}
150+
<div style={{ color: 'red' }}>
151+
{(getFieldError('a[0][1].b.c[0]') || []).join(', ')}
152+
</div>
153+
154+
<div>w.x.y.z[0]</div>
155+
{getFieldDecorator('w.x.y.z[0]', {
156+
initialValue: '',
157+
rules: [{
158+
required: true,
159+
message: 'What\'s w.x.y.z[0]?',
160+
}],
161+
})(
162+
<input
163+
onInput={this.onChange}
164+
/>
165+
)}
166+
<div style={{ color: 'red' }}>
167+
{(getFieldError('w.x.y.z[0]') || []).join(', ')}
168+
</div>
169+
170+
<button onClick={this.setField}>Set field</button>
171+
<button onClick={this.resetFields}>Reset fields</button>
172+
<button>Submit</button>
173+
</form>
174+
)
175+
},
176+
}
177+
178+
const NewForm = createForm({
179+
onFieldsChange (_, changedFields, allFields) {
180+
console.log('onFieldsChange: ', changedFields, allFields)
181+
},
182+
onValuesChange (_, changedValues, allValues) {
183+
console.log('onValuesChange: ', changedValues, allValues)
184+
},
185+
})(Form)
186+
187+
export default {
188+
render () {
189+
return (<div>
190+
<h2>setFieldsValue</h2>
191+
<NewForm />
192+
</div>)
193+
},
194+
}

0 commit comments

Comments
 (0)