@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.6
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/AutoBox/index.js +72 -85
- package/AutoTips/index.js +72 -95
- package/Badge/index.js +17 -16
- package/Breadcrumbs/index.js +57 -73
- package/Button/index.js +90 -118
- package/ButtonGroup/index.js +30 -33
- package/Carousel/index.js +29 -33
- package/Cascader/index.js +9 -10
- package/Checkbox/index.js +28 -35
- package/CheckboxGroup/index.js +43 -58
- package/Collapse/index.js +52 -49
- package/CollapseBox/index.js +65 -70
- package/CollapseLayout/index.js +106 -101
- package/ColorPicker/index.js +3 -3
- package/ComboSelect/index.js +260 -337
- package/ComboSelect/lang/en_US.d.ts +1 -0
- package/ComboSelect/lang/index.d.ts +2 -0
- package/ComboSelect/lang/zh_CN.d.ts +1 -0
- package/ComboSelect/utils.d.ts +6 -0
- package/Container/index.js +17 -21
- package/CopyText/index.js +50 -83
- package/DatePicker/index.js +24 -27
- package/Descriptions/index.js +50 -59
- package/Desktop/index.js +161 -180
- package/DragVerify/index.js +77 -113
- package/Drawer/index.js +80 -95
- package/Dropdown/index.js +3 -3
- package/DynamicMultiBox/index.js +222 -224
- package/DynamicMultiBox/interface.d.ts +7 -0
- package/Empty/index.js +26 -28
- package/Form/index.js +70 -74
- package/FormItem/index.js +18 -15
- package/FunctionModal/index.js +7 -14
- package/GlobalContext/index.js +17 -20
- package/Help/index.js +9 -12
- package/HelperText/index.js +11 -11
- package/InputLang/index.js +104 -124
- package/InputNumber/index.js +62 -81
- package/Label/index.js +19 -21
- package/Loading/index.js +11 -10
- package/Menu/index.js +302 -371
- package/Message/index.js +104 -113
- package/Modal/index.js +122 -148
- package/MultiBox/index.d.ts +5 -0
- package/MultiBox/index.js +111 -115
- package/Notification/index.js +105 -103
- package/OperateBtn/index.d.ts +3 -0
- package/OperateBtn/index.js +77 -107
- package/PageHeader/index.js +327 -406
- package/Pagination/index.js +107 -137
- package/ParauiProvider/index.js +20 -22
- package/PasswordRules/index.js +36 -40
- package/PopConfirm/index.js +60 -77
- package/Popover/index.js +12 -12
- package/Progress/index.js +72 -74
- package/Querying/index.js +22 -23
- package/README.md +2 -0
- package/Radio/index.js +27 -34
- package/RadioGroup/index.js +38 -52
- package/Search/index.js +34 -43
- package/Select/index.js +281 -345
- package/SelectInput/index.js +8 -13
- package/Selector/index.js +582 -796
- package/SelectorPicker/index.js +113 -134
- package/SingleBox/index.d.ts +5 -0
- package/SingleBox/index.js +92 -88
- package/Slider/index.js +46 -57
- package/Status/index.js +14 -13
- package/Stepper/index.js +24 -25
- package/Styles/theme.scss +9 -9
- package/Switch/index.js +32 -35
- package/Table/index.js +360 -494
- package/Tabs/index.js +100 -100
- package/Tag/index.js +64 -82
- package/TextEditor/index.js +78 -100
- package/TextField/index.js +142 -183
- package/TimePicker/index.js +29 -28
- package/Timeline/index.js +50 -47
- package/Title/index.js +32 -34
- package/ToggleButton/index.js +29 -29
- package/Tooltip/index.js +52 -56
- package/Transfer/index.js +117 -154
- package/Tree/index.js +9 -10
- package/Upload/index.js +125 -143
- package/Upload/interface.d.ts +2 -0
- package/_verture/{constant-0d9802f7.js → constant-5317fc89.js} +2 -2
- package/_verture/{index-5a7e2438.js → index-3cdaba96.js} +967 -934
- package/_verture/{index-b1f80962.js → index-4fafd0a0.js} +6 -8
- package/_verture/{index-024bbc9b.js → index-775ad32d.js} +29 -25
- package/_verture/{index-05f7bf11.js → index-c568f272.js} +2 -2
- package/_verture/{index-232d890b.js → index-d63bd287.js} +1 -1
- package/_verture/index-da9097d3.js +239 -0
- package/_verture/{index-9331b116.js → index-e0f9064d.js} +125 -134
- package/_verture/intl-f2f27722.js +69 -0
- package/_verture/{modalContext-736ff215.js → modalContext-8534f23d.js} +36 -64
- package/_verture/{slicedToArray-a8206399.js → slicedToArray-75fa4188.js} +15 -2
- package/_verture/{toConsumableArray-8f4c9589.js → toConsumableArray-c7a8028f.js} +1 -1
- package/_verture/{useFormatMessage-703f8b20.js → useFormatMessage-eb13cf56.js} +5 -4
- package/_verture/{useGlobalProps-1b846a65.js → useGlobalProps-1e416658.js} +4 -3
- package/_verture/{usePopupContainer-87febeb9.js → usePopupContainer-635f66f4.js} +16 -15
- package/_verture/{util-7e1fb1e2.js → util-82646c4f.js} +5 -4
- package/_verture/utils-c17b5265.js +97 -0
- package/index.js +24 -23
- package/locale/en-US.d.ts +1 -0
- package/locale/index.d.ts +2 -0
- package/locale/index.js +10 -8
- package/locale/zh-CN.d.ts +1 -0
- package/package.json +11 -10
- package/umd/AutoBox.js +9 -8
- package/umd/AutoTips.js +9 -8
- package/umd/Badge.js +1 -1
- package/umd/Breadcrumbs.js +9 -8
- package/umd/Button.js +9 -8
- package/umd/ButtonGroup.js +9 -8
- package/umd/Carousel.js +5 -5
- package/umd/Cascader.js +9 -8
- package/umd/Checkbox.js +9 -8
- package/umd/CheckboxGroup.js +9 -8
- package/umd/Collapse.js +8 -7
- package/umd/CollapseBox.js +1 -1
- package/umd/CollapseLayout.js +4 -4
- package/umd/ColorPicker.js +1 -1
- package/umd/ComboSelect.js +9 -8
- package/umd/Container.js +1 -1
- package/umd/CopyText.js +9 -8
- package/umd/DatePicker.js +9 -8
- package/umd/Descriptions.js +9 -8
- package/umd/Desktop.js +9 -8
- package/umd/DragVerify.js +4 -4
- package/umd/Drawer.js +9 -8
- package/umd/Dropdown.js +6 -5
- package/umd/DynamicMultiBox.js +11 -10
- package/umd/Empty.js +1 -1
- package/umd/Form.js +9 -8
- package/umd/FormItem.js +9 -8
- package/umd/FunctionModal.js +9 -8
- package/umd/GlobalContext.js +1 -1
- package/umd/Help.js +9 -8
- package/umd/HelperText.js +1 -1
- package/umd/InputLang.js +9 -8
- package/umd/InputNumber.js +9 -8
- package/umd/Label.js +9 -8
- package/umd/Loading.js +4 -4
- package/umd/Menu.js +4 -4
- package/umd/Message.js +4 -4
- package/umd/Modal.js +9 -8
- package/umd/MultiBox.js +9 -8
- package/umd/Notification.js +8 -7
- package/umd/OperateBtn.js +9 -8
- package/umd/PageHeader.js +9 -8
- package/umd/Pagination.js +9 -8
- package/umd/ParauiProvider.js +1 -1
- package/umd/PasswordRules.js +4 -4
- package/umd/PopConfirm.js +9 -8
- package/umd/Popover.js +9 -8
- package/umd/Progress.js +5 -5
- package/umd/Querying.js +1 -1
- package/umd/Radio.js +9 -8
- package/umd/RadioGroup.js +9 -8
- package/umd/Search.js +9 -8
- package/umd/Select.js +9 -8
- package/umd/SelectInput.js +9 -8
- package/umd/Selector.js +9 -8
- package/umd/SelectorPicker.js +9 -8
- package/umd/SingleBox.js +9 -8
- package/umd/Slider.js +6 -5
- package/umd/Status.js +4 -4
- package/umd/Stepper.js +9 -8
- package/umd/Switch.js +9 -8
- package/umd/Table.js +9 -8
- package/umd/Tabs.js +9 -8
- package/umd/Tag.js +9 -8
- package/umd/TextEditor.js +22 -21
- package/umd/TextField.js +9 -8
- package/umd/TimePicker.js +9 -8
- package/umd/Timeline.js +1 -1
- package/umd/Title.js +9 -8
- package/umd/ToggleButton.js +9 -8
- package/umd/Tooltip.js +9 -8
- package/umd/Transfer.js +10 -9
- package/umd/Tree.js +9 -8
- package/umd/Upload.js +10 -9
- package/umd/locale.js +1 -1
- package/_verture/index-e9007d6a.js +0 -236
- package/_verture/intl-5c1ec055.js +0 -81
- package/_verture/unsupportedIterableToArray-cb478f24.js +0 -16
- package/_verture/utils-418da0a4.js +0 -73
- /package/_verture/{typeof-c310ee4a.js → typeof-b240b062.js} +0 -0
package/DynamicMultiBox/index.js
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
|
|
2
|
-
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
|
|
3
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
|
|
4
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
5
2
|
import React__default, { useState, useRef, useEffect, useMemo } from 'react';
|
|
6
3
|
import { Popover } from '../Popover/index.js';
|
|
@@ -21,29 +18,27 @@ import DatePicker from '../DatePicker/index.js';
|
|
|
21
18
|
import AutoTips from '../AutoTips/index.js';
|
|
22
19
|
import { UUID } from '@paraview/lib';
|
|
23
20
|
import { s as sortable_esm } from '../_verture/sortable.esm-49896035.js';
|
|
24
|
-
import { $ as $prefixCls } from '../_verture/constant-
|
|
25
|
-
import { u as useFormatMessage } from '../_verture/useFormatMessage-
|
|
21
|
+
import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
|
|
22
|
+
import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
|
|
26
23
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
27
|
-
import '../
|
|
28
|
-
import '../_verture/
|
|
29
|
-
import '../Tooltip/index.js';
|
|
30
|
-
import 'rc-tooltip';
|
|
31
|
-
import 'rc-tooltip/lib/placements';
|
|
24
|
+
import { Tooltip } from '../Tooltip/index.js';
|
|
25
|
+
import '../_verture/usePopupContainer-635f66f4.js';
|
|
32
26
|
import 'clsx';
|
|
33
|
-
import '@para-ui/icons/Forbid';
|
|
34
|
-
import '../_verture/usePopupContainer-87febeb9.js';
|
|
35
27
|
import '../Help/index.js';
|
|
36
28
|
import '@para-ui/icons/Help';
|
|
37
29
|
import '../Checkbox/index.js';
|
|
30
|
+
import 'rc-tooltip';
|
|
31
|
+
import 'rc-tooltip/lib/placements';
|
|
32
|
+
import '@para-ui/icons/Forbid';
|
|
38
33
|
import '../HelperText/index.js';
|
|
39
34
|
import '@para-ui/icons/PreviewClose';
|
|
40
35
|
import '@para-ui/icons/PreviewOpen';
|
|
41
36
|
import '@para-ui/icons/CloseCircleF';
|
|
42
37
|
import '../Loading/index.js';
|
|
43
38
|
import '@para-ui/icons/LoadingF';
|
|
44
|
-
import '../_verture/useGlobalProps-
|
|
39
|
+
import '../_verture/useGlobalProps-1e416658.js';
|
|
45
40
|
import '@para-ui/core/GlobalContext';
|
|
46
|
-
import '../_verture/index-
|
|
41
|
+
import '../_verture/index-da9097d3.js';
|
|
47
42
|
import 'rc-dropdown';
|
|
48
43
|
import 'dayjs';
|
|
49
44
|
import '../Empty/index.js';
|
|
@@ -56,16 +51,21 @@ import 'rc-input-number';
|
|
|
56
51
|
import '@para-ui/icons/Up';
|
|
57
52
|
import '../MultiBox/index.js';
|
|
58
53
|
import '@para-ui/icons/Internet';
|
|
59
|
-
import '../_verture/index-232d890b.js';
|
|
60
|
-
import '../_verture/typeof-c310ee4a.js';
|
|
61
54
|
import '../Table/index.js';
|
|
55
|
+
import '../_verture/typeof-adeedc13.js';
|
|
56
|
+
import '../_verture/slicedToArray-75fa4188.js';
|
|
62
57
|
import '../Button/index.js';
|
|
63
58
|
import '@para-ui/icons/ScreenF';
|
|
64
59
|
import '@para-ui/icons/UpTriangleF';
|
|
65
60
|
import '@para-ui/icons/DownTriangleF';
|
|
61
|
+
import '../_verture/defineProperty-1d116156.js';
|
|
66
62
|
import '../Radio/index.js';
|
|
67
63
|
import '../OperateBtn/index.js';
|
|
68
64
|
import '@para-ui/icons/More';
|
|
65
|
+
import '../PopConfirm/index.js';
|
|
66
|
+
import '@para-ui/icons/CheckCircleF';
|
|
67
|
+
import '@para-ui/icons/WarningCircle';
|
|
68
|
+
import '@para-ui/icons/WarningCircleF';
|
|
69
69
|
import '@para-ui/icons/Refresh';
|
|
70
70
|
import '../Pagination/index.js';
|
|
71
71
|
import '@para-ui/icons/Left';
|
|
@@ -73,14 +73,17 @@ import 'rc-pagination';
|
|
|
73
73
|
import '@para-ui/icons/Right';
|
|
74
74
|
import '@para-ui/icons/DoubleLeft';
|
|
75
75
|
import '@para-ui/icons/DoubleRight';
|
|
76
|
-
import '../_verture/index-
|
|
76
|
+
import '../_verture/index-4fafd0a0.js';
|
|
77
|
+
import '../_verture/toConsumableArray-c7a8028f.js';
|
|
78
|
+
import '../_verture/index-d63bd287.js';
|
|
79
|
+
import '../_verture/typeof-b240b062.js';
|
|
77
80
|
import 'rc-tree';
|
|
78
81
|
import '@para-ui/icons/Document';
|
|
79
82
|
import 'react-dom';
|
|
80
83
|
import '@para-ui/icons/EditFile';
|
|
81
84
|
import '@para-ui/icons/PlusCircle';
|
|
82
85
|
import '@para-ui/icons/MoreCircle';
|
|
83
|
-
import '../_verture/utils-
|
|
86
|
+
import '../_verture/utils-c17b5265.js';
|
|
84
87
|
import '../Search/index.js';
|
|
85
88
|
import 'rc-picker/es/generate/dayjs';
|
|
86
89
|
import '../Tag/index.js';
|
|
@@ -134,8 +137,10 @@ var FormItem = function FormItem(props) {
|
|
|
134
137
|
_a.isFixed;
|
|
135
138
|
_a.selected;
|
|
136
139
|
var text = _a.text,
|
|
137
|
-
|
|
140
|
+
otherProps = _a.otherProps,
|
|
141
|
+
rest = __rest(_a, ["name", "inputType", "customRender", "rowIndex", "id", "list", "isDisabled", "isFixed", "selected", "text", "otherProps"]);
|
|
138
142
|
var disabled = typeof isDisabled === 'function' ? isDisabled(rowIndex, name, valueList) : isDisabled;
|
|
143
|
+
var otherPropsCom = otherProps && otherProps(rowIndex, name, valueList);
|
|
139
144
|
var getComponent = function getComponent() {
|
|
140
145
|
switch (inputType) {
|
|
141
146
|
case 'TextField':
|
|
@@ -186,7 +191,7 @@ var FormItem = function FormItem(props) {
|
|
|
186
191
|
onChange: function onChange(e) {
|
|
187
192
|
return inputChange(e.target.value);
|
|
188
193
|
}
|
|
189
|
-
}));
|
|
194
|
+
}, otherPropsCom));
|
|
190
195
|
};
|
|
191
196
|
/**
|
|
192
197
|
* @description: 返回下拉框组件
|
|
@@ -205,7 +210,7 @@ var FormItem = function FormItem(props) {
|
|
|
205
210
|
getPopupContainer: function getPopupContainer() {
|
|
206
211
|
return document.body;
|
|
207
212
|
}
|
|
208
|
-
}));
|
|
213
|
+
}, otherPropsCom));
|
|
209
214
|
};
|
|
210
215
|
/**
|
|
211
216
|
* @description: 返回开关组件
|
|
@@ -232,7 +237,7 @@ var FormItem = function FormItem(props) {
|
|
|
232
237
|
onChange: function onChange(checked) {
|
|
233
238
|
return inputChange(checked);
|
|
234
239
|
}
|
|
235
|
-
}))
|
|
240
|
+
}, otherPropsCom))
|
|
236
241
|
}))]
|
|
237
242
|
}));
|
|
238
243
|
};
|
|
@@ -248,7 +253,7 @@ var FormItem = function FormItem(props) {
|
|
|
248
253
|
onChange: function onChange(value) {
|
|
249
254
|
return inputChange(value);
|
|
250
255
|
}
|
|
251
|
-
}));
|
|
256
|
+
}, otherPropsCom));
|
|
252
257
|
};
|
|
253
258
|
/**
|
|
254
259
|
* @description: 返回国际化输入框
|
|
@@ -261,7 +266,7 @@ var FormItem = function FormItem(props) {
|
|
|
261
266
|
onChange: function onChange(value) {
|
|
262
267
|
return inputChange(value);
|
|
263
268
|
}
|
|
264
|
-
}));
|
|
269
|
+
}, otherPropsCom));
|
|
265
270
|
};
|
|
266
271
|
/**
|
|
267
272
|
* @description: 返回日期选择框组件
|
|
@@ -276,7 +281,7 @@ var FormItem = function FormItem(props) {
|
|
|
276
281
|
getPopupContainer: function getPopupContainer() {
|
|
277
282
|
return document.body;
|
|
278
283
|
}
|
|
279
|
-
}));
|
|
284
|
+
}, otherPropsCom));
|
|
280
285
|
};
|
|
281
286
|
/**
|
|
282
287
|
* @description: 返回组合选择器下拉框
|
|
@@ -290,7 +295,7 @@ var FormItem = function FormItem(props) {
|
|
|
290
295
|
onChange: function onChange(options) {
|
|
291
296
|
return inputChange(options);
|
|
292
297
|
}
|
|
293
|
-
}));
|
|
298
|
+
}, otherPropsCom));
|
|
294
299
|
};
|
|
295
300
|
/**
|
|
296
301
|
* @description: 返回自定义组件
|
|
@@ -306,48 +311,48 @@ var FormItem = function FormItem(props) {
|
|
|
306
311
|
});
|
|
307
312
|
};
|
|
308
313
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
rowKey =
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
rowIndex = props.rowIndex,
|
|
321
|
-
icon = props.icon;
|
|
314
|
+
const RowForm = props => {
|
|
315
|
+
const {
|
|
316
|
+
rowKey = 'id',
|
|
317
|
+
valueList = [],
|
|
318
|
+
rowError,
|
|
319
|
+
errors = [],
|
|
320
|
+
onFormItemChange,
|
|
321
|
+
config = [],
|
|
322
|
+
rowIndex,
|
|
323
|
+
icon
|
|
324
|
+
} = props;
|
|
322
325
|
/**
|
|
323
326
|
* @desc 回调
|
|
324
327
|
* @param id 表单所处行中的id
|
|
325
328
|
* @param value 表单值
|
|
326
329
|
* @param name 表单名
|
|
327
330
|
* */
|
|
328
|
-
|
|
331
|
+
const onChange = (id, value, name) => {
|
|
329
332
|
onFormItemChange && onFormItemChange(name, id, value);
|
|
330
333
|
};
|
|
331
|
-
|
|
332
|
-
|
|
334
|
+
const handStyle = style => {
|
|
335
|
+
const obj = Object.assign({}, style);
|
|
333
336
|
if (!(style === null || style === void 0 ? void 0 : style.width) && !(style === null || style === void 0 ? void 0 : style.flex)) obj.flex = 1;
|
|
334
337
|
return obj;
|
|
335
338
|
};
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
+
const renderFormItem = () => {
|
|
340
|
+
const rowValue = valueList === null || valueList === void 0 ? void 0 : valueList[rowIndex];
|
|
341
|
+
const len = config === null || config === void 0 ? void 0 : config.length;
|
|
339
342
|
return jsx(Fragment, {
|
|
340
|
-
children: (config === null || config === void 0 ? void 0 : config.length) > 0 && config.map(
|
|
341
|
-
|
|
343
|
+
children: (config === null || config === void 0 ? void 0 : config.length) > 0 && config.map((data, index) => {
|
|
344
|
+
const {
|
|
345
|
+
style
|
|
346
|
+
} = data,
|
|
342
347
|
othersData = __rest(data, ["style"]);
|
|
343
|
-
|
|
344
|
-
rowIndex
|
|
348
|
+
const formItemProps = (data === null || data === void 0 ? void 0 : data.inputType) !== 'Switch' ? Object.assign({
|
|
349
|
+
rowIndex,
|
|
345
350
|
id: rowValue[rowKey],
|
|
346
351
|
value: rowValue === null || rowValue === void 0 ? void 0 : rowValue[data.name || ''],
|
|
347
352
|
error: !!(rowError === null || rowError === void 0 ? void 0 : rowError[data.name || '']),
|
|
348
353
|
helperText: rowError === null || rowError === void 0 ? void 0 : rowError[data.name || '']
|
|
349
354
|
}, othersData) : Object.assign({
|
|
350
|
-
rowIndex
|
|
355
|
+
rowIndex,
|
|
351
356
|
id: rowValue[rowKey],
|
|
352
357
|
checked: rowValue === null || rowValue === void 0 ? void 0 : rowValue[data.name || '']
|
|
353
358
|
}, othersData);
|
|
@@ -359,9 +364,7 @@ var RowForm = function RowForm(props) {
|
|
|
359
364
|
valueList: valueList,
|
|
360
365
|
errors: errors,
|
|
361
366
|
formItemProps: formItemProps,
|
|
362
|
-
onChange:
|
|
363
|
-
return _onChange(id, value, (data === null || data === void 0 ? void 0 : data.name) || '');
|
|
364
|
-
}
|
|
367
|
+
onChange: (id, value) => onChange(id, value, (data === null || data === void 0 ? void 0 : data.name) || '')
|
|
365
368
|
}), index !== len - 1 && icon && jsx("div", Object.assign({
|
|
366
369
|
className: 'form-item-icon'
|
|
367
370
|
}, {
|
|
@@ -925,98 +928,79 @@ var zh = {
|
|
|
925
928
|
};
|
|
926
929
|
|
|
927
930
|
var localeJson = {
|
|
928
|
-
zh
|
|
929
|
-
en
|
|
931
|
+
zh,
|
|
932
|
+
en
|
|
930
933
|
};
|
|
931
934
|
|
|
932
935
|
var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-dynamic-multi-box {\n width: 100%;\n}\n.paraui-v4-dynamic-multi-box svg {\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content {\n width: 100%;\n position: relative;\n overflow-x: auto;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config {\n width: 100%;\n display: flex;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n display: flex;\n flex: 1;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n display: flex;\n align-items: center;\n min-width: 180px;\n margin-right: 10px;\n flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n flex: 0;\n min-width: 80px;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 {\n width: 32px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n cursor: pointer;\n margin-right: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box {\n height: 24px;\n width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgb(247, 248, 250);\n border-radius: 2px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg:hover {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 32px;\n height: 32px;\n cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover {\n background: rgb(247, 248, 250);\n border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon {\n display: none;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .center-line {\n width: 1px;\n height: 12px;\n background-color: rgb(212, 218, 227);\n margin: 0 3px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 {\n width: 72px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form {\n width: 100%;\n display: flex;\n align-items: flex-start;\n min-height: 42px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .paraui-v4-select {\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n display: flex;\n align-items: flex-start;\n min-width: 180px;\n margin-right: 10px;\n flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n flex: 0;\n box-sizing: content-box;\n align-items: center;\n height: 32px;\n min-width: 80px;\n}\n.paraui-v4-dynamic-multi-box .add-button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 32px;\n background: rgb(247, 248, 250);\n border: 1px dashed rgb(212, 218, 227);\n border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button .text {\n font-size: 14px;\n margin-left: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button.add-button-scroll {\n margin-top: 14px;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button {\n cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button .text {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button:hover {\n background: rgb(240, 245, 255);\n border: 1px dashed rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add {\n cursor: not-allowed;\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add .text {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add svg {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .paraui-v4-comboselect,\n.paraui-v4-dynamic-multi-box .paraui-v4-picker-wrapper {\n width: 100%;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch {\n width: 100%;\n display: flex;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch-text {\n color: rgb(161, 168, 179);\n margin-right: 4px;\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch {\n flex: 1;\n}\n\n.paraui-v4-dynamic-multi-box-popover .filter-config {\n width: 140px;\n padding-top: 4px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .title {\n font-size: 12px;\n color: rgb(161, 168, 179);\n line-height: 30px;\n padding: 0 10px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group {\n max-height: 320px;\n overflow-y: auto;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group.paraui-v4-checkbox-group-column .checkbox-group-content > span {\n padding: 0 10px;\n margin-bottom: 0;\n line-height: 30px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .restore-default {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 36px;\n color: rgb(46, 101, 230);\n cursor: pointer;\n border-top: 1px solid rgb(247, 248, 250);\n}\n.paraui-v4-dynamic-multi-box-popover .no-other-property {\n width: 200px;\n padding: 16px 0;\n text-align: center;\n font-size: 12px;\n color: rgb(161, 168, 179);\n}";
|
|
933
936
|
styleInject(css_248z);
|
|
934
937
|
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
rowKey =
|
|
938
|
-
valueList
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
970
|
-
checked = _useState2[0],
|
|
971
|
-
setChecked = _useState2[1];
|
|
972
|
-
var domRef = useRef(null);
|
|
973
|
-
var panelRef = useRef(null);
|
|
974
|
-
var _useState3 = useState([]),
|
|
975
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
976
|
-
fixedConfig = _useState4[0],
|
|
977
|
-
setFixedConfig = _useState4[1];
|
|
978
|
-
var _useState5 = useState([]),
|
|
979
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
980
|
-
selectedConfig = _useState6[0],
|
|
981
|
-
setSelectedConfig = _useState6[1];
|
|
982
|
-
var constData = useRef({});
|
|
983
|
-
useEffect(function () {
|
|
938
|
+
const DynamicMultiBox = props => {
|
|
939
|
+
const {
|
|
940
|
+
rowKey = 'id',
|
|
941
|
+
valueList,
|
|
942
|
+
config = [],
|
|
943
|
+
errors = [],
|
|
944
|
+
isSort = false,
|
|
945
|
+
isFilter = false,
|
|
946
|
+
className,
|
|
947
|
+
disabledAdd = false,
|
|
948
|
+
disabledAddTooltip,
|
|
949
|
+
titleMode = 'all',
|
|
950
|
+
checkedValue,
|
|
951
|
+
icon,
|
|
952
|
+
deleteDisable = [],
|
|
953
|
+
singleTitle,
|
|
954
|
+
initValue,
|
|
955
|
+
popoverClassName,
|
|
956
|
+
onChange,
|
|
957
|
+
onAdd,
|
|
958
|
+
onFilter,
|
|
959
|
+
onDelete,
|
|
960
|
+
deleteRender,
|
|
961
|
+
onSort,
|
|
962
|
+
keepLastItem = true
|
|
963
|
+
} = props;
|
|
964
|
+
const intl = useFormatMessage('DynamicMultiBox', localeJson);
|
|
965
|
+
const [checked, setChecked] = useState([]);
|
|
966
|
+
const domRef = useRef(null);
|
|
967
|
+
const panelRef = useRef(null);
|
|
968
|
+
const [fixedConfig, setFixedConfig] = useState([]);
|
|
969
|
+
const [selectedConfig, setSelectedConfig] = useState([]);
|
|
970
|
+
const constData = useRef({});
|
|
971
|
+
useEffect(() => {
|
|
984
972
|
window.addEventListener('resize', monitorScroll);
|
|
985
|
-
return
|
|
973
|
+
return () => {
|
|
986
974
|
window.removeEventListener('resize', monitorScroll);
|
|
987
975
|
clearTimeout(constData.current.timerScroll);
|
|
988
976
|
};
|
|
989
977
|
}, []);
|
|
990
|
-
useEffect(
|
|
978
|
+
useEffect(() => {
|
|
991
979
|
if (checkedValue) setChecked(checkedValue);
|
|
992
980
|
}, [checkedValue]);
|
|
993
|
-
useEffect(
|
|
981
|
+
useEffect(() => {
|
|
994
982
|
if (!(config === null || config === void 0 ? void 0 : config.length)) return;
|
|
995
983
|
// 筛选出固定字段
|
|
996
|
-
|
|
997
|
-
return item.isFixed;
|
|
998
|
-
})) || [];
|
|
984
|
+
const fixedArr = (config === null || config === void 0 ? void 0 : config.filter(item => item.isFixed)) || [];
|
|
999
985
|
setFixedConfig(fixedArr);
|
|
1000
986
|
}, [config]);
|
|
1001
|
-
useEffect(
|
|
987
|
+
useEffect(() => {
|
|
1002
988
|
if (!(config === null || config === void 0 ? void 0 : config.length)) return;
|
|
1003
989
|
// 通过透传的checkedValue映射出对应的配置
|
|
1004
|
-
|
|
1005
|
-
return !item.isFixed && (checked === null || checked === void 0 ? void 0 : checked.includes(item.name));
|
|
1006
|
-
})) || [];
|
|
990
|
+
const selectedArr = (config === null || config === void 0 ? void 0 : config.filter(item => !item.isFixed && (checked === null || checked === void 0 ? void 0 : checked.includes(item.name)))) || [];
|
|
1007
991
|
setSelectedConfig(selectedArr);
|
|
1008
992
|
}, [config, checked]);
|
|
1009
993
|
/**
|
|
1010
994
|
* @desc 筛选回调
|
|
1011
995
|
* */
|
|
1012
|
-
|
|
996
|
+
const onCheckChange = val => {
|
|
1013
997
|
// 1、更新selectedConfig配置 2、更新valueList 3、更新error
|
|
1014
998
|
// 区分正选反选
|
|
1015
|
-
|
|
999
|
+
const bool = (val === null || val === void 0 ? void 0 : val.length) > (checked === null || checked === void 0 ? void 0 : checked.length);
|
|
1016
1000
|
// 当前选中数据和上一次选择数据取差值
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1001
|
+
const currentVal = getArrDiffSet(val, checked);
|
|
1002
|
+
let valueArr = [...valueList];
|
|
1003
|
+
let errorArr = [...errors];
|
|
1020
1004
|
if (bool) {
|
|
1021
1005
|
valueArr = handleCheckedConfig(valueArr, currentVal);
|
|
1022
1006
|
errorArr = handleCheckedConfig(errorArr, currentVal);
|
|
@@ -1034,15 +1018,15 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1034
1018
|
monitorScroll();
|
|
1035
1019
|
};
|
|
1036
1020
|
/** 监听内容是否产生横向滚动*/
|
|
1037
|
-
|
|
1038
|
-
|
|
1021
|
+
const monitorScroll = () => {
|
|
1022
|
+
const domRefEle = domRef === null || domRef === void 0 ? void 0 : domRef.current;
|
|
1039
1023
|
if (!domRefEle) return;
|
|
1040
|
-
|
|
1024
|
+
const contentDomEle = domRefEle.querySelector('.multi-value-content');
|
|
1041
1025
|
if (!contentDomEle) return;
|
|
1042
|
-
|
|
1026
|
+
const btnDomEle = domRefEle.querySelector('.add-button');
|
|
1043
1027
|
if (!btnDomEle) return;
|
|
1044
1028
|
clearTimeout(constData.current.timerScroll);
|
|
1045
|
-
constData.current.timerScroll = setTimeout(
|
|
1029
|
+
constData.current.timerScroll = setTimeout(() => {
|
|
1046
1030
|
if (contentDomEle.offsetWidth < contentDomEle.scrollWidth) {
|
|
1047
1031
|
btnDomEle.classList.add('add-button-scroll');
|
|
1048
1032
|
} else {
|
|
@@ -1053,10 +1037,10 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1053
1037
|
/**
|
|
1054
1038
|
* @desc 筛选恢复默认,
|
|
1055
1039
|
* */
|
|
1056
|
-
|
|
1040
|
+
const onRestoreDefault = () => {
|
|
1057
1041
|
if (!(checked === null || checked === void 0 ? void 0 : checked.length)) return;
|
|
1058
|
-
|
|
1059
|
-
|
|
1042
|
+
const valueArr = [...valueList];
|
|
1043
|
+
const errorArr = [...errors];
|
|
1060
1044
|
restoreData(valueArr, checked);
|
|
1061
1045
|
restoreData(errorArr, checked);
|
|
1062
1046
|
setChecked([]);
|
|
@@ -1070,9 +1054,9 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1070
1054
|
/**
|
|
1071
1055
|
* @desc 数据重置
|
|
1072
1056
|
* */
|
|
1073
|
-
|
|
1074
|
-
data.forEach(
|
|
1075
|
-
for (
|
|
1057
|
+
const restoreData = (data, checked) => {
|
|
1058
|
+
data.forEach(item => {
|
|
1059
|
+
for (const key in item) {
|
|
1076
1060
|
if (checked.includes(key)) delete item[key];
|
|
1077
1061
|
}
|
|
1078
1062
|
});
|
|
@@ -1082,11 +1066,11 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1082
1066
|
* @param dataArr 错误集合errors或者valueList集合
|
|
1083
1067
|
* @param currentVal 反选值
|
|
1084
1068
|
* */
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
dataArr.forEach(
|
|
1089
|
-
for (
|
|
1069
|
+
const handleUncheckedConfig = function () {
|
|
1070
|
+
let dataArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
1071
|
+
let currentVal = arguments.length > 1 ? arguments[1] : undefined;
|
|
1072
|
+
dataArr.forEach(item => {
|
|
1073
|
+
for (const itemKey in item) {
|
|
1090
1074
|
if (itemKey === currentVal) delete item[itemKey];
|
|
1091
1075
|
}
|
|
1092
1076
|
});
|
|
@@ -1096,18 +1080,16 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1096
1080
|
* @param dataArr 错误集合errors或者valueList集合
|
|
1097
1081
|
* @param currentVal 正选值
|
|
1098
1082
|
* */
|
|
1099
|
-
|
|
1100
|
-
return dataArr.map(
|
|
1101
|
-
|
|
1102
|
-
});
|
|
1083
|
+
const handleCheckedConfig = (dataArr, currentVal) => {
|
|
1084
|
+
return dataArr.map(item => Object.assign(Object.assign({}, item), {
|
|
1085
|
+
[currentVal]: ''
|
|
1086
|
+
}));
|
|
1103
1087
|
};
|
|
1104
1088
|
/**
|
|
1105
1089
|
* 弹窗筛选器内容
|
|
1106
1090
|
* */
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
return !item.isFixed;
|
|
1110
|
-
});
|
|
1091
|
+
const renderPopoverContent = () => {
|
|
1092
|
+
const filterConfig = config.filter(item => !item.isFixed);
|
|
1111
1093
|
return jsx(Fragment, {
|
|
1112
1094
|
children: filterConfig && (filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.length) > 0 ? jsxs("div", Object.assign({
|
|
1113
1095
|
className: "filter-config"
|
|
@@ -1144,16 +1126,16 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1144
1126
|
}))
|
|
1145
1127
|
});
|
|
1146
1128
|
};
|
|
1147
|
-
|
|
1148
|
-
|
|
1129
|
+
const popoverHandClass = () => {
|
|
1130
|
+
let str = "".concat($prefixCls, "-dynamic-multi-box-popover");
|
|
1149
1131
|
if (popoverClassName) str += " ".concat(popoverClassName);
|
|
1150
1132
|
return str;
|
|
1151
1133
|
};
|
|
1152
1134
|
/**
|
|
1153
1135
|
* 渲染表头
|
|
1154
1136
|
* */
|
|
1155
|
-
|
|
1156
|
-
|
|
1137
|
+
const renderTitle = useMemo(() => {
|
|
1138
|
+
const config = [...fixedConfig, ...selectedConfig];
|
|
1157
1139
|
if (!(config === null || config === void 0 ? void 0 : config.length)) return null;
|
|
1158
1140
|
return jsxs("div", Object.assign({
|
|
1159
1141
|
className: 'title-config'
|
|
@@ -1161,17 +1143,19 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1161
1143
|
children: [titleMode === 'all' ? jsx("div", Object.assign({
|
|
1162
1144
|
className: 'title-config-row'
|
|
1163
1145
|
}, {
|
|
1164
|
-
children: config === null || config === void 0 ? void 0 : config.map(
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1146
|
+
children: config === null || config === void 0 ? void 0 : config.map((item, index) => {
|
|
1147
|
+
const {
|
|
1148
|
+
label,
|
|
1149
|
+
required,
|
|
1150
|
+
className,
|
|
1151
|
+
inputType,
|
|
1152
|
+
style,
|
|
1153
|
+
labelProps
|
|
1154
|
+
} = item;
|
|
1155
|
+
let str = 'title-config-row-item';
|
|
1172
1156
|
if (inputType === 'Switch') str += ' row-form-switch';
|
|
1173
1157
|
if (className) str += " ".concat(className);
|
|
1174
|
-
|
|
1158
|
+
const styleCom = Object.assign({}, style);
|
|
1175
1159
|
if (!(style === null || style === void 0 ? void 0 : style.width) && !(style === null || style === void 0 ? void 0 : style.flex)) styleCom.flex = 1;
|
|
1176
1160
|
return jsx("div", Object.assign({
|
|
1177
1161
|
className: str,
|
|
@@ -1194,9 +1178,7 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1194
1178
|
}), isFilter && jsx(Popover, Object.assign({
|
|
1195
1179
|
placement: 'bottom-end',
|
|
1196
1180
|
content: renderPopoverContent(),
|
|
1197
|
-
getPopupContainer:
|
|
1198
|
-
return panelRef.current;
|
|
1199
|
-
},
|
|
1181
|
+
getPopupContainer: () => panelRef.current,
|
|
1200
1182
|
overlayClassName: popoverHandClass()
|
|
1201
1183
|
}, {
|
|
1202
1184
|
children: jsx("div", Object.assign({
|
|
@@ -1217,14 +1199,14 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1217
1199
|
* 判断是否全部隐藏删除
|
|
1218
1200
|
* 默认全部隐藏
|
|
1219
1201
|
* */
|
|
1220
|
-
|
|
1202
|
+
const isAllHideDelete = () => {
|
|
1221
1203
|
var _a;
|
|
1222
|
-
|
|
1204
|
+
let bol = true;
|
|
1223
1205
|
if (valueList.length > deleteDisable.length) {
|
|
1224
1206
|
return false;
|
|
1225
1207
|
}
|
|
1226
|
-
for (
|
|
1227
|
-
|
|
1208
|
+
for (let i = 0, l = valueList === null || valueList === void 0 ? void 0 : valueList.length; i < l; i++) {
|
|
1209
|
+
const id = (_a = valueList[i]) === null || _a === void 0 ? void 0 : _a[rowKey];
|
|
1228
1210
|
if (id && deleteDisable.indexOf(id) === -1) {
|
|
1229
1211
|
bol = false;
|
|
1230
1212
|
break;
|
|
@@ -1235,18 +1217,16 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1235
1217
|
/**
|
|
1236
1218
|
*@desc 渲染内容
|
|
1237
1219
|
* */
|
|
1238
|
-
|
|
1220
|
+
const renderContent = useMemo(() => {
|
|
1239
1221
|
if (valueList && (valueList === null || valueList === void 0 ? void 0 : valueList.length) > 0) {
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1222
|
+
const showDeleteIcon = keepLastItem ? valueList.length > 1 : true;
|
|
1223
|
+
const config = [...fixedConfig, ...selectedConfig];
|
|
1224
|
+
const isAllHideDelBol = isAllHideDelete();
|
|
1243
1225
|
return jsx(Fragment, {
|
|
1244
|
-
children: valueList.map(
|
|
1226
|
+
children: valueList.map((item, rowIndex) => {
|
|
1245
1227
|
var _a;
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
return item[rowKey] === id;
|
|
1249
|
-
})) === null || _a === void 0 ? void 0 : _a[0];
|
|
1228
|
+
const id = item[rowKey];
|
|
1229
|
+
const rowError = (_a = errors === null || errors === void 0 ? void 0 : errors.filter(item => item[rowKey] === id)) === null || _a === void 0 ? void 0 : _a[0];
|
|
1250
1230
|
return jsxs("div", Object.assign({
|
|
1251
1231
|
className: 'content-row-form'
|
|
1252
1232
|
}, {
|
|
@@ -1255,19 +1235,15 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1255
1235
|
valueList: valueList,
|
|
1256
1236
|
errors: errors,
|
|
1257
1237
|
rowError: rowError,
|
|
1258
|
-
onFormItemChange:
|
|
1259
|
-
return _onFormItemChange(name, id, value, rowIndex);
|
|
1260
|
-
},
|
|
1238
|
+
onFormItemChange: (name, id, value) => onFormItemChange(name, id, value, rowIndex),
|
|
1261
1239
|
icon: icon,
|
|
1262
|
-
config:
|
|
1240
|
+
config: config
|
|
1263
1241
|
}), jsxs("div", Object.assign({
|
|
1264
1242
|
className: "operator-column-40 ".concat(isSort && showDeleteIcon && !isAllHideDelBol ? 'operator-column-80' : '')
|
|
1265
1243
|
}, {
|
|
1266
1244
|
children: [jsx("div", Object.assign({
|
|
1267
1245
|
className: "operator-column-icon delete-icon ".concat(!showDeleteIcon || deleteDisable.includes(id) ? 'hidden-icon' : ''),
|
|
1268
|
-
onClick:
|
|
1269
|
-
return onDeleteEvent(rowIndex);
|
|
1270
|
-
}
|
|
1246
|
+
onClick: () => onDeleteEvent(rowIndex)
|
|
1271
1247
|
}, {
|
|
1272
1248
|
children: deleteRender ? deleteRender(rowIndex, item, valueList) : jsx(Delete, {})
|
|
1273
1249
|
})), isSort && jsx("div", Object.assign({
|
|
@@ -1290,9 +1266,9 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1290
1266
|
/**
|
|
1291
1267
|
* @desc 删除事件
|
|
1292
1268
|
* */
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1269
|
+
const onDeleteEvent = rowIndex => {
|
|
1270
|
+
const valueArr = [...valueList];
|
|
1271
|
+
const errorArr = [...errors];
|
|
1296
1272
|
valueArr.splice(rowIndex, 1);
|
|
1297
1273
|
errorArr.splice(rowIndex, 1);
|
|
1298
1274
|
onDelete && onDelete(valueArr, errorArr);
|
|
@@ -1304,31 +1280,35 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1304
1280
|
* @param rowIndex 表单所处行下标
|
|
1305
1281
|
* @param id 表单所处行中的id
|
|
1306
1282
|
* */
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
Object.keys(valueArr[rowIndex]).forEach(
|
|
1283
|
+
const onFormItemChange = (name, id, value, rowIndex) => {
|
|
1284
|
+
const valueArr = [...valueList];
|
|
1285
|
+
Object.keys(valueArr[rowIndex]).forEach(key => {
|
|
1310
1286
|
if (name === key) valueArr[rowIndex][key] = value;
|
|
1311
1287
|
});
|
|
1312
1288
|
onChange && onChange(valueArr, {
|
|
1313
|
-
name
|
|
1314
|
-
id
|
|
1315
|
-
value
|
|
1316
|
-
rowIndex
|
|
1289
|
+
name,
|
|
1290
|
+
id,
|
|
1291
|
+
value,
|
|
1292
|
+
rowIndex
|
|
1317
1293
|
});
|
|
1318
1294
|
};
|
|
1319
1295
|
/**
|
|
1320
1296
|
* @desc 新增事件
|
|
1321
1297
|
* */
|
|
1322
|
-
|
|
1298
|
+
const onAddEvent = () => {
|
|
1323
1299
|
if (disabledAdd) return;
|
|
1324
1300
|
// 根据配置进行valueList更新
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1301
|
+
const valueArr = [...(valueList || [])];
|
|
1302
|
+
const errorArr = [...errors];
|
|
1303
|
+
const id = UUID();
|
|
1328
1304
|
// 取出已经筛选的配置数据
|
|
1329
|
-
|
|
1330
|
-
valueArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'value')),
|
|
1331
|
-
|
|
1305
|
+
const configArr = [...fixedConfig, ...selectedConfig];
|
|
1306
|
+
valueArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'value')), {
|
|
1307
|
+
[rowKey]: id
|
|
1308
|
+
}));
|
|
1309
|
+
errorArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'error')), {
|
|
1310
|
+
[rowKey]: id
|
|
1311
|
+
}));
|
|
1332
1312
|
onAdd && onAdd(valueArr, errorArr);
|
|
1333
1313
|
};
|
|
1334
1314
|
/**
|
|
@@ -1336,23 +1316,23 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1336
1316
|
* @param configArr 配置表
|
|
1337
1317
|
* @param type 区分值和错误
|
|
1338
1318
|
* */
|
|
1339
|
-
|
|
1340
|
-
return configArr.reduce(
|
|
1341
|
-
|
|
1342
|
-
}, {});
|
|
1319
|
+
const getNewItem = (configArr, type) => {
|
|
1320
|
+
return configArr.reduce((acc, cur) => Object.assign(Object.assign({}, acc), {
|
|
1321
|
+
[cur.name]: type === 'value' ? initValue === null || initValue === void 0 ? void 0 : initValue[cur.name] : ''
|
|
1322
|
+
}), {});
|
|
1343
1323
|
};
|
|
1344
1324
|
/**
|
|
1345
1325
|
* @desc 排序
|
|
1346
1326
|
* @param newValueList 排序后的数组
|
|
1347
1327
|
* */
|
|
1348
|
-
|
|
1328
|
+
const onDragSort = newValueList => {
|
|
1349
1329
|
// 获取排序后 id映射下标集合
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
}, {});
|
|
1330
|
+
const idMapIndex = newValueList.reduce((acc, cur, index) => Object.assign(Object.assign({}, acc), {
|
|
1331
|
+
[cur[rowKey]]: index
|
|
1332
|
+
}), {});
|
|
1353
1333
|
// 需要交换的下标集合
|
|
1354
|
-
|
|
1355
|
-
valueList.forEach(
|
|
1334
|
+
const swapIds = [];
|
|
1335
|
+
valueList.forEach((item, idx) => {
|
|
1356
1336
|
if (idx !== idMapIndex[item[rowKey]]) swapIds.push(idx);
|
|
1357
1337
|
});
|
|
1358
1338
|
onSort && onSort(newValueList, swapIds);
|
|
@@ -1362,16 +1342,45 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1362
1342
|
* @param {string} currentVal
|
|
1363
1343
|
* @param {string} preVal
|
|
1364
1344
|
*/
|
|
1365
|
-
|
|
1366
|
-
return currentVal.concat(preVal).filter(
|
|
1367
|
-
|
|
1368
|
-
|
|
1345
|
+
const getArrDiffSet = (currentVal, preVal) => {
|
|
1346
|
+
return currentVal.concat(preVal).filter(v => !currentVal.includes(v) || !preVal.includes(v))[0];
|
|
1347
|
+
};
|
|
1348
|
+
/**
|
|
1349
|
+
* 处理添加按钮
|
|
1350
|
+
* */
|
|
1351
|
+
const handleAddBtn = () => {
|
|
1352
|
+
return jsxs("div", Object.assign({
|
|
1353
|
+
className: "add-button ".concat(disabledAdd ? 'disabled-add' : 'normal-button'),
|
|
1354
|
+
onClick: onAddEvent
|
|
1355
|
+
}, {
|
|
1356
|
+
children: [jsx(PlusCircleF, {}), jsx("span", Object.assign({
|
|
1357
|
+
className: "text"
|
|
1358
|
+
}, {
|
|
1359
|
+
children: intl({
|
|
1360
|
+
id: 'add'
|
|
1361
|
+
})
|
|
1362
|
+
}))]
|
|
1363
|
+
}));
|
|
1364
|
+
};
|
|
1365
|
+
/**
|
|
1366
|
+
* 处理添加按钮是否带提示
|
|
1367
|
+
* */
|
|
1368
|
+
const handleAddBtnTooltip = () => {
|
|
1369
|
+
if (disabledAddTooltip) {
|
|
1370
|
+
return jsx(Tooltip, Object.assign({
|
|
1371
|
+
disabled: true,
|
|
1372
|
+
placement: disabledAddTooltip.placement || 'top'
|
|
1373
|
+
}, disabledAddTooltip, {
|
|
1374
|
+
children: handleAddBtn()
|
|
1375
|
+
}));
|
|
1376
|
+
}
|
|
1377
|
+
return handleAddBtn();
|
|
1369
1378
|
};
|
|
1370
1379
|
/**
|
|
1371
1380
|
* @desc 处理className
|
|
1372
1381
|
* */
|
|
1373
|
-
|
|
1374
|
-
|
|
1382
|
+
const handClass = () => {
|
|
1383
|
+
let str = "".concat($prefixCls, "-dynamic-multi-box");
|
|
1375
1384
|
if (className) str += " ".concat(className);
|
|
1376
1385
|
return str;
|
|
1377
1386
|
};
|
|
@@ -1391,18 +1400,7 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
|
|
|
1391
1400
|
}, {
|
|
1392
1401
|
children: renderContent
|
|
1393
1402
|
})) : renderContent]
|
|
1394
|
-
})),
|
|
1395
|
-
className: "add-button ".concat(disabledAdd ? 'disabled-add' : 'normal-button'),
|
|
1396
|
-
onClick: onAddEvent
|
|
1397
|
-
}, {
|
|
1398
|
-
children: [jsx(PlusCircleF, {}), jsx("span", Object.assign({
|
|
1399
|
-
className: "text"
|
|
1400
|
-
}, {
|
|
1401
|
-
children: intl({
|
|
1402
|
-
id: 'add'
|
|
1403
|
-
})
|
|
1404
|
-
}))]
|
|
1405
|
-
}))]
|
|
1403
|
+
})), handleAddBtnTooltip()]
|
|
1406
1404
|
}));
|
|
1407
1405
|
};
|
|
1408
1406
|
|