@zat-design/sisyphus-react 3.14.2 → 3.14.3

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.
@@ -228,6 +228,9 @@ var ProForm = (props, ref) => {
228
228
  otherProps.layout = otherProps.layout || 'vertical';
229
229
  }
230
230
  }
231
+
232
+ // 过滤掉自定义 props,避免传递到 DOM 元素
233
+ var filteredOtherProps = omit(otherProps, ['desensitizationKey']);
231
234
  return /*#__PURE__*/_jsxs(_Form, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
232
235
  onKeyPress: event => {
233
236
  if (!submitOnEnter) return;
@@ -237,7 +240,7 @@ var ProForm = (props, ref) => {
237
240
  },
238
241
  className: cls,
239
242
  form: form
240
- }, formProps), omit(config, ['isDiffAll'])), otherProps), {}, {
243
+ }, formProps), omit(config, ['isDiffAll'])), filteredOtherProps), {}, {
241
244
  labelAlign: (_ref3 = labelAlign !== null && labelAlign !== void 0 ? labelAlign : config.labelAlign) !== null && _ref3 !== void 0 ? _ref3 : 'left',
242
245
  onValuesChange: handleValuesChange,
243
246
  onFinish: handleFinish,
@@ -6,19 +6,19 @@ import "antd/es/input/style";
6
6
  import _Input from "antd/es/input";
7
7
  import "antd/es/message/style";
8
8
  import _message from "antd/es/message";
9
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
10
9
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
10
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
11
11
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
12
12
  import "antd/es/tree-select/style";
13
13
  import _TreeSelect from "antd/es/tree-select";
14
- var _excluded = ["disabled", "code", "dataSource", "defaultDisableValue", "onChange", "useRequest", "transformResponse", "fieldNames", "placeholder", "tooltip", "showSearch", "filterTreeNode", "treeNodeFilterProp", "defaultExpandAll", "expandedKeys", "treeCheckable", "onSearch", "otherProps", "width", "dropdownStyle", "popupClassName", "style", "allowClear", "listHeight", "showCodeName", "className", "checkStrictly", "checkable"],
15
- _excluded2 = ["children"];
14
+ var _excluded = ["disabled", "code", "dataSource", "defaultDisableValue", "onChange", "useRequest", "transformResponse", "fieldNames", "placeholder", "tooltip", "showSearch", "filterTreeNode", "treeNodeFilterProp", "defaultExpandAll", "expandedKeys", "treeCheckable", "onSearch", "otherProps", "width", "dropdownStyle", "popupClassName", "style", "allowClear", "listHeight", "showCodeName", "className", "checkStrictly", "checkable"];
16
15
  /* eslint-disable react/no-danger */
17
16
  /* eslint-disable react/jsx-closing-tag-location */
18
17
  import { useDeepCompareEffect, useRequest as useRequestFunc, useSetState } from 'ahooks';
19
18
  import classnames from 'classnames';
20
19
  import React, { useImperativeHandle, forwardRef, useCallback } from 'react';
21
20
  import { cloneDeep, debounce } from 'lodash';
21
+ import { tools } from '@zat-design/utils';
22
22
  import locale from "../../../locale";
23
23
  import { useProConfig } from "../../../ProConfigProvider";
24
24
  import Container from "../../../ProForm/components/Container";
@@ -27,7 +27,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
27
27
  import { jsxs as _jsxs } from "react/jsx-runtime";
28
28
  var SHOW_PARENT = _TreeSelect.SHOW_PARENT;
29
29
  export var ProTreeSelect = (props, ref) => {
30
- var _useRequest$options;
30
+ var _useRequest$options, _useRequest$options3;
31
31
  // 全局属性配置在ConfigProvider
32
32
  var _ref = useProConfig('ProTreeSelect') || {},
33
33
  _ref$fieldNames = _ref.fieldNames,
@@ -35,14 +35,7 @@ export var ProTreeSelect = (props, ref) => {
35
35
  var _useProConfig = useProConfig('ProEnum'),
36
36
  _useProConfig$dics = _useProConfig.dics,
37
37
  dics = _useProConfig$dics === void 0 ? {} : _useProConfig$dics;
38
- var label = 'label';
39
- var code = 'value';
40
- var uuidKey = 'value';
41
- if (proSelectFieldNames && Object.keys(proSelectFieldNames).length) {
42
- code = proSelectFieldNames.value;
43
- label = proSelectFieldNames.label;
44
- uuidKey = proSelectFieldNames.key || proSelectFieldNames.value;
45
- }
38
+
46
39
  // 配置属性
47
40
  var disabled = props.disabled,
48
41
  enumCode = props.code,
@@ -88,11 +81,32 @@ export var ProTreeSelect = (props, ref) => {
88
81
  var _ref3 = otherProps || {},
89
82
  isView = _ref3.isView,
90
83
  viewEmpty = _ref3.viewEmpty;
91
- if (fieldNames && Object.keys(fieldNames).length) {
92
- code = fieldNames.value || 'value';
93
- label = fieldNames.label || 'label';
94
- uuidKey = fieldNames.key || code;
95
- }
84
+
85
+ // 合并全局和组件级别的 fieldNames,优先级:组件级 > 全局
86
+ var finalFieldNames = _objectSpread(_objectSpread({
87
+ label: 'label',
88
+ value: 'value',
89
+ children: 'children'
90
+ }, proSelectFieldNames), fieldNames);
91
+
92
+ /**
93
+ * 使用 tools.transformDataName 统一转换字段名
94
+ * 将原始数据转换为标准格式(label, value, children)
95
+ * tools.transformDataName 会自动检查数据是否已经是标准格式,如果是则直接返回
96
+ */
97
+ var transformFieldNames = useCallback(data => {
98
+ if (!data || !Array.isArray(data) || !data.length) {
99
+ return data || [];
100
+ }
101
+
102
+ // 使用 tools.transformDataName 转换字段名
103
+ // 它会自动检查数据是否已经是标准格式(label, value, children),如果是则直接返回
104
+ return tools.transformDataName(data, {
105
+ label: finalFieldNames.label,
106
+ value: finalFieldNames.value,
107
+ children: finalFieldNames.children
108
+ });
109
+ }, [finalFieldNames]);
96
110
  // 经过处理后的枚举数据,可能来自用户配置的处理函数后返回的结果
97
111
  var _useSetState = useSetState({}),
98
112
  _useSetState2 = _slicedToArray(_useSetState, 2),
@@ -105,6 +119,7 @@ export var ProTreeSelect = (props, ref) => {
105
119
 
106
120
  /**
107
121
  * 如果数据少于10条那么将数据平铺返回
122
+ * 注意:当 treeCheckable 为 false 时(单选模式),应保持树形结构,不进行平铺
108
123
  * @param dictsEnum 原始数据
109
124
  * @returns 平铺或者原始数据
110
125
  */
@@ -112,50 +127,33 @@ export var ProTreeSelect = (props, ref) => {
112
127
  if (treeCheckable) {
113
128
  return dictsEnum;
114
129
  }
115
- var count = 0;
116
- var result = [];
117
- var loopCount = data => {
118
- data.map(item => {
119
- count += 1;
120
- var children = item.children,
121
- other = _objectWithoutProperties(item, _excluded2);
122
- result.push(_objectSpread({}, other));
123
- if (item.children) {
124
- loopCount(item.children);
125
- }
126
- return item;
127
- });
128
- };
129
- if ((dictsEnum === null || dictsEnum === void 0 ? void 0 : dictsEnum.length) > 10) {
130
- return dictsEnum;
131
- }
132
- loopCount(dictsEnum);
133
- if (count <= 10) {
134
- return result;
135
- }
130
+ // 单选模式(treeCheckable=false)时,保持树形结构,不进行平铺
131
+ // 因为 TreeSelect 在单选模式下也需要树形结构来正确展示层级关系
136
132
  return dictsEnum;
137
133
  };
138
134
 
139
135
  /**
140
136
  * 如果要展示code-name,那么将源数据的label转为code-name
141
- * @param dataArr 源数据
137
+ * 注意:此时数据已经是标准格式(label, value, children)
138
+ * @param dataArr 源数据(标准格式)
142
139
  * @param showCodeAndName 是否展示code-name
143
140
  * @returns 转换结果
144
141
  */
145
142
  var transferDataSource = (dataArr, showCodeAndName) => {
143
+ if (!showCodeAndName) {
144
+ return dataArr;
145
+ }
146
146
  var copyData = cloneDeep(dataArr);
147
147
  var loop = arr => {
148
148
  arr.map(item => {
149
- item[label] = `${item[code]}-${item[label]}`;
149
+ item.label = `${item.value}-${item.label}`;
150
150
  if (item.children) {
151
151
  loop(item.children);
152
152
  }
153
153
  return item;
154
154
  });
155
155
  };
156
- if (showCodeAndName) {
157
- loop(copyData);
158
- }
156
+ loop(copyData);
159
157
  return copyData;
160
158
  };
161
159
  var defaultOnSuccessFun = res => {
@@ -167,7 +165,9 @@ export var ProTreeSelect = (props, ref) => {
167
165
  _message.error(msg);
168
166
  return;
169
167
  }
170
- var resultData = transferDataSource(data, showCodeName);
168
+ // 先转换字段名,再处理 code-name 展示
169
+ var transformedData = transformFieldNames(data || []);
170
+ var resultData = transferDataSource(transformedData, showCodeName);
171
171
  setState({
172
172
  selectList: resultData || [],
173
173
  origDataSource: resultData || []
@@ -196,7 +196,9 @@ export var ProTreeSelect = (props, ref) => {
196
196
  onSuccess: data => {
197
197
  if (transformResponse && typeof transformResponse === 'function') {
198
198
  var responseData = transformResponse(data);
199
- var resultData = transferDataSource(responseData, showCodeName);
199
+ // 先转换字段名,再处理 code-name 展示
200
+ var transformedData = transformFieldNames(responseData);
201
+ var resultData = transferDataSource(transformedData, showCodeName);
200
202
  setState({
201
203
  selectList: countChild(resultData),
202
204
  origDataSource: resultData
@@ -217,7 +219,9 @@ export var ProTreeSelect = (props, ref) => {
217
219
  if (fetchFunction !== null && fetchFunction !== void 0 && fetchFunction.data, useRequest !== null && useRequest !== void 0 && (_useRequest$options2 = useRequest.options) !== null && _useRequest$options2 !== void 0 && _useRequest$options2.cacheKey) {
218
220
  if (transformResponse && typeof transformResponse === 'function') {
219
221
  var responseData = transformResponse(fetchFunction.data);
220
- var resultData = transferDataSource(responseData, showCodeName);
222
+ // 先转换字段名,再处理 code-name 展示
223
+ var transformedData = transformFieldNames(responseData);
224
+ var resultData = transferDataSource(transformedData, showCodeName);
221
225
  setState({
222
226
  selectList: countChild(resultData),
223
227
  origDataSource: resultData
@@ -226,23 +230,31 @@ export var ProTreeSelect = (props, ref) => {
226
230
  defaultOnSuccessFun(fetchFunction.data);
227
231
  }
228
232
  }
229
- }, [fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.data]);
233
+ // eslint-disable-next-line react-hooks/exhaustive-deps
234
+ }, [fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.data, useRequest === null || useRequest === void 0 || (_useRequest$options3 = useRequest.options) === null || _useRequest$options3 === void 0 ? void 0 : _useRequest$options3.cacheKey]);
230
235
  useDeepCompareEffect(() => {
231
236
  if (enumCode) {
232
237
  var dictEnum = dics[enumCode] || [];
233
- var resultData = transferDataSource(dictEnum, showCodeName);
238
+ // 先转换字段名,再处理 code-name 展示
239
+ var transformedData = transformFieldNames(dictEnum);
240
+ var resultData = transferDataSource(transformedData, showCodeName);
241
+ var processedList = countChild(resultData);
234
242
  setState({
235
- selectList: countChild(resultData),
243
+ selectList: processedList,
236
244
  origDataSource: resultData
237
245
  });
238
246
  } else if (dataSource) {
239
- var _resultData = transferDataSource(dataSource, showCodeName);
247
+ // 先转换字段名,再处理 code-name 展示
248
+ var _transformedData = transformFieldNames(dataSource);
249
+ var _resultData = transferDataSource(_transformedData, showCodeName);
250
+ var _processedList = countChild(_resultData);
240
251
  setState({
241
- selectList: countChild(_resultData),
252
+ selectList: _processedList,
242
253
  origDataSource: _resultData
243
254
  });
244
255
  }
245
- }, [enumCode, dataSource]);
256
+ // eslint-disable-next-line react-hooks/exhaustive-deps
257
+ }, [enumCode, dataSource, showCodeName]);
246
258
  useDeepCompareEffect(() => {
247
259
  // code存在huo dataSource存在,不执行接口请求
248
260
  if (enumCode || dataSource) {
@@ -278,6 +290,7 @@ export var ProTreeSelect = (props, ref) => {
278
290
 
279
291
  /**
280
292
  * 根据值进行回显
293
+ * 注意:此时数据已经是标准格式(label, value, children)
281
294
  * @param value 输入值
282
295
  * @returns 对应枚举label
283
296
  */
@@ -287,8 +300,8 @@ export var ProTreeSelect = (props, ref) => {
287
300
  }
288
301
  var labelResult = [];
289
302
  var queryLabel = dicts => dicts.map(item => {
290
- if (value.includes(item[code])) {
291
- var labelText = item[label];
303
+ if (value.includes(item.value)) {
304
+ var labelText = item.label;
292
305
  labelResult.push(labelText);
293
306
  }
294
307
  if (item.children) {
@@ -333,15 +346,22 @@ export var ProTreeSelect = (props, ref) => {
333
346
 
334
347
  /**
335
348
  * 自定义渲染子树
336
- * @param node 每个节点数据对象
349
+ * 注意:此时数据已经是标准格式(label, value, children)
350
+ * @param node 每个节点数据对象(标准格式)
337
351
  * @returns 整个react节点树
338
352
  */
339
353
  var renderTreeNode = (node, grade) => {
340
354
  var children = node.children,
341
- icon = node.icon;
342
- var labelText = node[label];
343
- var value = node[code];
344
- var key = node[uuidKey];
355
+ icon = node.icon,
356
+ label = node.label,
357
+ nodeValue = node.value,
358
+ nodeKey = node.key;
359
+ var labelText = label;
360
+ var value = nodeValue;
361
+ var key = nodeValue; // 使用 value 作为 key,如果有 key 字段则使用 key
362
+ if (nodeKey !== undefined) {
363
+ key = nodeKey;
364
+ }
345
365
  // 三无走默认
346
366
  if (['undefined-undefined', 'undefined'].includes(labelText) && !value && !key) {
347
367
  if (showCodeName) {
@@ -409,7 +429,8 @@ export var ProTreeSelect = (props, ref) => {
409
429
 
410
430
  /**
411
431
  * 从树形数据中找出用户搜索得数据,并且将搜索字符串高亮标识
412
- * @param data 全量树
432
+ * 注意:此时数据已经是标准格式(label, value, children)
433
+ * @param data 全量树(标准格式)
413
434
  * @param searchStr 搜索字符串
414
435
  * @returns 处理后得树
415
436
  */
@@ -426,11 +447,11 @@ export var ProTreeSelect = (props, ref) => {
426
447
  }
427
448
  // 迭代完子节点向上回溯,如果有匹配到得子节点,那么加入当前节点得孩子对象上,否则加入得是空数组
428
449
  item.children = currentNodeChild;
429
- // 判断节点title是否包含关键字 如果有,那么直接进行下一循环
450
+ // 判断节点label是否包含关键字 如果有,那么直接进行下一循环
430
451
  // @ts-ignore
431
- if (item[label].indexOf(keyWord) > -1 && (selectProps === null || selectProps === void 0 ? void 0 : selectProps.mode) !== 'treeSelect') {
452
+ if (item.label && item.label.indexOf(keyWord) > -1 && (selectProps === null || selectProps === void 0 ? void 0 : selectProps.mode) !== 'treeSelect') {
432
453
  var regExp = new RegExp(keyWord);
433
- item[label] = item[label].replace(regExp, `<span class="highlight-search-text">${keyWord}</span>`);
454
+ item.label = item.label.replace(regExp, `<span class="highlight-search-text">${keyWord}</span>`);
434
455
  }
435
456
  currentAllNodeChild.push(item);
436
457
  }
@@ -468,16 +489,23 @@ export var ProTreeSelect = (props, ref) => {
468
489
  return _ref6.apply(this, arguments);
469
490
  };
470
491
  }(), 500);
492
+
493
+ /**
494
+ * 从树形数据中查找节点
495
+ * 注意:此时数据已经是标准格式(label, value, children)
496
+ * @param treeList 树形数据(标准格式)
497
+ * @param nodeValue 节点值
498
+ * @returns 找到的节点
499
+ */
471
500
  function findTreeNode(treeList, nodeValue) {
472
501
  var result = {};
473
502
  var filterData = function filterData(data) {
474
503
  for (var i = 0; i < data.length; i++) {
475
504
  var item = data[i];
476
- if (item[code] === nodeValue || Array.isArray(nodeValue) && nodeValue.includes(item[code])) {
505
+ if (item.value === nodeValue || Array.isArray(nodeValue) && nodeValue.includes(item.value)) {
477
506
  result = _objectSpread({}, item);
478
- result.value = item[code];
479
- result.label = item[label];
480
- delete result[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.children) || 'children'];
507
+ // 删除 children 字段,避免循环引用
508
+ delete result.children;
481
509
  return null;
482
510
  }
483
511
  // 一直递归到最后一层子节点
@@ -489,6 +517,13 @@ export var ProTreeSelect = (props, ref) => {
489
517
  filterData(treeList);
490
518
  return result;
491
519
  }
520
+ /**
521
+ * 根据值获取标签
522
+ * 注意:此时数据已经是标准格式(label, value, children)
523
+ * @param treeList 树形数据(标准格式)
524
+ * @param nodeValue 节点值
525
+ * @returns 标签对象或数组
526
+ */
492
527
  function getLabelByValue(treeList, nodeValue) {
493
528
  var result = nodeValue;
494
529
  if (nodeValue) {
@@ -500,19 +535,19 @@ export var ProTreeSelect = (props, ref) => {
500
535
  return item;
501
536
  });
502
537
  } else {
503
- result = findTreeNode(treeList, nodeValue[code]);
538
+ result = findTreeNode(treeList, nodeValue.value);
504
539
  }
505
540
  }
506
541
  return result;
507
542
  }
508
543
  var handleChange = (newVal, label, extra) => {
509
544
  // newVal回来得一定是label、value
545
+ // 注意:此时数据已经是标准格式(label, value, children)
510
546
  var _selectList = selectList.map(item => {
511
- var label = item.label;
512
- var _label = label;
513
- if (label) {
547
+ var _label = item.label;
548
+ if (_label) {
514
549
  var regex = /<span class="highlight-search-text">(.*?)<\/span>/g;
515
- _label = item[label] = label === null || label === void 0 ? void 0 : label.replace(regex, '$1');
550
+ _label = item.label = _label.replace(regex, '$1');
516
551
  }
517
552
  return _objectSpread(_objectSpread({}, item), {}, {
518
553
  label: _label
@@ -1,6 +1,12 @@
1
1
  @root-entry-name: 'default';
2
2
  @import (reference) '~antd/es/style/themes/index.less';
3
3
 
4
+ .pro-tree-select-drop-down-container{
5
+ .@{ant-prefix}-select-tree-checkbox{
6
+ margin-top: 0;
7
+ }
8
+ }
9
+
4
10
  .pro-tree-modal-container .@{ant-prefix}-modal-content .@{ant-prefix}-modal-body {
5
11
  max-height: 498px;
6
12
  }
@@ -235,6 +235,9 @@ var ProForm = (props, ref) => {
235
235
  otherProps.layout = otherProps.layout || 'vertical';
236
236
  }
237
237
  }
238
+
239
+ // 过滤掉自定义 props,避免传递到 DOM 元素
240
+ var filteredOtherProps = (0, _lodash.omit)(otherProps, ['desensitizationKey']);
238
241
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_form.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
239
242
  onKeyPress: event => {
240
243
  if (!submitOnEnter) return;
@@ -244,7 +247,7 @@ var ProForm = (props, ref) => {
244
247
  },
245
248
  className: cls,
246
249
  form: form
247
- }, formProps), (0, _lodash.omit)(config, ['isDiffAll'])), otherProps), {}, {
250
+ }, formProps), (0, _lodash.omit)(config, ['isDiffAll'])), filteredOtherProps), {}, {
248
251
  labelAlign: (_ref3 = labelAlign !== null && labelAlign !== void 0 ? labelAlign : config.labelAlign) !== null && _ref3 !== void 0 ? _ref3 : 'left',
249
252
  onValuesChange: handleValuesChange,
250
253
  onFinish: handleFinish,