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

fix: improve form type definition #3638 (#3669)

pull/3787/head
zkwolf 2021-02-07 18:32:29 +08:00 committed by GitHub
parent 553dff9f61
commit 20cd96e400
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/form/Form.tsx
View File

@ -1,4 +1,4 @@
import { defineComponent, inject, provide, PropType, computed } from 'vue'; import { defineComponent, inject, provide, PropType, computed, ExtractPropTypes } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import warning from '../_util/warning'; import warning from '../_util/warning';
@ -43,7 +43,7 @@ export type ValidationRule = {
trigger?: string; trigger?: string;
}; };
export const FormProps = { export const formProps = {
layout: PropTypes.oneOf(tuple('horizontal', 'inline', 'vertical')), layout: PropTypes.oneOf(tuple('horizontal', 'inline', 'vertical')),
labelCol: { type: Object as PropType<ColProps> }, labelCol: { type: Object as PropType<ColProps> },
wrapperCol: { type: Object as PropType<ColProps> }, wrapperCol: { type: Object as PropType<ColProps> },
@ -64,6 +64,8 @@ export const FormProps = {
validateTrigger: { type: [String, Array] as PropType<string | string[]> }, validateTrigger: { type: [String, Array] as PropType<string | string[]> },
}; };
export type FormProps = Partial<ExtractPropTypes<typeof formProps>>;
function isEqualName(name1: NamePath, name2: NamePath) { function isEqualName(name1: NamePath, name2: NamePath) {
return isEqual(toArray(name1), toArray(name2)); return isEqual(toArray(name1), toArray(name2));
} }
@ -71,7 +73,7 @@ function isEqualName(name1: NamePath, name2: NamePath) {
const Form = defineComponent({ const Form = defineComponent({
name: 'AForm', name: 'AForm',
inheritAttrs: false, inheritAttrs: false,
props: initDefaultProps(FormProps, { props: initDefaultProps(formProps, {
layout: 'horizontal', layout: 'horizontal',
hideRequiredMark: false, hideRequiredMark: false,
colon: true, colon: true,

16
components/form/FormItem.tsx
View File

@ -1,4 +1,12 @@
import { inject, provide, PropType, defineComponent, computed, nextTick } from 'vue'; import {
inject,
provide,
PropType,
defineComponent,
computed,
nextTick,
ExtractPropTypes,
} from 'vue';
import cloneDeep from 'lodash-es/cloneDeep'; import cloneDeep from 'lodash-es/cloneDeep';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
@ -66,7 +74,7 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
v: tempObj ? tempObj[keyArr[i]] : undefined, v: tempObj ? tempObj[keyArr[i]] : undefined,
}; };
} }
export const FormItemProps = { export const formItemProps = {
id: PropTypes.string, id: PropTypes.string,
htmlFor: PropTypes.string, htmlFor: PropTypes.string,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
@ -89,12 +97,14 @@ export const FormItemProps = {
messageVariables: { type: Object as PropType<Record<string, string>> }, messageVariables: { type: Object as PropType<Record<string, string>> },
}; };
export type FormItemProps = Partial<ExtractPropTypes<typeof formItemProps>>;
export default defineComponent({ export default defineComponent({
name: 'AFormItem', name: 'AFormItem',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false, inheritAttrs: false,
__ANT_NEW_FORM_ITEM: true, __ANT_NEW_FORM_ITEM: true,
props: FormItemProps, props: formItemProps,
setup(props) { setup(props) {
const FormContext = inject('FormContext', {}) as any; const FormContext = inject('FormContext', {}) as any;
const fieldName = computed(() => props.name || props.prop); const fieldName = computed(() => props.name || props.prop);

3
components/form/index.tsx
View File

@ -1,7 +1,8 @@
import { App, Plugin } from 'vue'; import { App, Plugin } from 'vue';
import Form from './Form'; import Form from './Form';
export { FormProps } from './Form'; export { FormProps, formProps } from './Form';
export { FormItemProps, formItemProps } from './FormItem';
/* istanbul ignore next */ /* istanbul ignore next */
Form.install = function(app: App) { Form.install = function(app: App) {