@hi-ui/form 4.0.0-beta.24 → 4.0.0-beta.27

package/lib/cjs/Form.js

@@ -72,14 +72,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       validate: formContext.submitForm,
       reset: formContext.resetForm,
       validateField: formContext.validateFieldState,
-      // validateFields: formContext.va,
       setFieldValue: formContext.setFieldValue,
       setFieldsValue: formContext.setFieldsValue,
       getFieldValue: formContext.getFieldValue,
       getFieldsValue: formContext.getFieldsValue,
       getFieldError: formContext.getFieldError,
       getFieldsError: formContext.getFieldsError,
-      clearValidates: formContext.resetErrors
+      clearValidates: formContext.resetErrors,
+      clearFieldValidate: formContext.resetFieldError
     };
   });
   var providedValue = React.useMemo(function () {

package/lib/cjs/FormSubmit.js

@@ -71,8 +71,10 @@ var FormSubmit = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       evt.preventDefault();
       evt.stopPropagation();
       submitForm().then(function (result) {
+        // @ts-ignore
         _onClick === null || _onClick === void 0 ? void 0 : _onClick(result, null);
       })["catch"](function (error) {
+        // @ts-ignore
         _onClick === null || _onClick === void 0 ? void 0 : _onClick(null, error);
       });
     }

package/lib/cjs/use-form.js

@@ -309,7 +309,6 @@ var useForm = function useForm(_a) {
    */
 
   var setFieldValue = React.useCallback(function (field, value, shouldValidate) {
-    // @ts-ignore
     formDispatch({
       type: 'SET_FIELD_VALUE',
       payload: {
@@ -318,20 +317,20 @@ var useForm = function useForm(_a) {
       }
     }); // touched 给外部控制展示，而不是当做参数暴露
 
-    var shouldValidateField = // shouldValidate ?? (validateAfterTouched ? getNested(formState.touched, field) : true)
-    validateAfterTouched ? objectUtils.getNested(formState.touched, field) && shouldValidate : shouldValidate;
+    var shouldValidateField = validateAfterTouched ? objectUtils.getNested(formState.touched, field) && shouldValidate : shouldValidate;
 
     if (shouldValidateField) {
       validateField(field, value);
     }
   }, [validateField, validateAfterTouched, formState]);
-  var setFieldsValue = React.useCallback(function (fields, shouldValidate) {
-    Object.entries(fields).forEach(function (_ref) {
-      var fieldName = _ref[0],
-          value = _ref[1];
-      setFieldValue(fieldName, value, shouldValidate);
+  var setFieldsValue = React.useCallback(function (fieldsState) {
+    formDispatch({
+      type: 'SET_VALUES',
+      payload: function payload(prevState) {
+        return typeAssertion.isFunction(fieldsState) ? fieldsState(prevState) : index.mergeValues(prevState, fieldsState);
+      }
     });
-  }, [setFieldValue]);
+  }, []);
   var normalizeValueFromChange = React.useCallback(function (eventOrValue, valuePropName) {
     var nextValue = eventOrValue;
 
@@ -539,11 +538,13 @@ var useForm = function useForm(_a) {
   }, [resetForm]);
   var resetErrors = React.useCallback(function () {
     formDispatch({
-      // TODO: reset errorMsg
       type: 'SET_ERRORS',
       payload: {}
     });
   }, []);
+  var resetFieldError = React.useCallback(function (field) {
+    setFieldError(field, '');
+  }, [setFieldError]);
   var setFormState = React__default["default"].useCallback(function (stateOrFunc) {
     // @ts-ignore
     formDispatch({
@@ -609,14 +610,14 @@ var useForm = function useForm(_a) {
     submitForm: submitForm,
     resetForm: resetForm,
     resetErrors: resetErrors,
+    resetFieldError: resetFieldError,
     validateFieldState: validateFieldState,
     validateValue: validateField,
     getFieldsValue: getFieldsValue,
     setFieldsValue: setFieldsValue,
     getFieldsError: getFieldsError
   });
-}; // TODO: field 支持数组
-
+};
 
 function formReducer(state, action) {
   switch (action.type) {
@@ -625,8 +626,9 @@ function formReducer(state, action) {
       return Object.assign(Object.assign({}, state), nextState);
 
     case 'SET_VALUES':
+      var nextValues = typeAssertion.isFunction(action.payload) ? action.payload(state.values) : action.payload;
       return Object.assign(Object.assign({}, state), {
-        values: action.payload
+        values: nextValues
       });
 
     case 'SET_ERRORS':

package/lib/cjs/utils/index.js

@@ -15,6 +15,8 @@ Object.defineProperty(exports, '__esModule', {
 
 var typeAssertion = require('@hi-ui/type-assertion');
 
+var objectUtils = require('@hi-ui/object-utils');
+
 var stringify = function stringify(field) {
   return JSON.stringify(field);
 };
@@ -31,6 +33,21 @@ var isValidField = function isValidField(field) {
   return true;
 };
 
+var mergeValues = function mergeValues(source, override) {
+  if (!override) return source;
+  if (!source) return objectUtils.clone(override);
+  var target = objectUtils.clone(source);
+
+  for (var key in override) {
+    if (objectUtils.hasOwnProp(override, key)) {
+      target[key] = override[key];
+    }
+  }
+
+  return target;
+};
+
 exports.isValidField = isValidField;
+exports.mergeValues = mergeValues;
 exports.parse = parse;
 exports.stringify = stringify;

package/lib/esm/Form.js

@@ -50,14 +50,14 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
       validate: formContext.submitForm,
       reset: formContext.resetForm,
       validateField: formContext.validateFieldState,
-      // validateFields: formContext.va,
       setFieldValue: formContext.setFieldValue,
       setFieldsValue: formContext.setFieldsValue,
       getFieldValue: formContext.getFieldValue,
       getFieldsValue: formContext.getFieldsValue,
       getFieldError: formContext.getFieldError,
       getFieldsError: formContext.getFieldsError,
-      clearValidates: formContext.resetErrors
+      clearValidates: formContext.resetErrors,
+      clearFieldValidate: formContext.resetFieldError
     };
   });
   var providedValue = useMemo(function () {

package/lib/esm/FormSubmit.js

@@ -47,8 +47,10 @@ var FormSubmit = /*#__PURE__*/forwardRef(function (_a, ref) {
       evt.preventDefault();
       evt.stopPropagation();
       submitForm().then(function (result) {
+        // @ts-ignore
         _onClick === null || _onClick === void 0 ? void 0 : _onClick(result, null);
       })["catch"](function (error) {
+        // @ts-ignore
         _onClick === null || _onClick === void 0 ? void 0 : _onClick(null, error);
       });
     }

package/lib/esm/use-form.js

@@ -9,10 +9,10 @@
  */
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { __rest, __awaiter } from 'tslib';
-import { stringify, parse, isValidField } from './utils/index.js';
+import { stringify, parse, mergeValues, isValidField } from './utils/index.js';
 import React, { useMemo, useReducer, useCallback, useRef } from 'react';
 import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
-import { isArray, isObjectLike, isFunction } from '@hi-ui/type-assertion';
+import { isArray, isFunction, isObjectLike } from '@hi-ui/type-assertion';
 import { callAllFuncs } from '@hi-ui/func-utils';
 import { getNested, setNested } from '@hi-ui/object-utils';
 import { stopEvent } from '@hi-ui/dom-utils';
@@ -282,7 +282,6 @@ var useForm = function useForm(_a) {
    */
 
   var setFieldValue = useCallback(function (field, value, shouldValidate) {
-    // @ts-ignore
     formDispatch({
       type: 'SET_FIELD_VALUE',
       payload: {
@@ -291,20 +290,20 @@ var useForm = function useForm(_a) {
       }
     }); // touched 给外部控制展示，而不是当做参数暴露
 
-    var shouldValidateField = // shouldValidate ?? (validateAfterTouched ? getNested(formState.touched, field) : true)
-    validateAfterTouched ? getNested(formState.touched, field) && shouldValidate : shouldValidate;
+    var shouldValidateField = validateAfterTouched ? getNested(formState.touched, field) && shouldValidate : shouldValidate;
 
     if (shouldValidateField) {
       validateField(field, value);
     }
   }, [validateField, validateAfterTouched, formState]);
-  var setFieldsValue = useCallback(function (fields, shouldValidate) {
-    Object.entries(fields).forEach(function (_ref) {
-      var fieldName = _ref[0],
-          value = _ref[1];
-      setFieldValue(fieldName, value, shouldValidate);
+  var setFieldsValue = useCallback(function (fieldsState) {
+    formDispatch({
+      type: 'SET_VALUES',
+      payload: function payload(prevState) {
+        return isFunction(fieldsState) ? fieldsState(prevState) : mergeValues(prevState, fieldsState);
+      }
     });
-  }, [setFieldValue]);
+  }, []);
   var normalizeValueFromChange = useCallback(function (eventOrValue, valuePropName) {
     var nextValue = eventOrValue;
 
@@ -512,11 +511,13 @@ var useForm = function useForm(_a) {
   }, [resetForm]);
   var resetErrors = useCallback(function () {
     formDispatch({
-      // TODO: reset errorMsg
       type: 'SET_ERRORS',
       payload: {}
     });
   }, []);
+  var resetFieldError = useCallback(function (field) {
+    setFieldError(field, '');
+  }, [setFieldError]);
   var setFormState = React.useCallback(function (stateOrFunc) {
     // @ts-ignore
     formDispatch({
@@ -582,14 +583,14 @@ var useForm = function useForm(_a) {
     submitForm: submitForm,
     resetForm: resetForm,
     resetErrors: resetErrors,
+    resetFieldError: resetFieldError,
     validateFieldState: validateFieldState,
     validateValue: validateField,
     getFieldsValue: getFieldsValue,
     setFieldsValue: setFieldsValue,
     getFieldsError: getFieldsError
   });
-}; // TODO: field 支持数组
-
+};
 
 function formReducer(state, action) {
   switch (action.type) {
@@ -598,8 +599,9 @@ function formReducer(state, action) {
       return Object.assign(Object.assign({}, state), nextState);
 
     case 'SET_VALUES':
+      var nextValues = isFunction(action.payload) ? action.payload(state.values) : action.payload;
       return Object.assign(Object.assign({}, state), {
-        values: action.payload
+        values: nextValues
       });
 
     case 'SET_ERRORS':

package/lib/esm/utils/index.js

@@ -8,6 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { isNullish, isArray } from '@hi-ui/type-assertion';
+import { clone, hasOwnProp } from '@hi-ui/object-utils';
 
 var stringify = function stringify(field) {
   return JSON.stringify(field);
@@ -25,4 +26,18 @@ var isValidField = function isValidField(field) {
   return true;
 };
 
-export { isValidField, parse, stringify };
+var mergeValues = function mergeValues(source, override) {
+  if (!override) return source;
+  if (!source) return clone(override);
+  var target = clone(source);
+
+  for (var key in override) {
+    if (hasOwnProp(override, key)) {
+      target[key] = override[key];
+    }
+  }
+
+  return target;
+};
+
+export { isValidField, mergeValues, parse, stringify };

package/lib/types/FormField.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { UseFormFieldProps } from './use-form-field';
-import { FormFieldRenderFunc } from './types';
 /**
  * TODO: What is FormField
  */
@@ -9,9 +8,9 @@ export interface FormFieldProps extends UseFormFieldProps {
     /**
      * 表单控件
      */
-    children?: React.ReactElement | FormFieldRenderFunc;
+    children?: React.ReactNode;
     /**
      * 支持表单控件 render 渲染
      */
-    render?: FormFieldRenderFunc;
+    render?: (props: Record<string, any>) => React.ReactNode;
 }

package/lib/types/FormItem.d.ts

@@ -7,11 +7,11 @@ import { FormLabelProps } from './FormLabel';
 export declare const FormItem: React.FC<FormItemProps>;
 export interface FormItemProps extends UseFormFieldProps, FormLabelProps {
     /**
-     * 表单控件
+     * 表单控件或其渲染函数
      */
-    children?: React.ReactElement;
+    children?: React.ReactNode;
     /**
      * 支持表单控件 render 渲染
      */
-    render?: (props: Record<string, any>) => React.ReactElement;
+    render?: (props: Record<string, any>) => any;
 }

package/lib/types/FormLabel.d.ts

@@ -10,7 +10,7 @@ export interface FormLabelProps extends HiBaseHTMLProps<'div'> {
      */
     labelPlacement?: 'right' | 'left' | 'top';
     /**
-     * 标记是否必填
+     * 是否显示必填信号。这里不做校验处理，若需校验请使用 rules 进行设置
      */
     required?: boolean;
     /**

package/lib/types/FormList.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
-import { FormListChildrenAction } from './types';
+import { FormFieldPath, FormListChildrenAction } from './types';
 /**
  * TODO: What is FormList
  */
 export declare const FormList: React.FC<FormListProps>;
 export interface FormListProps {
     /**
-     * 表单控件
+     * 表单控件渲染函数
      */
-    children?: (fields: any[], action: FormListChildrenAction) => React.ReactElement | null;
+    children?: (fields: any[], action: FormListChildrenAction) => React.ReactElement;
     /**
      * 列表名称
      */
-    name: string | string[];
+    name: FormFieldPath;
 }

package/lib/types/FormReset.d.ts

@@ -5,5 +5,8 @@ import { ButtonProps } from '@hi-ui/button';
  */
 export declare const FormReset: React.ForwardRefExoticComponent<FormResetProps & React.RefAttributes<HTMLButtonElement | null>>;
 export interface FormResetProps extends ButtonProps {
+    /**
+     * 点击重置后触发
+     */
     onClick?: () => void;
 }

package/lib/types/FormSubmit.d.ts

@@ -5,5 +5,8 @@ import { ButtonProps } from '@hi-ui/button';
  */
 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;
+    /**
+     * 点击提交后触发
+     */
+    onClick?: () => void;
 }

package/lib/types/types.d.ts

@@ -1,5 +1,4 @@
 import { RuleItem } from 'async-validator';
-import React from 'react';
 export interface FormState<T> {
     /**
      * 字段及值的映射存储
@@ -41,19 +40,19 @@ export declare type FormAction<T> = {
 } | {
     type: 'SET_FIELD_VALUE';
     payload: {
-        field: React.ReactText[];
+        field: FormFieldPath;
         value?: any;
     };
 } | {
     type: 'SET_FIELD_TOUCHED';
     payload: {
-        field: React.ReactText[];
+        field: FormFieldPath;
         value?: boolean;
     };
 } | {
     type: 'SET_FIELD_ERROR';
     payload: {
-        field: React.ReactText[];
+        field: FormFieldPath;
         value?: string;
     };
 } | {
@@ -85,41 +84,38 @@ export interface FormHelpers<T = any> {
      */
     validate: () => Promise<T>;
     /**
-     * 重置整个表单的验证,对应 Form.Reset中的 API
+     * 重置整个表单的验证,对应 Form.Reset中的 API，如果不知道 nextState，则重置为 initialValues
      */
-    reset: (fields?: FormFieldPath, toDefault?: boolean) => Promise<T>;
+    reset: (nextState?: Partial<FormState<any>>) => Promise<T>;
     /**
      * 对指定表单字段进行校验
      */
-    validateField: (fields?: FormFieldPath) => Promise<T>;
+    validateField: (fields: FormFieldPath) => Promise<T>;
     /**
-     * 对指定表单字段进行校验
-     */
-    validateFields: (fields?: FormFieldPath) => Promise<T>;
-    /**
-     * 设置表单的值，在异步获取的数据回显的时候，使用该方法
+     * 设置某个表单字段的值，在更新表单数据的的时候，使用该方法
      */
     setFieldValue: (field: FormFieldPath, value: any) => void;
     /**
      * 设置多个表单的值，在异步获取的数据回显的时候，使用该方法
+     * TODO
      */
-    setFieldsValue: (field: Record<string, any>) => void;
+    setFieldsValue: (field: Record<string, any> | ((prevValues: Record<string, any>) => Record<string, any>)) => void;
     /**
-     * 	获取一个字段名对应的 Values 返回为数组形式, 不传入 fields；默认返回全部信息, 不会触发表单校验
+     * 	获取一个字段名对应的 Value，返回为对应 Field 值
      */
     getFieldValue: (field: FormFieldPath) => any;
     /**
-     * 	获取所有字段名对应的 Values 返回为数组形式, 不传入 fields；默认返回全部信息, 不会触发表单校验
+     * 	获取所有字段名对应的 Values 返回为字典映射数据结构
      */
     getFieldsValue: () => any;
     /**
-     * 获取一组字段名对应的错误信息，返回为数组形式, 不传入 fields；默认返回全部信息
+     * 获取一组字段名对应的 errorMessage，返回为对应 field 错误信息
      */
     getFieldError: (field: FormFieldPath) => any;
     /**
-     * 获取所有字段名对应的错误信息，返回为数组形式, 不传入 fields；默认返回全部信息
+     * 获取所有字段名对应的错误信息，返回为字典映射数据结构
      */
-    getFieldsError: () => any;
+    getFieldsError: () => FormErrors<any>;
     /**
      * 移除所有表单项的校验结果
      */
@@ -127,12 +123,11 @@ export interface FormHelpers<T = any> {
     /**
      *  移除表单项的校验结果，传入待移除的表单项的 field 属性组成的数组
      */
-    clearFieldsValidates: (fields: FormFieldPath) => void;
+    clearFieldValidate: (fields: FormFieldPath) => void;
 }
 export declare type FormFieldPath = (string | number)[] | string | number;
 export declare type FormErrorMessage = string;
 export declare type FormRules = Record<string, FormRuleModel[]>;
-export declare type FormFieldRenderFunc = (props: Record<string, any>) => React.ReactElement;
 export interface FormListChildrenAction {
     /**
      * 在尾部追加一个 FormItems

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

@@ -9,21 +9,22 @@ export declare const useForm: <Values = Record<string, any>>({ initialValues, in
     getFieldError: (fieldName: FormFieldPath) => any;
     getFieldRules: (fieldName: FormFieldPath) => any;
     getRootProps: () => {
-        onSubmit: (evt?: React.FormEvent<HTMLFormElement> | undefined) => Promise<unknown>;
+        onSubmit: (evt?: React.FormEvent<HTMLFormElement> | undefined) => Promise<any>;
         onReset: (evt?: React.FormEvent<HTMLFormElement> | undefined) => void;
     };
     getFieldProps: (props?: any) => any;
     registerField: (keyOrKeys: FormFieldPath, value: FormFieldCollection<Values>) => void;
     unregisterField: (keyOrKeys: FormFieldPath) => void;
-    submitForm: () => Promise<unknown>;
+    submitForm: () => Promise<any>;
     resetForm: (nextState?: Partial<FormState<any>> | undefined) => Promise<void>;
     resetErrors: () => void;
+    resetFieldError: (field: FormFieldPath) => void;
     validateFieldState: (field: FormFieldPath) => Promise<{} | undefined>;
     validateValue: (field: FormFieldPath, value: unknown) => Promise<{} | undefined>;
     getFieldsValue: () => any;
-    setFieldsValue: (fields: Record<string, any>, shouldValidate?: boolean | undefined) => void;
+    setFieldsValue: (fieldsState: Record<string, any> | Function) => void;
     getFieldsError: () => any;
-    values: unknown;
+    values: any;
     errors: FormErrors<unknown>;
     touched: import("./types").FormTouched<unknown>;
     validating: boolean;
@@ -31,7 +32,7 @@ export declare const useForm: <Values = Record<string, any>>({ initialValues, in
 };
 export interface UseFormProps<T = Record<string, any>> {
     /**
-     * 初始化表单值
+     * 初始化表单值，只在初始化以及重置时生效；该值是不受控的，和表单中的 defaultValue 的作用类似
      */
     initialValues: T;
     /**

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

@@ -2,3 +2,4 @@ import { FormFieldPath } from './../types';
 export declare const stringify: (field: FormFieldPath) => string;
 export declare const parse: (fieldStr: string) => FormFieldPath;
 export declare const isValidField: (field: FormFieldPath | undefined) => field is FormFieldPath;
+export declare const mergeValues: <T extends Object, E extends T>(source: T, override: E | null | undefined) => T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/form",
-  "version": "4.0.0-beta.24",
+  "version": "4.0.0-beta.27",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,14 +44,14 @@
   },
   "dependencies": {
     "@hi-ui/array-utils": "^4.0.0-beta.7",
-    "@hi-ui/button": "^4.0.0-beta.11",
+    "@hi-ui/button": "^4.0.0-beta.13",
     "@hi-ui/classname": "^4.0.0-beta.0",
     "@hi-ui/core-css": "^4.0.0-beta.5",
     "@hi-ui/dom-utils": "^4.0.0-beta.5",
     "@hi-ui/env": "^4.0.0-beta.0",
-    "@hi-ui/func-utils": "^4.0.0-beta.10",
-    "@hi-ui/locale-context": "^4.0.0-beta.16",
-    "@hi-ui/object-utils": "^4.0.0-beta.9",
+    "@hi-ui/func-utils": "^4.0.0-beta.12",
+    "@hi-ui/locale-context": "^4.0.0-beta.18",
+    "@hi-ui/object-utils": "^4.0.0-beta.11",
     "@hi-ui/type-assertion": "^4.0.0-beta.4",
     "@hi-ui/use-latest": "^4.0.0-beta.4",
     "async-validator": "^4.0.7"
@@ -65,5 +65,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "53ae46d5c39ae7c8ed67049ca2ecbc156c891aef"
+  "gitHead": "64cc3305632f0d88f852f4a95cba7c27ff388a2d"
 }