@teamix/pro 1.3.14 → 1.3.17

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.
Files changed (53) hide show
  1. package/dist/pro.css +1 -1
  2. package/dist/pro.js +22026 -9580
  3. package/dist/pro.min.css +1 -1
  4. package/dist/pro.min.js +1 -1
  5. package/es/actions/index.scss +13 -0
  6. package/es/form/Filter/index.js +169 -53
  7. package/es/form/Filter/layout.scss +4 -0
  8. package/es/form/Filter/useBindUrl.d.ts +2 -0
  9. package/es/form/Filter/useBindUrl.js +118 -0
  10. package/es/form/ProForm/index.js +5 -3
  11. package/es/form/ProForm/useFieldSchema.js +53 -32
  12. package/es/form/SchemaForm/initializeDataSource.d.ts +1 -2
  13. package/es/form/SchemaForm/initializeDataSource.js +14 -19
  14. package/es/form/SchemaForm/initializeRequest.js +25 -26
  15. package/es/form/SchemaForm/initializeRules.d.ts +2 -2
  16. package/es/form/SchemaForm/initializeRules.js +30 -23
  17. package/es/form/SchemaForm/reactions.d.ts +4 -4
  18. package/es/form/SchemaForm/reactions.js +30 -23
  19. package/es/form/typing.d.ts +12 -5
  20. package/es/form/utils.d.ts +16 -1
  21. package/es/form/utils.js +21 -2
  22. package/es/global.scss +45 -0
  23. package/es/index.d.ts +2 -1
  24. package/es/index.js +3 -2
  25. package/es/page-header/index.d.ts +2 -0
  26. package/es/page-header/index.js +13 -3
  27. package/es/page-header/index.scss +8 -0
  28. package/es/table/components/Layout/index.scss +5 -5
  29. package/lib/actions/index.scss +13 -0
  30. package/lib/form/Filter/index.js +170 -53
  31. package/lib/form/Filter/layout.scss +4 -0
  32. package/lib/form/Filter/useBindUrl.d.ts +2 -0
  33. package/lib/form/Filter/useBindUrl.js +129 -0
  34. package/lib/form/ProForm/index.js +5 -3
  35. package/lib/form/ProForm/useFieldSchema.js +52 -31
  36. package/lib/form/SchemaForm/initializeDataSource.d.ts +1 -2
  37. package/lib/form/SchemaForm/initializeDataSource.js +14 -19
  38. package/lib/form/SchemaForm/initializeRequest.js +26 -26
  39. package/lib/form/SchemaForm/initializeRules.d.ts +2 -2
  40. package/lib/form/SchemaForm/initializeRules.js +30 -22
  41. package/lib/form/SchemaForm/reactions.d.ts +4 -4
  42. package/lib/form/SchemaForm/reactions.js +30 -23
  43. package/lib/form/typing.d.ts +12 -5
  44. package/lib/form/utils.d.ts +16 -1
  45. package/lib/form/utils.js +23 -2
  46. package/lib/global.scss +45 -0
  47. package/lib/index.d.ts +2 -1
  48. package/lib/index.js +3 -1
  49. package/lib/page-header/index.d.ts +2 -0
  50. package/lib/page-header/index.js +12 -2
  51. package/lib/page-header/index.scss +8 -0
  52. package/lib/table/components/Layout/index.scss +5 -5
  53. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  var _excluded = ["text", "children"],
2
2
  _excluded2 = ["color", "title", "num", "className"],
3
- _excluded3 = ["title", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "info", "children", "className", "style", "tabs"];
3
+ _excluded3 = ["title", "titleTooltip", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "info", "children", "className", "style", "tabs"];
4
4
 
5
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
6
 
@@ -16,13 +16,14 @@ import React from 'react';
16
16
  import { useHistory } from 'react-router-dom';
17
17
  import classnames from 'classnames';
18
18
  import TeamixIcon from '@teamix/icon';
19
- import { Breadcrumb } from '@alicloudfe/components';
19
+ import { Breadcrumb, Balloon } from '@alicloudfe/components';
20
20
  import { baseClass, goToLink, renderTags, isPresetColor, getColor, getColorClassName, getBackgroundColorClassName, CapsuleTab } from '@teamix/utils';
21
21
  import { ProActionGroup } from '../actions';
22
22
  import { ProSkeletonRaw } from '../skeleton';
23
23
  import ProInfo from '../info';
