zp-bee
Version:
zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。
305 lines (304 loc) • 7.75 kB
TypeScript
import Schema, { RuleItem } from 'async-validator';
export declare type CancellablePromise<T> = Promise<T> & {
cancel(): void;
};
export interface ErrorMessage {
message: string;
field: string;
}
export declare type ErrorType = ErrorMessage[] | undefined;
export declare type ErrorsType<T> = {
[U in keyof T]?: ErrorType;
};
export declare type ItemStores<T> = {
[P in keyof T]: ItemStoreInterface<T[P], T>;
};
export declare type Rules = RuleItem | RuleItem[];
export declare type SubmitCallbackType<T> = (props: SubmitCallbackProps<T>) => void;
export declare type SubmitType<T> = (callback: SubmitCallbackType<T>) => void;
export interface FunctionProperty {
[key: string]: any;
}
export declare type Parse<U> = (...args: any) => U | undefined;
export declare type Format<U> = (value?: U) => any;
export declare type CheckResult = 'loading' | 'error' | 'success' | 'default';
export interface OnChangeContext {
noParse?: boolean;
}
export interface ItemStoreInterface<U = any, T = {}> {
/**
* 字段
*/
key: keyof T;
/**
* 错误信息
*/
err: ErrorType;
/**
* 字段联合错误信息
*/
unionErr: {
[key: string]: ErrorMessage;
};
/**
* onChange上下文,每次onChange结束清空
*/
onChangeContext: OnChangeContext;
/**
* 设置onChange上下文
*/
setOnChangeContext(context?: OnChangeContext): void;
/**
* 清除上下文
*/
clearOnChangeContext: () => void;
/**
* 对外数据的错误信息(err and unionErr)
*/
errors?: ErrorType;
/**
* 父组件实例
*/
formStore: FormStoreInterface<T>;
/**
* 格式化输出的值
*/
value: U | undefined;
/**
* 当前输入后的值
*/
source: U | undefined;
/**
* 默认值
*/
defaultValue: U | undefined;
/**
* 是否输入过
*/
isChange: boolean;
/**
* 是否正在验证
*/
verifying: boolean;
/**
* 检测结果
*/
checkResult: CheckResult;
/**
* 验证规则,详情请查看相关链接
* @see {@link https://github.com/yiminghe/async-validator}
*/
rules?: Rules;
/**
* 验证规则实例
*/
schema?: Schema;
/**
* @summary 输入的值格式化
*/
parse?: Parse<U>;
/**
* 输出的值格式化
*/
format?: Format<U>;
/**
* 设置参数
*/
setProps: (props: Omit<ItemStoreProps<U, T>, 'key' | 'formStore'>) => void;
/**
* 设置验证状态
*/
setVerifying: (verifying: boolean) => void;
/**
* 设置解析
*/
setParse: (parse?: Parse<U>) => void;
/**
* 设置格式化
*/
setFormat: (format?: Format<U>) => void;
/**
* 设置联合验证错误
*/
setUnionErr: (props: {
[key: string]: ErrorMessage;
}) => void;
/**
* 删除联合验证错误
*/
delUnionErr: (keys: string[]) => void;
/**
* 修改数据
*/
onChange: (value: U | undefined, ...args: any) => void;
/**
* 设置默认数据
*/
setDefaultValue: (value: U | undefined) => void;
/**
* 设置校验规则
*/
setRules: (rules: Rules | undefined) => void;
/**
* @param rootId 根id,用于生成error key
* 验证
*/
validate: (rootId?: string) => CancellablePromise<ErrorType>;
/**
* 重置
*/
reset: () => void;
}
export interface ItemStoreProps<U = any, T = {}> {
key: keyof T;
formStore: FormStoreInterface<T>;
/**
* 默认值
*/
defaultValue?: U;
/**
* 验证规则,详情请查看相关链接
* @see {@link https://github.com/yiminghe/async-validator}
*/
rules?: Rules;
/**
* @summary 输入的值格式化
*/
parse?: Parse<U>;
/**
* 输出的值格式化
*/
format?: Format<U>;
}
export declare type SubmitCallbackProps<T> = {
values: T;
errs: undefined;
} | {
values: Partial<T>;
errs: ErrorsType<T>;
};
export interface FormStoreProps<T> {
initInstances: (formStore: FormStoreInterface<T>) => ItemStores<T>;
}
export interface FormStoreInterface<T extends {
[key: string]: any;
}> {
/**
* 全局disabled
*/
disabled: boolean;
setDisabled: (disabled: boolean) => void;
/**
* validate一个错误就停止
*/
validateOnlyFirst?: boolean;
/**
* 所有的item store
*/
itemStores: ItemStores<T>;
/**
* 联合错误(即多个字段联动产生的错误)
*/
unionValidatorDict: {
[P in keyof T]?: (() => void)[];
};
/**
* 提交
*/
submit: SubmitType<T>;
/**
* 表单是否输入过
*/
isChange: boolean;
/**
* 自动返回当前的所有错误
*/
errors?: ErrorType;
/**
* 表单变化触发
* @param key 触发的key
* @param value 触发的值(格式化过的)
* @param original 触发的原始值
* @param originalArgs 触发的原始值的其他参数
*/
onChange?(key: keyof T, value: any, original: any, originalOtherArgs: any): void;
setChangeState: (isChange: boolean) => void;
/**
* 重置
*/
reset: () => void;
getValue<K extends keyof T>(key: K): T[K] | undefined;
/**
* keys不传的情况下返回所有值
* @param keys 获取的值
*/
getValues<KEYS extends (keyof T)[]>(keys?: KEYS): Partial<{
[K in KEYS[number]]: T[K];
}>;
setValue(key: keyof T, value?: T[keyof T], onChangeContext?: OnChangeContext): void;
setValues(props: Partial<T>, onChangeContext?: OnChangeContext): void;
/**
* 跟上面 setValues 区别在于 此接口是把所有值更新成props,setValues({})不会更新任何值,setAllValues({})会把所有值更新成undefined
* @param props
*/
setAllValues(props: Partial<T>, onChangeContext?: OnChangeContext): void;
/**
* 触发全局验证
* @param rootId 根id,用于生成error key
*/
validate: (rootId?: string) => Promise<Partial<ErrorsType<T>> | undefined>;
/**
* 触发key对应的字段验证
* @param key
* @param rootId 用于生成error key
*/
validateValue(key: keyof T, rootId?: string): Promise<ErrorType>;
/**
* 触发keys对应的字段集验证
* @param keys
* @param rootId 用于生成error key
*/
validateValues<U extends ErrorsType<T> = ErrorsType<T>>(keys: (keyof T)[], rootId?: string): Promise<Partial<U>>;
}
/**
* 自动交联验证
*/
export interface AutoValidate<T, P extends keyof T = keyof T> {
/**
* 错误显示在那个key上
*/
primaryKey: P;
/**
* 除 primaryKey 外监听的其他key,primaryKey 与 key对应的值改变,即触发动作
*/
listenKey: (keyof T)[];
/**
* 验证方法
*/
validator: (arg: Partial<T>, formStore: FormStoreInterface<T>, value?: T[P]) => string | undefined;
}
/**
* 自动处理
*/
export interface AutoHandle<T> {
/**
* 监听的key,key对应的值改变,即触发动作
*/
listenKey: (keyof T)[];
/**
* 触发动作
*/
action: (arg: Partial<T>, formStore: FormStoreInterface<T>) => void;
}
export interface FormConfig<U> extends Omit<ItemStoreProps<U, {}>, 'key' | 'formStore'> {
}
export declare type FormConfigs<T = {}> = {
[P in keyof T]: FormConfig<T[P]>;
};
export declare type PartialUndefined<T> = {
[P in keyof T]: T[P] | undefined;
};
export interface Options<T> {
autoValidate?: AutoValidate<T> | AutoValidate<T>[];
autoHandle?: AutoHandle<T> | AutoHandle<T>[];
}