ant-design-vue/components/form/Form.jsx

278 lines
9.0 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import PropTypes from '../_util/vue-types';
import classNames from 'classnames';
import Vue from 'vue';
import isRegExp from 'lodash/isRegExp';
import warning from '../_util/warning';
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';
2019-04-20 06:19:13 +00:00
import { ConfigConsumerProps } from '../config-provider';
import Base from '../base';
2018-05-05 09:00:51 +00:00
export const FormCreateOption = {
onFieldsChange: PropTypes.func,
onValuesChange: PropTypes.func,
mapPropsToFields: PropTypes.func,
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
validateMessages: PropTypes.any,
2018-05-05 09:00:51 +00:00
withRef: PropTypes.bool,
2019-04-20 06:19:13 +00:00
name: PropTypes.string,
2019-01-12 03:33:27 +00:00
};
2018-05-05 09:00:51 +00:00
// 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,
2019-01-12 03:33:27 +00:00
};
2018-05-05 09:00:51 +00:00
export const FormProps = {
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
form: PropTypes.object,
2018-05-05 09:00:51 +00:00
// onSubmit: React.FormEventHandler<any>;
prefixCls: PropTypes.string,
hideRequiredMark: PropTypes.bool,
2018-06-23 09:17:45 +00:00
autoFormCreate: PropTypes.func,
options: PropTypes.object,
2019-01-12 03:33:27 +00:00
};
2018-05-05 09:00:51 +00:00
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,
2019-01-12 03:33:27 +00:00
};
2018-05-05 09:00:51 +00:00
// 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;
2018-12-08 11:24:30 +00:00
// /** Get the component props according to field value. */
// getValueProps?: (value: any) => any;
2018-05-05 09:00:51 +00:00
// /** 校验子节点值的时机 */
// 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;
2019-01-01 08:25:50 +00:00
// /** 是否一直保留子节点的信息 */
// preserve?: boolean;
2018-05-05 09:00:51 +00:00
// };
const Form = {
2018-05-05 09:00:51 +00:00
name: 'AForm',
props: initDefaultProps(FormProps, {
layout: 'horizontal',
hideRequiredMark: false,
}),
Item: FormItem,
createFormField: createFormField,
create: (options = {}) => {
return createDOMForm({
fieldNameProp: 'id',
...options,
fieldMetaProp: FIELD_META_PROP,
fieldDataProp: FIELD_DATA_PROP,
2019-01-12 03:33:27 +00:00
});
2018-05-05 09:00:51 +00:00
},
2019-01-12 03:33:27 +00:00
createForm(context, options = {}) {
const V = Base.Vue || Vue;
return new V(Form.create({ ...options, templateContext: context })());
},
created() {
this.formItemContexts = new Map();
},
2019-01-12 03:33:27 +00:00
provide() {
2018-05-05 09:00:51 +00:00
return {
FormProps: this.$props,
// https://github.com/vueComponent/ant-design-vue/issues/446
collectFormItemContext:
this.form && this.form.templateContext
? (c, type = 'add') => {
const formItemContexts = this.formItemContexts;
const number = formItemContexts.get(c) || 0;
if (type === 'delete') {
if (number <= 1) {
formItemContexts.delete(c);
} else {
formItemContexts.set(c, number - 1);
}
} else {
if (c !== this.form.templateContext) {
formItemContexts.set(c, number + 1);
}
}
}
: () => {},
2019-01-12 03:33:27 +00:00
};
2018-05-05 09:00:51 +00:00
},
2019-04-20 06:19:13 +00:00
inject: {
configProvider: { default: () => ({}) },
},
watch: {
2019-01-12 03:33:27 +00:00
form() {
this.$forceUpdate();
},
},
beforeUpdate() {
this.formItemContexts.forEach((number, c) => {
if (c.$forceUpdate) {
c.$forceUpdate();
}
});
},
2019-01-15 01:41:07 +00:00
updated() {
2019-01-16 03:22:58 +00:00
if (this.form && this.form.cleanUpUselessFields) {
2019-01-14 14:42:04 +00:00
this.form.cleanUpUselessFields();
}
},
2018-05-05 09:00:51 +00:00
methods: {
2019-01-12 03:33:27 +00:00
onSubmit(e) {
const { $listeners } = this;
2018-05-05 09:00:51 +00:00
if (!$listeners.submit) {
2019-01-12 03:33:27 +00:00
e.preventDefault();
2018-05-05 09:00:51 +00:00
} else {
2019-01-12 03:33:27 +00:00
this.$emit('submit', e);
2018-05-05 09:00:51 +00:00
}
},
},
2019-01-12 03:33:27 +00:00
render() {
2018-05-05 09:00:51 +00:00
const {
2019-04-20 06:19:13 +00:00
prefixCls: customizePrefixCls,
2019-01-12 03:33:27 +00:00
hideRequiredMark,
layout,
onSubmit,
$slots,
autoFormCreate,
options = {},
} = this;
2019-04-20 06:19:13 +00:00
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('form', customizePrefixCls);
2018-05-05 09:00:51 +00:00
const formClassName = classNames(prefixCls, {
[`${prefixCls}-horizontal`]: layout === 'horizontal',
[`${prefixCls}-vertical`]: layout === 'vertical',
[`${prefixCls}-inline`]: layout === 'inline',
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
2019-01-12 03:33:27 +00:00
});
2018-06-23 09:17:45 +00:00
if (autoFormCreate) {
2019-01-12 03:33:27 +00:00
warning(false, '`autoFormCreate` is deprecated. please use `form` instead.');
const DomForm =
this.DomForm ||
createDOMForm({
fieldNameProp: 'id',
...options,
fieldMetaProp: FIELD_META_PROP,
fieldDataProp: FIELD_DATA_PROP,
templateContext: this.$vnode.context,
})({
provide() {
return {
decoratorFormProps: this.$props,
};
},
data() {
return {
children: $slots.default,
formClassName: formClassName,
submit: onSubmit,
};
},
created() {
autoFormCreate(this.form);
},
render() {
const { children, formClassName, submit } = this;
return (
<form onSubmit={submit} class={formClassName}>
{children}
</form>
);
},
});
2018-06-23 09:17:45 +00:00
if (this.domForm) {
2019-01-12 03:33:27 +00:00
this.domForm.children = $slots.default;
this.domForm.submit = onSubmit;
this.domForm.formClassName = formClassName;
2018-06-23 09:17:45 +00:00
}
2019-01-12 03:33:27 +00:00
this.DomForm = DomForm;
return (
<DomForm
wrappedComponentRef={inst => {
this.domForm = inst;
}}
/>
);
2018-06-22 13:35:14 +00:00
}
2019-01-12 03:33:27 +00:00
return (
<form onSubmit={onSubmit} class={formClassName}>
{$slots.default}
</form>
);
2018-05-05 09:00:51 +00:00
},
2019-01-12 03:33:27 +00:00
};
2019-01-12 03:33:27 +00:00
export default Form;