github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: vc-form

pull/22/head
tjz 2018-05-03 22:53:17 +08:00
parent 07b0d46864
commit c0bf96fccd
4 changed files with 72 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
components/vc-form/src/createBaseForm.jsx
View File

@ -18,7 +18,7 @@ import {
flattenArray,
} from './utils'
const DEFAULT_TRIGGER = 'onChange'
const DEFAULT_TRIGGER = 'change'
function createBaseForm (option = {}, mixins = []) {
const {
@ -94,7 +94,7 @@ function createBaseForm (option = {}, mixins = []) {
const valuesAllSet = {}
valuesAll[name] = value
Object.keys(valuesAll).forEach(key => set(valuesAllSet, key, valuesAll[key]))
onValuesChange(this.props, set({}, name, value), valuesAllSet)
onValuesChange(this.$props, set({}, name, value), valuesAllSet)
}
const field = this.fieldsStore.getField(name)
return ({ name, field: { ...field, value, touched: true }, fieldMeta })
@ -148,7 +148,7 @@ function createBaseForm (option = {}, mixins = []) {
},
getFieldDecorator (name, fieldOption) {
const { ref, ...restProps } = this.getFieldProps(name, fieldOption)
const { directives, props } = this.getFieldProps(name, fieldOption)
return (fieldElem) => {
const fieldMeta = this.fieldsStore.getFieldMeta(name)
const originalProps = fieldElem.props
@ -173,10 +173,10 @@ function createBaseForm (option = {}, mixins = []) {
fieldMeta.ref = fieldElem.ref
return cloneElement(fieldElem, {
props: {
...restProps,
...props,
...this.fieldsStore.getFieldValuePropValue(fieldMeta),
},
ref,
directives,
})
}
},
@ -220,25 +220,10 @@ function createBaseForm (option = {}, mixins = []) {
const inputProps = {
...this.fieldsStore.getFieldValuePropValue(fieldOption),
ref: name,
// ref: name,
on: {},
}
const saveRef = this.getCacheBind(name, `${name}__ref`, this.saveRef)
this.$nextTick(() => {
if (this.instances[name] !== this.$refs[name]) {
this.$refs[name].destroyed = () => {
this.$refs[name].destroyed()
// after destroy, delete data
this.clearedFieldMetaCache[name] = {
field: this.fieldsStore.getField(name),
meta: this.fieldsStore.getFieldMeta(name),
}
this.fieldsStore.clearField(name)
delete this.instances[name]
delete this.cachedBind[name]
}
}
saveRef(name, `${name}__ref`, this.$refs[name])
})
if (fieldNameProp) {
inputProps[fieldNameProp] = name
}
@ -252,7 +237,7 @@ function createBaseForm (option = {}, mixins = []) {
// make sure that the value will be collect
if (trigger && validateTriggers.indexOf(trigger) === -1) {
inputProps[trigger] = this.getCacheBind(name, trigger, this.onCollect)
inputProps.on[trigger] = this.getCacheBind(name, trigger, this.onCollect)
}
const meta = {
@ -269,7 +254,14 @@ function createBaseForm (option = {}, mixins = []) {
inputProps[fieldDataProp] = this.fieldsStore.getField(name)
}
return inputProps
return {
props: inputProps,
directives: [
{ name: 'ant-form-item-ref-cal', value: (component) => {
saveRef(component)
} },
],
}
},
getFieldInstance (name) {
@ -289,9 +281,12 @@ function createBaseForm (option = {}, mixins = []) {
if (onFieldsChange) {
const changedFields = Object.keys(fields)
.reduce((acc, name) => set(acc, name, this.fieldsStore.getField(name)), {})
onFieldsChange(this.props, changedFields, this.fieldsStore.getNestedAllFields())
onFieldsChange(this.$props, changedFields, this.fieldsStore.getNestedAllFields())
}
this.forceUpdate(callback)
this.$forceUpdate()
this.$nextTick(() => {
callback && callback()
})
},
resetFields (ns) {
@ -330,11 +325,22 @@ function createBaseForm (option = {}, mixins = []) {
this.setFields(newFields, callback)
if (onValuesChange) {
const allValues = this.fieldsStore.getAllValues()
onValuesChange(this.props, changedValues, allValues)
onValuesChange(this.$props, changedValues, allValues)
}
},
saveRef (name, _, component) {
if (!component) {
// after destroy, delete data
this.clearedFieldMetaCache[name] = {
field: this.fieldsStore.getField(name),
meta: this.fieldsStore.getFieldMeta(name),
}
this.fieldsStore.clearField(name)
delete this.instances[name]
delete this.cachedBind[name]
return
}
this.recoverClearedField(name)
const fieldMeta = this.fieldsStore.getFieldMeta(name)
if (fieldMeta) {

10
components/vc-form/src/index.jsx
View File

@ -2,5 +2,15 @@
import createForm from './createForm'
import createFormField from './createFormField'
import formShape from './propTypes'
import Vue from 'vue'
Vue.directive('ant-form-item-ref-cal', {
inserted: function (el, binding, vnode) {
binding.value(vnode)
},
unbind: function (el, binding, vnode) {
binding.value()
},
})
export { createForm, createFormField, formShape }

28
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "vue-antd-ui",
"version": "0.4.0",
"version": "0.4.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -620,6 +620,14 @@
"integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
"dev": true
},
"async-validator": {
"version": "1.8.2",
"resolved": "http://registry.npm.taobao.org/async-validator/download/async-validator-1.8.2.tgz",
"integrity": "sha1-t3WXIm6WJC+NUxwNRq4pX2JCK6Q=",
"requires": {
"babel-runtime": "6.26.0"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@ -1044,6 +1052,12 @@
"integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=",
"dev": true
},
"babel-plugin-syntax-class-properties": {
"version": "6.13.0",
"resolved": "http://registry.npm.taobao.org/babel-plugin-syntax-class-properties/download/babel-plugin-syntax-class-properties-6.13.0.tgz",
"integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=",
"dev": true
},
"babel-plugin-syntax-decorators": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
@ -1091,6 +1105,18 @@
"babel-runtime": "6.26.0"
}
},
"babel-plugin-transform-class-properties": {
"version": "6.24.1",
"resolved": "http://registry.npm.taobao.org/babel-plugin-transform-class-properties/download/babel-plugin-transform-class-properties-6.24.1.tgz",
"integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
"dev": true,
"requires": {
"babel-helper-function-name": "6.24.1",
"babel-plugin-syntax-class-properties": "6.13.0",
"babel-runtime": "6.26.0",
"babel-template": "6.26.0"
}
},
"babel-plugin-transform-decorators": {
"version": "6.24.1",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz",

3
package.json
View File

@ -61,6 +61,7 @@
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
@ -81,8 +82,8 @@
"css-loader": "^0.28.7",
"deep-assign": "^2.0.0",
"eslint": "^4.7.2",
"eslint-plugin-vue": "^3.13.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-vue": "^3.13.0",
"eslint-plugin-vue-libs": "^1.2.1",
"extract-text-webpack-plugin": "^3.0.2",
"fetch-jsonp": "^1.1.3",