@hi-ui/form 4.0.0-beta.26 → 4.0.0-beta.29

package/lib/cjs/FormList.js

@@ -56,8 +56,7 @@ var FormList = function FormList(_ref) {
 
   var updateFormList = React__default["default"].useCallback(function (stateFunc, alterTouched, alterErrors) {
     setFormState(function (prev) {
-      var values = objectUtils.setNested(prev.values, name, stateFunc(objectUtils.getNested(prev.values, name))); // console.log(values, stateFunc(getNested(prev.values, name)))
-
+      var values = objectUtils.setNested(prev.values, name, stateFunc(objectUtils.getNested(prev.values, name)));
       var updateErrors = typeof alterErrors === 'function' ? alterErrors : stateFunc;
       var updateTouched = typeof alterTouched === 'function' ? alterTouched : stateFunc;
       var fieldError = alterErrors ? updateErrors(objectUtils.getNested(prev.errors, name)) : undefined;

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/styles/index.scss.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, '__esModule', {
 });
 var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
 
-var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+var __styleInject__ = require('inject-head-style')["default"];
 
 __styleInject__(css_248z);
 

package/lib/cjs/use-form.js

@@ -327,7 +327,7 @@ var useForm = function useForm(_a) {
     formDispatch({
       type: 'SET_VALUES',
       payload: function payload(prevState) {
-        return typeAssertion.isFunction(fieldsState) ? fieldsState(prevState) : objectUtils.merge(objectUtils.clone(prevState), fieldsState);
+        return typeAssertion.isFunction(fieldsState) ? fieldsState(prevState) : index.mergeValues(prevState, fieldsState);
       }
     });
   }, []);

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/FormList.js

@@ -35,8 +35,7 @@ var FormList = function FormList(_ref) {
 
   var updateFormList = React.useCallback(function (stateFunc, alterTouched, alterErrors) {
     setFormState(function (prev) {
-      var values = setNested(prev.values, name, stateFunc(getNested(prev.values, name))); // console.log(values, stateFunc(getNested(prev.values, name)))
-
+      var values = setNested(prev.values, name, stateFunc(getNested(prev.values, name)));
       var updateErrors = typeof alterErrors === 'function' ? alterErrors : stateFunc;
       var updateTouched = typeof alterTouched === 'function' ? alterTouched : stateFunc;
       var fieldError = alterErrors ? updateErrors(getNested(prev.errors, name)) : undefined;

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/styles/index.scss.js

@@ -7,7 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import __styleInject__ from 'style-inject/dist/style-inject.es.js';
+import __styleInject__ from 'inject-head-style';
 var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
 
 __styleInject__(css_248z);

package/lib/esm/use-form.js

@@ -9,12 +9,12 @@
  */
 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, isFunction, isObjectLike } from '@hi-ui/type-assertion';
 import { callAllFuncs } from '@hi-ui/func-utils';
-import { getNested, setNested, merge, clone } from '@hi-ui/object-utils';
+import { getNested, setNested } from '@hi-ui/object-utils';
 import { stopEvent } from '@hi-ui/dom-utils';
 var EMPTY_RULES = {};
 var EMPTY_ERRORS = {};
@@ -300,7 +300,7 @@ var useForm = function useForm(_a) {
     formDispatch({
       type: 'SET_VALUES',
       payload: function payload(prevState) {
-        return isFunction(fieldsState) ? fieldsState(prevState) : merge(clone(prevState), fieldsState);
+        return isFunction(fieldsState) ? fieldsState(prevState) : mergeValues(prevState, fieldsState);
       }
     });
   }, []);

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> {
     /**
      * 字段及值的映射存储
@@ -129,7 +128,6 @@ export interface FormHelpers<T = any> {
 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

@@ -32,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.26",
+  "version": "4.0.0-beta.29",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,17 +43,17 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^4.0.0-beta.7",
-    "@hi-ui/button": "^4.0.0-beta.12",
+    "@hi-ui/array-utils": "^4.0.0-beta.8",
+    "@hi-ui/button": "^4.0.0-beta.14",
     "@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.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",
+    "@hi-ui/dom-utils": "^4.0.0-beta.6",
+    "@hi-ui/env": "^4.0.0-beta.1",
+    "@hi-ui/func-utils": "^4.0.0-beta.13",
+    "@hi-ui/locale-context": "^4.0.0-beta.19",
+    "@hi-ui/object-utils": "^4.0.0-beta.12",
+    "@hi-ui/type-assertion": "^4.0.0-beta.5",
+    "@hi-ui/use-latest": "^4.0.0-beta.5",
     "async-validator": "^4.0.7"
   },
   "peerDependencies": {
@@ -61,9 +61,9 @@
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-beta.4",
+    "@hi-ui/hi-build": "^4.0.0-beta.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "7f47840510e6dfce429eeed1591c154e321cd14f"
+  "gitHead": "9956956831546dfe051b56cf8330912a772fa86f"
 }