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

feat: update vc-form

pull/22/head
tangjinzhou 2018-05-03 19:10:43 +08:00
parent b5cd8f5714
commit 07b0d46864
9 changed files with 743 additions and 654 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
antd-tools/getBabelCommonConfig.js
View File

@ -7,6 +7,7 @@ module.exports = function (modules) {
require.resolve('babel-plugin-transform-es3-property-literals'), require.resolve('babel-plugin-transform-es3-property-literals'),
require.resolve('babel-plugin-transform-object-assign'), require.resolve('babel-plugin-transform-object-assign'),
require.resolve('babel-plugin-transform-object-rest-spread'), require.resolve('babel-plugin-transform-object-rest-spread'),
require.resolve('babel-plugin-transform-class-properties'),
] ]
plugins.push([require.resolve('babel-plugin-transform-runtime'), { plugins.push([require.resolve('babel-plugin-transform-runtime'), {
polyfill: false, polyfill: false,

66
components/vc-form/demo/input-array.jsx Normal file
View File

@ -0,0 +1,66 @@
/* eslint no-console:0 */
import { createForm } from '../index'
import { regionStyle } from './styles'
let uuid = 0
const Form = {
props: {
form: Object,
},
methods: {
remove (k) {
const { form } = this
// can use data-binding to get
let keys = form.getFieldValue('keys')
keys = keys.filter((key) => {
return key !== k
})
// can use data-binding to set
form.setFieldsValue({
keys,
})
},
add () {
uuid++
const { form } = this
// can use data-binding to get
let keys = form.getFieldValue('keys')
keys = keys.concat(uuid)
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys,
})
},
submit (e) {
e.preventDefault()
console.log(this.form.getFieldsValue())
},
},
render () {
const { getFieldProps, getFieldValue } = this.form
getFieldProps('keys', {
initialValue: [],
})
const inputs = getFieldValue('keys').map((k) => {
return (<div key={k} style={ regionStyle }>
<input {...getFieldProps(`name${k}`)}/>
<a
onClick={this.remove.bind(this, k)}
>delete</a></div>)
})
return (<div>
{inputs}
<div style={ regionStyle }>
<button onClick={this.submit}>submit</button>
<button onClick={this.add}>add</button>
</div>
</div>)
},
}
export default createForm()(Form)

11
components/vc-form/demo/styles.js Normal file
View File

@ -0,0 +1,11 @@
export const regionStyle = {
border: '1px solid red',
marginTop: '10px',
padding: '10px',
}
export const errorStyle = {
color: 'red',
marginTop: '10px',
padding: '10px',
}

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

@ -1,10 +1,11 @@
import createReactClass from 'create-react-class'
import AsyncValidator from 'async-validator' import AsyncValidator from 'async-validator'
import warning from 'warning' import warning from 'warning'
import get from 'lodash/get' import get from 'lodash/get'
import set from 'lodash/set' import set from 'lodash/set'
import createFieldsStore from './createFieldsStore' import createFieldsStore from './createFieldsStore'
import { cloneElement } from '../../_util/vnode' import { cloneElement } from '../../_util/vnode'
import BaseMixin from '../../_util/BaseMixin'
import PropTypes from '../../_util/vue-types'
import { import {
argumentContainer, argumentContainer,
identity, identity,
@ -35,11 +36,14 @@ function createBaseForm (option = {}, mixins = []) {
} = option } = option
return function decorate (WrappedComponent) { return function decorate (WrappedComponent) {
const Form = createReactClass({ const Form = {
mixins, mixins: [BaseMixin, ...mixins],
props: {
getInitialState () { hideRequiredMark: PropTypes.bool,
const fields = mapPropsToFields && mapPropsToFields(this.props) layout: PropTypes.string,
},
data () {
const fields = mapPropsToFields && mapPropsToFields(this.$props)
this.fieldsStore = createFieldsStore(fields || {}) this.fieldsStore = createFieldsStore(fields || {})
this.instances = {} this.instances = {}
@ -56,13 +60,6 @@ function createBaseForm (option = {}, mixins = []) {
'isFieldsTouched', 'isFieldsTouched',
'isFieldTouched'].forEach(key => { 'isFieldTouched'].forEach(key => {
this[key] = (...args) => { this[key] = (...args) => {
if (process.env.NODE_ENV !== 'production') {
warning(
false,
'you should not use `ref` on enhanced form, please use `wrappedComponentRef`. ' +
'See: https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140'
)
}
return this.fieldsStore[key](...args) return this.fieldsStore[key](...args)
} }
}) })
@ -71,456 +68,465 @@ function createBaseForm (option = {}, mixins = []) {
submitting: false, submitting: false,
} }
}, },
watch: {
componentWillReceiveProps (nextProps) { '$props': {
if (mapPropsToFields) { handler: function (nextProps) {
this.fieldsStore.updateFields(mapPropsToFields(nextProps)) if (mapPropsToFields) {
} this.fieldsStore.updateFields(mapPropsToFields(nextProps))
}, }
onCollectCommon (name, action, args) {
const fieldMeta = this.fieldsStore.getFieldMeta(name)
if (fieldMeta[action]) {
fieldMeta[action](...args)
} else if (fieldMeta.originalProps && fieldMeta.originalProps[action]) {
fieldMeta.originalProps[action](...args)
}
const value = fieldMeta.getValueFromEvent
? fieldMeta.getValueFromEvent(...args)
: getValueFromEvent(...args)
if (onValuesChange && value !== this.fieldsStore.getFieldValue(name)) {
const valuesAll = this.fieldsStore.getAllValues()
const valuesAllSet = {}
valuesAll[name] = value
Object.keys(valuesAll).forEach(key => set(valuesAllSet, key, valuesAll[key]))
onValuesChange(this.props, set({}, name, value), valuesAllSet)
}
const field = this.fieldsStore.getField(name)
return ({ name, field: { ...field, value, touched: true }, fieldMeta })
},
onCollect (name_, action, ...args) {
const { name, field, fieldMeta } = this.onCollectCommon(name_, action, args)
const { validate } = fieldMeta
const newField = {
...field,
dirty: hasRules(validate),
}
this.setFields({
[name]: newField,
})
},
onCollectValidate (name_, action, ...args) {
const { field, fieldMeta } = this.onCollectCommon(name_, action, args)
const newField = {
...field,
dirty: true,
}
this.validateFieldsInternal([newField], {
action,
options: {
firstFields: !!fieldMeta.validateFirst,
}, },
}) deep: true,
},
}, },
methods: {
getCacheBind (name, action, fn) { onCollectCommon (name, action, args) {
if (!this.cachedBind[name]) {
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]
}
},
getFieldDecorator (name, fieldOption) {
const props = this.getFieldProps(name, fieldOption)
return (fieldElem) => {
const fieldMeta = this.fieldsStore.getFieldMeta(name) const fieldMeta = this.fieldsStore.getFieldMeta(name)
const originalProps = fieldElem.props if (fieldMeta[action]) {
if (process.env.NODE_ENV !== 'production') { fieldMeta[action](...args)
const valuePropName = fieldMeta.valuePropName } else if (fieldMeta.originalProps && fieldMeta.originalProps[action]) {
warning( fieldMeta.originalProps[action](...args)
!(valuePropName in originalProps),
`\`getFieldDecorator\` will override \`${valuePropName}\`, ` +
`so please don't set \`${valuePropName}\` directly ` +
`and use \`setFieldsValue\` to set it.`
)
const defaultValuePropName =
`default${valuePropName[0].toUpperCase()}${valuePropName.slice(1)}`
warning(
!(defaultValuePropName in originalProps),
`\`${defaultValuePropName}\` is invalid ` +
`for \`getFieldDecorator\` will set \`${valuePropName}\`,` +
` please use \`option.initialValue\` instead.`
)
} }
fieldMeta.originalProps = originalProps const value = fieldMeta.getValueFromEvent
fieldMeta.ref = fieldElem.ref ? fieldMeta.getValueFromEvent(...args)
return cloneElement(fieldElem, { : getValueFromEvent(...args)
...props, if (onValuesChange && value !== this.fieldsStore.getFieldValue(name)) {
...this.fieldsStore.getFieldValuePropValue(fieldMeta), const valuesAll = this.fieldsStore.getAllValues()
const valuesAllSet = {}
valuesAll[name] = value
Object.keys(valuesAll).forEach(key => set(valuesAllSet, key, valuesAll[key]))
onValuesChange(this.props, set({}, name, value), valuesAllSet)
}
const field = this.fieldsStore.getField(name)
return ({ name, field: { ...field, value, touched: true }, fieldMeta })
},
onCollect (name_, action, ...args) {
const { name, field, fieldMeta } = this.onCollectCommon(name_, action, args)
const { validate } = fieldMeta
const newField = {
...field,
dirty: hasRules(validate),
}
this.setFields({
[name]: newField,
}) })
} },
},
getFieldProps (name, usersFieldOption = {}) { onCollectValidate (name_, action, ...args) {
if (!name) { const { field, fieldMeta } = this.onCollectCommon(name_, action, args)
throw new Error('Must call `getFieldProps` with valid name string!') const newField = {
} ...field,
if (process.env.NODE_ENV !== 'production') { dirty: true,
warning( }
this.fieldsStore.isValidNestedFieldName(name), this.validateFieldsInternal([newField], {
'One field name cannot be part of another, e.g. `a` and `a.b`.' action,
) options: {
warning( firstFields: !!fieldMeta.validateFirst,
!('exclusive' in usersFieldOption), },
'`option.exclusive` of `getFieldProps`|`getFieldDecorator` had been remove.' })
) },
}
delete this.clearedFieldMetaCache[name] getCacheBind (name, action, fn) {
if (!this.cachedBind[name]) {
this.cachedBind[name] = {}
}
const cache = this.cachedBind[name]
if (!cache[action]) {
cache[action] = fn.bind(this, name, action)
}
return cache[action]
},
const fieldOption = { recoverClearedField (name) {
name, if (this.clearedFieldMetaCache[name]) {
trigger: DEFAULT_TRIGGER, this.fieldsStore.setFields({
valuePropName: 'value', [name]: this.clearedFieldMetaCache[name].field,
validate: [], })
...usersFieldOption, this.fieldsStore.setFieldMeta(name, this.clearedFieldMetaCache[name].meta)
} delete this.clearedFieldMetaCache[name]
}
},
const { getFieldDecorator (name, fieldOption) {
rules, const { ref, ...restProps } = this.getFieldProps(name, fieldOption)
trigger, return (fieldElem) => {
validateTrigger = trigger, const fieldMeta = this.fieldsStore.getFieldMeta(name)
validate, const originalProps = fieldElem.props
} = fieldOption if (process.env.NODE_ENV !== 'production') {
const valuePropName = fieldMeta.valuePropName
warning(
!(valuePropName in originalProps),
`\`getFieldDecorator\` will override \`${valuePropName}\`, ` +
`so please don't set \`${valuePropName}\` directly ` +
`and use \`setFieldsValue\` to set it.`
)
const defaultValuePropName =
`default${valuePropName[0].toUpperCase()}${valuePropName.slice(1)}`
warning(
!(defaultValuePropName in originalProps),
`\`${defaultValuePropName}\` is invalid ` +
`for \`getFieldDecorator\` will set \`${valuePropName}\`,` +
` please use \`option.initialValue\` instead.`
)
}
fieldMeta.originalProps = originalProps
fieldMeta.ref = fieldElem.ref
return cloneElement(fieldElem, {
props: {
...restProps,
...this.fieldsStore.getFieldValuePropValue(fieldMeta),
},
ref,
})
}
},
const fieldMeta = this.fieldsStore.getFieldMeta(name) getFieldProps (name, usersFieldOption = {}) {
if ('initialValue' in fieldOption) { if (!name) {
fieldMeta.initialValue = fieldOption.initialValue throw new Error('Must call `getFieldProps` with valid name string!')
} }
const inputProps = {
...this.fieldsStore.getFieldValuePropValue(fieldOption),
ref: this.getCacheBind(name, `${name}__ref`, this.saveRef),
}
if (fieldNameProp) {
inputProps[fieldNameProp] = name
}
const validateRules = normalizeValidateRules(validate, rules, validateTrigger)
const validateTriggers = getValidateTriggers(validateRules)
validateTriggers.forEach((action) => {
if (inputProps[action]) return
inputProps[action] = this.getCacheBind(name, action, this.onCollectValidate)
})
// make sure that the value will be collect
if (trigger && validateTriggers.indexOf(trigger) === -1) {
inputProps[trigger] = this.getCacheBind(name, trigger, this.onCollect)
}
const meta = {
...fieldMeta,
...fieldOption,
validate: validateRules,
}
this.fieldsStore.setFieldMeta(name, meta)
if (fieldMetaProp) {
inputProps[fieldMetaProp] = meta
}
if (fieldDataProp) {
inputProps[fieldDataProp] = this.fieldsStore.getField(name)
}
return inputProps
},
getFieldInstance (name) {
return this.instances[name]
},
getRules (fieldMeta, action) {
const actionRules = fieldMeta.validate.filter((item) => {
return !action || item.trigger.indexOf(action) >= 0
}).map((item) => item.rules)
return flattenArray(actionRules)
},
setFields (maybeNestedFields, callback) {
const fields = this.fieldsStore.flattenRegisteredFields(maybeNestedFields)
this.fieldsStore.setFields(fields)
if (onFieldsChange) {
const changedFields = Object.keys(fields)
.reduce((acc, name) => set(acc, name, this.fieldsStore.getField(name)), {})
onFieldsChange(this.props, changedFields, this.fieldsStore.getNestedAllFields())
}
this.forceUpdate(callback)
},
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)
const newFields = Object.keys(values).reduce((acc, name) => {
const isRegistered = fieldsMeta[name]
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
warning( warning(
isRegistered, this.fieldsStore.isValidNestedFieldName(name),
'Cannot use `setFieldsValue` until ' + 'One field name cannot be part of another, e.g. `a` and `a.b`.'
'you use `getFieldDecorator` or `getFieldProps` to register it.' )
warning(
!('exclusive' in usersFieldOption),
'`option.exclusive` of `getFieldProps`|`getFieldDecorator` had been remove.'
) )
} }
if (isRegistered) {
const value = values[name] delete this.clearedFieldMetaCache[name]
acc[name] = {
value, const fieldOption = {
name,
trigger: DEFAULT_TRIGGER,
valuePropName: 'value',
validate: [],
...usersFieldOption,
}
const {
rules,
trigger,
validateTrigger = trigger,
validate,
} = fieldOption
const fieldMeta = this.fieldsStore.getFieldMeta(name)
if ('initialValue' in fieldOption) {
fieldMeta.initialValue = fieldOption.initialValue
}
const inputProps = {
...this.fieldsStore.getFieldValuePropValue(fieldOption),
ref: name,
}
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
}
const validateRules = normalizeValidateRules(validate, rules, validateTrigger)
const validateTriggers = getValidateTriggers(validateRules)
validateTriggers.forEach((action) => {
if (inputProps[action]) return
inputProps[action] = this.getCacheBind(name, action, this.onCollectValidate)
})
// make sure that the value will be collect
if (trigger && validateTriggers.indexOf(trigger) === -1) {
inputProps[trigger] = this.getCacheBind(name, trigger, this.onCollect)
}
const meta = {
...fieldMeta,
...fieldOption,
validate: validateRules,
}
this.fieldsStore.setFieldMeta(name, meta)
if (fieldMetaProp) {
inputProps[fieldMetaProp] = meta
}
if (fieldDataProp) {
inputProps[fieldDataProp] = this.fieldsStore.getField(name)
}
return inputProps
},
getFieldInstance (name) {
return this.instances[name]
},
getRules (fieldMeta, action) {
const actionRules = fieldMeta.validate.filter((item) => {
return !action || item.trigger.indexOf(action) >= 0
}).map((item) => item.rules)
return flattenArray(actionRules)
},
setFields (maybeNestedFields, callback) {
const fields = this.fieldsStore.flattenRegisteredFields(maybeNestedFields)
this.fieldsStore.setFields(fields)
if (onFieldsChange) {
const changedFields = Object.keys(fields)
.reduce((acc, name) => set(acc, name, this.fieldsStore.getField(name)), {})
onFieldsChange(this.props, changedFields, this.fieldsStore.getNestedAllFields())
}
this.forceUpdate(callback)
},
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)
const newFields = Object.keys(values).reduce((acc, name) => {
const isRegistered = fieldsMeta[name]
if (process.env.NODE_ENV !== 'production') {
warning(
isRegistered,
'Cannot use `setFieldsValue` until ' +
'you use `getFieldDecorator` or `getFieldProps` to register it.'
)
}
if (isRegistered) {
const value = values[name]
acc[name] = {
value,
}
}
return acc
}, {})
this.setFields(newFields, callback)
if (onValuesChange) {
const allValues = this.fieldsStore.getAllValues()
onValuesChange(this.props, changedValues, allValues)
}
},
saveRef (name, _, component) {
this.recoverClearedField(name)
const fieldMeta = this.fieldsStore.getFieldMeta(name)
if (fieldMeta) {
const ref = fieldMeta.ref
if (ref) {
if (typeof ref === 'string') {
throw new Error(`can not set ref string for ${name}`)
}
ref(component)
} }
} }
return acc this.instances[name] = component
}, {}) },
this.setFields(newFields, callback)
if (onValuesChange) {
const allValues = this.fieldsStore.getAllValues()
onValuesChange(this.props, changedValues, allValues)
}
},
saveRef (name, _, component) { validateFieldsInternal (fields, {
if (!component) { fieldNames,
// after destroy, delete data action,
this.clearedFieldMetaCache[name] = { options = {},
field: this.fieldsStore.getField(name), }, callback) {
meta: this.fieldsStore.getFieldMeta(name), const allRules = {}
} const allValues = {}
this.fieldsStore.clearField(name) const allFields = {}
delete this.instances[name] const alreadyErrors = {}
delete this.cachedBind[name] fields.forEach((field) => {
return const name = field.name
} if (options.force !== true && field.dirty === false) {
this.recoverClearedField(name) if (field.errors) {
const fieldMeta = this.fieldsStore.getFieldMeta(name) set(alreadyErrors, name, { errors: field.errors })
if (fieldMeta) { }
const ref = fieldMeta.ref return
if (ref) {
if (typeof ref === 'string') {
throw new Error(`can not set ref string for ${name}`)
} }
ref(component) const fieldMeta = this.fieldsStore.getFieldMeta(name)
const newField = {
...field,
}
newField.errors = undefined
newField.validating = true
newField.dirty = true
allRules[name] = this.getRules(fieldMeta, action)
allValues[name] = newField.value
allFields[name] = newField
})
this.setFields(allFields)
// in case normalize
Object.keys(allValues).forEach((f) => {
allValues[f] = this.fieldsStore.getFieldValue(f)
})
if (callback && isEmptyObject(allFields)) {
callback(isEmptyObject(alreadyErrors) ? null : alreadyErrors,
this.fieldsStore.getFieldsValue(fieldNames))
return
} }
} const validator = new AsyncValidator(allRules)
this.instances[name] = component if (validateMessages) {
}, validator.messages(validateMessages)
}
validator.validate(allValues, options, (errors) => {
const errorsGroup = {
...alreadyErrors,
}
if (errors && errors.length) {
errors.forEach((e) => {
const fieldName = e.field
const field = get(errorsGroup, fieldName)
if (typeof field !== 'object' || Array.isArray(field)) {
set(errorsGroup, fieldName, { errors: [] })
}
const fieldErrors = get(errorsGroup, fieldName.concat('.errors'))
fieldErrors.push(e)
})
}
const expired = []
const nowAllFields = {}
Object.keys(allRules).forEach((name) => {
const fieldErrors = get(errorsGroup, name)
const nowField = this.fieldsStore.getField(name)
// avoid concurrency problems
if (nowField.value !== allValues[name]) {
expired.push({
name,
})
} else {
nowField.errors = fieldErrors && fieldErrors.errors
nowField.value = allValues[name]
nowField.validating = false
nowField.dirty = false
nowAllFields[name] = nowField
}
})
this.setFields(nowAllFields)
if (callback) {
if (expired.length) {
expired.forEach(({ name }) => {
const fieldErrors = [{
message: `${name} need to revalidate`,
field: name,
}]
set(errorsGroup, name, {
expired: true,
errors: fieldErrors,
})
})
}
validateFieldsInternal (fields, { callback(isEmptyObject(errorsGroup) ? null : errorsGroup,
fieldNames, this.fieldsStore.getFieldsValue(fieldNames))
action, }
options = {}, })
}, callback) { },
const allRules = {}
const allValues = {} validateFields (ns, opt, cb) {
const allFields = {} const { names, callback, options } = getParams(ns, opt, cb)
const alreadyErrors = {} const fieldNames = names
fields.forEach((field) => { ? this.fieldsStore.getValidFieldsFullName(names)
const name = field.name : this.fieldsStore.getValidFieldsName()
if (options.force !== true && field.dirty === false) { const fields = fieldNames
if (field.errors) { .filter(name => {
set(alreadyErrors, name, { errors: field.errors }) const fieldMeta = this.fieldsStore.getFieldMeta(name)
return hasRules(fieldMeta.validate)
}).map((name) => {
const field = this.fieldsStore.getField(name)
field.value = this.fieldsStore.getFieldValue(name)
return field
})
if (!fields.length) {
if (callback) {
callback(null, this.fieldsStore.getFieldsValue(fieldNames))
} }
return return
} }
const fieldMeta = this.fieldsStore.getFieldMeta(name) if (!('firstFields' in options)) {
const newField = { options.firstFields = fieldNames.filter((name) => {
...field, const fieldMeta = this.fieldsStore.getFieldMeta(name)
} return !!fieldMeta.validateFirst
newField.errors = undefined
newField.validating = true
newField.dirty = true
allRules[name] = this.getRules(fieldMeta, action)
allValues[name] = newField.value
allFields[name] = newField
})
this.setFields(allFields)
// in case normalize
Object.keys(allValues).forEach((f) => {
allValues[f] = this.fieldsStore.getFieldValue(f)
})
if (callback && isEmptyObject(allFields)) {
callback(isEmptyObject(alreadyErrors) ? null : alreadyErrors,
this.fieldsStore.getFieldsValue(fieldNames))
return
}
const validator = new AsyncValidator(allRules)
if (validateMessages) {
validator.messages(validateMessages)
}
validator.validate(allValues, options, (errors) => {
const errorsGroup = {
...alreadyErrors,
}
if (errors && errors.length) {
errors.forEach((e) => {
const fieldName = e.field
const field = get(errorsGroup, fieldName)
if (typeof field !== 'object' || Array.isArray(field)) {
set(errorsGroup, fieldName, { errors: [] })
}
const fieldErrors = get(errorsGroup, fieldName.concat('.errors'))
fieldErrors.push(e)
}) })
} }
const expired = [] this.validateFieldsInternal(fields, {
const nowAllFields = {} fieldNames,
Object.keys(allRules).forEach((name) => { options,
const fieldErrors = get(errorsGroup, name) }, callback)
const nowField = this.fieldsStore.getField(name) },
// avoid concurrency problems
if (nowField.value !== allValues[name]) {
expired.push({
name,
})
} else {
nowField.errors = fieldErrors && fieldErrors.errors
nowField.value = allValues[name]
nowField.validating = false
nowField.dirty = false
nowAllFields[name] = nowField
}
})
this.setFields(nowAllFields)
if (callback) {
if (expired.length) {
expired.forEach(({ name }) => {
const fieldErrors = [{
message: `${name} need to revalidate`,
field: name,
}]
set(errorsGroup, name, {
expired: true,
errors: fieldErrors,
})
})
}
callback(isEmptyObject(errorsGroup) ? null : errorsGroup, isSubmitting () {
this.fieldsStore.getFieldsValue(fieldNames))
}
})
},
validateFields (ns, opt, cb) {
const { names, callback, options } = getParams(ns, opt, cb)
const fieldNames = names
? this.fieldsStore.getValidFieldsFullName(names)
: this.fieldsStore.getValidFieldsName()
const fields = fieldNames
.filter(name => {
const fieldMeta = this.fieldsStore.getFieldMeta(name)
return hasRules(fieldMeta.validate)
}).map((name) => {
const field = this.fieldsStore.getField(name)
field.value = this.fieldsStore.getFieldValue(name)
return field
})
if (!fields.length) {
if (callback) {
callback(null, this.fieldsStore.getFieldsValue(fieldNames))
}
return
}
if (!('firstFields' in options)) {
options.firstFields = fieldNames.filter((name) => {
const fieldMeta = this.fieldsStore.getFieldMeta(name)
return !!fieldMeta.validateFirst
})
}
this.validateFieldsInternal(fields, {
fieldNames,
options,
}, callback)
},
isSubmitting () {
if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
warning(
false,
'`isSubmitting` is deprecated. ' +
'Actually, it\'s more convenient to handle submitting status by yourself.'
)
}
return this.state.submitting
},
submit (callback) {
if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
warning(
false,
'`submit` is deprecated.' +
'Actually, it\'s more convenient to handle submitting status by yourself.'
)
}
const fn = () => {
this.setState({
submitting: false,
})
}
this.setState({
submitting: true,
})
callback(fn)
},
render () {
const { wrappedComponentRef, ...restProps } = this.props
const formProps = {
[formPropName]: this.getForm(),
}
if (withRef) {
if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') { if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
warning( warning(
false, false,
'`withRef` is deprecated, please use `wrappedComponentRef` instead. ' + '`isSubmitting` is deprecated. ' +
'See: https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140' 'Actually, it\'s more convenient to handle submitting status by yourself.'
) )
} }
formProps.ref = 'wrappedComponent' return this.submitting
} else if (wrappedComponentRef) { },
formProps.ref = wrappedComponentRef
} submit (callback) {
const props = mapProps.call(this, { if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
...formProps, warning(
...restProps, false,
}) '`submit` is deprecated.' +
return <WrappedComponent {...props}/> 'Actually, it\'s more convenient to handle submitting status by yourself.'
)
}
const fn = () => {
this.setState({
submitting: false,
})
}
this.setState({
submitting: true,
})
callback(fn)
},
}, },
})
render () {
const { $props, $listeners } = this
const formProps = {
[formPropName]: this.getForm(),
}
const wrappedComponentProps = {
props: mapProps.call(this, {
...formProps,
...$props,
}),
on: $listeners,
}
if (withRef) {
wrappedComponentProps.ref = 'wrappedComponent'
}
return <WrappedComponent {...wrappedComponentProps}/>
},
}
return argumentContainer(Form, WrappedComponent) return argumentContainer(Form, WrappedComponent)
} }

