@hi-ui/form 4.0.0-alpha.6 → 4.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +173 -7
- package/lib/cjs/Form.js +8 -7
- package/lib/cjs/Form.js.map +1 -1
- package/lib/cjs/FormItem.js +7 -7
- package/lib/cjs/FormItem.js.map +1 -1
- package/lib/cjs/FormLabel.js +10 -8
- package/lib/cjs/FormLabel.js.map +1 -1
- package/lib/cjs/context.js.map +1 -1
- package/lib/cjs/index.js +10 -4
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/cjs/use-form-field.js +7 -4
- package/lib/cjs/use-form-field.js.map +1 -1
- package/lib/cjs/use-form.js +20 -14
- package/lib/cjs/use-form.js.map +1 -1
- package/lib/esm/Form.js +9 -8
- package/lib/esm/Form.js.map +1 -1
- package/lib/esm/FormItem.js +7 -7
- package/lib/esm/FormItem.js.map +1 -1
- package/lib/esm/FormLabel.js +9 -8
- package/lib/esm/FormLabel.js.map +1 -1
- package/lib/esm/context.js.map +1 -1
- package/lib/esm/index.js +13 -1
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/esm/use-form-field.js +6 -4
- package/lib/esm/use-form-field.js.map +1 -1
- package/lib/esm/use-form.js +20 -14
- package/lib/esm/use-form.js.map +1 -1
- package/lib/types/Form.d.ts +3 -3
- package/lib/types/FormLabel.d.ts +5 -1
- package/lib/types/FormSubmit.d.ts +2 -2
- package/lib/types/context.d.ts +10 -69
- package/lib/types/index.d.ts +8 -1
- package/lib/types/types.d.ts +12 -12
- package/lib/types/use-form-field.d.ts +8 -13
- package/lib/types/use-form.d.ts +5 -14
- package/package.json +15 -16
package/README.md
CHANGED
|
@@ -1,11 +1,177 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Form 表单
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
用来收集数据的组件集合
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 何时使用
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
const Form = require('@hi-ui/form');
|
|
7
|
+
当系统需要收集、录入时
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
常见于调查问卷、登录、新建/编辑、设置等场景
|
|
10
|
+
|
|
11
|
+
## 使用示例
|
|
12
|
+
|
|
13
|
+
<!-- Inject Stories -->
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
### Form
|
|
18
|
+
|
|
19
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
20
|
+
| -------------- | ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------- | ---------- |
|
|
21
|
+
| initialValues | 表单默认值，只有初始化以及重置时生效；该值是不受控的，和表单中的 defaultValue 的作用相同 | object | - | - |
|
|
22
|
+
| rules | 表单验证规则，用法参考 [async-validator](https://github.com/yiminghe/async-validator) | object | - | - |
|
|
23
|
+
| labelWidth | label 宽度，可用任意 CSS 长度单位 | string | |
|
|
24
|
+
| labelPlacement | label 放置的位置 | string | 'right' \| 'left' \| 'top' | 'left' |
|
|
25
|
+
| placement | 是否横向排列 | string | 'horizontal' \| 'vertical' | 'vertical' |
|
|
26
|
+
| showColon | 是否显示冒号 | boolean | true \| false | true |
|
|
27
|
+
| innerRef | 提供辅助方法的内部引用 | React.RefObject<FormHelpers<Values>> | - | - |
|
|
28
|
+
|
|
29
|
+
## Events
|
|
30
|
+
|
|
31
|
+
| 名称 | 说明 | 类型 | 参数 | 返回值 |
|
|
32
|
+
| -------------- | ------------------------ | -------------------------------------------------- | ------------------------------------------------------------- | ------ |
|
|
33
|
+
| onValuesChange | 字段值更新时触发回调事件 | (changedValues: object, allValues: object) => void | changedValues: 改变的表单对象 <br/> allValues: 所有表单项对象 | - |
|
|
34
|
+
|
|
35
|
+
## SchemaForm
|
|
36
|
+
|
|
37
|
+
> 继承 Form API
|
|
38
|
+
|
|
39
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
40
|
+
| ------ | -------------------- | ------------ | ------ | ------ |
|
|
41
|
+
| schema | 通过 schema 渲染表单 | SchemaItem[] | - | - |
|
|
42
|
+
| submit | 继承 Form.Submit API | Object | - | - |
|
|
43
|
+
| reset | 继承 Form.Reset API | Object | - | - |
|
|
44
|
+
|
|
45
|
+
## FormList
|
|
46
|
+
|
|
47
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
48
|
+
| -------- | -------- | ---------------------------------------------------------------- | ------ | ------ |
|
|
49
|
+
| name | 列表名称 | String | - | - |
|
|
50
|
+
| children | 渲染函数 | (fields: Field[], operation: { add, remove }) => React.ReactNode | - | - |
|
|
51
|
+
|
|
52
|
+
## Form.Item
|
|
53
|
+
|
|
54
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
55
|
+
| --------------- | --------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------- | -------- |
|
|
56
|
+
| field | 字段名，支持数组 | string | (string)[] | - | - |
|
|
57
|
+
| name | 在`Form.List`的嵌套表单中；表示该项的属性名称 | string | - | - | - |
|
|
58
|
+
| row | 在`Form.List` 表示列表的第几行, 设置指定列表表单项时有用 | any | - | - | - |
|
|
59
|
+
| label | 标签文本，默认自动添加冒号 | string | - | - |
|
|
60
|
+
| labelWidth | label 宽度，可用任意 CSS 长度单位，优先级高于 Form 设置的 labelWidth | string | |
|
|
61
|
+
| required | 是否必填 | boolean | true \| false | false |
|
|
62
|
+
| showColon | 是否显示冒号 | boolean | true \| false | - |
|
|
63
|
+
| rules | 表单验证规则，会覆盖 Form 设置的 rules，用法参考 [async-validator](https://github.com/yiminghe/async-validator) | object | - | - |
|
|
64
|
+
| valuePropName | 子节点的值的属性，如 Switch Radio Checkbox 的是 'checked' | string | - | 'value' |
|
|
65
|
+
| contentPosition | 指定显示内容的位置的位置，对一些非 HiUI 表单组件进行设置 | string | 'top' \| 'center' \|'bottom' | 'center' |
|
|
66
|
+
|
|
67
|
+
## SchemaItem
|
|
68
|
+
|
|
69
|
+
> 继承 Form.Item API
|
|
70
|
+
|
|
71
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
72
|
+
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | ------ | ------ |
|
|
73
|
+
| component | 用于渲染的组件名称(现在组件名称，只限于 HiUI 中的组件名）；如果传入 **ReactNode** 的情况下，**componentProps** 属性失效，同时也会默认控制组件 **value** 属性 | string \| ReactNode | - | - |
|
|
74
|
+
| componentProps | 组件的属性 | string | - | - |
|
|
75
|
+
|
|
76
|
+
## Form.Submit
|
|
77
|
+
|
|
78
|
+
> 继承 Button API
|
|
79
|
+
|
|
80
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
81
|
+
| ------- | -------------------------------------------------------------- | -------- | ------ | --------- |
|
|
82
|
+
| onClick | 点击提交后触发 Function(value: Object, errors: Object) => void | Function | - | func.noop |
|
|
83
|
+
| fields | 需要校验的 field 字段，不传入的话就是默认全部校验 | Array | - | - |
|
|
84
|
+
|
|
85
|
+
## Form.Reset
|
|
86
|
+
|
|
87
|
+
> 继承 Button API
|
|
88
|
+
|
|
89
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
90
|
+
| --------- | ------------------------------------------------- | -------- | --------- |
|
|
91
|
+
| onClick | 点击提交后触发 () => void | Function | func.noop |
|
|
92
|
+
| fields | 需要重置的 field 字段，不传入的话就是默认全部重置 | Array | - |
|
|
93
|
+
| toDefault | 返回默认值 | Boolean | true |
|
|
94
|
+
|
|
95
|
+
## Methods
|
|
96
|
+
|
|
97
|
+
| 方法名 | 说明 |
|
|
98
|
+
| ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
|
|
99
|
+
| validate(callback: (fields: Object, errors: Object) => void, fields:Array) | 对整个表单进行校验, 对应 [Form.Submit](#Form.Submit)中的 API |
|
|
100
|
+
| validateField(fields: []string, callback: errors => void) | 对指定表单字段进行校验 |
|
|
101
|
+
| resetValidates(callback:() => void, fields:Array, toDefault:boolean) | 重置整个表单的验证,对应 [Form.Reset](#Form.Reset)中的 API |
|
|
102
|
+
| setFieldsValue(field: Object) | 设置表单的值，在异步获取的数据回显的时候，使用该方法 |
|
|
103
|
+
| setListItemFieldsValue(ListItemInfo: Object) | 设置表单中 From.List 的指定项的值 [ListItemInfo](#ListItemInfo) |
|
|
104
|
+
| getFieldsValue( fields: Object ) => Object | 获取一组字段名对应的 Values 返回为数组形式, 不传入 fields；默认返回全部信息, 不会触发表单校验 |
|
|
105
|
+
| getFieldsError( fields: []string ) => Object | 获取一组字段名对应的错误信息，返回为数组形式, 不传入 fields；默认返回全部信息 |
|
|
106
|
+
| clearValidates( fields: []string ) => void | 移除表单项的校验结果。传入待移除的表单项的 field 属性组成的数组，如不传则移除整个表单的校验结果 |
|
|
107
|
+
| updateFormSchema( schemaData: {fileName: [SchemaItem](#SchemaItem) } ) => void | 当 **SchemaItem** 中对应的 **schema** 数据更新时，请调用该方法更新 |
|
|
108
|
+
|
|
109
|
+
## ListItemInfo
|
|
110
|
+
|
|
111
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
112
|
+
| -------- | ------------------------------------------------ | ------ | ------ | ------ |
|
|
113
|
+
| name | 对应 `Form.Item` 中的 name，在列表项中的属性名称 | string | - | - |
|
|
114
|
+
| listname | 需要更新的列表名称 | string | - | - |
|
|
115
|
+
| row | 对应 `Form.Item` 中的 row，表示列表的第几行 | string | - | - |
|
|
116
|
+
| value | 需要更新的值 | any | - | - |
|
|
117
|
+
|
|
118
|
+
## Rules
|
|
119
|
+
|
|
120
|
+
> [更多规则](https://github.com/yiminghe/async-validator)
|
|
121
|
+
|
|
122
|
+
| 名称 | 说明 | 类型 |
|
|
123
|
+
| ---------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
|
|
124
|
+
| enum | 是否匹配枚举中的值 | any[] |
|
|
125
|
+
| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number |
|
|
126
|
+
| max | 必须设置 `type`：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度 | number |
|
|
127
|
+
| message | 错误信息 | string |
|
|
128
|
+
| min | 必须设置 `type`：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度 | number |
|
|
129
|
+
| pattern | 正则表达式匹配 | RegExp |
|
|
130
|
+
| required | 是否为必选字段 | boolean |
|
|
131
|
+
| transform | 将字段值转换成目标值后进行校验 | (value) => any |
|
|
132
|
+
| type | 类型，常见有 `string` \|`number` \|`boolean` \| `email`。更多请参考[此处](https://github.com/yiminghe/async-validator#type) | string |
|
|
133
|
+
| validator | 自定义校验 | (rule,value,callback) => void |
|
|
134
|
+
| whitespace | 如果字段仅包含空格则校验不通过 | boolean |
|
|
135
|
+
|
|
136
|
+
## CHANGELOG
|
|
137
|
+
|
|
138
|
+
### Form
|
|
139
|
+
|
|
140
|
+
| 参数 | 变更类型 | 变更内容 | 解决的问题 |
|
|
141
|
+
| -------------------- | ------------------------------- | --------------- | ----------------------------------------------------------------- |
|
|
142
|
+
| propName | feature \| deprecated \| update | 变更了什么 | 之前是什么样子，解决什么问题 |
|
|
143
|
+
| ---- | ---- | ---- | ---- |
|
|
144
|
+
| innerRef | update | ref -> innerRef | 解决名字占用，ref 功能作为 dom 引用获取，回调方法写法支持 Promise |
|
|
145
|
+
| initialErrors | feature | - | 强化功能 |
|
|
146
|
+
| initialTouched | feature | - | 强化功能 |
|
|
147
|
+
| validateTrigger | feature | - | 强化功能 |
|
|
148
|
+
| validateAfterTouched | feature | - | 强化功能 |
|
|
149
|
+
| lazyValidate | feature | - | 强化功能 |
|
|
150
|
+
| onSubmit | feature | - | 强化功能 |
|
|
151
|
+
| onReset | feature | - | 强化功能 |
|
|
152
|
+
|
|
153
|
+
### FormItem
|
|
154
|
+
|
|
155
|
+
| 参数 | 变更类型 | 变更内容 | 解决的问题 |
|
|
156
|
+
| ----------------------- | ------------------------------- | -------------------------- | ---------------------------- |
|
|
157
|
+
| propName | feature \| deprecated \| update | 变更了什么 | 之前是什么样子，解决什么问题 |
|
|
158
|
+
| ---- | ---- | ---- | ---- |
|
|
159
|
+
| required | update | 定义：只做展示，不做校验 | 优化功能 |
|
|
160
|
+
| valueType | feature | - | 强化功能 |
|
|
161
|
+
| valueChangeFuncPropName | feature | - | 强化功能 |
|
|
162
|
+
| valueDispatchTransform | feature | - | 强化功能 |
|
|
163
|
+
| valueConnectTransform | feature | - | 强化功能 |
|
|
164
|
+
| validateTrigger | feature | - | 强化功能 |
|
|
165
|
+
| children | feature | 支持函数自定义渲染表单控件 | 强化功能 |
|
|
166
|
+
|
|
167
|
+
### FormList
|
|
168
|
+
|
|
169
|
+
| 参数 | 变更类型 | 变更内容 | 解决的问题 |
|
|
170
|
+
| -------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
|
|
171
|
+
| propName | feature \| deprecated \| update | 变更了什么 | 之前是什么样子，解决什么问题 |
|
|
172
|
+
| ---- | ---- | ---- | ---- |
|
|
173
|
+
| children | feature | (fields: Field[], operation: { add, remove }) => React.ReactNode -> (fields: Field[], operation: { add, remove, swap, insertBefore, move }) => React.ReactNode | 强化支持 |
|
|
174
|
+
|
|
175
|
+
### SchemeForm
|
|
176
|
+
|
|
177
|
+
> SchemaItem 内部废弃，作为物料高级组件进行扩展
|
package/lib/cjs/Form.js
CHANGED
|
@@ -58,8 +58,10 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
58
58
|
labelPlacement = _a$labelPlacement === void 0 ? 'right' : _a$labelPlacement,
|
|
59
59
|
_a$placement = _a.placement,
|
|
60
60
|
placement = _a$placement === void 0 ? 'vertical' : _a$placement,
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
_a$contentPosition = _a.contentPosition,
|
|
62
|
+
contentPosition = _a$contentPosition === void 0 ? 'center' : _a$contentPosition,
|
|
63
|
+
showColon = _a.showColon,
|
|
64
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showColon"]);
|
|
63
65
|
|
|
64
66
|
var formContext = useForm.useForm(rest);
|
|
65
67
|
var getRootProps = formContext.getRootProps; // @ts-ignore
|
|
@@ -83,11 +85,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
83
85
|
return Object.assign(Object.assign({
|
|
84
86
|
labelWidth: labelWidth,
|
|
85
87
|
labelPlacement: labelPlacement,
|
|
86
|
-
|
|
88
|
+
showColon: showColon,
|
|
89
|
+
contentPosition: contentPosition
|
|
87
90
|
}, formContext), {
|
|
88
91
|
prefixCls: prefixCls
|
|
89
92
|
});
|
|
90
|
-
}, [labelWidth, formContext, labelPlacement,
|
|
93
|
+
}, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition]);
|
|
91
94
|
var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
|
|
92
95
|
return (
|
|
93
96
|
/*#__PURE__*/
|
|
@@ -112,9 +115,7 @@ var formExtends = function formExtends(model) {
|
|
|
112
115
|
// @ts-ignore
|
|
113
116
|
FORM_REGISTER_TABLE[model.name] = model;
|
|
114
117
|
} else {
|
|
115
|
-
|
|
116
|
-
console.log('WARNING: the name should be unique string and not empty.');
|
|
117
|
-
}
|
|
118
|
+
env.invariant(true, 'The name should be unique string and not empty.');
|
|
118
119
|
}
|
|
119
120
|
};
|
|
120
121
|
|
package/lib/cjs/Form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../src/Form.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","FORM_REGISTER_TABLE","Form","forwardRef","_a","ref","prefixCls","role","className","children","innerRef","labelWidth","labelPlacement","placement","
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../src/Form.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","FORM_REGISTER_TABLE","Form","forwardRef","_a","ref","prefixCls","role","className","children","innerRef","labelWidth","labelPlacement","placement","contentPosition","showColon","rest","formContext","useForm","getRootProps","useImperativeHandle","validate","submitForm","reset","resetForm","validateField","validateFieldState","setFieldValue","setFieldsValue","getFieldValue","getFieldsValue","getFieldError","getFieldsError","clearValidates","resetErrors","providedValue","useMemo","cls","cx","React","FormProvider","value","__DEV__","displayName","formExtends","model","name","invariant","Object","assign","extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,KAAK,GAAG,MAAd;;AACA,IAAMC,OAAO,GAAGC,sBAAAA,CAAaF,KAAbE,CAAhB;;;IAGaC,mBAAmB,GAAkC;AAElE;;;;IAGaC,IAAI,gBAAGC,gBAAAA,CAClB,UACEC,EADF,EAcEC,GAdF;wBAEIC;MAAAA,sCAAYP;mBACZQ;MAAAA,4BAAOT;MACPU,eAAAA;MACAC,cAAAA;MACAC,cAAAA;MACAC,gBAAAA;6BACAC;MAAAA,gDAAiB;wBACjBC;MAAAA,sCAAY;8BACZC;MAAAA,kDAAkB;MAClBC,eAAAA;MACGC,wBAXL,YAAA,QAAA,aAAA,YAAA,YAAA,cAAA,kBAAA,aAAA,mBAAA,aAAA;;MAeMC,WAAW,GAAGC,eAAAA,CAAQF,IAARE;MAEZC,YAAR,GAAyBF,WAAzB,CAAQE;;AAGRC,EAAAA,yBAAAA,CAAoBV,QAApBU,EAA8B;WACrB;AACLC,MAAAA,QAAQ,EAAEJ,WAAW,CAACK,UADjB;AAELC,MAAAA,KAAK,EAAEN,WAAW,CAACO,SAFd;AAGLC,MAAAA,aAAa,EAAER,WAAW,CAACS,kBAHtB;;AAKLC,MAAAA,aAAa,EAAEV,WAAW,CAACU,aALtB;AAMLC,MAAAA,cAAc,EAAEX,WAAW,CAACW,cANvB;AAOLC,MAAAA,aAAa,EAAEZ,WAAW,CAACY,aAPtB;AAQLC,MAAAA,cAAc,EAAEb,WAAW,CAACa,cARvB;AASLC,MAAAA,aAAa,EAAEd,WAAW,CAACc,aATtB;AAULC,MAAAA,cAAc,EAAEf,WAAW,CAACe,cAVvB;AAWLC,MAAAA,cAAc,EAAEhB,WAAW,CAACiB;AAXvB;AADU,GAAnBd;MAgBMe,aAAa,GAAGC,aAAAA,CAAQ;;AAE1BzB,MAAAA,UAAU,EAAVA;AACAC,MAAAA,cAAc,EAAdA;AACAG,MAAAA,SAAS,EAATA;AACAD,MAAAA,eAAe,EAAfA;OACGG;AACHX,MAAAA,SAAS,EAATA;;AAPyB,GAAP8B,EASnB,CAACzB,UAAD,EAAaM,WAAb,EAA0BL,cAA1B,EAA0CG,SAA1C,EAAqDT,SAArD,EAAgEQ,eAAhE,CATmBsB;MAWhBC,GAAG,GAAGC,YAAAA,CAAGhC,SAAHgC,EAAc9B,SAAd8B,EAAyBzB,SAAS,IAAOP,SAAP,iBAAOA,GAAwBO,SAAjEyB;;;;AAIVC,IAAAA,yBAAAA,cAAAA,CAACC,oBAADD;AAAcE,MAAAA,KAAK,EAAEN;KAArBI,eACEA,yBAAAA,cAAAA,OAAAA;AAAMlC,MAAAA,GAAG,EAAEA;AAAKE,MAAAA,IAAI,EAAEA;AAAMC,MAAAA,SAAS,EAAE6B;OAASlB,YAAY,GAA5DoB,EACG9B,QADH8B,CADFA;;AArDwB,CAAVpC;;AA2FpB,IAAIuC,WAAJ,EAAa;AACXxC,EAAAA,IAAI,CAACyC,WAALzC,GAAmB,MAAnBA;;;AAGF,IAAM0C,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;;MAEd,OAAOA,KAAK,CAACC,IAAb,KAAsB,UAAU;;AAElC7C,IAAAA,mBAAmB,CAAC4C,KAAK,CAACC,IAAP,CAAnB7C,GAAkC4C,KAAlC5C;AAFF,SAGO;AACL8C,IAAAA,aAAAA,CAAU,IAAVA,EAAgB,iDAAhBA;;AANJ,CAAA;;AAUAC,MAAM,CAACC,MAAPD,CAAc9C,IAAd8C,EAAoB;AAAEE,aAASN;AAAX,CAApBI;;"}
|
package/lib/cjs/FormItem.js
CHANGED
|
@@ -50,11 +50,11 @@ var FormItem = function FormItem(_a) {
|
|
|
50
50
|
valueType = _a.valueType,
|
|
51
51
|
rules = _a.rules,
|
|
52
52
|
valuePropName = _a.valuePropName,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
valueChangeFuncPropName = _a.valueChangeFuncPropName,
|
|
54
|
+
valueDispatchTransform = _a.valueDispatchTransform,
|
|
55
|
+
valueConnectTransform = _a.valueConnectTransform,
|
|
56
56
|
validateTrigger = _a.validateTrigger,
|
|
57
|
-
rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "
|
|
57
|
+
rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger"]); // @ts-ignore
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
var _useFormContext = context.useFormContext(),
|
|
@@ -67,9 +67,9 @@ var FormItem = function FormItem(_a) {
|
|
|
67
67
|
valueType: valueType,
|
|
68
68
|
rules: rules,
|
|
69
69
|
valuePropName: valuePropName,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
70
|
+
valueChangeFuncPropName: valueChangeFuncPropName,
|
|
71
|
+
valueDispatchTransform: valueDispatchTransform,
|
|
72
|
+
valueConnectTransform: valueConnectTransform,
|
|
73
73
|
validateTrigger: validateTrigger
|
|
74
74
|
}, children), /*#__PURE__*/React__default['default'].createElement(FormMessage.FormMessage, {
|
|
75
75
|
field: field,
|
package/lib/cjs/FormItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormItem.js","sources":["../../src/FormItem.tsx"],"sourcesContent":[null],"names":["FormItem","_a","className","children","field","valueType","rules","valuePropName","
|
|
1
|
+
{"version":3,"file":"FormItem.js","sources":["../../src/FormItem.tsx"],"sourcesContent":[null],"names":["FormItem","_a","className","children","field","valueType","rules","valuePropName","valueChangeFuncPropName","valueDispatchTransform","valueConnectTransform","validateTrigger","rest","useFormContext","prefixCls","React","FormLabel","cx","FormField","FormMessage","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;;;;IAGaA,QAAQ,GAA4B,SAApCA,QAAoC,CAACC,EAAD;MAC/CC,eAAAA;MACAC,cAAAA;MACAC,WAAAA;MACAC,eAAAA;MACAC,WAAAA;MACAC,mBAAAA;MACAC,6BAAAA;MACAC,4BAAAA;MACAC,2BAAAA;MACAC,qBAAAA;MACGC,wBAX6C,YAAA,YAAA,SAAA,aAAA,SAAA,iBAAA,2BAAA,0BAAA,yBAAA,mBAAA;;;wBAc1BC,sBAAAA;MAAdC,SAAR,mBAAQA;;sBAGNC,yBAAAA,cAAAA,CAACC,mBAADD,oBAAeH;AAAMV,IAAAA,SAAS,EAAEe,YAAAA,CAAMH,SAAJ,UAAFG,EAAwBf,SAAxBe;IAAhCF,eACEA,yBAAAA,cAAAA,CAACG,mBAADH;AACEX,IAAAA,KAAK,EAAEA;AACPC,IAAAA,SAAS,EAAEA;AACXC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,aAAa,EAAEA;AACfC,IAAAA,uBAAuB,EAAEA;AACzBC,IAAAA,sBAAsB,EAAEA;AACxBC,IAAAA,qBAAqB,EAAEA;AACvBC,IAAAA,eAAe,EAAEA;GARnBI,EAUGZ,QAVHY,CADFA,eAcEA,yBAAAA,cAAAA,CAACI,uBAADJ;AAAaX,IAAAA,KAAK,EAAEA;AAAOF,IAAAA,SAAS,EAAKY,SAAL;GAApCC,CAdFA;;;AA0BJ,IAAIK,WAAJ,EAAa;AACXpB,EAAAA,QAAQ,CAACqB,WAATrB,GAAuB,UAAvBA;;;"}
|
package/lib/cjs/FormLabel.js
CHANGED
|
@@ -27,6 +27,8 @@ var context = require('./context.js');
|
|
|
27
27
|
|
|
28
28
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
29
29
|
|
|
30
|
+
var localeContext = require('@hi-ui/locale-context');
|
|
31
|
+
|
|
30
32
|
function _interopDefaultLegacy(e) {
|
|
31
33
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
32
34
|
'default': e
|
|
@@ -44,10 +46,12 @@ var _prefix = classname.getPrefixCls(_role);
|
|
|
44
46
|
|
|
45
47
|
|
|
46
48
|
var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
49
|
+
var i18n = localeContext.useLocaleContext();
|
|
50
|
+
|
|
47
51
|
var _useFormContext = context.useFormContext(),
|
|
48
52
|
labelWidthContext = _useFormContext.labelWidth,
|
|
49
53
|
labelPlacement = _useFormContext.labelPlacement,
|
|
50
|
-
|
|
54
|
+
showColonContext = _useFormContext.showColon,
|
|
51
55
|
contentPositionContext = _useFormContext.contentPosition;
|
|
52
56
|
|
|
53
57
|
var _props$prefixCls = props.prefixCls,
|
|
@@ -62,11 +66,11 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
62
66
|
required = _props$required === void 0 ? false : _props$required,
|
|
63
67
|
_props$labelWidth = props.labelWidth,
|
|
64
68
|
labelWidthProp = _props$labelWidth === void 0 ? labelWidthContext : _props$labelWidth,
|
|
65
|
-
_props$
|
|
66
|
-
|
|
69
|
+
_props$showColon = props.showColon,
|
|
70
|
+
showColon = _props$showColon === void 0 ? showColonContext : _props$showColon,
|
|
67
71
|
_props$contentPositio = props.contentPosition,
|
|
68
72
|
contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
|
|
69
|
-
rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "
|
|
73
|
+
rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition"]);
|
|
70
74
|
|
|
71
75
|
var _useMemo = React.useMemo(function () {
|
|
72
76
|
if (labelPlacement === 'top') return {
|
|
@@ -95,9 +99,7 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
95
99
|
return 'center';
|
|
96
100
|
}
|
|
97
101
|
}, [contentPosition]);
|
|
98
|
-
var
|
|
99
|
-
return colon || '：';
|
|
100
|
-
}, [colon]);
|
|
102
|
+
var colon = showColon ? i18n.get('form.colon') : null;
|
|
101
103
|
var cls = classname.cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement // error && `${prefixCls}--error`,
|
|
102
104
|
// validating && `${prefixCls}--validating`
|
|
103
105
|
);
|
|
@@ -114,7 +116,7 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
114
116
|
style: {
|
|
115
117
|
width: labelWidth
|
|
116
118
|
}
|
|
117
|
-
}, label,
|
|
119
|
+
}, label, colon) : /*#__PURE__*/React__default['default'].createElement("span", {
|
|
118
120
|
className: prefixCls + "__indent",
|
|
119
121
|
style: {
|
|
120
122
|
width: labelWidth
|
package/lib/cjs/FormLabel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../../src/FormLabel.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","FormLabel","forwardRef","props","ref","useFormContext","labelWidthContext","labelWidth","labelPlacement","
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["../../src/FormLabel.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","FormLabel","forwardRef","props","ref","i18n","useLocaleContext","useFormContext","labelWidthContext","labelWidth","labelPlacement","showColonContext","showColon","contentPositionContext","contentPosition","prefixCls","role","className","styleProp","style","children","label","required","labelWidthProp","rest","useMemo","controlWidth","isNumeric","Number","contentPositionMemo","colon","get","cls","cx","alignItems","React","width","__DEV__","displayName"],"mappings":"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"}
|
package/lib/cjs/context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../../src/context.ts"],"sourcesContent":[null],"names":["formContext","createContext","FormProvider","Provider","useFormContext","context","useContext","Error"],"mappings":";;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../src/context.ts"],"sourcesContent":[null],"names":["formContext","createContext","FormProvider","Provider","useFormContext","context","useContext","Error"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAMA,WAAW,gBAAGC,mBAAAA,CAA0D,IAA1DA,CAApB;IAEaC,YAAY,GAAGF,WAAW,CAACG;;IAE3BC,cAAc,GAAG,SAAjBA,cAAiB;MACtBC,OAAO,GAAGC,gBAAAA,CAAWN,WAAXM;;MAEZ,CAACD,SAAS;UACN,IAAIE,KAAJ,CAAU,uCAAV;;;SAGDF;;;;"}
|
package/lib/cjs/index.js
CHANGED
|
@@ -15,7 +15,7 @@ Object.defineProperty(exports, '__esModule', {
|
|
|
15
15
|
|
|
16
16
|
require('./styles/index.scss.js');
|
|
17
17
|
|
|
18
|
-
var Form = require('./Form.js');
|
|
18
|
+
var Form$1 = require('./Form.js');
|
|
19
19
|
|
|
20
20
|
var FormItem = require('./FormItem.js');
|
|
21
21
|
|
|
@@ -25,11 +25,17 @@ var FormSubmit = require('./FormSubmit.js');
|
|
|
25
25
|
|
|
26
26
|
var FormReset = require('./FormReset.js');
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
var Form = Object.assign(Form$1.Form, {
|
|
29
|
+
Item: FormItem.FormItem,
|
|
30
|
+
List: FormList.FormList,
|
|
31
|
+
Submit: FormSubmit.FormSubmit,
|
|
32
|
+
Reset: FormReset.FormReset
|
|
33
|
+
});
|
|
34
|
+
exports.FORM_REGISTER_TABLE = Form$1.FORM_REGISTER_TABLE;
|
|
35
|
+
exports.Form = Form$1.Form;
|
|
31
36
|
exports.FormItem = FormItem.FormItem;
|
|
32
37
|
exports.FormList = FormList.FormList;
|
|
33
38
|
exports.FormSubmit = FormSubmit.FormSubmit;
|
|
34
39
|
exports.FormReset = FormReset.FormReset;
|
|
40
|
+
exports["default"] = Form;
|
|
35
41
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":[null],"names":["Form","Object","assign","_Form","Item","List","Submit","Reset"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;IAQMA,IAAI,GAAGC,MAAM,CAACC,MAAPD,CAAcE,WAAdF,EAAqB;AAChCG,EAAAA,IAAI,EAAJA,iBADgC;AAEhCC,EAAAA,IAAI,EAAJA,iBAFgC;AAGhCC,EAAAA,MAAM,EAANA,qBAHgC;AAIhCC,EAAAA,KAAK,EAALA;AAJgC,CAArBN;;;;;;;"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-form {\n max-width: 100%;\n position: relative; }\n.hi-v4-form fieldset {\n margin: 0;\n padding: 0;\n border: 0; }\n.hi-v4-form fieldset + fieldset {\n margin-top: 16px; }\n.hi-v4-form legend {\n margin: 0 0 16px;\n color: #1f2937;\n color: var(--hi-v4-color-gray-800, #1f2937); }\n.hi-v4-form--placement-horizontal {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {\n min-height: 32px; }\n.hi-v4-form-label {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n margin-right: 8px;\n margin-right: var(--hi-v4-spacing-4, 8px);\n margin-bottom: 24px; }\n.hi-v4-form-label__text, .hi-v4-form-label__indent {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: top;\n color: #1f2937;\n color: var(--hi-v4-color-gray-800, #1f2937);\n overflow-wrap: break-word; }\n.hi-v4-form-label__text {\n padding-right:
|
|
15
|
+
var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-form {\n max-width: 100%;\n position: relative; }\n.hi-v4-form fieldset {\n margin: 0;\n padding: 0;\n border: 0; }\n.hi-v4-form fieldset + fieldset {\n margin-top: 16px; }\n.hi-v4-form legend {\n margin: 0 0 16px;\n color: #1f2937;\n color: var(--hi-v4-color-gray-800, #1f2937); }\n.hi-v4-form--placement-horizontal {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {\n min-height: 32px; }\n.hi-v4-form-label {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n margin-right: 8px;\n margin-right: var(--hi-v4-spacing-4, 8px);\n margin-bottom: 24px; }\n.hi-v4-form-label__text, .hi-v4-form-label__indent {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: top;\n color: #1f2937;\n color: var(--hi-v4-color-gray-800, #1f2937);\n overflow-wrap: break-word; }\n.hi-v4-form-label__text {\n padding-right: 12px;\n padding-right: var(--hi-v4-spacing-6, 12px);\n min-height: 32px;\n line-height: 32px; }\n.hi-v4-form-label--placement-left .hi-v4-form-label__text {\n text-align: left; }\n.hi-v4-form-label--placement-right .hi-v4-form-label__text {\n text-align: right; }\n.hi-v4-form-label--placement-top .hi-v4-form-label__text {\n height: 22px;\n padding-right: 8px;\n margin-bottom: 8px; }\n.hi-v4-form-label--required .hi-v4-form-label__text::before {\n margin-right: 4px;\n margin-right: var(--hi-v4-spacing-2, 4px);\n content: '*';\n color: #ff5959;\n color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-form-label--placement-top {\n text-align: left;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n margin-bottom: 20px;\n margin-bottom: var(--hi-v4-spacing-10, 20px);\n padding-right: 0; }\n.hi-v4-form-label__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n vertical-align: top;\n min-height: 32px;\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-form-message {\n display: block;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n min-height: 24px;\n padding: 2px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n line-height: 20px;\n -webkit-transform: translateY(-10%);\n transform: translateY(-10%);\n opacity: 0;\n color: #ff5959;\n color: var(--hi-v4-color-red-500, #ff5959);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-form-message--show {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0); }\n.hi-v4-form-item {\n position: relative; }\n.hi-v4-form-item__message {\n position: absolute; }\n";
|
|
16
16
|
|
|
17
17
|
var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
|
|
18
18
|
|
|
@@ -25,6 +25,8 @@ var Validater = require('async-validator');
|
|
|
25
25
|
|
|
26
26
|
var funcUtils = require('@hi-ui/func-utils');
|
|
27
27
|
|
|
28
|
+
var index = require('./utils/index.js');
|
|
29
|
+
|
|
28
30
|
function _interopDefaultLegacy(e) {
|
|
29
31
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
30
32
|
'default': e
|
|
@@ -36,7 +38,8 @@ var Validater__default = /*#__PURE__*/_interopDefaultLegacy(Validater);
|
|
|
36
38
|
var useFormField = function useFormField(props) {
|
|
37
39
|
var field = props.field,
|
|
38
40
|
rulesProp = props.rules,
|
|
39
|
-
valueType = props.valueType
|
|
41
|
+
_props$valueType = props.valueType,
|
|
42
|
+
valueType = _props$valueType === void 0 ? 'any' : _props$valueType;
|
|
40
43
|
|
|
41
44
|
var _useFormContext = context.useFormContext(),
|
|
42
45
|
getFieldRules = _useFormContext.getFieldRules,
|
|
@@ -66,9 +69,9 @@ var useFormField = function useFormField(props) {
|
|
|
66
69
|
} // TODO: rules 处理成 Async Validate 的指定结构
|
|
67
70
|
|
|
68
71
|
|
|
69
|
-
var
|
|
70
|
-
|
|
71
|
-
return validater.validate((_validater$validate = {}, _validater$validate[
|
|
72
|
+
var fieldMD5 = index.stringify(field);
|
|
73
|
+
var validater = new Validater__default['default']((_Validater = {}, _Validater[fieldMD5] = fieldRules, _Validater));
|
|
74
|
+
return validater.validate((_validater$validate = {}, _validater$validate[fieldMD5] = value, _validater$validate), {
|
|
72
75
|
firstFields: true
|
|
73
76
|
});
|
|
74
77
|
}, [fieldRules, field]); // 注入当前 field 及其验证规则到 Form
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-form-field.js","sources":["../../src/use-form-field.ts"],"sourcesContent":[null],"names":["useFormField","props","field","rulesProp","rules","valueType","useFormContext","getFieldRules","getFieldProps","registerField","unregisterField","fieldRules","useMemo","toArray","map","rule","type","fieldValidate","useCallback","value","isArrayNonEmpty","Promise","resolve","validater","Validater","validate","firstFields","useEffect","isNullish","isArray","every","item"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-form-field.js","sources":["../../src/use-form-field.ts"],"sourcesContent":[null],"names":["useFormField","props","field","rulesProp","rules","valueType","useFormContext","getFieldRules","getFieldProps","registerField","unregisterField","fieldRules","useMemo","toArray","map","rule","type","fieldValidate","useCallback","value","isArrayNonEmpty","Promise","resolve","fieldMD5","stringify","validater","Validater","validate","firstFields","useEffect","isNullish","isArray","every","item"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQaA,YAAY,GAAG,SAAfA,YAAe,CAAeC,KAAf;MAClBC,KAAR,GAAuDD,KAAvD,CAAQC;MAAcC,SAAtB,GAAuDF,KAAvD,CAAeG;yBAAwCH,KAAvD,CAAiCI;MAAAA,SAAjC,iCAA6C;;wBAE4BC,sBAAAA;MAAjEC,aAAR,mBAAQA;MAAeC,aAAvB,mBAAuBA;MAAeC,aAAtC,mBAAsCA;MAAeC,eAArD,mBAAqDA;;;;;;MAK/CC,UAAU,GAAYC,aAAAA,CAAQ;;QAE5BR,KAAK,GAAGS,iBAAAA,CAAQV,SAAS,SAATA,IAAAA,SAAS,WAATA,GAAAA,SAAAA,GAAaI,aAAa,CAACL,KAAD,CAAlCW;WACPT,KAAK,CAACU,GAANV,CAAU,UAACW,IAAD;;AAAkBC,QAAAA,IAAI,EAAEX;SAAcU;AAAhD,KAAAX;AAH0B,GAAPQ,EAIzB,CAACT,SAAD,EAAYD,KAAZ,EAAmBK,aAAnB,EAAkCF,SAAlC,CAJyBO;;MAOtBK,aAAa,GAAGC,iBAAAA,CACpB,UAACC,KAAD;;;QACM,CAACC,6BAAAA,CAAgBT,UAAhBS,GAA6B;aACzBC,OAAO,CAACC,OAARD,CAAgB,IAAhBA;;;;QAIHE,QAAQ,GAAGC,eAAAA,CAAUtB,KAAVsB;QAEXC,SAAS,GAAG,IAAIC,6BAAJ,8BAAiBH,YAAWZ,sBAA5B;WACXc,SAAS,CAACE,QAAVF,gDAAsBF,YAAWJ,0BAAjCM,GAA0C;AAAEG,MAAAA,WAAW,EAAE;AAAf,KAA1CH;AAVsB,GAAXP,EAYpB,CAACP,UAAD,EAAaT,KAAb,CAZoBgB;;AAgBtBW,EAAAA,eAAAA,CAAU;QACJC,uBAAAA,CAAU5B,KAAV4B,KAAoB5B,KAAK,KAAK,IAAI;QAClC6B,qBAAAA,CAAQ7B,KAAR6B,KAAkB7B,KAAK,CAAC8B,KAAN9B,CAAY,UAAC+B,IAAD;aAAUH,uBAAAA,CAAUG,IAAVH,KAAmBG,IAAI,KAAK;AAAlD,KAAA/B,GAAuD;AAE7EO,IAAAA,aAAa,CAACP,KAAD,EAAQ;AACnByB,MAAAA,QAAQ,EAAEV;AADS,KAAR,CAAbR;WAIO;UACDqB,uBAAAA,CAAU5B,KAAV4B,KAAoB5B,KAAK,KAAK,IAAI;UAClC6B,qBAAAA,CAAQ7B,KAAR6B,KAAkB7B,KAAK,CAAC8B,KAAN9B,CAAY,UAAC+B,IAAD;eAAUH,uBAAAA,CAAUG,IAAVH,KAAmBG,IAAI,KAAK;AAAlD,OAAA/B,GAAuD;AAE7EQ,MAAAA,eAAe,CAACR,KAAD,CAAfQ;AAJF;AARO,GAATmB,EAcG,CAACpB,aAAD,EAAgBC,eAAhB,EAAiCR,KAAjC,EAAwCe,aAAxC,CAdHY;SAgBOrB,aAAa,CAACP,KAAD;;;"}
|
package/lib/cjs/use-form.js
CHANGED
|
@@ -171,13 +171,15 @@ var useForm = function useForm(_a) {
|
|
|
171
171
|
setFieldError(field, '');
|
|
172
172
|
return funcUtils.setNested({}, field, value);
|
|
173
173
|
}, function (errorMsg) {
|
|
174
|
+
var _a, _b, _c;
|
|
175
|
+
|
|
174
176
|
formDispatch({
|
|
175
177
|
type: 'SET_VALIDATING',
|
|
176
178
|
payload: false
|
|
177
179
|
}); // @ts-ignore
|
|
178
180
|
// @ts-ignore
|
|
179
181
|
|
|
180
|
-
setFieldError(field, errorMsg.fields[field][0].message); // TODO: 回调和promise支持
|
|
182
|
+
setFieldError(field, (_c = (_b = (_a = errorMsg.fields[index.stringify(field)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : ''); // TODO: 回调和promise支持
|
|
181
183
|
// TODO: 回调和promise支持
|
|
182
184
|
|
|
183
185
|
throw errorMsg;
|
|
@@ -205,7 +207,6 @@ var useForm = function useForm(_a) {
|
|
|
205
207
|
|
|
206
208
|
var validateAll = React.useCallback(function () {
|
|
207
209
|
var fieldNames = getRegisteredKeys();
|
|
208
|
-
console.log('fieldNames', fieldNames);
|
|
209
210
|
return Promise.all(fieldNames.map(function (fieldName) {
|
|
210
211
|
return validateFieldState(fieldName);
|
|
211
212
|
}));
|
|
@@ -262,10 +263,13 @@ var useForm = function useForm(_a) {
|
|
|
262
263
|
|
|
263
264
|
return nextValue;
|
|
264
265
|
}, []);
|
|
265
|
-
var handleFieldChange = React.useCallback(function (fieldName, valuePropName,
|
|
266
|
+
var handleFieldChange = React.useCallback(function (fieldName, valuePropName, valueDispatchTransform, shouldValidate) {
|
|
266
267
|
return function (evt) {
|
|
267
|
-
|
|
268
|
-
|
|
268
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
269
|
+
args[_key - 1] = arguments[_key];
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
var nextValue = typeAssertion.isFunction(valueDispatchTransform) ? valueDispatchTransform.apply(void 0, [evt].concat(args)) : normalizeValueFromChange(evt, valuePropName);
|
|
269
273
|
setFieldValue(fieldName, nextValue, shouldValidate);
|
|
270
274
|
var changedValues = funcUtils.setNested({}, fieldName, nextValue);
|
|
271
275
|
var allValues = funcUtils.setNested(Object.assign({}, formState.values), fieldName, nextValue);
|
|
@@ -473,22 +477,24 @@ var useForm = function useForm(_a) {
|
|
|
473
477
|
field = _props.field,
|
|
474
478
|
_props$valuePropName = _props.valuePropName,
|
|
475
479
|
valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
|
|
476
|
-
_props$
|
|
477
|
-
|
|
478
|
-
|
|
480
|
+
_props$valueChangeFun = _props.valueChangeFuncPropName,
|
|
481
|
+
valueChangeFuncPropName = _props$valueChangeFun === void 0 ? 'onChange' : _props$valueChangeFun,
|
|
482
|
+
valueDispatchTransform = _props.valueDispatchTransform,
|
|
483
|
+
valueConnectTransform = _props.valueConnectTransform,
|
|
479
484
|
_props$validateTrigge = _props.validateTrigger,
|
|
480
485
|
validateTriggerProp = _props$validateTrigge === void 0 ? validateTriggersMemo : _props$validateTrigge,
|
|
481
|
-
|
|
486
|
+
children = _props.children;
|
|
487
|
+
var controlProps = children.props || {};
|
|
482
488
|
var validateTrigger = typeAssertion.isArray(validateTriggerProp) ? validateTriggerProp : [validateTriggerProp];
|
|
483
|
-
var validateOnCollect = validateTrigger.includes(
|
|
489
|
+
var validateOnCollect = validateTrigger.includes(valueChangeFuncPropName);
|
|
484
490
|
var validateOnBlur = validateTrigger.includes('onBlur');
|
|
491
|
+
var controlledValue = funcUtils.getNested(formState.values, field);
|
|
485
492
|
var returnProps = (_returnProps = {
|
|
486
493
|
ref: ref
|
|
487
|
-
}, _returnProps[valuePropName] =
|
|
494
|
+
}, _returnProps[valuePropName] = typeAssertion.isFunction(valueConnectTransform) ? valueConnectTransform(controlledValue) : controlledValue, _returnProps[valueChangeFuncPropName] = funcUtils.callAllFuncs(controlProps[valueChangeFuncPropName], handleFieldChange(field, valuePropName, valueDispatchTransform, validateOnCollect)), _returnProps.onBlur = funcUtils.callAllFuncs(controlProps.onBlur, handleFieldBlur(field, validateOnBlur)), _returnProps.invalid = getFieldError(field), _returnProps);
|
|
488
495
|
validateTrigger.forEach(function (triggerName) {
|
|
489
|
-
if ([
|
|
490
|
-
|
|
491
|
-
returnProps[triggerName] = funcUtils.callAllFuncs(props[triggerName], handleFieldTrigger(field));
|
|
496
|
+
if ([valueChangeFuncPropName, 'onBlur'].indexOf(triggerName) === -1) {
|
|
497
|
+
returnProps[triggerName] = funcUtils.callAllFuncs(controlProps[triggerName], handleFieldTrigger(field));
|
|
492
498
|
}
|
|
493
499
|
});
|
|
494
500
|
return returnProps;
|