24
24
  import './index.scss';
25
25
  var cls = baseClass('teamix-pro-page-header');
26
+ var Tooltip = Balloon.Tooltip;
26
27
 
27
28
  var renderNav = function renderNav(breadcrumbs) {
28
29
  if (breadcrumbs && breadcrumbs.length) {
@@ -133,6 +134,7 @@ var renderTabs = function renderTabs(tabs) {
133
134
 
134
135
  var ProPageHeader = function ProPageHeader(props) {
135
136
  var title = props.title,
137
+ titleTooltip = props.titleTooltip,
136
138
  description = props.description,
137
139
  icon = props.icon,
138
140
  iconColor = props.iconColor,
@@ -200,7 +202,15 @@ var ProPageHeader = function ProPageHeader(props) {
200
202
  size: "large"
201
203
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, icon)), /*#__PURE__*/React.createElement("span", {
202
204
  className: cls('title-name')
203
- }, title), renderTags(tags, 'large'), renderTabs(tabs !== null && tabs !== void 0 ? tabs : {}));
205
+ }, title, titleTooltip && /*#__PURE__*/React.createElement(Tooltip, {
206
+ trigger: /*#__PURE__*/React.createElement("span", {
207
+ className: cls('title-tooltip-icon')
208
+ }, /*#__PURE__*/React.createElement(TeamixIcon, {
209
+ type: "info-circle-line",
210
+ size: "xs"
211
+ })),
212
+ align: "t"
213
+ }, titleTooltip)), renderTags(tags, 'large'), renderTabs(tabs !== null && tabs !== void 0 ? tabs : {}));
204
214
  };
205
215
 
206
216
  return /*#__PURE__*/React.createElement("header", _objectSpread({
@@ -43,6 +43,7 @@ $prefix: 'teamix-pro-page-header';
43
43
  font-weight: 500;
44
44
  align-items: center;
45
45
  word-break: break-all;
46
+ color: var(--color-text1-4);
46
47
 
47
48
  &-name {
48
49
  white-space: nowrap;
@@ -50,6 +51,13 @@ $prefix: 'teamix-pro-page-header';
50
51
  text-overflow: ellipsis;
51
52
  }
52
53
 
54
+ &-tooltip-icon {
55
+ position: relative;
56
+ margin-left: 2px;
57
+ display: inline-flex;
58
+ top: -7px;
59
+ }
60
+
53
61
  &-icon {
54
62
  padding: var(--s-1, 4px);
55
63
  }
@@ -32,11 +32,11 @@ $prefix: 'teamix-pro-table-layout';
32
32
  &-filter-btn:not(:first-child) {
33
33
  margin-left: 8px;
34
34
  }
35
- &-panel-filter {
36
- margin: 8px 0;
37
- padding: 16px;
38
- background: var(--panel-filter-bg, var(--color-fill1-2));
39
- }
35
+ // &-panel-filter {
36
+ // margin: 8px 0;
37
+ // padding: 16px;
38
+ // background: var(--panel-filter-bg, var(--color-fill1-2));
39
+ // }
40
40
  &-main-action {
41
41
  margin-bottom: 8px;
42
42
  }
@@ -121,3 +121,16 @@
121
121
  }
122
122
  }
123
123
  }
124
+
125
+ // 针对弹层内的 table 在暗色模式下适配
126
+ .next-dialog-body {
127
+ .teamix-pro-table, .next-table-empty {
128
+ background: var(--dialog-bg);
129
+ }
130
+ }
131
+
132
+ .next-drawer-body {
133
+ .teamix-pro-table, .next-table-empty {
134
+ background: var(--drawer-bg);
135
+ }
136
+ }
@@ -43,9 +43,11 @@ var _Layout = require("./Layout");
43
43
 
44
44
  var _useSpecialProps2 = _interopRequireDefault(require("./useSpecialProps"));
45
45
 
46
+ var _useBindUrl2 = _interopRequireDefault(require("./useBindUrl"));
47
+
46
48
  require("./index.scss");
47
49
 
48
- var _excluded = ["addonAfter", "addonBefore", "mode", "purePanel", "expand", "formRef", "defaultFilterValue", "filterValues", "filterDebounce", "onFilter", "onInit", "onReset", "onExpand", "onChange"];
50
+ var _excluded = ["addonAfter", "addonBefore", "mode", "purePanel", "expand", "formRef", "defaultFilterValue", "filterValues", "filterDebounce", "bindUrl", "onFilter", "onInit", "onReset", "onExpand", "onChange"];
49
51
 
