@arco-design/mobile-react 2.36.1 → 2.36.2
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/CHANGELOG.md +12 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/carousel/index.js +8 -7
- package/cjs/form/form-item.d.ts +33 -2
- package/cjs/form/form-item.js +142 -121
- package/cjs/form/index.js +3 -1
- package/cjs/form/linked-container.d.ts +1 -1
- package/cjs/form/linked-container.js +4 -0
- package/cjs/form/style/css/index.css +4 -1
- package/cjs/form/style/index.less +6 -1
- package/cjs/form/type.d.ts +24 -1
- package/cjs/form/type.js +10 -2
- package/cjs/form/useForm.d.ts +2 -17
- package/cjs/form/useForm.js +98 -17
- package/cjs/form/utils.d.ts +2 -0
- package/cjs/form/utils.js +42 -2
- package/cjs/input/index.js +1 -1
- package/cjs/radio/group.js +1 -1
- package/cjs/radio/type.d.ts +2 -2
- package/dist/index.js +2993 -362
- package/dist/index.min.js +4 -4
- package/dist/style.css +4 -1
- package/dist/style.min.css +1 -1
- package/esm/carousel/index.js +8 -7
- package/esm/form/form-item.d.ts +33 -2
- package/esm/form/form-item.js +143 -122
- package/esm/form/index.js +3 -1
- package/esm/form/linked-container.d.ts +1 -1
- package/esm/form/linked-container.js +4 -0
- package/esm/form/style/css/index.css +4 -1
- package/esm/form/style/index.less +6 -1
- package/esm/form/type.d.ts +24 -1
- package/esm/form/type.js +8 -1
- package/esm/form/useForm.d.ts +2 -17
- package/esm/form/useForm.js +97 -17
- package/esm/form/utils.d.ts +2 -0
- package/esm/form/utils.js +31 -1
- package/esm/input/index.js +1 -1
- package/esm/radio/group.js +1 -1
- package/esm/radio/type.d.ts +2 -2
- package/esnext/carousel/index.js +7 -5
- package/esnext/form/form-item.d.ts +33 -2
- package/esnext/form/form-item.js +85 -71
- package/esnext/form/index.js +2 -1
- package/esnext/form/linked-container.d.ts +1 -1
- package/esnext/form/linked-container.js +3 -0
- package/esnext/form/style/css/index.css +4 -1
- package/esnext/form/style/index.less +6 -1
- package/esnext/form/type.d.ts +24 -1
- package/esnext/form/type.js +7 -0
- package/esnext/form/useForm.d.ts +2 -17
- package/esnext/form/useForm.js +72 -13
- package/esnext/form/utils.d.ts +2 -0
- package/esnext/form/utils.js +26 -0
- package/esnext/input/index.js +1 -1
- package/esnext/radio/group.js +3 -1
- package/esnext/radio/type.d.ts +2 -2
- package/package.json +3 -3
- package/umd/carousel/index.js +8 -7
- package/umd/form/form-item.d.ts +33 -2
- package/umd/form/form-item.js +142 -121
- package/umd/form/index.js +3 -1
- package/umd/form/linked-container.d.ts +1 -1
- package/umd/form/linked-container.js +4 -0
- package/umd/form/style/css/index.css +4 -1
- package/umd/form/style/index.less +6 -1
- package/umd/form/type.d.ts +24 -1
- package/umd/form/type.js +9 -1
- package/umd/form/useForm.d.ts +2 -17
- package/umd/form/useForm.js +98 -21
- package/umd/form/utils.d.ts +2 -0
- package/umd/form/utils.js +40 -5
- package/umd/input/index.js +1 -1
- package/umd/radio/group.js +1 -1
- package/umd/radio/type.d.ts +2 -2
package/esm/carousel/index.js
CHANGED
@@ -684,12 +684,6 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
684
684
|
|
685
685
|
stopPropagation && e.stopPropagation();
|
686
686
|
|
687
|
-
if (bouncingRef.current) {
|
688
|
-
bouncingRef.current = false;
|
689
|
-
jumpTo(index, false);
|
690
|
-
return;
|
691
|
-
}
|
692
|
-
|
693
687
|
if (!touchStartedRef.current) {
|
694
688
|
return;
|
695
689
|
}
|
@@ -701,7 +695,14 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
701
695
|
return;
|
702
696
|
}
|
703
697
|
|
704
|
-
touchMovedRef.current = false;
|
698
|
+
touchMovedRef.current = false; // bugfix: 回弹判断逻辑需在touchMovedRef标识重置逻辑之后,否则会在触发回弹后导致标识无法重置引起滑动判断问题
|
699
|
+
// @en bugfix: The logic for the bounce judgment needs to be after the touchMovedRef reset logic, otherwise it will cause the problem of slide judgment after the bounce is triggered.
|
700
|
+
|
701
|
+
if (bouncingRef.current) {
|
702
|
+
bouncingRef.current = false;
|
703
|
+
jumpTo(index, false);
|
704
|
+
return;
|
705
|
+
}
|
705
706
|
|
706
707
|
if (posAdjustingRef.current || touchStoppedRef.current) {
|
707
708
|
return;
|
package/esm/form/form-item.d.ts
CHANGED
@@ -1,4 +1,35 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import {
|
1
|
+
import React, { PureComponent, ReactNode } from 'react';
|
2
|
+
import { Promise } from 'es6-promise';
|
3
|
+
import { FormItemContext } from './form-item-context';
|
4
|
+
import { IFieldError, FieldValue, IFormItemInnerProps, FormItemProps, ValidateStatus, FormItemRef, ValueChangeType, IFormItemContext } from './type';
|
5
|
+
interface IFormItemInnerState {
|
6
|
+
validateStatus: ValidateStatus;
|
7
|
+
errors?: ReactNode[];
|
8
|
+
_touched: boolean;
|
9
|
+
}
|
10
|
+
declare class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerState> {
|
11
|
+
context: React.ContextType<typeof FormItemContext>;
|
12
|
+
destroyField: () => void;
|
13
|
+
private _errors;
|
14
|
+
private _touched;
|
15
|
+
constructor(props: IFormItemInnerProps, context: IFormItemContext);
|
16
|
+
componentDidMount(): void;
|
17
|
+
componentWillUnmount(): void;
|
18
|
+
onValueChange: (curValue: FieldValue, preValue: any, info?: {
|
19
|
+
changeType: ValueChangeType;
|
20
|
+
} | undefined) => void;
|
21
|
+
getInitialValue: () => any;
|
22
|
+
getFieldError: () => React.ReactNode[];
|
23
|
+
isFieldTouched: () => boolean;
|
24
|
+
getAllRuleValidateTriggers: () => string[];
|
25
|
+
validateField: (validateTrigger?: string | undefined) => Promise<IFieldError>;
|
26
|
+
setFieldData: (value: FieldValue) => void;
|
27
|
+
innerTriggerFunctionWithValueFirst: (value: any, ...args: any[]) => void;
|
28
|
+
innerOnInputFunction: (_: any, value: any, ...args: any[]) => void;
|
29
|
+
innerClearFunction: (...args: any[]) => void;
|
30
|
+
renderChildren(): React.FunctionComponentElement<any>;
|
31
|
+
render(): React.FunctionComponentElement<any>;
|
32
|
+
}
|
33
|
+
export { FormItemInner };
|
3
34
|
declare const _default: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<FormItemRef>>;
|
4
35
|
export default _default;
|
package/esm/form/form-item.js
CHANGED
@@ -9,8 +9,8 @@ import { cls, Validator, ValidatorType } from '@arco-design/mobile-utils';
|
|
9
9
|
import { Promise } from 'es6-promise';
|
10
10
|
import { FormItemContext } from './form-item-context';
|
11
11
|
import { GlobalContext } from '../context-provider';
|
12
|
-
import { FormInternalComponentType } from './type';
|
13
|
-
import { getErrorAndWarnings, isFieldRequired } from './utils';
|
12
|
+
import { FormInternalComponentType, ValueChangeType } from './type';
|
13
|
+
import { getDefaultValueForInterComponent, getErrorAndWarnings, isFieldRequired } from './utils';
|
14
14
|
import { DefaultDatePickerLinkedContainer, DefaultPickerLinkedContainer } from './linked-container';
|
15
15
|
|
16
16
|
var FormItemInner = /*#__PURE__*/function (_PureComponent) {
|
@@ -26,7 +26,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
|
|
26
26
|
_this._errors = [];
|
27
27
|
_this._touched = false;
|
28
28
|
|
29
|
-
_this.onValueChange = function (curValue, preValue) {
|
29
|
+
_this.onValueChange = function (curValue, preValue, info) {
|
30
30
|
_this._touched = true;
|
31
31
|
var shouldUpdate = _this.props.shouldUpdate;
|
32
32
|
|
@@ -38,9 +38,34 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
|
|
38
38
|
return;
|
39
39
|
}
|
40
40
|
|
41
|
+
if ((info == null ? void 0 : info.changeType) === ValueChangeType.Reset) {
|
42
|
+
_this.props.onValidateStatusChange({
|
43
|
+
errors: [],
|
44
|
+
warnings: [],
|
45
|
+
errorTypes: []
|
46
|
+
});
|
47
|
+
|
48
|
+
_this._errors = [];
|
49
|
+
}
|
50
|
+
|
41
51
|
_this.forceUpdate();
|
42
52
|
};
|
43
53
|
|
54
|
+
_this.getInitialValue = function () {
|
55
|
+
var _children$type, _getInitialValue;
|
56
|
+
|
57
|
+
var _this$props = _this.props,
|
58
|
+
children = _this$props.children,
|
59
|
+
displayType = _this$props.displayType;
|
60
|
+
|
61
|
+
var _this$context$form$ge = _this.context.form.getInternalHooks(),
|
62
|
+
getInitialValue = _this$context$form$ge.getInitialValue;
|
63
|
+
|
64
|
+
var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName); // get user-defined initialValue or if not defined
|
65
|
+
|
66
|
+
return (_getInitialValue = getInitialValue(_this.props.field)) != null ? _getInitialValue : getDefaultValueForInterComponent(childrenType);
|
67
|
+
};
|
68
|
+
|
44
69
|
_this.getFieldError = function () {
|
45
70
|
return _this._errors;
|
46
71
|
};
|
@@ -49,21 +74,37 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
|
|
49
74
|
return _this._touched;
|
50
75
|
};
|
51
76
|
|
52
|
-
_this.
|
77
|
+
_this.getAllRuleValidateTriggers = function () {
|
78
|
+
var _this$props$rules;
|
79
|
+
|
80
|
+
return ((_this$props$rules = _this.props.rules) == null ? void 0 : _this$props$rules.map(function (rule) {
|
81
|
+
return rule.validateTrigger;
|
82
|
+
}).flat().filter(function (v) {
|
83
|
+
return !!v;
|
84
|
+
})) || [];
|
85
|
+
};
|
86
|
+
|
87
|
+
_this.validateField = function (validateTrigger) {
|
53
88
|
var validateMessages = _this.context.validateMessages;
|
54
89
|
var getFieldValue = _this.context.form.getFieldValue;
|
55
|
-
var _this$
|
56
|
-
field = _this$
|
57
|
-
rules = _this$
|
58
|
-
onValidateStatusChange = _this$
|
59
|
-
var value = getFieldValue(field);
|
60
|
-
|
61
|
-
|
90
|
+
var _this$props2 = _this.props,
|
91
|
+
field = _this$props2.field,
|
92
|
+
rules = _this$props2.rules,
|
93
|
+
onValidateStatusChange = _this$props2.onValidateStatusChange;
|
94
|
+
var value = getFieldValue(field); // rules: if validateTrigger is not defined, all rules will be validated
|
95
|
+
// if validateTrigger is defined, only rules with validateTrigger or without rule.validateTrigger will be validated
|
96
|
+
|
97
|
+
var curRules = validateTrigger ? rules == null ? void 0 : rules.filter(function (rule) {
|
98
|
+
var triggerList = [].concat(rule.validateTrigger || validateTrigger);
|
99
|
+
return triggerList.includes(validateTrigger);
|
100
|
+
}) : rules;
|
101
|
+
|
102
|
+
if (curRules != null && curRules.length && field) {
|
62
103
|
var _Validator;
|
63
104
|
|
64
105
|
var fieldDom = _this.props.getFormItemRef();
|
65
106
|
|
66
|
-
var fieldValidator = new Validator((_Validator = {}, _Validator[field] =
|
107
|
+
var fieldValidator = new Validator((_Validator = {}, _Validator[field] = curRules, _Validator), {
|
67
108
|
validateMessages: validateMessages
|
68
109
|
});
|
69
110
|
return new Promise(function (resolve) {
|
@@ -102,82 +143,79 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
|
|
102
143
|
};
|
103
144
|
|
104
145
|
_this.setFieldData = function (value) {
|
105
|
-
var
|
106
|
-
|
107
|
-
|
146
|
+
var _this$props3 = _this.props,
|
147
|
+
field = _this$props3.field,
|
148
|
+
_this$props3$trigger = _this$props3.trigger,
|
149
|
+
trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
|
150
|
+
|
151
|
+
var _this$context$form$ge2 = _this.context.form.getInternalHooks(),
|
152
|
+
innerSetFieldValue = _this$context$form$ge2.innerSetFieldValue;
|
108
153
|
|
109
|
-
|
154
|
+
innerSetFieldValue(field, value);
|
155
|
+
|
156
|
+
_this.validateField(trigger);
|
110
157
|
};
|
111
158
|
|
112
|
-
_this.
|
159
|
+
_this.innerTriggerFunctionWithValueFirst = function (value) {
|
113
160
|
var _children$props;
|
114
161
|
|
115
162
|
_this.setFieldData(value);
|
116
163
|
|
117
|
-
var _this$
|
118
|
-
children = _this$
|
119
|
-
_this$
|
120
|
-
trigger = _this$
|
164
|
+
var _this$props4 = _this.props,
|
165
|
+
children = _this$props4.children,
|
166
|
+
_this$props4$trigger = _this$props4.trigger,
|
167
|
+
trigger = _this$props4$trigger === void 0 ? 'onChange' : _this$props4$trigger;
|
121
168
|
|
122
169
|
if (trigger && (_children$props = children.props) != null && _children$props[trigger]) {
|
123
170
|
var _children$props2;
|
124
171
|
|
125
|
-
for (var _len = arguments.length, args = new Array(_len >
|
126
|
-
args[_key -
|
172
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
173
|
+
args[_key - 1] = arguments[_key];
|
127
174
|
}
|
128
175
|
|
129
|
-
(_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [
|
176
|
+
(_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [value].concat(args));
|
130
177
|
}
|
131
178
|
};
|
132
179
|
|
133
|
-
_this.
|
180
|
+
_this.innerOnInputFunction = function (_, value) {
|
134
181
|
var _children$props3;
|
135
182
|
|
136
183
|
_this.setFieldData(value);
|
137
184
|
|
138
|
-
var
|
139
|
-
children = _this$props3.children,
|
140
|
-
_this$props3$trigger = _this$props3.trigger,
|
141
|
-
trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
|
142
|
-
|
143
|
-
if (trigger && (_children$props3 = children.props) != null && _children$props3[trigger]) {
|
144
|
-
var _children$props4;
|
145
|
-
|
146
|
-
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
147
|
-
args[_key2 - 1] = arguments[_key2];
|
148
|
-
}
|
185
|
+
var children = _this.props.children;
|
149
186
|
|
150
|
-
|
187
|
+
for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
|
188
|
+
args[_key2 - 2] = arguments[_key2];
|
151
189
|
}
|
190
|
+
|
191
|
+
(_children$props3 = children.props) == null ? void 0 : _children$props3.onInput == null ? void 0 : _children$props3.onInput.apply(_children$props3, [_, value].concat(args));
|
152
192
|
};
|
153
193
|
|
154
194
|
_this.innerClearFunction = function () {
|
155
|
-
var _children$
|
195
|
+
var _children$props4;
|
156
196
|
|
157
197
|
var children = _this.props.children;
|
158
198
|
|
159
199
|
_this.setFieldData('');
|
160
200
|
|
161
|
-
if ((_children$
|
162
|
-
var _children$
|
201
|
+
if ((_children$props4 = children.props) != null && _children$props4.onClear) {
|
202
|
+
var _children$props5;
|
163
203
|
|
164
204
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
165
205
|
args[_key3] = arguments[_key3];
|
166
206
|
}
|
167
207
|
|
168
|
-
(_children$
|
208
|
+
(_children$props5 = children.props) == null ? void 0 : _children$props5.onClear.apply(_children$props5, args);
|
169
209
|
}
|
170
210
|
};
|
171
211
|
|
172
212
|
_this.destroyField = function () {};
|
173
213
|
|
174
214
|
if (props != null && props.initialValue && props.field) {
|
175
|
-
var _setInitialValues;
|
176
|
-
|
177
215
|
var _context$form$getInte = context.form.getInternalHooks(),
|
178
|
-
|
216
|
+
setInitialValue = _context$form$getInte.setInitialValue;
|
179
217
|
|
180
|
-
|
218
|
+
setInitialValue(props.field, props.initialValue);
|
181
219
|
}
|
182
220
|
|
183
221
|
return _this;
|
@@ -186,8 +224,8 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
|
|
186
224
|
var _proto = FormItemInner.prototype;
|
187
225
|
|
188
226
|
_proto.componentDidMount = function componentDidMount() {
|
189
|
-
var _this$context$form$
|
190
|
-
registerField = _this$context$form$
|
227
|
+
var _this$context$form$ge3 = this.context.form.getInternalHooks(),
|
228
|
+
registerField = _this$context$form$ge3.registerField;
|
191
229
|
|
192
230
|
this.destroyField = registerField(this.props.field, this);
|
193
231
|
};
|
@@ -197,108 +235,90 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
|
|
197
235
|
};
|
198
236
|
|
199
237
|
_proto.renderChildren = function renderChildren() {
|
200
|
-
var
|
201
|
-
_children$
|
238
|
+
var _this2 = this,
|
239
|
+
_children$type2,
|
202
240
|
_children$props7,
|
203
|
-
_children$props8
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
_this$
|
210
|
-
|
211
|
-
_this$
|
212
|
-
|
213
|
-
|
241
|
+
_children$props8;
|
242
|
+
|
243
|
+
var _this$props5 = this.props,
|
244
|
+
children = _this$props5.children,
|
245
|
+
field = _this$props5.field,
|
246
|
+
_this$props5$trigger = _this$props5.trigger,
|
247
|
+
trigger = _this$props5$trigger === void 0 ? 'onChange' : _this$props5$trigger,
|
248
|
+
_this$props5$triggerP = _this$props5.triggerPropsField,
|
249
|
+
triggerPropsField = _this$props5$triggerP === void 0 ? 'value' : _this$props5$triggerP,
|
250
|
+
displayType = _this$props5.displayType,
|
251
|
+
disabled = _this$props5.disabled;
|
214
252
|
var getFieldValue = this.context.form.getFieldValue;
|
215
|
-
var
|
216
|
-
|
253
|
+
var childrenProps = {
|
254
|
+
disabled: disabled
|
255
|
+
}; // inject validateTriggers of rules
|
256
|
+
|
257
|
+
this.getAllRuleValidateTriggers().forEach(function (triggerName) {
|
258
|
+
childrenProps[triggerName] = function (e) {
|
259
|
+
var _children$props6, _children$props6$trig;
|
260
|
+
|
261
|
+
_this2.validateField(triggerName);
|
262
|
+
|
263
|
+
children == null ? void 0 : (_children$props6 = children.props) == null ? void 0 : (_children$props6$trig = _children$props6[triggerName]) == null ? void 0 : _children$props6$trig.call(_children$props6, e);
|
264
|
+
};
|
265
|
+
});
|
266
|
+
var childrenType = displayType || ((_children$type2 = children.type) == null ? void 0 : _children$type2.displayName);
|
217
267
|
|
218
268
|
switch (childrenType) {
|
219
269
|
case FormInternalComponentType.Input:
|
220
270
|
case FormInternalComponentType.Textarea:
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
onClear: this.innerClearFunction,
|
225
|
-
disabled: this.props.disabled
|
226
|
-
};
|
227
|
-
break;
|
228
|
-
|
229
|
-
case FormInternalComponentType.Checkbox:
|
230
|
-
case FormInternalComponentType.Radio:
|
231
|
-
case FormInternalComponentType.Slider:
|
232
|
-
case FormInternalComponentType.RadioGroup:
|
233
|
-
case FormInternalComponentType.CheckboxGroup:
|
234
|
-
props = {
|
235
|
-
value: getFieldValue(field),
|
236
|
-
onChange: this.innerTriggerFunctionWithValueFirst,
|
237
|
-
disabled: this.props.disabled
|
238
|
-
};
|
271
|
+
childrenProps.value = getFieldValue(field) || '';
|
272
|
+
childrenProps.onInput = this.innerOnInputFunction;
|
273
|
+
childrenProps.onClear = this.innerClearFunction;
|
239
274
|
break;
|
240
275
|
|
241
276
|
case FormInternalComponentType.DatePicker:
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
});
|
251
|
-
}
|
277
|
+
childrenProps.currentTs = getFieldValue(field);
|
278
|
+
childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
|
279
|
+
|
280
|
+
childrenProps.renderLinkedContainer = ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (ts, types) {
|
281
|
+
return /*#__PURE__*/React.createElement(DefaultDatePickerLinkedContainer, {
|
282
|
+
ts: ts,
|
283
|
+
types: types
|
284
|
+
});
|
252
285
|
};
|
286
|
+
|
253
287
|
break;
|
254
288
|
|
255
289
|
case FormInternalComponentType.Picker:
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
});
|
264
|
-
}
|
290
|
+
childrenProps.value = getFieldValue(field) || '';
|
291
|
+
childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
|
292
|
+
|
293
|
+
childrenProps.renderLinkedContainer = ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
|
294
|
+
return /*#__PURE__*/React.createElement(DefaultPickerLinkedContainer, {
|
295
|
+
value: val
|
296
|
+
});
|
265
297
|
};
|
298
|
+
|
266
299
|
break;
|
267
300
|
|
268
301
|
case FormInternalComponentType.Switch:
|
269
|
-
|
270
|
-
|
271
|
-
onChange: this.innerTriggerFunctionWithValueFirst,
|
272
|
-
disabled: this.props.disabled
|
273
|
-
};
|
302
|
+
childrenProps.checked = Boolean(getFieldValue(field));
|
303
|
+
childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
|
274
304
|
break;
|
275
305
|
|
276
306
|
case FormInternalComponentType.ImagePicker:
|
277
|
-
|
278
|
-
|
279
|
-
onChange: this.innerTriggerFunctionWithValueFirst,
|
280
|
-
disabled: this.props.disabled
|
281
|
-
};
|
307
|
+
childrenProps.images = getFieldValue(field);
|
308
|
+
childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
|
282
309
|
break;
|
283
310
|
|
284
311
|
default:
|
285
|
-
|
286
|
-
|
287
|
-
|
312
|
+
if (triggerPropsField) {
|
313
|
+
childrenProps[triggerPropsField] = getFieldValue(field);
|
314
|
+
} // inject the validated result
|
288
315
|
|
289
|
-
props[trigger] = function (newValue) {
|
290
|
-
_this2.setFieldData(newValue);
|
291
|
-
|
292
|
-
for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
|
293
|
-
args[_key4 - 1] = arguments[_key4];
|
294
|
-
}
|
295
|
-
|
296
|
-
originTrigger && originTrigger.apply(void 0, [newValue].concat(args));
|
297
|
-
};
|
298
316
|
|
317
|
+
childrenProps.error = this._errors;
|
318
|
+
childrenProps[trigger] = this.innerTriggerFunctionWithValueFirst;
|
299
319
|
}
|
300
320
|
|
301
|
-
return /*#__PURE__*/React.cloneElement(children,
|
321
|
+
return /*#__PURE__*/React.cloneElement(children, childrenProps);
|
302
322
|
};
|
303
323
|
|
304
324
|
_proto.render = function render() {
|
@@ -309,6 +329,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
|
|
309
329
|
}(PureComponent);
|
310
330
|
|
311
331
|
FormItemInner.contextType = FormItemContext;
|
332
|
+
export { FormItemInner };
|
312
333
|
export default /*#__PURE__*/forwardRef(function (props, ref) {
|
313
334
|
var _cls;
|
314
335
|
|
package/esm/form/index.js
CHANGED
@@ -17,6 +17,7 @@ var Form = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
17
17
|
formInstance = props.form,
|
18
18
|
children = props.children,
|
19
19
|
onValuesChange = props.onValuesChange,
|
20
|
+
onChange = props.onChange,
|
20
21
|
onSubmit = props.onSubmit,
|
21
22
|
onSubmitFailed = props.onSubmitFailed,
|
22
23
|
disabled = props.disabled;
|
@@ -33,7 +34,8 @@ var Form = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
33
34
|
setCallbacks({
|
34
35
|
onValuesChange: onValuesChange,
|
35
36
|
onSubmit: onSubmit,
|
36
|
-
onSubmitFailed: onSubmitFailed
|
37
|
+
onSubmitFailed: onSubmitFailed,
|
38
|
+
onChange: onChange
|
37
39
|
});
|
38
40
|
|
39
41
|
if (!initRef.current) {
|
@@ -3,6 +3,6 @@ export declare function DefaultPickerLinkedContainer({ value }: {
|
|
3
3
|
value: (string | number)[];
|
4
4
|
}): JSX.Element;
|
5
5
|
export declare function DefaultDatePickerLinkedContainer({ ts, types, }: {
|
6
|
-
ts
|
6
|
+
ts?: number | [number, number];
|
7
7
|
types: string[];
|
8
8
|
}): JSX.Element;
|
@@ -27,6 +27,10 @@ export function DefaultDatePickerLinkedContainer(_ref2) {
|
|
27
27
|
|
28
28
|
var className = prefixCls + "-form-picker-link-container";
|
29
29
|
var dateTimeStr = useMemo(function () {
|
30
|
+
if (ts === undefined) {
|
31
|
+
return '';
|
32
|
+
}
|
33
|
+
|
30
34
|
if (typeof ts === 'number') {
|
31
35
|
return formatDateTimeStr(ts, types);
|
32
36
|
}
|
@@ -567,6 +567,9 @@
|
|
567
567
|
.arco-form-item-control .arco-input {
|
568
568
|
padding: 0;
|
569
569
|
}
|
570
|
+
.arco-form-item-control .arco-input-wrap.textarea {
|
571
|
+
padding: 0;
|
572
|
+
}
|
570
573
|
.arco-form-item-control-wrapper {
|
571
574
|
width: 100%;
|
572
575
|
-webkit-box-flex: 1;
|
@@ -574,7 +577,7 @@
|
|
574
577
|
flex: 1;
|
575
578
|
position: relative;
|
576
579
|
}
|
577
|
-
.arco-form-item-control-wrapper .arco-input-wrap {
|
580
|
+
.arco-form-item-control-wrapper .arco-input-wrap.single-line {
|
578
581
|
height: 0.44rem ;
|
579
582
|
}
|
580
583
|
.arco-form-item-message {
|
@@ -42,11 +42,16 @@
|
|
42
42
|
.@{prefix}-input-wrap, .@{prefix}-input {
|
43
43
|
padding: 0;
|
44
44
|
}
|
45
|
+
|
46
|
+
.@{prefix}-input-wrap.textarea {
|
47
|
+
padding: 0;
|
48
|
+
}
|
49
|
+
|
45
50
|
&-wrapper {
|
46
51
|
width: 100%;
|
47
52
|
flex: 1;
|
48
53
|
position: relative;
|
49
|
-
.@{prefix}-input-wrap {
|
54
|
+
.@{prefix}-input-wrap.single-line {
|
50
55
|
.use-var(height, input-text-line-height);
|
51
56
|
}
|
52
57
|
}
|
package/esm/form/type.d.ts
CHANGED
@@ -2,7 +2,7 @@ import { IRules } from '@arco-design/mobile-utils';
|
|
2
2
|
import { ReactNode } from 'react';
|
3
3
|
import { Promise } from 'es6-promise';
|
4
4
|
export declare type FieldValue = any;
|
5
|
-
export declare type FieldItem = Record<string,
|
5
|
+
export declare type FieldItem = Record<string, FieldValue>;
|
6
6
|
export declare type ILayout = 'horizontal' | 'vertical' | 'inline';
|
7
7
|
export declare enum FormInternalComponentType {
|
8
8
|
Input = "Input",
|
@@ -52,6 +52,11 @@ export interface FormProps {
|
|
52
52
|
* @en Callback when the form item value changes
|
53
53
|
*/
|
54
54
|
onValuesChange?: Callbacks['onValuesChange'];
|
55
|
+
/**
|
56
|
+
* 表单项数据变化时的回调(仅用户操作表单时触发)
|
57
|
+
* @en Callback when the form item value changes (Only trigger when user operate form)
|
58
|
+
*/
|
59
|
+
onChange?: Callbacks['onChange'];
|
55
60
|
/**
|
56
61
|
* 表单项数据变化时的回调
|
57
62
|
* @en Callback when the form is submitted
|
@@ -115,6 +120,11 @@ export interface Callbacks {
|
|
115
120
|
* @en Callback when the form item value changes
|
116
121
|
*/
|
117
122
|
onValuesChange?: (changedValues: FieldValue, values: FieldValue) => void;
|
123
|
+
/**
|
124
|
+
* 表单项数据变化时的回调(仅用户操作表单时触发)
|
125
|
+
* @en Callback when the form item value changes (Only trigger when user operate form)
|
126
|
+
*/
|
127
|
+
onChange?: (changedValues: FieldValue, values: FieldValue) => void;
|
118
128
|
/**
|
119
129
|
* 表单项数据变化时的回调
|
120
130
|
* @en Callback when the form is submitted
|
@@ -134,6 +144,10 @@ export interface InternalHooks {
|
|
134
144
|
registerField: (name: string, self: any) => () => void;
|
135
145
|
setInitialValues: (values: FieldItem) => void;
|
136
146
|
setCallbacks: (callbacks: Callbacks) => void;
|
147
|
+
getInitialValue: (fieldName: string) => FieldValue;
|
148
|
+
setInitialValue: (fieldName: string, values: FieldItem) => void;
|
149
|
+
innerSetFieldsValue: (values: FieldItem) => boolean;
|
150
|
+
innerSetFieldValue: (name: string, value: FieldValue) => boolean;
|
137
151
|
}
|
138
152
|
export interface IFormInstance {
|
139
153
|
/**
|
@@ -183,6 +197,11 @@ export declare type InternalFormInstance = IFormInstance & {
|
|
183
197
|
* @en Get internal methods
|
184
198
|
*/
|
185
199
|
getInternalHooks: () => InternalHooks;
|
200
|
+
/**
|
201
|
+
* 注册表单组件
|
202
|
+
* @en Register Form Item component
|
203
|
+
*/
|
204
|
+
registerField: (name: string, self: any) => () => void;
|
186
205
|
};
|
187
206
|
export interface FormRef {
|
188
207
|
/**
|
@@ -371,3 +390,7 @@ export interface IFormItemInnerProps {
|
|
371
390
|
*/
|
372
391
|
displayType?: FormInternalComponentType;
|
373
392
|
}
|
393
|
+
export declare enum ValueChangeType {
|
394
|
+
Update = 0,
|
395
|
+
Reset = 1
|
396
|
+
}
|
package/esm/form/type.js
CHANGED
@@ -26,4 +26,11 @@ export var ValidateStatus;
|
|
26
26
|
ValidateStatus["Warning"] = "warning";
|
27
27
|
ValidateStatus["Validating"] = "validating";
|
28
28
|
ValidateStatus["Success"] = "success";
|
29
|
-
})(ValidateStatus || (ValidateStatus = {}));
|
29
|
+
})(ValidateStatus || (ValidateStatus = {}));
|
30
|
+
|
31
|
+
export var ValueChangeType;
|
32
|
+
|
33
|
+
(function (ValueChangeType) {
|
34
|
+
ValueChangeType[ValueChangeType["Update"] = 0] = "Update";
|
35
|
+
ValueChangeType[ValueChangeType["Reset"] = 1] = "Reset";
|
36
|
+
})(ValueChangeType || (ValueChangeType = {}));
|
package/esm/form/useForm.d.ts
CHANGED
@@ -1,18 +1,3 @@
|
|
1
|
-
import { IFormInstance } from './type';
|
2
|
-
export declare const defaultFormDataMethods:
|
3
|
-
getFieldValue: (name: any) => any;
|
4
|
-
getFieldsValue: (_names: any) => {};
|
5
|
-
getFieldError: (_name: any) => never[];
|
6
|
-
setFieldValue: (_name: any, _value: any) => boolean;
|
7
|
-
setFieldsValue: (_values: any) => boolean;
|
8
|
-
registerField: (_name: any, _self: any) => () => void;
|
9
|
-
resetFields: any;
|
10
|
-
validateFields: any;
|
11
|
-
submit: any;
|
12
|
-
getInternalHooks: () => {
|
13
|
-
registerField: any;
|
14
|
-
setInitialValues: any;
|
15
|
-
setCallbacks: any;
|
16
|
-
};
|
17
|
-
};
|
1
|
+
import { IFormInstance, InternalFormInstance } from './type';
|
2
|
+
export declare const defaultFormDataMethods: InternalFormInstance;
|
18
3
|
export default function useForm(form?: IFormInstance): IFormInstance[];
|