ztxkui 4.2.18-103 → 4.2.18-104

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 (5) hide show
  1. package/dist/UI/TreeSelect/index.js +51 -9
  2. package/dist/components/EnhanceTreeSelect/index.d.ts +1 -1
  3. package/dist/components/EnhanceTreeSelect/index.js +23 -7
  4. package/dist/components/TreeSelect/index.js +29 -15
  5. package/package.json +1 -1
package/dist/UI/TreeSelect/index.js CHANGED
@@ -41,6 +41,24 @@ var treeData = [
41
41
  ],
42
42
  },
43
43
  ];
44
+ // 自定义字段名的数据（label / id 而非 title / value）
45
+ var customFieldData = [
46
+ {
47
+ label: '类别A',
48
+ id: 'a',
49
+ key: 'a',
50
+ children: [
51
+ { label: '选项A1', id: 'a1', key: 'a1' },
52
+ { label: '选项A2', id: 'a2', key: 'a2' },
53
+ ],
54
+ },
55
+ {
56
+ label: '类别B',
57
+ id: 'b',
58
+ key: 'b',
59
+ children: [{ label: '选项B1', id: 'b1', key: 'b1' }],
60
+ },
61
+ ];
44
62
  var sectionStyle = {
45
63
  marginBottom: 24,
46
64
  };
@@ -51,28 +69,52 @@ var labelStyle = {
51
69
  fontWeight: 600,
52
70
  color: '#333',
53
71
  };