50
52
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
51
53
 
@@ -100,9 +102,10 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
100
102
  defaultFilterValue = props.defaultFilterValue,
101
103
  filterValues = props.filterValues,
102
104
  filterDebounce = props.filterDebounce,
103
- onFilter = props.onFilter,
104
- onInit = props.onInit,
105
- onReset = props.onReset,
105
+ bindUrl = props.bindUrl,
106
+ outerFilter = props.onFilter,
107
+ outerInit = props.onInit,
108
+ outerReset = props.onReset,
106
109
  onExpand = props.onExpand,
107
110
  onChange = props.onChange,
108
111
  otherProps = _objectWithoutProperties(props, _excluded);
@@ -121,15 +124,27 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
121
124
  setTagDataSource = _useState4[1];
122
125
 
123
126
  var filterItem = (0, _react.useRef)([]);
124
- var defaultForm = mode === 'panel' ? 'advanced' : 'simple';
125
- var currentForm = (0, _react.useRef)(defaultForm);
127
+ var defaultFormName = mode === 'panel' ? 'advanced' : 'simple';
128
+ var currentFormName = (0, _react.useRef)(defaultFormName);
129
+ var currentForm = (0, _react.useRef)();
126
130
  var activeFilterValueRef = (0, _react.useRef)();
127
131
  var prefixCls = (0, _utils.usePrefixCls)('', {
128
132
  prefix: 'teamix-pro-form-query-filter'
129
133
  });
130
134
  var debounceFun = (0, _lodash.default)(function (fun, props) {
131
135
  return fun(props);
132
- }, filterDebounce); // onInit
136
+ }, filterDebounce); // 绑定URL
137
+
138
+ var _useBindUrl = (0, _useBindUrl2.default)(bindUrl, {
139
+ onInit: outerInit,
140
+ onFilter: outerFilter,
141
+ onReset: outerReset
142
+ }, currentForm),
143
+ setValuesByUrlState = _useBindUrl.setValuesByUrlState,
144
+ onInit = _useBindUrl.onInit,
145
+ onFilter = _useBindUrl.onFilter,
146
+ onReset = _useBindUrl.onReset; // onInit
147
+
133
148
 
134
149
  var initialRequestRef = (0, _react.useRef)(!!(props === null || props === void 0 ? void 0 : props.initialRequest));
135
150
  var filterEnable = (0, _react.useRef)('waiting');
@@ -154,12 +169,11 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
154
169
  break;
155
170
  }
156
171
 
157
- onFormInit = function onFormInit() {}; // init后销毁 isFormInit 方法
158
-
172
+ onFormInit = undefined; // init后销毁 isFormInit 方法
159
173
 
160
- filterEnable.current = 'filter';
174
+ setValuesByUrlState(form); // 配置URL参数到表单
161
175
 
