mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 13:39:40 +08:00
194 lines
6.6 KiB
React
194 lines
6.6 KiB
React
|
import PropTypes from '../_util/vue-types'
|
||
|
import classNames from 'classnames'
|
||
|
import isRegExp from 'lodash/isRegExp'
|
||
|
import createDOMForm from '../vc-form/src/createDOMForm'
|
||
|
import createFormField from '../vc-form/src/createFormField'
|
||
|
import FormItem from './FormItem'
|
||
|
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants'
|
||
|
import { initDefaultProps } from '../_util/props-util'
|
||
|
|
||
|
export const FormCreateOption = {
|
||
|
onFieldsChange: PropTypes.func,
|
||
|
onValuesChange: PropTypes.func,
|
||
|
mapPropsToFields: PropTypes.func,
|
||
|
withRef: PropTypes.bool,
|
||
|
}
|
||
|
|
||
|
// function create
|
||
|
export const WrappedFormUtils = {
|
||
|
/** 获取一组输入控件的值,如不传入参数,则获取全部组件的值 */
|
||
|
getFieldsValue: PropTypes.func,
|
||
|
/** 获取一个输入控件的值*/
|
||
|
getFieldValue: PropTypes.func,
|
||
|
/** 设置一组输入控件的值*/
|
||
|
setFieldsValue: PropTypes.func,
|
||
|
/** 设置一组输入控件的值*/
|
||
|
setFields: PropTypes.func,
|
||
|
/** 校验并获取一组输入域的值与 Error */
|
||
|
validateFields: PropTypes.func,
|
||
|
// validateFields(fieldNames: Array<string>, options: Object, callback: ValidateCallback): void;
|
||
|
// validateFields(fieldNames: Array<string>, callback: ValidateCallback): void;
|
||
|
// validateFields(options: Object, callback: ValidateCallback): void;
|
||
|
// validateFields(callback: ValidateCallback): void;
|
||
|
// validateFields(): void;
|
||
|
/** 与 `validateFields` 相似,但校验完后,如果校验不通过的菜单域不在可见范围内,则自动滚动进可见范围 */
|
||
|
validateFieldsAndScroll: PropTypes.func,
|
||
|
// validateFieldsAndScroll(fieldNames?: Array<string>, options?: Object, callback?: ValidateCallback): void;
|
||
|
// validateFieldsAndScroll(fieldNames?: Array<string>, callback?: ValidateCallback): void;
|
||
|
// validateFieldsAndScroll(options?: Object, callback?: ValidateCallback): void;
|
||
|
// validateFieldsAndScroll(callback?: ValidateCallback): void;
|
||
|
// validateFieldsAndScroll(): void;
|
||
|
/** 获取某个输入控件的 Error */
|
||
|
getFieldError: PropTypes.func,
|
||
|
getFieldsError: PropTypes.func,
|
||
|
/** 判断一个输入控件是否在校验状态*/
|
||
|
isFieldValidating: PropTypes.func,
|
||
|
isFieldTouched: PropTypes.func,
|
||
|
isFieldsTouched: PropTypes.func,
|
||
|
/** 重置一组输入控件的值与状态,如不传入参数,则重置所有组件 */
|
||
|
resetFields: PropTypes.func,
|
||
|
|
||
|
getFieldDecorator: PropTypes.func,
|
||
|
}
|
||
|
|
||
|
export const FormProps = {
|
||
|
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
|
||
|
form: PropTypes.shape(WrappedFormUtils).loose,
|
||
|
// onSubmit: React.FormEventHandler<any>;
|
||
|
prefixCls: PropTypes.string,
|
||
|
hideRequiredMark: PropTypes.bool,
|
||
|
}
|
||
|
|
||
|
export const ValidationRule = {
|
||
|
/** validation error message */
|
||
|
message: PropTypes.string,
|
||
|
/** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
|
||
|
type: PropTypes.string,
|
||
|
/** indicates whether field is required */
|
||
|
required: PropTypes.boolean,
|
||
|
/** treat required fields that only contain whitespace as errors */
|
||
|
whitespace: PropTypes.boolean,
|
||
|
/** validate the exact length of a field */
|
||
|
len: PropTypes.number,
|
||
|
/** validate the min length of a field */
|
||
|
min: PropTypes.number,
|
||
|
/** validate the max length of a field */
|
||
|
max: PropTypes.number,
|
||
|
/** validate the value from a list of possible values */
|
||
|
enum: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
|
||
|
/** validate from a regular expression */
|
||
|
pattern: PropTypes.custom(isRegExp),
|
||
|
/** transform a value before validation */
|
||
|
transform: PropTypes.func,
|
||
|
/** custom validate function (Note: callback must be called) */
|
||
|
validator: PropTypes.func,
|
||
|
}
|
||
|
|
||
|
// export type ValidateCallback = (errors: any, values: any) => void;
|
||
|
|
||
|
// export type GetFieldDecoratorOptions = {
|
||
|
// /** 子节点的值的属性,如 Checkbox 的是 'checked' */
|
||
|
// valuePropName?: string;
|
||
|
// /** 子节点的初始值,类型、可选值均由子节点决定 */
|
||
|
// initialValue?: any;
|
||
|
// /** 收集子节点的值的时机 */
|
||
|
// trigger?: string;
|
||
|
// /** 可以把 onChange 的参数转化为控件的值,例如 DatePicker 可设为:(date, dateString) => dateString */
|
||
|
// getValueFromEvent?: (...args: any[]) => any;
|
||
|
// /** 校验子节点值的时机 */
|
||
|
// validateTrigger?: string | string[];
|
||
|
// /** 校验规则,参见 [async-validator](https://github.com/yiminghe/async-validator) */
|
||
|
// rules?: ValidationRule[];
|
||
|
// /** 是否和其他控件互斥,特别用于 Radio 单选控件 */
|
||
|
// exclusive?: boolean;
|
||
|
// /** Normalize value to form component */
|
||
|
// normalize?: (value: any, prevValue: any, allValues: any) => any;
|
||
|
// /** Whether stop validate on first rule of error for this field. */
|
||
|
// validateFirst?: boolean;
|
||
|
// };
|
||
|
|
||
|
export default {
|
||
|
name: 'AForm',
|
||
|
props: initDefaultProps(FormProps, {
|
||
|
prefixCls: 'ant-form',
|
||
|
layout: 'horizontal',
|
||
|
hideRequiredMark: false,
|
||
|
}),
|
||
|
// static defaultProps = {
|
||
|
// prefixCls: 'ant-form',
|
||
|
// layout: 'horizontal',
|
||
|
// hideRequiredMark: false,
|
||
|
// onSubmit (e) {
|
||
|
// e.preventDefault()
|
||
|
// },
|
||
|
// };
|
||
|
|
||
|
// static propTypes = {
|
||
|
// prefixCls: PropTypes.string,
|
||
|
// layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
|
||
|
// children: PropTypes.any,
|
||
|
// onSubmit: PropTypes.func,
|
||
|
// hideRequiredMark: PropTypes.bool,
|
||
|
// };
|
||
|
|
||
|
Item: FormItem,
|
||
|
|
||
|
createFormField: createFormField,
|
||
|
|
||
|
create: (options = {}) => {
|
||
|
return createDOMForm({
|
||
|
fieldNameProp: 'id',
|
||
|
...options,
|
||
|
fieldMetaProp: FIELD_META_PROP,
|
||
|
fieldDataProp: FIELD_DATA_PROP,
|
||
|
})
|
||
|
},
|
||
|
|
||
|
// constructor (props) {
|
||
|
// super(props)
|
||
|
|
||
|
// warning(!props.form, 'It is unnecessary to pass `form` to `Form` after antd@1.7.0.')
|
||
|
// }
|
||
|
|
||
|
// shouldComponentUpdate(...args) {
|
||
|
// return PureRenderMixin.shouldComponentUpdate.apply(this, args);
|
||
|
// }
|
||
|
|
||
|
// getChildContext () {
|
||
|
// const { layout } = this.props
|
||
|
// return {
|
||
|
// vertical: layout === 'vertical',
|
||
|
// }
|
||
|
// },
|
||
|
provide () {
|
||
|
return {
|
||
|
FormProps: this.$props,
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
onSubmit (e) {
|
||
|
const { $listeners } = this
|
||
|
if (!$listeners.submit) {
|
||
|
e.preventDefault()
|
||
|
} else {
|
||
|
this.$emit('submit', e)
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
|
||
|
render () {
|
||
|
const {
|
||
|
prefixCls, hideRequiredMark, layout, onSubmit, $slots,
|
||
|
} = this
|
||
|
|
||
|
const formClassName = classNames(prefixCls, {
|
||
|
[`${prefixCls}-horizontal`]: layout === 'horizontal',
|
||
|
[`${prefixCls}-vertical`]: layout === 'vertical',
|
||
|
[`${prefixCls}-inline`]: layout === 'inline',
|
||
|
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
|
||
|
})
|
||
|
|
||
|
return <form onSubmit={onSubmit} class={formClassName}>{$slots.default}</form>
|
||
|
},
|
||
|
}
|