@hi-ui/form 4.0.0-alpha.9 → 4.0.0-beta.10

package/lib/types/FormLabel.d.ts

@@ -16,7 +16,7 @@ export interface FormLabelProps extends HiBaseHTMLProps<'div'> {
     /**
      * 是否显示冒号
      */
-    colon?: boolean;
+    showColon?: boolean;
     /**
      * label 宽度，可使用任意 CSS 长度单位。优先级高于 Form 设置的 labelWidth
      */
@@ -25,4 +25,8 @@ export interface FormLabelProps extends HiBaseHTMLProps<'div'> {
      * label 文案
      */
     label?: React.ReactNode;
+    /**
+     * 在 vertical 放置时，label 相对表单控件垂直对齐的方式，优先级低于 Form
+     */
+    contentPosition?: 'top' | 'center' | 'bottom';
 }

package/lib/types/FormSubmit.d.ts

@@ -3,7 +3,7 @@ import { ButtonProps } from '@hi-ui/button';
 /**
  * TODO: What is FormSubmit
  */
-export declare const FormSubmit: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | null>>;
-export interface FormLabelProps extends Omit<ButtonProps, 'onClick'> {
+export declare const FormSubmit: React.ForwardRefExoticComponent<FormSubmitProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | null>>;
+export interface FormSubmitProps extends Omit<ButtonProps, 'onClick'> {
     onClick?: (value: any, error: any) => void;
 }

package/lib/types/context.d.ts

@@ -1,69 +1,10 @@
-/// <reference types="react" />
-export declare const FormProvider: import("react").Provider<Omit<{
-    setFormState: (stateOrFunc: import("./types").FormSetState<unknown>) => void;
-    setFieldValue: (field: import("./types").FormFieldPath, value: unknown, shouldValidate?: boolean | undefined) => void;
-    setFieldError: (field: import("./types").FormFieldPath, errorMessage: string | undefined) => void;
-    setFieldTouched: (field: import("./types").FormFieldPath, touched?: any) => void;
-    getFieldValue: (fieldName: import("./types").FormFieldPath) => any;
-    getFieldError: (fieldName: import("./types").FormFieldPath) => any;
-    getFieldRules: (fieldName: import("./types").FormFieldPath) => any;
-    getRootProps: () => {
-        onSubmit: (evt?: import("react").FormEvent<HTMLFormElement> | undefined) => Promise<unknown>;
-        onReset: (evt?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
-    };
-    getFieldProps: (props?: any, ref?: any) => {
-        [x: number]: any;
-        ref: any;
-        onBlur: (...args: any) => void;
-        invalid: any;
-    };
-    registerField: (keyOrKeys: import("./types").FormFieldPath, value: import("./types").FormFieldCollection<unknown>) => void;
-    unregisterField: (keyOrKeys: import("./types").FormFieldPath) => void;
-    submitForm: () => Promise<unknown>;
-    resetForm: (nextState?: Partial<import("./types").FormState<any>> | undefined) => Promise<void>;
-    resetErrors: () => void;
-    validateFieldState: (field: import("./types").FormFieldPath) => Promise<{} | undefined>;
-    validateValue: (field: import("./types").FormFieldPath, value: unknown) => Promise<{} | undefined>;
-    getFieldsValue: () => any;
-    setFieldsValue: (fields: Record<string, any>, shouldValidate?: boolean | undefined) => void;
-    getFieldsError: () => any;
-    values: unknown;
-    errors: import("./types").FormErrors<unknown>;
-    touched: import("./types").FormTouched<unknown>;
-    validating: boolean;
-    submitting?: boolean | undefined;
-}, "rootProps"> | null>;
-export declare const useFormContext: () => Omit<{
-    setFormState: (stateOrFunc: import("./types").FormSetState<unknown>) => void;
-    setFieldValue: (field: import("./types").FormFieldPath, value: unknown, shouldValidate?: boolean | undefined) => void;
-    setFieldError: (field: import("./types").FormFieldPath, errorMessage: string | undefined) => void;
-    setFieldTouched: (field: import("./types").FormFieldPath, touched?: any) => void;
-    getFieldValue: (fieldName: import("./types").FormFieldPath) => any;
-    getFieldError: (fieldName: import("./types").FormFieldPath) => any;
-    getFieldRules: (fieldName: import("./types").FormFieldPath) => any;
-    getRootProps: () => {
-        onSubmit: (evt?: import("react").FormEvent<HTMLFormElement> | undefined) => Promise<unknown>;
-        onReset: (evt?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
-    };
-    getFieldProps: (props?: any, ref?: any) => {
-        [x: number]: any;
-        ref: any;
-        onBlur: (...args: any) => void;
-        invalid: any;
-    };
-    registerField: (keyOrKeys: import("./types").FormFieldPath, value: import("./types").FormFieldCollection<unknown>) => void;
-    unregisterField: (keyOrKeys: import("./types").FormFieldPath) => void;
-    submitForm: () => Promise<unknown>;
-    resetForm: (nextState?: Partial<import("./types").FormState<any>> | undefined) => Promise<void>;
-    resetErrors: () => void;
-    validateFieldState: (field: import("./types").FormFieldPath) => Promise<{} | undefined>;
-    validateValue: (field: import("./types").FormFieldPath, value: unknown) => Promise<{} | undefined>;
-    getFieldsValue: () => any;
-    setFieldsValue: (fields: Record<string, any>, shouldValidate?: boolean | undefined) => void;
-    getFieldsError: () => any;
-    values: unknown;
-    errors: import("./types").FormErrors<unknown>;
-    touched: import("./types").FormTouched<unknown>;
-    validating: boolean;
-    submitting?: boolean | undefined;
-}, "rootProps">;
+import React from 'react';
+import { UseFormReturn } from './use-form';
+export interface FormContextProps extends UseFormReturn {
+    labelWidth: React.ReactText;
+    labelPlacement: 'left' | 'right' | 'top';
+    contentPosition: 'top' | 'center' | 'bottom';
+    showColon: boolean;
+}
+export declare const FormProvider: React.Provider<Omit<FormContextProps, "rootProps"> | null>;
+export declare const useFormContext: () => Omit<FormContextProps, "rootProps">;

package/lib/types/index.d.ts

@@ -1,6 +1,13 @@
+/// <reference types="react" />
 import './styles/index.scss';
+declare const Form: import("react").ForwardRefExoticComponent<import("./Form").FormProps<Record<string, any>> & import("react").RefAttributes<HTMLFormElement | null>> & {
+    Item: import("react").FC<import("./FormItem").FormItemProps>;
+    List: import("react").FC<import("./FormList").FormListProps>;
+    Submit: import("react").ForwardRefExoticComponent<import("./FormSubmit").FormSubmitProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement | null>>;
+    Reset: import("react").ForwardRefExoticComponent<import("./FormReset").FormResetProps & import("react").RefAttributes<HTMLButtonElement | null>>;
+};
+export default Form;
 export * from './Form';
-export { Form as default } from './Form';
 export * from './FormItem';
 export * from './FormList';
 export * from './FormSubmit';

package/lib/types/types.d.ts

@@ -88,19 +88,19 @@ export interface FormHelpers<T = any> {
     /**
      * 重置整个表单的验证,对应 Form.Reset中的 API
      */
-    reset: (fields?: [], toDefault?: boolean) => Promise<T>;
+    reset: (fields?: FormFieldPath, toDefault?: boolean) => Promise<T>;
     /**
      * 对指定表单字段进行校验
      */
-    validateField: (fields?: string[] | string) => Promise<T>;
+    validateField: (fields?: FormFieldPath) => Promise<T>;
     /**
      * 对指定表单字段进行校验
      */
-    validateFields: (fields?: string[] | string) => Promise<T>;
+    validateFields: (fields?: FormFieldPath) => Promise<T>;
     /**
      * 设置表单的值，在异步获取的数据回显的时候，使用该方法
      */
-    setFieldValue: (field: string, value: any) => void;
+    setFieldValue: (field: FormFieldPath, value: any) => void;
     /**
      * 设置多个表单的值，在异步获取的数据回显的时候，使用该方法
      */
@@ -108,7 +108,7 @@ export interface FormHelpers<T = any> {
     /**
      * 	获取一个字段名对应的 Values 返回为数组形式, 不传入 fields；默认返回全部信息, 不会触发表单校验
      */
-    getFieldValue: (field: string) => any;
+    getFieldValue: (field: FormFieldPath) => any;
     /**
      * 	获取所有字段名对应的 Values 返回为数组形式, 不传入 fields；默认返回全部信息, 不会触发表单校验
      */
@@ -116,7 +116,7 @@ export interface FormHelpers<T = any> {
     /**
      * 获取一组字段名对应的错误信息，返回为数组形式, 不传入 fields；默认返回全部信息
      */
-    getFieldError: (field: string) => any;
+    getFieldError: (field: FormFieldPath) => any;
     /**
      * 获取所有字段名对应的错误信息，返回为数组形式, 不传入 fields；默认返回全部信息
      */
@@ -128,7 +128,7 @@ export interface FormHelpers<T = any> {
     /**
      *  移除表单项的校验结果，传入待移除的表单项的 field 属性组成的数组
      */
-    clearFieldsValidates: (fields: string[]) => void;
+    clearFieldsValidates: (fields: FormFieldPath) => void;
 }
 export declare type FormFieldPath = (string | number)[] | string | number;
 export declare type FormErrorMessage = string;

package/lib/types/use-form-field.d.ts

@@ -1,19 +1,14 @@
-import { FormFieldPath, FormRuleModel } from './types';
-export declare const useFormField: <Values = any>(props: UseFormFieldProps<Values>) => {
-    [x: number]: any;
-    ref: any;
-    onBlur: (...args: any) => void;
-    invalid: any;
-};
+import { FormFieldPath, FormRuleModel, FormRuleType } from './types';
+export declare const useFormField: <Values = any>(props: UseFormFieldProps<Values>) => any;
 export interface UseFormFieldProps<T = Record<string, any>> {
     /**
      * 字段名，支持数组
      */
-    field: FormFieldPath | null;
+    field?: FormFieldPath;
     /**
      * 指定控件值数据结构类型
      */
-    valueType: 'string' | 'boolean' | 'number' | 'array' | 'object' | 'date' | null;
+    valueType?: FormRuleType;
     /**
      * 设置字段的验证规则，会覆盖 Form 设置的 rules
      */
@@ -25,17 +20,17 @@ export interface UseFormFieldProps<T = Record<string, any>> {
     /**
      * form 从控件个体采集数据的转换器，最终会把返回值转发给 Form
      */
-    valueCollectPipe?: (value: any) => T;
+    valueDispatchTransform?: (...args: any[]) => T;
     /**
      * 控件个体接收 form 下发数据的转换器，最终会把返回值转发给 FormField
      */
-    valueSyncPipe?: (value: any) => T;
+    valueConnectTransform?: (value: any) => T;
     /**
      * 自定义设置 Form 从表单控件采集数据回调的属性
      */
-    valueCollectPropName?: string;
+    valueChangeFuncPropName?: string;
     /**
-     * 设置触发该字段校验的时机，会覆盖 Form 设置的 validateTrigger
+     * 设置触发该字段校验的时机（值必须是回调函数），会覆盖 Form 设置的 validateTrigger
      */
     validateTrigger?: string | string[];
 }

package/lib/types/use-form.d.ts

@@ -12,12 +12,7 @@ export declare const useForm: <Values = Record<string, any>>({ initialValues, in
         onSubmit: (evt?: React.FormEvent<HTMLFormElement> | undefined) => Promise<unknown>;
         onReset: (evt?: React.FormEvent<HTMLFormElement> | undefined) => void;
     };
-    getFieldProps: (props?: any, ref?: any) => {
-        [x: number]: any;
-        ref: any;
-        onBlur: (...args: any) => void;
-        invalid: any;
-    };
+    getFieldProps: (props?: any) => any;
     registerField: (keyOrKeys: FormFieldPath, value: FormFieldCollection<Values>) => void;
     unregisterField: (keyOrKeys: FormFieldPath) => void;
     submitForm: () => Promise<unknown>;
@@ -44,25 +39,21 @@ export interface UseFormProps<T = Record<string, any>> {
      */
     initialErrors?: Record<keyof T, string>;
     /**
-     * 初始化是否已被触碰
+     * 初始化是否已被触碰。暂不对外暴露
+     * @private
      */
     initialTouched?: Record<string, boolean>;
     /**
      * 校验规则，设置字段的校验逻辑
      */
     rules?: Record<string, FormRuleModel[]>;
-    /**
-     * 开启在 onBlur 时触发校验
-     */
-    /**
-     * 开启在 onChange 时触发校验
-     */
     /**
      * 设置统一的表单校验时机
      */
     validateTrigger?: string | string[];
     /**
-     * 在触摸控件之后才开启校验
+     * 在触摸控件之后才开启校验。暂不对外暴露
+     * @private
      */
     validateAfterTouched?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/form",
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-beta.10",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,26 +43,27 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@flcwly/validater": "^0.1.4",
-    "@hi-ui/button": "^4.0.0-alpha.21",
-    "@hi-ui/classname": "^4.0.0-alpha.3",
-    "@hi-ui/core-css": "^4.0.0-alpha.13",
-    "@hi-ui/dom-utils": "^4.0.0-alpha.7",
-    "@hi-ui/env": "^4.0.0-alpha.5",
-    "@hi-ui/func-utils": "^4.0.0-alpha.5",
-    "@hi-ui/type-assertion": "^4.0.0-alpha.13",
-    "@hi-ui/use-latest": "^4.0.0-alpha.5",
-    "async-validator": "^4.0.7",
-    "yup": "^0.32.11"
+    "@hi-ui/array-utils": "^4.0.0-beta.4",
+    "@hi-ui/button": "^4.0.0-beta.5",
+    "@hi-ui/classname": "^4.0.0-beta.0",
+    "@hi-ui/core-css": "^4.0.0-beta.3",
+    "@hi-ui/dom-utils": "^4.0.0-beta.1",
+    "@hi-ui/env": "^4.0.0-beta.0",
+    "@hi-ui/func-utils": "^4.0.0-beta.4",
+    "@hi-ui/locale-context": "^4.0.0-beta.7",
+    "@hi-ui/object-utils": "^4.0.0-beta.3",
+    "@hi-ui/type-assertion": "^4.0.0-beta.1",
+    "@hi-ui/use-latest": "^4.0.0-beta.1",
+    "async-validator": "^4.0.7"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-alpha.4",
+    "@hi-ui/hi-build": "^4.0.0-beta.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "5a8f028a385e4a547748df37875653cfb416beb9"
+  "gitHead": "6b493b7d53d775bd0b94f45f208986774620af43"
 }