72
+ var formatValue = function (val) {
73
+ if (val === undefined || val === null)
74
+ return '无';
75
+ if (Array.isArray(val))
76
+ return val.filter(function (v) { return v !== ''; }).join(', ') || '无';
77
+ return String(val);
78
+ };
54
79
  var TreeSelectDemo = function () {
55
80
  var _a = useState(), singleValue = _a[0], setSingleValue = _a[1];
56
81
  var _b = useState(), multiValue = _b[0], setMultiValue = _b[1];
82
+ var _c = useState(), showAllValue = _c[0], setShowAllValue = _c[1];
83
+ var _d = useState(), customValue = _d[0], setCustomValue = _d[1];
57
84
  return (React.createElement("div", { style: { padding: '20px', maxWidth: 500 } },
58
85
  React.createElement("h2", null, "\u6811\u4E0B\u62C9\u6846\u9009\u62E9"),
59
86
  React.createElement("div", { style: sectionStyle },
60
- React.createElement("label", { style: labelStyle }, "\u5355\u9009"),
87
+ React.createElement("label", { style: labelStyle }, "1. \u57FA\u7840\u5355\u9009"),
61
88
  React.createElement(TreeSelect, { style: { width: '100%' }, placeholder: "\u8BF7\u9009\u62E9", treeData: treeData, value: singleValue, onChange: setSingleValue, treeDefaultExpandAll: true, allowClear: true }),
62
89
  React.createElement("div", { style: { marginTop: 4, fontSize: 12, color: '#999' } },
63
90
  "\u9009\u4E2D\u503C\uFF1A",
64
- singleValue || '无')),
91
+ formatValue(singleValue))),
65
92
  React.createElement("div", { style: sectionStyle },
66
- React.createElement("label", { style: labelStyle }, "\u591A\u9009\uFF08\u663E\u793A\u5B50\u8282\u70B9\uFF09"),
93
+ React.createElement("label", { style: labelStyle }, "2. \u591A\u9009\uFF08showAll \u9ED8\u8BA4\u5F00\u542F\uFF0C\u5168\u90E8\u4E0E\u5176\u4ED6\u4E92\u65A5\uFF09"),
67
94
  React.createElement(TreeSelect, { style: { width: '100%' }, placeholder: "\u8BF7\u9009\u62E9", treeData: treeData, value: multiValue, onChange: setMultiValue, treeCheckable: true, showCheckedStrategy: TreeSelect.SHOW_CHILD, treeDefaultExpandAll: true, allowClear: true }),
68
95
  React.createElement("div", { style: { marginTop: 4, fontSize: 12, color: '#999' } },
69
96
  "\u9009\u4E2D\u503C\uFF1A",
70
- Array.isArray(multiValue)
71
- ? multiValue.filter(function (v) { return v !== ''; }).join(', ') || '无'
72
- : String(multiValue !== null && multiValue !== void 0 ? multiValue : '无')),
73
- React.createElement(Button, { type: "default", size: "small", style: { marginTop: 8 }, onClick: function () { return setMultiValue(['']); } }, "\u6E05\u7A7A\u591A\u9009\u503C")),
97
+ formatValue(multiValue)),
98
+ React.createElement(Button, { type: "default", size: "small", style: { marginTop: 8 }, onClick: function () { return setMultiValue(['']); } }, "\u8BBE\u7F6E\u4E3A\u300C\u5168\u90E8\u300D")),
99
+ React.createElement("div", { style: sectionStyle },
100
+ React.createElement("label", { style: labelStyle }, "3. \u591A\u9009\uFF08showAll=false\uFF0C\u4E0D\u663E\u793A\u5168\u90E8\uFF09"),
101
+ React.createElement(TreeSelect, { style: { width: '100%' }, placeholder: "\u8BF7\u9009\u62E9", treeData: treeData, value: showAllValue, onChange: setShowAllValue, treeCheckable: true, showCheckedStrategy: TreeSelect.SHOW_CHILD, treeDefaultExpandAll: true, allowClear: true, showAll: false }),
102
+ React.createElement("div", { style: { marginTop: 4, fontSize: 12, color: '#999' } },
103
+ "\u9009\u4E2D\u503C\uFF1A",
104
+ formatValue(showAllValue))),
105
+ React.createElement("div", { style: sectionStyle },
106
+ React.createElement("label", { style: labelStyle }, "4. \u591A\u9009 + \u81EA\u5B9A\u4E49\u5B57\u6BB5\u540D\uFF08label/id\uFF09+ showAll \u5168\u90E8\u4E92\u65A5"),
107
+ React.createElement(TreeSelect, { style: { width: '100%' }, placeholder: "\u8BF7\u9009\u62E9", treeData: customFieldData, fieldNames: { label: 'label', value: 'id', children: 'children' }, value: customValue, onChange: setCustomValue, treeCheckable: true, showCheckedStrategy: TreeSelect.SHOW_CHILD, treeDefaultExpandAll: true, allowClear: true }),
108
+ React.createElement("div", { style: { marginTop: 4, fontSize: 12, color: '#999' } },
109
+ "\u9009\u4E2D\u503C\uFF1A",
110
+ formatValue(customValue)),
111
+ React.createElement("div", { style: { marginTop: 2, fontSize: 12, color: '#999' } }, "\u6570\u636E\u4F7F\u7528 label/id \u5B57\u6BB5\uFF0C\u901A\u8FC7 fieldNames \u6620\u5C04")),
112
+ React.createElement("div", { style: sectionStyle },
113
+ React.createElement("label", { style: labelStyle }, "5. \u652F\u6301\u641C\u7D22\uFF08\u5355\u9009\uFF09"),
114
+ React.createElement(TreeSelect, { style: { width: '100%' }, placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22", treeData: treeData, showSearch: true, treeDefaultExpandAll: true, allowClear: true })),
74
115
  React.createElement("div", { style: sectionStyle },
75
- React.createElement("label", { style: labelStyle }, "\u652F\u6301\u641C\u7D22\uFF08\u5355\u9009\uFF09"),
76
- React.createElement(TreeSelect, { style: { width: '100%' }, placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22", treeData: treeData, showSearch: true, treeDefaultExpandAll: true, allowClear: true }))));
116
+ React.createElement("label", { style: labelStyle }, "6. \u5355\u9009 + showAll\uFF08\u591A\u9009\u6A21\u5F0F\u4E0B\u9ED8\u8BA4\u5F00\u542F\uFF09"),
117
+ React.createElement(TreeSelect, { style: { width: '100%' }, placeholder: "\u8BF7\u9009\u62E9", treeData: treeData, showAll: true, treeDefaultExpandAll: true, allowClear: true }),
118
+ React.createElement("div", { style: { marginTop: 4, fontSize: 12, color: '#999' } }, "\u9009\u4E2D\u300C\u5168\u90E8\u300D\u65F6\u503C\u4E3A\u7A7A\u5B57\u7B26\u4E32"))));
77
119
  };
78
120
  export default TreeSelectDemo;
package/dist/components/EnhanceTreeSelect/index.d.ts CHANGED
@@ -51,7 +51,7 @@ export interface IProps<T> extends Omit<TreeSelectProps<T>, 'onChange'> {
51
51
  * 增强下拉树
52
52
  * 添加远程搜索
53
53
  */
54
- declare function EnhanceTreeSelect<VT extends SelectValue = SelectValue>({ treeData: outTreeData, defaultTreeData, params, url, method, request, asyncLoadChildren, asyncLoadChildrenKey, transformData, treeDataSimpleMode, onCompleted, showAll, onChange, ...restProps }: IProps<VT>): JSX.Element;
54
+ declare function EnhanceTreeSelect<VT extends SelectValue = SelectValue>({ treeData: outTreeData, defaultTreeData, params, url, method, request, asyncLoadChildren, asyncLoadChildrenKey, transformData, treeDataSimpleMode, onCompleted, showAll, onChange, fieldNames, ...restProps }: IProps<VT>): JSX.Element;
55
55
  declare namespace EnhanceTreeSelect {
56
56
  var SHOW_PARENT: "SHOW_PARENT";
57
57
  }
package/dist/components/EnhanceTreeSelect/index.js CHANGED
@@ -52,7 +52,7 @@ function getData(request, options) {
52
52
  * 添加远程搜索
53
53
  */
54
54
  function EnhanceTreeSelect(_a) {
55
- var outTreeData = _a.treeData, defaultTreeData = _a.defaultTreeData, params = _a.params, url = _a.url, _b = _a.method, method = _b === void 0 ? 'GET' : _b, request = _a.request, asyncLoadChildren = _a.asyncLoadChildren, _c = _a.asyncLoadChildrenKey, asyncLoadChildrenKey = _c === void 0 ? 'parentId' : _c, transformData = _a.transformData, treeDataSimpleMode = _a.treeDataSimpleMode, onCompleted = _a.onCompleted, showAll = _a.showAll, onChange = _a.onChange, restProps = __rest(_a, ["treeData", "defaultTreeData", "params", "url", "method", "request", "asyncLoadChildren", "asyncLoadChildrenKey", "transformData", "treeDataSimpleMode", "onCompleted", "showAll", "onChange"]);
55
+ var outTreeData = _a.treeData, defaultTreeData = _a.defaultTreeData, params = _a.params, url = _a.url, _b = _a.method, method = _b === void 0 ? 'GET' : _b, request = _a.request, asyncLoadChildren = _a.asyncLoadChildren, _c = _a.asyncLoadChildrenKey, asyncLoadChildrenKey = _c === void 0 ? 'parentId' : _c, transformData = _a.transformData, treeDataSimpleMode = _a.treeDataSimpleMode, onCompleted = _a.onCompleted, showAll = _a.showAll, onChange = _a.onChange, fieldNames = _a.fieldNames, restProps = __rest(_a, ["treeData", "defaultTreeData", "params", "url", "method", "request", "asyncLoadChildren", "asyncLoadChildrenKey", "transformData", "treeDataSimpleMode", "onCompleted", "showAll", "onChange", "fieldNames"]);
56
56
  /**
57
57
  * treeData 为当前组件使用的数据源
58
58
  * 这样做的目的，是因为如果做远程搜索和搜索方法组件内部处理时
@@ -141,30 +141,46 @@ function EnhanceTreeSelect(_a) {
141
141
  };
142
142
  // 多选模式下，showAll 未显式传值时默认为 true
143
143
  var isShowAll = showAll !== undefined ? showAll : !!restProps.treeCheckable;
144
- // 多选模式下，「全部」与其他选项互斥
144
+ // 根据 fieldNames 配置确定「全部」节点的字段名
145
+ var labelKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'title';
146
+ var valueKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value';
147
+ // 多选模式下，「全部」与其他选项互斥（用 ref 追踪前值）
148
+ var prevValueRef = useRef(restProps.value);
149
+ useEffect(function () {
150
+ prevValueRef.current = restProps.value;
151
+ }, [restProps.value]);
145
152
  var handleChange = function (value, labelList, extra) {
146
153
  if (isShowAll && restProps.treeCheckable && Array.isArray(value)) {
147
- var last = value[value.length - 1];
148
- if (last === '') {
154
+ var prev = Array.isArray(prevValueRef.current)
155
+ ? prevValueRef.current
156
+ : [];
157
+ var prevHasAll = prev.includes('');
158
+ var nowHasAll = value.includes('');
159
+ var nowHasOther = value.some(function (v) { return v !== ''; });
160
+ if (nowHasAll && !prevHasAll) {
149
161
  value = [''];
150
162
  }
151
- else if (value.includes('')) {
163
+ else if (prevHasAll && nowHasOther) {
152
164
  value = value.filter(function (v) { return v !== ''; });
153
165
  }
154
166
  }
167
+ prevValueRef.current = value;
155
168
  onChange === null || onChange === void 0 ? void 0 : onChange(value, labelList, extra);
156
169
  };
157
170
  // 合并最终树数据，isShowAll 时在顶部插入「全部」节点
158
171
  var finalTreeData = (function () {
172
+ var _a;
159
173
  var data = Array.isArray(defaultTreeData)
160
174
  ? defaultTreeData.concat(treeData)
161
175
  : treeData;
162
176
  if (isShowAll) {
163
- data = __spreadArray([{ title: i18next.t('全部'), value: '', key: '__all__' }], data);
177
+ data = __spreadArray([
178
+ (_a = {}, _a[labelKey] = i18next.t('全部'), _a[valueKey] = '', _a.key = '__all__', _a)
179
+ ], data);
164
180
  }
165
181
  return data;
166
182
  })();
167
- return (React.createElement(TreeSelect, __assign({ allowClear: true, showSearch: true, filterTreeNode: true, treeNodeFilterProp: "title", treeData: finalTreeData, searchValue: searchValue, onSearch: onSearch, treeDataSimpleMode: asyncLoadChildren, loadData: asyncLoadChildren ? onLoadDataHandle : undefined, onChange: handleChange }, restProps)));
183
+ return (React.createElement(TreeSelect, __assign({ allowClear: true, showSearch: true, filterTreeNode: true, treeNodeFilterProp: "title", treeData: finalTreeData, searchValue: searchValue, onSearch: onSearch, treeDataSimpleMode: asyncLoadChildren, loadData: asyncLoadChildren ? onLoadDataHandle : undefined, onChange: handleChange, fieldNames: fieldNames }, restProps)));
168
184
  }
169
185
  EnhanceTreeSelect.SHOW_PARENT = TreeSelect.SHOW_PARENT;
170
186
  export default EnhanceTreeSelect;
package/dist/components/TreeSelect/index.js CHANGED
@@ -26,46 +26,60 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
26
26
  return to;
27
27
  };
28
28
  import i18next from 'ztxkutils/dist/i18next';
29
- import React, { useMemo, useState } from 'react';
29
+ import React, { useEffect, useMemo, useRef, useState } from 'react';
30
30
  import { TreeSelect as AntdTreeSelect } from 'antd';
31
31
  /**
32
32
  * 下拉树
33
33
  */
34
34
  function TreeSelect(props) {
35
- var showAll = props.showAll, treeData = props.treeData, onChange = props.onChange, restProps = __rest(props, ["showAll", "treeData", "onChange"]);
35
+ var showAll = props.showAll, treeData = props.treeData, onChange = props.onChange, fieldNames = props.fieldNames, restProps = __rest(props, ["showAll", "treeData", "onChange", "fieldNames"]);
36
36
  // 多选模式下，showAll 未显式传值时默认为 true
37
37
  var isShowAll = showAll !== undefined ? showAll : !!props.treeCheckable;
38
+ // 根据 fieldNames 配置确定「全部」节点的字段名
39
+ var labelKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'title';
40
+ var valueKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value';
38
41
  // 搜索逻辑优化，搜索选中后不清空搜索条件
39
42
  var _a = useState(''), searchValue = _a[0], setSearchValue = _a[1];
40
43
  var onSearch = function (value) {
41
44
  setSearchValue(value);
42
45
  };
43
46
  var finalTreeData = useMemo(function () {
47
+ var _a;
44
48
  if (!isShowAll)
45
49
  return treeData;
46
- var allNode = {
47
- title: i18next.t('全部'),
48
- value: '',
49
- key: '__all__',
50
- };
50
+ var allNode = (_a = {},
51
+ _a[labelKey] = i18next.t('全部'),
52
+ _a[valueKey] = '',
53
+ _a.key = '__all__',
54
+ _a);
51
55
  return __spreadArray([allNode], (treeData || []));
52
- }, [isShowAll, treeData]);
53
- // 多选模式下，「全部」与其他选项互斥
56
+ }, [isShowAll, treeData, labelKey, valueKey]);
57
+ // 多选模式下，「全部」与其他选项互斥（用 ref 追踪前值，antd 4.x 的 extra 中无 preValue）
58
+ var prevValueRef = useRef(props.value);
59
+ useEffect(function () {
60
+ prevValueRef.current = props.value;
61
+ }, [props.value]);
54
62
  var handleChange = function (value, labelList, extra) {
55
63
  if (isShowAll && props.treeCheckable && Array.isArray(value)) {
56
- var last = value[value.length - 1];
57
- if (last === '') {
58
- // 选中了「全部」→ 只保留「全部」
64
+ var prev = Array.isArray(prevValueRef.current)
65
+ ? prevValueRef.current
66
+ : [];
67
+ var prevHasAll = prev.includes('');
68
+ var nowHasAll = value.includes('');
69
+ var nowHasOther = value.some(function (v) { return v !== ''; });
70
+ if (nowHasAll && !prevHasAll) {
71
+ // 刚选中了「全部」→ 只保留「全部」
59
72
  value = [''];
60
73
  }
61
- else if (value.includes('')) {
62
- // 选了其他选项 → 移除「全部」
74
+ else if (prevHasAll && nowHasOther) {
75
+ // 「全部」已选中，又选了其他项 → 移除「全部」
63
76
  value = value.filter(function (v) { return v !== ''; });
64
77
  }
65
78
  }
79
+ prevValueRef.current = value;
66
80
  onChange === null || onChange === void 0 ? void 0 : onChange(value, labelList, extra);
67
81
  };
68
- return (React.createElement(AntdTreeSelect, __assign({ searchValue: searchValue, onSearch: onSearch, treeData: finalTreeData, onChange: handleChange }, restProps)));
82
+ return (React.createElement(AntdTreeSelect, __assign({ searchValue: searchValue, onSearch: onSearch, treeData: finalTreeData, onChange: handleChange, fieldNames: fieldNames }, restProps)));
69
83
  }
70
84
  TreeSelect.SHOW_PARENT = AntdTreeSelect.SHOW_PARENT;
71
85
  TreeSelect.SHOW_CHILD = AntdTreeSelect.SHOW_CHILD;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ztxkui",
3
- "version": "4.2.18-103",
3
+ "version": "4.2.18-104",
4
4
  "private": false,
5
5
  "description": "React components library",
6
6
  "author": "zt-front-end",