71
components/vc-form/src/createDOMForm.jsx
View File

@ -49,50 +49,53 @@ function getScrollableContainer (n) {
} }
const mixin = { const mixin = {
getForm () { methods: {
return { getForm () {
...formMixin.getForm.call(this), return {
validateFieldsAndScroll: this.validateFieldsAndScroll, ...formMixin.getForm.call(this),
} validateFieldsAndScroll: this.validateFieldsAndScroll,
}, }
},
validateFieldsAndScroll (ns, opt, cb) { validateFieldsAndScroll (ns, opt, cb) {
const { names, callback, options } = getParams(ns, opt, cb) const { names, callback, options } = getParams(ns, opt, cb)
const newCb = (error, values) => { const newCb = (error, values) => {
if (error) { if (error) {
const validNames = this.fieldsStore.getValidFieldsName() const validNames = this.fieldsStore.getValidFieldsName()
let firstNode let firstNode
let firstTop let firstTop
for (const name of validNames) { for (const name of validNames) {
if (has(error, name)) { if (has(error, name)) {
const instance = this.getFieldInstance(name) const instance = this.getFieldInstance(name)
if (instance) { if (instance) {
const node = instance.$el const node = instance.$el
const top = node.getBoundingClientRect().top const top = node.getBoundingClientRect().top
if (firstTop === undefined || firstTop > top) { if (firstTop === undefined || firstTop > top) {
firstTop = top firstTop = top
firstNode = node firstNode = node
}
} }
} }
} }
if (firstNode) {
const c = options.container || getScrollableContainer(firstNode)
scrollIntoView(firstNode, c, {
onlyScrollIfNeeded: true,
...options.scroll,
})
}
} }
if (firstNode) {
const c = options.container || getScrollableContainer(firstNode) if (typeof callback === 'function') {
scrollIntoView(firstNode, c, { callback(error, values)
onlyScrollIfNeeded: true,
...options.scroll,
})
} }
} }
if (typeof callback === 'function') { return this.validateFields(names, options, newCb)
callback(error, values) },
}
}
return this.validateFields(names, options, newCb)
}, },
} }
function createDOMForm (option) { function createDOMForm (option) {

44
components/vc-form/src/createForm.jsx
View File

@ -1,27 +1,29 @@
import createBaseForm from './createBaseForm' import createBaseForm from './createBaseForm'
export const mixin = { export const mixin = {
getForm () { methods: {
return { getForm () {
getFieldsValue: this.fieldsStore.getFieldsValue, return {
getFieldValue: this.fieldsStore.getFieldValue, getFieldsValue: this.fieldsStore.getFieldsValue,
getFieldInstance: this.getFieldInstance, getFieldValue: this.fieldsStore.getFieldValue,
setFieldsValue: this.setFieldsValue, getFieldInstance: this.getFieldInstance,
setFields: this.setFields, setFieldsValue: this.setFieldsValue,
setFieldsInitialValue: this.fieldsStore.setFieldsInitialValue, setFields: this.setFields,
getFieldDecorator: this.getFieldDecorator, setFieldsInitialValue: this.fieldsStore.setFieldsInitialValue,
getFieldProps: this.getFieldProps, getFieldDecorator: this.getFieldDecorator,
getFieldsError: this.fieldsStore.getFieldsError, getFieldProps: this.getFieldProps,
getFieldError: this.fieldsStore.getFieldError, getFieldsError: this.fieldsStore.getFieldsError,
isFieldValidating: this.fieldsStore.isFieldValidating, getFieldError: this.fieldsStore.getFieldError,
isFieldsValidating: this.fieldsStore.isFieldsValidating, isFieldValidating: this.fieldsStore.isFieldValidating,
isFieldsTouched: this.fieldsStore.isFieldsTouched, isFieldsValidating: this.fieldsStore.isFieldsValidating,
isFieldTouched: this.fieldsStore.isFieldTouched, isFieldsTouched: this.fieldsStore.isFieldsTouched,
isSubmitting: this.isSubmitting, isFieldTouched: this.fieldsStore.isFieldTouched,
submit: this.submit, isSubmitting: this.isSubmitting,
validateFields: this.validateFields, submit: this.submit,
resetFields: this.resetFields, validateFields: this.validateFields,
} resetFields: this.resetFields,
}
},
}, },
} }

9
components/vc-form/src/utils.js
View File

@ -1,14 +1,13 @@
import hoistStatics from 'hoist-non-react-statics'
function getDisplayName (WrappedComponent) { function getDisplayName (WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'WrappedComponent' return WrappedComponent.name || 'WrappedComponent'
} }
export function argumentContainer (Container, WrappedComponent) { export function argumentContainer (Container, WrappedComponent) {
/* eslint no-param-reassign:0 */ /* eslint no-param-reassign:0 */
Container.displayName = `Form(${getDisplayName(WrappedComponent)})` Container.name = `Form_${getDisplayName(WrappedComponent)}`
Container.WrappedComponent = WrappedComponent Container.WrappedComponent = WrappedComponent
return hoistStatics(Container, WrappedComponent) Container.methods = { ...Container.methods, ...WrappedComponent.methods }
return Container
} }
export function identity (obj) { export function identity (obj) {

325
package.json
View File

@ -1,164 +1,165 @@
{ {
"name": "vue-antd-ui", "name": "vue-antd-ui",
"version": "0.4.3", "version": "0.4.3",
"title": "Ant Design Vue", "title": "Ant Design Vue",
"description": "An enterprise-class UI design language and Vue-based implementation", "description": "An enterprise-class UI design language and Vue-based implementation",
"keywords": [ "keywords": [
"ant", "ant",
"design", "design",
"antd", "antd",
"vue", "vue",
"vueComponent", "vueComponent",
"component", "component",
"components", "components",
"ui", "ui",
"framework", "framework",
"frontend" "frontend"
], ],
"main": "dist/antd.min.js", "main": "dist/antd.min.js",
"files": [ "files": [
"dist", "dist",
"lib", "lib",
"es" "es"
], ],
"scripts": { "scripts": {
"start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot", "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
"test": "karma start test/karma.conf.js --single-run", "test": "karma start test/karma.conf.js --single-run",
"site": "node scripts/run.js site-dist", "site": "node scripts/run.js site-dist",
"copy": "node scripts/run.js copy-html", "copy": "node scripts/run.js copy-html",
"compile": "node antd-tools/cli/run.js compile", "compile": "node antd-tools/cli/run.js compile",
"pub": "node antd-tools/cli/run.js pub", "pub": "node antd-tools/cli/run.js pub",
"prepublish": "node antd-tools/cli/run.js guard", "prepublish": "node antd-tools/cli/run.js guard",
"dist": "node antd-tools/cli/run.js dist", "dist": "node antd-tools/cli/run.js dist",
"lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./components", "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./components",
"lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less", "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less",
"commitmsg": "validate-commit-msg", "commitmsg": "validate-commit-msg",
"cm": "git-cz" "cm": "git-cz"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/vueComponent/ant-design.git" "url": "git+https://github.com/vueComponent/ant-design.git"
}, },
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/vueComponent/ant-design/issues" "url": "https://github.com/vueComponent/ant-design/issues"
}, },
"homepage": "https://github.com/vueComponent/ant-design", "homepage": "https://github.com/vueComponent/ant-design",
"pre-commit": [ "pre-commit": [
"lint:style", "lint:style",
"lint" "lint"
], ],
"devDependencies": { "devDependencies": {
"@octokit/rest": "^15.2.6", "@octokit/rest": "^15.2.6",
"autoprefixer": "^8.1.0", "autoprefixer": "^8.1.0",
"babel-cli": "^6.26.0", "babel-cli": "^6.26.0",
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
"babel-eslint": "^8.0.1", "babel-eslint": "^8.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-import": "^1.1.1", "babel-plugin-import": "^1.1.1",
"babel-plugin-istanbul": "^4.1.1", "babel-plugin-istanbul": "^4.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-decorators": "^6.24.1", "babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0", "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0", "babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-plugin-transform-object-assign": "^6.22.0", "babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "~6.23.0", "babel-plugin-transform-runtime": "~6.23.0",
"babel-plugin-transform-vue-jsx": "^3.7.0", "babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"case-sensitive-paths-webpack-plugin": "^2.1.2", "case-sensitive-paths-webpack-plugin": "^2.1.2",
"chai": "^4.1.2", "chai": "^4.1.2",
"chalk": "^2.3.2", "chalk": "^2.3.2",
"cheerio": "^1.0.0-rc.2", "cheerio": "^1.0.0-rc.2",
"colorful": "^2.1.0", "colorful": "^2.1.0",
"commander": "^2.15.0", "commander": "^2.15.0",
"commitizen": "^2.9.6", "commitizen": "^2.9.6",
"css-loader": "^0.28.7", "css-loader": "^0.28.7",
"deep-assign": "^2.0.0", "deep-assign": "^2.0.0",
"eslint": "^4.7.2", "eslint": "^4.7.2",
"eslint-plugin-vue": "^3.13.0", "eslint-plugin-vue": "^3.13.0",
"eslint-plugin-html": "^3.2.2", "eslint-plugin-html": "^3.2.2",
"eslint-plugin-vue-libs": "^1.2.1", "eslint-plugin-vue-libs": "^1.2.1",
"extract-text-webpack-plugin": "^3.0.2", "extract-text-webpack-plugin": "^3.0.2",
"fetch-jsonp": "^1.1.3", "fetch-jsonp": "^1.1.3",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-babel": "^7.0.0", "gulp-babel": "^7.0.0",
"gulp-strip-code": "^0.1.4", "gulp-strip-code": "^0.1.4",
"highlight.js": "^9.12.0", "highlight.js": "^9.12.0",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^2.30.1",
"husky": "^0.14.3", "husky": "^0.14.3",
"istanbul-instrumenter-loader": "^3.0.0", "istanbul-instrumenter-loader": "^3.0.0",
"jsonp": "^0.2.1", "jsonp": "^0.2.1",
"karma": "^1.4.1", "karma": "^1.4.1",
"karma-coverage": "^1.1.1", "karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^1.3.0", "karma-coverage-istanbul-reporter": "^1.3.0",
"karma-mocha": "^1.3.0", "karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2", "karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0", "karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1", "karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7", "karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31", "karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2", "karma-webpack": "^2.0.2",
"less": "^2.7.2", "less": "^2.7.2",
"less-loader": "^4.0.5", "less-loader": "^4.0.5",
"less-plugin-npm-import": "^2.1.0", "less-plugin-npm-import": "^2.1.0",
"markdown-it": "^8.4.0", "markdown-it": "^8.4.0",
"markdown-it-anchor": "^4.0.0", "markdown-it-anchor": "^4.0.0",
"marked": "^0.3.7", "marked": "^0.3.7",
"merge2": "^1.2.1", "merge2": "^1.2.1",
"minimist": "^1.2.0", "minimist": "^1.2.0",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"mocha": "^3.2.0", "mocha": "^3.2.0",
"postcss": "^6.0.20", "postcss": "^6.0.20",
"postcss-loader": "^2.1.2", "postcss-loader": "^2.1.2",
"pre-commit": "^1.2.2", "pre-commit": "^1.2.2",
"querystring": "^0.2.0", "querystring": "^0.2.0",
"reqwest": "^2.0.5", "reqwest": "^2.0.5",
"rimraf": "^2.6.2", "rimraf": "^2.6.2",
"rucksack-css": "^1.0.2", "rucksack-css": "^1.0.2",
"selenium-server": "^3.0.1", "selenium-server": "^3.0.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"sinon": "^4.0.2", "sinon": "^4.0.2",
"sinon-chai": "^2.8.0", "sinon-chai": "^2.8.0",
"style-loader": "^0.18.2", "style-loader": "^0.18.2",
"stylelint": "^8.1.1", "stylelint": "^8.1.1",
"stylelint-config-standard": "^17.0.0", "stylelint-config-standard": "^17.0.0",
"through2": "^2.0.3", "through2": "^2.0.3",
"validate-commit-msg": "^2.14.0", "validate-commit-msg": "^2.14.0",
"vue": "^2.5.15", "vue": "^2.5.15",
"vue-antd-md-loader": "^1.0.3", "vue-antd-md-loader": "^1.0.3",
"vue-clipboard2": "0.0.8", "vue-clipboard2": "0.0.8",
"vue-loader": "^13.0.5", "vue-loader": "^13.0.5",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.15", "vue-template-compiler": "^2.5.15",
"webpack": "^3.6.0", "webpack": "^3.6.0",
"webpack-chunk-hash": "^0.5.0", "webpack-chunk-hash": "^0.5.0",
"webpack-dev-server": "^2.8.2", "webpack-dev-server": "^2.8.2",
"webpack-merge": "^4.1.1" "webpack-merge": "^4.1.1"
}, },
"dependencies": { "dependencies": {
"add-dom-event-listener": "^1.0.2", "add-dom-event-listener": "^1.0.2",
"array-tree-filter": "^2.1.0", "array-tree-filter": "^2.1.0",
"babel-runtime": "6.x", "async-validator": "^1.8.2",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"classnames": "^2.2.5", "babel-runtime": "6.x",
"component-classes": "^1.2.6", "classnames": "^2.2.5",
"css-animation": "^1.4.1", "component-classes": "^1.2.6",
"dom-align": "^1.6.7", "css-animation": "^1.4.1",
"dom-closest": "^0.2.0", "dom-align": "^1.6.7",
"dom-scroll-into-view": "^1.2.1", "dom-closest": "^0.2.0",
"enquire.js": "^2.1.6", "dom-scroll-into-view": "^1.2.1",
"is-negative-zero": "^2.0.0", "enquire.js": "^2.1.6",
"lodash": "^4.17.5", "is-negative-zero": "^2.0.0",
"moment": "^2.21.0", "lodash": "^4.17.5",
"omit.js": "^1.0.0", "moment": "^2.21.0",
"shallow-equal": "^1.0.0", "omit.js": "^1.0.0",
"shallowequal": "^1.0.2", "shallow-equal": "^1.0.0",
"warning": "^3.0.0" "shallowequal": "^1.0.2",
} "warning": "^3.0.0"
}
} }

2
site/routes.js
View File

@ -4,7 +4,7 @@ import Iframe from './components/iframe.vue'
const AsyncTestComp = () => { const AsyncTestComp = () => {
const d = window.location.hash.replace('#', '') const d = window.location.hash.replace('#', '')
return { return {
component: import(`../components/menu/demo/${d}`), component: import(`../components/vc-form/demo/${d}`),
} }
} }