From 0fb0186fad1c9d0c166e58f9fe3e72e9c98be5cb Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 14 Feb 2021 16:51:37 +0800 Subject: [PATCH] types(Form): use tsx (#8153) --- src/field/index.tsx | 3 +- src/field/types.ts | 5 +++ src/form/{index.js => index.tsx} | 62 ++++++++++++++++++++------------ src/vue-tsx-shim.d.ts | 1 + 4 files changed, 48 insertions(+), 23 deletions(-) rename src/form/{index.js => index.tsx} (69%) diff --git a/src/field/index.tsx b/src/field/index.tsx index 15e9d25ff..0cdc6be3e 100644 --- a/src/field/index.tsx +++ b/src/field/index.tsx @@ -42,6 +42,7 @@ import type { FieldTextAlign, FieldClearTrigger, FieldFormatTrigger, + FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, } from './types'; @@ -220,7 +221,7 @@ export default createComponent({ }; const validate = (rules = props.rules) => - new Promise<{ name?: string; message: string } | void>((resolve) => { + new Promise((resolve) => { resetValidation(); if (rules) { runRules(rules).then(() => { diff --git a/src/field/types.ts b/src/field/types.ts index c901ff1e9..09fdc6ff3 100644 --- a/src/field/types.ts +++ b/src/field/types.ts @@ -20,6 +20,11 @@ export type FieldAutosizeConfig = { minHeight?: number; }; +export type FieldValidateError = { + name?: string; + message: string; +}; + export type FieldRule = { pattern?: RegExp; trigger?: FieldValidateTrigger; diff --git a/src/form/index.js b/src/form/index.tsx similarity index 69% rename from src/form/index.js rename to src/form/index.tsx index dd8d5c0ce..97d15acde 100644 --- a/src/form/index.js +++ b/src/form/index.tsx @@ -1,8 +1,20 @@ +import { ComponentPublicInstance, PropType } from 'vue'; + +// Utils import { createNamespace } from '../utils'; + +// Composition import { useChildren } from '@vant/use'; import { FORM_KEY } from '../composables/use-link-field'; import { useExpose } from '../composables/use-expose'; +// Types +import type { + FieldTextAlign, + FieldValidateError, + FieldValidateTrigger, +} from '../field/types'; + const [createComponent, bem] = createNamespace('form'); export default createComponent({ @@ -12,17 +24,17 @@ export default createComponent({ readonly: Boolean, showError: Boolean, labelWidth: [Number, String], - labelAlign: String, - inputAlign: String, + labelAlign: String as PropType, + inputAlign: String as PropType, scrollToError: Boolean, validateFirst: Boolean, - errorMessageAlign: String, + errorMessageAlign: String as PropType, submitOnEnter: { type: Boolean, default: true, }, validateTrigger: { - type: String, + type: String as PropType, default: 'onBlur', }, showErrorMessage: { @@ -34,18 +46,21 @@ export default createComponent({ emits: ['submit', 'failed'], setup(props, { emit, slots }) { - const { children, linkChildren } = useChildren(FORM_KEY); + const { children, linkChildren } = useChildren< + // eslint-disable-next-line + ComponentPublicInstance<{}, any> + >(FORM_KEY); - const getFieldsByNames = (names) => { + const getFieldsByNames = (names?: string[]) => { if (names) { return children.filter((field) => names.indexOf(field.name) !== -1); } return children; }; - const validateSeq = (names) => - new Promise((resolve, reject) => { - const errors = []; + const validateSeq = (names?: string[]) => + new Promise((resolve, reject) => { + const errors: FieldValidateError[] = []; const fields = getFieldsByNames(names); fields @@ -53,7 +68,7 @@ export default createComponent({ (promise, field) => promise.then(() => { if (!errors.length) { - return field.validate().then((error) => { + return field.validate().then((error?: FieldValidateError) => { if (error) { errors.push(error); } @@ -71,8 +86,8 @@ export default createComponent({ }); }); - const validateAll = (names) => - new Promise((resolve, reject) => { + const validateAll = (names?: string[]) => + new Promise((resolve, reject) => { const fields = getFieldsByNames(names); Promise.all(fields.map((item) => item.validate())).then((errors) => { errors = errors.filter((item) => item); @@ -85,12 +100,12 @@ export default createComponent({ }); }); - const validateField = (name) => { + const validateField = (name: string) => { const matched = children.filter((item) => item.name === name); if (matched.length) { - return new Promise((resolve, reject) => { - matched[0].validate().then((error) => { + return new Promise((resolve, reject) => { + matched[0].validate().then((error?: FieldValidateError) => { if (error) { reject(error); } else { @@ -103,15 +118,15 @@ export default createComponent({ return Promise.reject(); }; - const validate = (name) => { - if (name && !Array.isArray(name)) { + const validate = (name?: string | string[]) => { + if (typeof name === 'string') { return validateField(name); } return props.validateFirst ? validateSeq(name) : validateAll(name); }; - const resetValidation = (name) => { - if (name && !Array.isArray(name)) { + const resetValidation = (name?: string | string[]) => { + if (typeof name === 'string') { name = [name]; } @@ -121,7 +136,10 @@ export default createComponent({ }); }; - const scrollToField = (name, options) => { + const scrollToField = ( + name: string, + options?: boolean | ScrollIntoViewOptions + ) => { children.some((item) => { if (item.name === name) { item.$el.scrollIntoView(options); @@ -135,7 +153,7 @@ export default createComponent({ children.reduce((form, field) => { form[field.name] = field.formValue.value; return form; - }, {}); + }, {} as Record); const submit = () => { const values = getValues(); @@ -153,7 +171,7 @@ export default createComponent({ }); }; - const onSubmit = (event) => { + const onSubmit = (event: Event) => { event.preventDefault(); submit(); }; diff --git a/src/vue-tsx-shim.d.ts b/src/vue-tsx-shim.d.ts index 29138c8a2..1dd7c2bb4 100644 --- a/src/vue-tsx-shim.d.ts +++ b/src/vue-tsx-shim.d.ts @@ -17,6 +17,7 @@ declare module 'vue' { onCancel?: EventHandler; onClosed?: EventHandler; onChange?: EventHandler; + onSubmit?: EventHandler; onSelect?: EventHandler; onToggle?: EventHandler; onConfirm?: EventHandler;