162
- if (!onInit) {
176
+ if (!outerInit) {
163
177
  _context.next = 10;
164
178
  break;
165
179
  }
@@ -168,7 +182,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
168
182
  return form.validate();
169
183
 
170
184
  case 8:
171
- onInit === null || onInit === void 0 ? void 0 : onInit((0, _reactive.toJS)(form.values)); // 设置Tag
185
+ onInit((0, _reactive.toJS)(form.values)); // 设置Tag
172
186
 
173
187
  if (mode === 'panel') {
174
188
  configFilterItem(advancedForm);
@@ -190,17 +204,110 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
190
204
 
191
205
 
192
206
  var setCurrentForm = function setCurrentForm(formName) {
193
- currentForm.current = formName;
207
+ currentFormName.current = formName;
208
+ currentForm.current = formMap[formName];
209
+ var form = currentForm.current;
194
210
 
195
211
  if (formRef) {
196
- var form = formMap[formName];
197
- formRef.current = form;
212
+ formRef.current = form; // 自定义updateTags方法
198
213
 
199
214
  if (!formRef.current.updateTags) {
200
215
  formRef.current.updateTags = function () {
201
- configFilterItem(form);
202
- configTag();
216
+ updateTags(form);
203
217
  };
218
+ } // 自定义setAsyncValues方法
219
+
220
+
221
+ if (!formRef.current.setAsyncValues) {
222
+ formRef.current.setAsyncValues = /*#__PURE__*/function () {
223
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(values) {
224
+ return regeneratorRuntime.wrap(function _callee2$(_context2) {
225
+ while (1) {
226
+ switch (_context2.prev = _context2.next) {
227
+ case 0:
228
+ form.setValues(values);
229
+
230
+ if (!(filterEnable.current === 'filter' && formName === 'advanced')) {
231
+ _context2.next = 6;
232
+ break;
233
+ }
234
+
235
+ _context2.next = 4;
236
+ return form.validate();
237
+
238
+ case 4:
239
+ onFilter((0, _reactive.toJS)(form.values));
240
+ updateTags(form);
241
+
242
+ case 6:
243
+ case "end":
244
+ return _context2.stop();
245
+ }
246
+ }
247
+ }, _callee2);
248
+ }));
249
+
250
+ return function (_x2) {
251
+ return _ref2.apply(this, arguments);
252
+ };
253
+ }();
254
+ } // 自定义triggerFilter方法
255
+
256
+
257
+ if (!formRef.current.triggerFilter) {
258
+ formRef.current.triggerFilter = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
259
+ return regeneratorRuntime.wrap(function _callee3$(_context3) {
260
+ while (1) {
261
+ switch (_context3.prev = _context3.next) {
262
+ case 0:
263
+ _context3.next = 2;
264
+ return form.validate();
265
+
266
+ case 2:
267
+ onFilter((0, _reactive.toJS)(form.values));
268
+
269
+ if (formName === 'advanced') {
270
+ updateTags(form);
271
+ }
272
+
273
+ case 4:
274
+ case "end":
275
+ return _context3.stop();
276
+ }
277
+ }
278
+ }, _callee3);
279
+ }));
280
+ } // 自定义triggerReset方法
281
+
282
+
283
+ if (!formRef.current.triggerReset) {
284
+ formRef.current.triggerReset = /*#__PURE__*/function () {
285
+ var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(config) {
286
+ return regeneratorRuntime.wrap(function _callee4$(_context4) {
287
+ while (1) {
288
+ switch (_context4.prev = _context4.next) {
289
+ case 0:
290
+ simpleForm.reset('*', config);
291
+ lightForm.reset('*', config);
292
+ advancedForm.reset('*', config);
293
+
294
+ if (formName === 'advanced') {
295
+ onReset((0, _reactive.toJS)(advancedForm.values));
296
+ updateTags(form);
297
+ }
298
+
299
+ case 4:
300
+ case "end":
301
+ return _context4.stop();
302
+ }
303
+ }
304
+ }, _callee4);
305
+ }));
306
+
307
+ return function (_x3) {
308
+ return _ref4.apply(this, arguments);
309
+ };
310
+ }();
204
311
  }
205
312
  }
206
313
  }; // 创建简单筛选表单实例
@@ -212,7 +319,11 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
212
319
  effects: function effects() {
213
320
  (0, _core.onFormReact)(function (form) {
214
321
  if (mode === 'inline') {
215
- onFormInit(form);
322
+ var _onFormInit;
323
+
324
+ (_onFormInit = onFormInit) === null || _onFormInit === void 0 ? void 0 : _onFormInit(form).finally(function () {
325
+ return filterEnable.current = 'filter';
326
+ });
216
327
  }
217
328
  });
218
329
  }
