@hi-ui/form 4.0.0-alpha.1

package/lib/types/FormReset.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@hi-ui/button';
+/**
+ * TODO: What is FormReset
+ */
+export declare const FormReset: React.ForwardRefExoticComponent<FormResetProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface FormResetProps extends ButtonProps {
+}

package/lib/types/FormSubmit.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@hi-ui/button';
+/**
+ * TODO: What is FormSubmit
+ */
+export declare const FormSubmit: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface FormLabelProps extends ButtonProps {
+}

package/lib/types/context.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+export declare const FormProvider: import("react").Provider<Omit<{
+    setFormState: (stateOrFunc: import("./types").FormSetState<unknown>) => void;
+    setFieldValue: (field: string, value: unknown, shouldValidate?: boolean | undefined) => void;
+    setFieldError: (field: import("./types").FormFieldPath, errorMessage: string | undefined) => void;
+    setFieldTouched: (field: import("./types").FormFieldPath, touched?: any) => void;
+    getFieldError: (fieldName: string) => unknown;
+    getFieldRules: (fieldName: string) => import("async-validator").RuleItem[];
+    getRootProps: () => {
+        onSubmit: (evt?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+        onReset: (evt?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+    };
+    getFieldProps: (props?: any, ref?: any) => {
+        [x: number]: unknown;
+        ref: any;
+        onBlur: (...args: any) => void;
+        invalid: unknown;
+    };
+    registerField: (key: string, value: import("./types").FormFieldCollection<unknown>) => void;
+    unregisterField: (key: string) => void;
+    submitForm: () => Promise<undefined>;
+    resetForm: (nextState?: Partial<import("./types").FormState<any>> | undefined) => Promise<void>;
+    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: string, value: unknown, shouldValidate?: boolean | undefined) => void;
+    setFieldError: (field: import("./types").FormFieldPath, errorMessage: string | undefined) => void;
+    setFieldTouched: (field: import("./types").FormFieldPath, touched?: any) => void;
+    getFieldError: (fieldName: string) => unknown;
+    getFieldRules: (fieldName: string) => import("async-validator").RuleItem[];
+    getRootProps: () => {
+        onSubmit: (evt?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+        onReset: (evt?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+    };
+    getFieldProps: (props?: any, ref?: any) => {
+        [x: number]: unknown;
+        ref: any;
+        onBlur: (...args: any) => void;
+        invalid: unknown;
+    };
+    registerField: (key: string, value: import("./types").FormFieldCollection<unknown>) => void;
+    unregisterField: (key: string) => void;
+    submitForm: () => Promise<undefined>;
+    resetForm: (nextState?: Partial<import("./types").FormState<any>> | undefined) => Promise<void>;
+    values: unknown;
+    errors: import("./types").FormErrors<unknown>;
+    touched: import("./types").FormTouched<unknown>;
+    validating: boolean;
+    submitting?: boolean | undefined;
+}, "rootProps">;

package/lib/types/index.d.ts

@@ -0,0 +1,6 @@
+import './styles/index.scss';
+export * from './Form';
+export { Form as default } from './Form';
+export * from './FormItem';
+export * from './FormList';
+export * from './types';

package/lib/types/types.d.ts

@@ -0,0 +1,113 @@
+import { RuleItem } from 'async-validator';
+import React from 'react';
+export interface FormState<T> {
+    /**
+     * 字段及值的映射存储
+     */
+    values: T;
+    /**
+     * 字段及错误文案的映射存储
+     */
+    errors: FormErrors<T>;
+    /**
+     * 字段及是否触摸布尔值的映射存储
+     */
+    touched: FormTouched<T>;
+    /**
+     * 是否正在校验中
+     */
+    validating: boolean;
+    /**
+     * 是否正在提交中
+     */
+    submitting?: boolean;
+}
+export declare type FormTouched<T = any> = Record<string, T>;
+export declare type FormErrors<T = any> = Record<string, T>;
+export declare type FormSetState<T> = Partial<FormState<T>> | ((state: FormState<T>) => Partial<FormState<T>>);
+export declare type FormAction<T> = {
+    type: 'SUBMIT_ATTEMPT';
+} | {
+    type: 'SUBMIT_DONE';
+} | {
+    type: 'SET_VALIDATING';
+    payload: boolean;
+} | {
+    type: 'SET_SUBMITTING';
+    payload: boolean;
+} | {
+    type: 'SET_VALUES';
+    payload: T;
+} | {
+    type: 'SET_FIELD_VALUE';
+    payload: {
+        field: React.ReactText[];
+        value?: any;
+    };
+} | {
+    type: 'SET_FIELD_TOUCHED';
+    payload: {
+        field: React.ReactText[];
+        value?: boolean;
+    };
+} | {
+    type: 'SET_FIELD_ERROR';
+    payload: {
+        field: React.ReactText[];
+        value?: string;
+    };
+} | {
+    type: 'SET_TOUCHED';
+    payload: FormTouched<T>;
+} | {
+    type: 'SET_ERRORS';
+    payload: FormErrors<T>;
+} | {
+    type: 'SET_STATUS';
+    payload: any;
+} | {
+    type: 'SET_FORM';
+    payload: FormState<T>;
+} | {
+    type: 'SET_STATE';
+    payload: FormSetState<T>;
+};
+export declare type FormValidateFunction<T = any> = (value: T) => string | Promise<string> | undefined;
+export interface FormFieldCollection<T> {
+    validate: (value: any) => Promise<T>;
+}
+export declare type FormRuleModel = RuleItem;
+export declare type FormRuleType = 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email' | 'any';
+export interface FormHelpers<T = any> {
+    validate: FormValidateFunction<T>;
+    /**
+     * 对整个表单进行校验, 对应 Form.Submit中的 API
+     */
+    submit?: () => Promise<any>;
+    /**
+     * 重置整个表单的验证,对应 Form.Reset中的 API
+     */
+    reset?: (fields: [], toDefault: boolean) => Promise<any>;
+    /**
+     * 对指定表单字段进行校验
+     */
+    validateFields?: (fields?: string[] | string) => Promise<any>;
+    /**
+     * 设置表单的值，在异步获取的数据回显的时候，使用该方法
+     */
+    setFieldsValue?: (field: string, value: any) => void;
+    /**
+     * 	获取一组字段名对应的 Values 返回为数组形式, 不传入 fields；默认返回全部信息, 不会触发表单校验
+     */
+    getFieldsValue?: (field: string) => any;
+    /**
+     * 获取一组字段名对应的错误信息，返回为数组形式, 不传入 fields；默认返回全部信息
+     */
+    getFieldsError?: (field: string) => any;
+    /**
+     * 移除表单项的校验结果。传入待移除的表单项的 field 属性组成的数组，如不传则移除整个表单的校验结果
+     */
+    clearValidates?: (fields: string[]) => void;
+}
+export declare type FormFieldPath = React.ReactText[] | React.ReactText;
+export declare type FormErrorMessage = string;

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

@@ -0,0 +1,37 @@
+import { FormFieldPath, FormRuleModel } from './types';
+export declare const useFormField: <Values = any>(props: UseFormFieldProps<Values>) => {
+    [x: number]: unknown;
+    ref: any;
+    onBlur: (...args: any) => void;
+    invalid: unknown;
+};
+export interface UseFormFieldProps<T = Record<string, any>> {
+    /**
+     * 字段名，支持数组
+     */
+    field: FormFieldPath;
+    /**
+     * 指定控件值数据结构类型
+     */
+    valueType: 'string' | 'boolean' | 'number' | 'array' | 'object' | 'date';
+    /**
+     * 设置字段的验证规则，会覆盖 Form 设置的 rules
+     */
+    rules?: FormRuleModel[];
+    /**
+     * 自定义设置 Form 往表单控件注入值的属性，如 Switch Radio Checkbox 的是 'checked'
+     */
+    valuePropName?: string;
+    /**
+     * form 从控件个体采集数据的转换器，最终会把返回值转发给 Form
+     */
+    valueSync?: (value: any) => T;
+    /**
+     * 自定义设置 Form 从表单控件采集数据回调的属性
+     */
+    onChangePropName?: string;
+    /**
+     * 设置触发该字段校验的时机，会覆盖 Form 设置的 validateTrigger
+     */
+    validateTrigger?: string | string[];
+}

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { FormState, FormFieldCollection, FormErrors, FormRuleModel, FormFieldPath, FormErrorMessage, FormSetState } from './types';
+export declare const useForm: <Values = Record<string, any>>({ initialValues, initialErrors, initialTouched, lazyValidate, onValuesChange, onReset, onSubmit, rules, validateAfterTouched, validateTrigger: validateTriggerProp, ...rest }: UseFormProps<Values>) => {
+    setFormState: (stateOrFunc: FormSetState<Values>) => void;
+    setFieldValue: (field: string, value: unknown, shouldValidate?: boolean | undefined) => void;
+    setFieldError: (field: FormFieldPath, errorMessage: FormErrorMessage | undefined) => void;
+    setFieldTouched: (field: FormFieldPath, touched?: any) => void;
+    getFieldError: (fieldName: string) => unknown;
+    getFieldRules: (fieldName: string) => import("async-validator").RuleItem[];
+    getRootProps: () => {
+        onSubmit: (evt?: React.FormEvent<HTMLFormElement> | undefined) => void;
+        onReset: (evt?: React.FormEvent<HTMLFormElement> | undefined) => void;
+    };
+    getFieldProps: (props?: any, ref?: any) => {
+        [x: number]: unknown;
+        ref: any;
+        onBlur: (...args: any) => void;
+        invalid: unknown;
+    };
+    registerField: (key: string, value: FormFieldCollection<Values>) => void;
+    unregisterField: (key: string) => void;
+    submitForm: () => Promise<undefined>;
+    resetForm: (nextState?: Partial<FormState<any>> | undefined) => Promise<void>;
+    values: unknown;
+    errors: FormErrors<unknown>;
+    touched: import("./types").FormTouched<unknown>;
+    validating: boolean;
+    submitting?: boolean | undefined;
+};
+export interface UseFormProps<T = Record<string, any>> {
+    /**
+     * 初始化表单值
+     */
+    initialValues: T;
+    /**
+     * 初始化表单错误
+     */
+    initialErrors?: Record<keyof T, string>;
+    /**
+     * 初始化是否已被触碰
+     */
+    initialTouched?: Record<string, boolean>;
+    /**
+     * 校验规则，设置字段的校验逻辑
+     */
+    rules?: Record<string, FormRuleModel[]>;
+    /**
+     * 开启在 onBlur 时触发校验
+     */
+    /**
+     * 开启在 onChange 时触发校验
+     */
+    /**
+     * 设置统一的表单校验时机
+     */
+    validateTrigger?: string | string[];
+    /**
+     * 在触摸控件之后才开启校验
+     */
+    validateAfterTouched?: boolean;
+    /**
+     * 开启惰性校验，发现第一个检验失败的表单控件，就停止向下继续校验
+     */
+    lazyValidate?: boolean;
+    /**
+     * 字段值更新时触发回调事件：changedValues: 改变的表单对象，allValues: 所有表单项对象
+     */
+    onValuesChange?: (changedValue: T, allValues: T) => void;
+    /**
+     * 提交时回调
+     */
+    onSubmit?: (values: T) => void;
+    /**
+     * 重置时回调
+     */
+    onReset?: (values: T) => void | Promise<any>;
+}
+export declare type UseFormReturn = ReturnType<typeof useForm>;

package/lib/types/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const setProp: (o: any, filed: any, value: any) => any;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@hi-ui/form",
+  "version": "4.0.0-alpha.1",
+  "description": "A sub-package for @hi-ui/hiui.",
+  "keywords": [],
+  "author": "HIUI <mi-hiui@xiaomi.com>",
+  "homepage": "https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme",
+  "license": "MIT",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "types": "lib/types/index.d.ts",
+  "typings": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XiaoMi/hiui.git"
+  },
+  "scripts": {
+    "test": "jest",
+    "clean": "rimraf lib",
+    "prebuild": "yarn clean",
+    "build:esm": "hi-build ./src/index.ts --format esm -d ./lib/esm",
+    "build:cjs": "hi-build ./src/index.ts --format cjs -d ./lib/cjs",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
+    "build": "concurrently yarn:build:*"
+  },
+  "bugs": {
+    "url": "https://github.com/XiaoMi/hiui/issues"
+  },
+  "dependencies": {
+    "@flcwly/validater": "^0.1.4",
+    "@hi-ui/button": "^4.0.0-alpha.14",
+    "@hi-ui/classname": "^4.0.0-alpha.0",
+    "@hi-ui/core-css": "^4.0.0-alpha.9",
+    "@hi-ui/dom-utils": "^4.0.0-alpha.5",
+    "@hi-ui/env": "^4.0.0-alpha.4",
+    "@hi-ui/func-utils": "^4.0.0-alpha.4",
+    "@hi-ui/type-assertion": "^4.0.0-alpha.12",
+    "@hi-ui/use-latest": "^4.0.0-alpha.3",
+    "async-validator": "^4.0.7",
+    "yup": "^0.32.11"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@hi-ui/hi-build": "^4.0.0-alpha.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "gitHead": "37cbc875cd26474cfc9ddbd1eeb0abd797a31835"
+}