feat: update form to 2.2.6

pull/309/head
tangjinzhou 2018-10-31 21:39:12 +08:00
parent 2b3d0a72d9
commit 66fca3829f
6 changed files with 84 additions and 49 deletions

View File

@ -1,3 +1,3 @@
// based on rc-form 2.2.1
// based on rc-form 2.2.6
import { createForm, createFormField } from './src/'
export { createForm, createFormField }

View File

@ -59,7 +59,11 @@ function createBaseForm (option = {}, mixins = []) {
this.instances = {}
this.cachedBind = {}
this.clearedFieldMetaCache = {};
this.clearedFieldMetaCache = {}
this.renderFields = {}
this.domFields = {};
// HACK: https://github.com/ant-design/ant-design/issues/6406
['getFieldsValue',
'getFieldValue',
@ -91,9 +95,11 @@ function createBaseForm (option = {}, mixins = []) {
},
mounted () {
this.wrappedComponentRef(this.$refs.WrappedComponent)
this.cleanUpUselessFields()
},
updated () {
this.wrappedComponentRef(this.$refs.WrappedComponent)
this.cleanUpUselessFields()
},
destroyed () {
this.wrappedComponentRef(null)
@ -151,25 +157,21 @@ function createBaseForm (option = {}, mixins = []) {
this.cachedBind[name] = {}
}
const cache = this.cachedBind[name]
if (!cache[action]) {
cache[action] = fn.bind(this, name, action)
}
return cache[action]
},
recoverClearedField (name) {
if (this.clearedFieldMetaCache[name]) {
this.fieldsStore.setFields({
[name]: this.clearedFieldMetaCache[name].field,
})
this.fieldsStore.setFieldMeta(name, this.clearedFieldMetaCache[name].meta)
delete this.clearedFieldMetaCache[name]
if (!cache[action] || cache[action].oriFn !== fn) {
cache[action] = {
fn: fn.bind(this, name, action),
oriFn: fn,
}
}
return cache[action].fn
},
getFieldDecorator (name, fieldOption) {
const { props, ...restProps } = this.getFieldProps(name, fieldOption)
return (fieldElem) => {
// We should put field in record if it is rendered
this.renderFields[name] = true
const fieldMeta = this.fieldsStore.getFieldMeta(name)
const originalProps = getOptionProps(fieldElem)
const originalEvents = getEvents(fieldElem)
@ -288,7 +290,8 @@ function createBaseForm (option = {}, mixins = []) {
if (fieldDataProp) {
inputAttrs[fieldDataProp] = this.fieldsStore.getField(name)
}
// This field is rendered, record it
this.renderFields[name] = true
return {
props: omit(inputProps, ['id']),
// id: inputProps.id,
@ -338,19 +341,6 @@ function createBaseForm (option = {}, mixins = []) {
})
},
resetFields (ns) {
const newFields = this.fieldsStore.resetFields(ns)
if (Object.keys(newFields).length > 0) {
this.setFields(newFields)
}
if (ns) {
const names = Array.isArray(ns) ? ns : [ns]
names.forEach(name => delete this.clearedFieldMetaCache[name])
} else {
this.clearedFieldMetaCache = {}
}
},
setFieldsValue (changedValues, callback) {
const { fieldsMeta } = this.fieldsStore
const values = this.fieldsStore.flattenRegisteredFields(changedValues)
@ -385,11 +375,11 @@ function createBaseForm (option = {}, mixins = []) {
field: this.fieldsStore.getField(name),
meta: this.fieldsStore.getFieldMeta(name),
}
this.fieldsStore.clearField(name)
delete this.instances[name]
delete this.cachedBind[name]
this.clearField(name)
delete this.domFields[name]
return
}
this.domFields[name] = true
this.recoverClearedField(name)
// const fieldMeta = this.fieldsStore.getFieldMeta(name)
// if (fieldMeta) {
@ -404,6 +394,46 @@ function createBaseForm (option = {}, mixins = []) {
this.instances[name] = component
},
cleanUpUselessFields () {
const fieldList = this.fieldsStore.getAllFieldsName()
const removedList = fieldList.filter(field => (
!this.renderFields[field] && !this.domFields[field]
))
if (removedList.length) {
removedList.forEach(this.clearField)
}
this.renderFields = {}
},
clearField (name) {
this.fieldsStore.clearField(name)
delete this.instances[name]
delete this.cachedBind[name]
},
resetFields (ns) {
const newFields = this.fieldsStore.resetFields(ns)
if (Object.keys(newFields).length > 0) {
this.setFields(newFields)
}
if (ns) {
const names = Array.isArray(ns) ? ns : [ns]
names.forEach(name => delete this.clearedFieldMetaCache[name])
} else {
this.clearedFieldMetaCache = {}
}
},
recoverClearedField (name) {
if (this.clearedFieldMetaCache[name]) {
this.fieldsStore.setFields({
[name]: this.clearedFieldMetaCache[name].field,
})
this.fieldsStore.setFieldMeta(name, this.clearedFieldMetaCache[name].meta)
delete this.clearedFieldMetaCache[name]
}
},
validateFieldsInternal (fields, {
fieldNames,
action,

View File

@ -65,7 +65,7 @@ const mixin = {
const validNames = this.fieldsStore.getValidFieldsName()
let firstNode
let firstTop
for (const name of validNames) {
validNames.forEach((name) => {
if (has(error, name)) {
const instance = this.getFieldInstance(name)
if (instance) {
@ -77,7 +77,8 @@ const mixin = {
}
}
}
}
})
if (firstNode) {
const c = options.container || getScrollableContainer(firstNode)
scrollIntoView(firstNode, c, {

View File

@ -10,22 +10,22 @@ function partOf (a, b) {
return b.indexOf(a) === 0 && ['.', '['].indexOf(b[a.length]) !== -1
}
function internalFlattenFields (fields) {
return flattenFields(
fields,
(_, node) => isFormField(node),
'You must wrap field data with `createFormField`.'
)
}
class FieldsStore {
constructor (fields) {
this.fields = this.flattenFields(fields)
this.fields = internalFlattenFields(fields)
this.fieldsMeta = {}
}
updateFields (fields) {
this.fields = this.flattenFields(fields)
}
flattenFields (fields) {
return flattenFields(
fields,
(_, node) => isFormField(node),
'You must wrap field data with `createFormField`.'
)
this.fields = internalFlattenFields(fields)
}
flattenRegisteredFields (fields) {
@ -33,7 +33,7 @@ class FieldsStore {
return flattenFields(
fields,
path => validFieldsName.indexOf(path) >= 0,
'You cannot set field before registering it.'
'You cannot set a form field before rendering a field associated with the value.'
)
}
@ -58,7 +58,9 @@ class FieldsStore {
}
const nowValues = {}
Object.keys(fieldsMeta)
.forEach((f) => { nowValues[f] = this.getValueFromFields(f, nowFields) })
.forEach((f) => {
nowValues[f] = this.getValueFromFields(f, nowFields)
})
Object.keys(nowValues).forEach((f) => {
const value = nowValues[f]
const fieldMeta = this.getFieldMeta(f)

View File

@ -6,4 +6,4 @@ import Vue from 'vue'
import antRefDirective from '../../_util/antRefDirective'
Vue.use(antRefDirective)
export { createForm, createFormField, formShape }
export { createFormField, formShape, createForm }

View File

@ -1,3 +1,5 @@
import warning from 'warning'
function getDisplayName (WrappedComponent) {
return WrappedComponent.name || 'WrappedComponent'
}
@ -22,7 +24,7 @@ export function treeTraverse (path = '', tree, isLeafNode, errorMessage, callbac
if (isLeafNode(path, tree)) {
callback(path, tree)
} else if (tree === undefined || tree === null) {
return
// Do nothing
} else if (Array.isArray(tree)) {
tree.forEach((subTree, index) => treeTraverse(
`${path}[${index}]`,
@ -33,7 +35,7 @@ export function treeTraverse (path = '', tree, isLeafNode, errorMessage, callbac
))
} else { // It's object and not a leaf node
if (typeof tree !== 'object') {
console.error(errorMessage)
warning(false, errorMessage)
return
}
Object.keys(tree).forEach(subTreeKey => {