@@ -236,7 +347,11 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
236
347
  effects: function effects() {
237
348
  (0, _core.onFormReact)(function (form) {
238
349
  if (mode === 'panel') {
239
- onFormInit(form);
350
+ var _onFormInit2;
351
+
352
+ (_onFormInit2 = onFormInit) === null || _onFormInit2 === void 0 ? void 0 : _onFormInit2(form).finally(function () {
353
+ return filterEnable.current = 'filter';
354
+ });
240
355
  }
241
356
  });
242
357
  (0, _core.onFormInputChange)(function (form) {
@@ -255,12 +370,12 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
255
370
  var displayValues = (0, _useFormDisplayValues.getFormDisplayValues)(form);
256
371
  var originalData = Object.entries(displayValues);
257
372
  var filterData = [];
258
- originalData.forEach(function (_ref2) {
373
+ originalData.forEach(function (_ref5) {
259
374
  var _data$displayValue;
260
375
 
261
- var _ref3 = _slicedToArray(_ref2, 2),
262
- key = _ref3[0],
263
- data = _ref3[1];
376
+ var _ref6 = _slicedToArray(_ref5, 2),
377
+ key = _ref6[0],
378
+ data = _ref6[1];
264
379
 
265
380
  var value = (_data$displayValue = data.displayValue) !== null && _data$displayValue !== void 0 ? _data$displayValue : data.value;
266
381
  var component = data.component;
@@ -295,6 +410,11 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
295
410
 
296
411
  var configTag = (0, _react.useCallback)(function () {
297
412
  setTagDataSource(filterItem.current);
413
+ }, []); // 更新标签数据
414
+
415
+ var updateTags = (0, _react.useCallback)(function (form) {
416
+ configFilterItem(form);
417
+ configTag();
298
418
  }, []); // 展开收起高级筛选
299
419
 
300
420
  var toggleAdvancedFilter = (0, _react.useCallback)(function () {
@@ -302,7 +422,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
302
422
 
303
423
  if (result) {
304
424
  // 展开高级筛选,Light回填Advanced
305
- if (currentForm.current === 'light') {
425
+ if (currentFormName.current === 'light') {
306
426
  var key = activeFilterValueRef.current;
307
427
  var value = lightForm.values[key];
308
428
  advancedForm.setValuesIn(key, value);
@@ -317,32 +437,32 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
317
437
  }, [panelVisible, configTag]); // 简单搜索Filter
318
438
 
319
439
  var onSimpleFilter = (0, _react.useCallback)( /*#__PURE__*/function () {
320
- var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(values) {
321
- return regeneratorRuntime.wrap(function _callee2$(_context2) {
440
+ var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(values) {
441
+ return regeneratorRuntime.wrap(function _callee5$(_context5) {
322
442
  while (1) {
323
- switch (_context2.prev = _context2.next) {
443
+ switch (_context5.prev = _context5.next) {
324
444
  case 0:
325
- _context2.next = 2;
445
+ _context5.next = 2;
326
446
  return simpleForm.validate();
327
447
 
328
448
  case 2:
329
- onFilter === null || onFilter === void 0 ? void 0 : onFilter(values);
449
+ onFilter(values);
330
450
 
331
451
  case 3:
332
452
  case "end":
333
- return _context2.stop();
453
+ return _context5.stop();
334
454
  }
335
455
  }
336
- }, _callee2);
456
+ }, _callee5);
337
457
  }));
338
458
 
339
- return function (_x2) {
340
- return _ref4.apply(this, arguments);
459
+ return function (_x4) {
460
+ return _ref7.apply(this, arguments);
341
461
  };
342
462
  }(), [onFilter]); // 简单搜索Change
343
463
 
344
464
  var onSimpleChange = (0, _react.useCallback)(function (values, fieldValue, fieldName) {
345
- if (currentForm.current === 'simple') {
465
+ if (currentFormName.current === 'simple') {
346
466
  onChange === null || onChange === void 0 ? void 0 : onChange(values, fieldValue, fieldName);
347
467
 
348
468
  if (filterEnable.current === 'filter') {
@@ -354,20 +474,18 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
354
474
  var onLightFilter = (0, _react.useCallback)(function (values) {
355
475
  var _Object$keys;
356
476
 
357
- onFilter === null || onFilter === void 0 ? void 0 : onFilter(values); // 清空advancedForm的值
477
+ onFilter(values); // 清空advancedForm的值
358
478
 
359
479
  var clearKeys = {};
360
480
  (_Object$keys = Object.keys(advancedForm.values)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(function (key) {
361
481
  clearKeys[key] = undefined;
362
482
  });
363
- advancedForm.setValues(clearKeys); // 配置Tag
364
-
365
- configFilterItem(advancedForm);
366
- configTag();
483
+ advancedForm.setValues(clearKeys);
484
+ updateTags(advancedForm);
367
485
  }, [onFilter]); // 轻量搜索Change
368
486
 
369
487
  var onLightChange = (0, _react.useCallback)(function (values, fieldValue, fieldName) {
370
- if (currentForm.current === 'light') {
488
+ if (currentFormName.current === 'light') {
371
489
  onChange === null || onChange === void 0 ? void 0 : onChange(values, fieldValue, fieldName);
372
490
 
373
491
  if (filterEnable.current === 'filter') {
@@ -378,7 +496,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
378
496
 
379
497
  var onAdvancedFilter = (0, _react.useCallback)(function (values) {
380
498
  setCurrentForm('advanced');
381
- onFilter === null || onFilter === void 0 ? void 0 : onFilter(values);
499
+ onFilter(values);
382
500
  configFilterItem(advancedForm); // 清空lightForm的值
383
501
 
384
502
  lightForm.reset('*', {
@@ -388,7 +506,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
388
506
 
389
507
  var onAdvancedReset = (0, _react.useCallback)(function () {
390
508
  setCurrentForm('advanced');
391
- onReset === null || onReset === void 0 ? void 0 : onReset((0, _reactive.toJS)(advancedForm.values));
509
+ onReset((0, _reactive.toJS)(advancedForm.values));
392
510
  configFilterItem(advancedForm); // 清空lightForm的值
393
511
 
394
512
  lightForm.reset('*', {
@@ -397,7 +515,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
397
515
  }, [onReset]); // 高级搜索Change
398
516
 
399
517
  var onAdvancedChange = (0, _react.useCallback)(function (values, fieldValue, fieldName) {
400
- if (currentForm.current === 'advanced') {
518
+ if (currentFormName.current === 'advanced') {
401
519
  onChange === null || onChange === void 0 ? void 0 : onChange(values, fieldValue, fieldName);
402
520
  }
403
521
  }, [onChange]); // 关闭标签清空表单字段值
@@ -411,9 +529,8 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
411
529
  }
412
530
 
413
531
  advancedForm.setValuesIn(key, newValue);
414
- configFilterItem(advancedForm);
415
- configTag();
416
- onFilter === null || onFilter === void 0 ? void 0 : onFilter((0, _reactive.toJS)(advancedForm.values));
532
+ updateTags(advancedForm);
533
+ onFilter((0, _reactive.toJS)(advancedForm.values));
417
534
  }, [onFilter]); // initialRequest 的回调
418
535
 
419
536
  var onInitialComplete = (0, _react.useCallback)(function (form) {
@@ -424,7 +541,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
424
541
  }, []); // 组件挂载
425
542
 
426
543
  (0, _react.useEffect)(function () {
427
- setCurrentForm(currentForm.current);
544
+ setCurrentForm(currentFormName.current);
428
545
  }, []);
429
546
  return /*#__PURE__*/_react.default.createElement(_Layout.QueryFilterLayout, {
430
547
  className: (0, _classnames.default)(prefixCls, props.className),
@@ -456,12 +573,12 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
456
573
  onReset: onAdvancedReset,
457
574
  onInitialComplete: onInitialComplete
458
575
  })) : null
459
- }, mode === 'panel' && !panelVisible ? /*#__PURE__*/_react.default.createElement(_components.Tag.Group, null, tagDataSource.map(function (_ref5) {
460
- var key = _ref5.key,
461
- label = _ref5.label,
462
- value = _ref5.value,
463
- type = _ref5.type,
464
- index = _ref5.index;
576
+ }, mode === 'panel' && !panelVisible ? /*#__PURE__*/_react.default.createElement(_components.Tag.Group, null, tagDataSource.map(function (_ref8) {
577
+ var key = _ref8.key,
578
+ label = _ref8.label,
579
+ value = _ref8.value,
580
+ type = _ref8.type,
581
+ index = _ref8.index;
465
582
  return /*#__PURE__*/_react.default.createElement(_components.Tag.Closeable, {
466
583
  key: (0, _utils.isNum)(index) ? key + label : key,
467
584
  afterClose: function afterClose() {
@@ -6,6 +6,10 @@ $query-filter-layout: #{$teamix-pro-form}-query-filter-layout;
6
6
  --panel-filter-bg: #1f1f1f;
7
7
  }
8
8
 
9
+ .theme-hybridcloud {
10
+ --panel-filter-bg: var(--color-fill1-2);
11
+ }
12
+
9
13
  .#{$query-filter-layout} {
10
14
  .#{$query-filter-layout}-inline {
11
15
  display: flex;
@@ -0,0 +1,2 @@
1
+ declare const _default: (bindUrl: any, functions: any, formRef: any) => any;
2
+ export default _default;
@@ -0,0 +1,129 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _hooks = require("@teamix/hooks");
9
+
10
+ var _utils = require("@teamix/utils");
11
+
12
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
13
+
14
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
15
+
16
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
17
+
18
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
19
+
20
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
21
+
22
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
23
+
24
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
25
+
26
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
27
+
28
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
29
+
30
+ var _default = function _default(bindUrl, functions, formRef) {
31
+ // 预处理 bindUrl 参数(主要兼容 SelectGroup 组件)
32
+ var initializeBindUrl = function initializeBindUrl(options) {
33
+ return options ? _objectSpread(_objectSpread({}, options), {}, {
34
+ beforeStringify: function beforeStringify(values) {
35
+ var _Object$entries;
36
+
37
+ var beforeStringify = options.beforeStringify;
38
+
39
+ var newValues = _objectSpread({}, values);
40
+
41
+ (_Object$entries = Object.entries(values)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.forEach(function (_ref) {
42
+ var _form$query;
43
+
44
+ var _ref2 = _slicedToArray(_ref, 2),
45
+ key = _ref2[0],
46
+ value = _ref2[1];
47
+
48
+ var form = formRef.current;
49
+ var field = (_form$query = form.query(key)) === null || _form$query === void 0 ? void 0 : _form$query.take();
50
+
51
+ if ((field === null || field === void 0 ? void 0 : field.component[0]) === 'SelectGroup') {
52
+ newValues[key] = value.map(function (_ref3) {
53
+ var key = _ref3.key,
54
+ value = _ref3.value;
55
+ return key && value ? "".concat(key, "||").concat(value === null || value === void 0 ? void 0 : value.join('|')) : '';
56
+ });
57
+ }
58
+ });
59
+ return beforeStringify ? beforeStringify(newValues) : newValues;
60
+ }
61
+ }) : options;
62
+ }; // 通过 useUrlState 获取 url 上的参数和 url 配置方法
63
+
64
+
65
+ var _ref4 = bindUrl ? (0, _hooks.useUrlState)(undefined, initializeBindUrl((0, _utils.isPlainObj)(bindUrl) ? bindUrl : {})) : [],
66
+ _ref5 = _slicedToArray(_ref4, 2),
67
+ urlState = _ref5[0],
68
+ setUrlState = _ref5[1]; // 输出配置url参数的函数
69
+
70
+
71
+ var initializedFunctions = Object.entries(functions).reduce(function (prev, _ref6) {
72
+ var _ref7 = _slicedToArray(_ref6, 2),
73
+ key = _ref7[0],
74
+ fun = _ref7[1];
75
+
76
+ prev[key] = function (values) {
77
+ fun === null || fun === void 0 ? void 0 : fun(values);
78
+ setUrlState === null || setUrlState === void 0 ? void 0 : setUrlState(values);
79
+ };
80
+
81
+ return prev;
82
+ }, {}); // 使用 url 参数配置 QueryFilter 默认值(移除非表单值,兼容数组数据,兼容 SelectGroup 组件)
83
+
84
+ var setValuesByUrlState = function setValuesByUrlState(form) {
85
+ if (urlState) {
86
+ var _Object$entries2;
87
+
88
+ (_Object$entries2 = Object.entries(urlState)) === null || _Object$entries2 === void 0 ? void 0 : _Object$entries2.forEach(function (_ref8) {
89
+ var _form$query2;
90
+
91
+ var _ref9 = _slicedToArray(_ref8, 2),
92
+ key = _ref9[0],
93
+ value = _ref9[1];
94
+
95
+ var field = (_form$query2 = form.query(key)) === null || _form$query2 === void 0 ? void 0 : _form$query2.take();
96
+
97
+ if (field) {
98
+ var newValue = value;
99
+
100
+ if (field.displayName === 'ArrayField') {
101
+ newValue = [].concat((0, _utils.isUsable)(newValue) ? newValue : []);
102
+ }
103
+
104
+ if (field.component[0] === 'SelectGroup') {
105
+ newValue = newValue.map(function (item) {
106
+ var _item$split = item === null || item === void 0 ? void 0 : item.split('||'),
107
+ _item$split2 = _slicedToArray(_item$split, 2),
108
+ key = _item$split2[0],
109
+ value = _item$split2[1];
110
+
111
+ return {
112
+ key: key,
113
+ value: value === null || value === void 0 ? void 0 : value.split('|')
114
+ };
115
+ });
116
+ }
117
+
118
+ form.setValuesIn(key, newValue);
119
+ }
120
+ });
121
+ }
122
+ };
123
+
124
+ return _objectSpread({
125
+ setValuesByUrlState: setValuesByUrlState
126
+ }, initializedFunctions);
127
+ };
128
+
129
+ exports.default = _default;