@chaoswise/ui 3.1.7 → 3.1.9
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/lib/Button/index.style.js +4 -2
- package/lib/CWSelect/index.js +241 -193
- package/package.json +1 -1
|
@@ -11,11 +11,13 @@ var prepareComponentToken = function prepareComponentToken(token) {
|
|
|
11
11
|
var genCustomButtonStyle = function genCustomButtonStyle(token) {
|
|
12
12
|
var prefixCls = token.antCls;
|
|
13
13
|
var componentCls = "".concat(prefixCls, "-btn");
|
|
14
|
-
return _defineProperty({}, "".concat(componentCls).concat(componentCls, "-wrapper"), _defineProperty(_defineProperty(_defineProperty({
|
|
14
|
+
return _defineProperty({}, "".concat(componentCls).concat(componentCls, "-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
15
15
|
display: "inline-flex !important",
|
|
16
16
|
alignItems: "center",
|
|
17
17
|
justifyContent: "center"
|
|
18
|
-
}, "
|
|
18
|
+
}, "".concat(componentCls, "-icon"), {
|
|
19
|
+
display: "inline-flex"
|
|
20
|
+
}), "&".concat(componentCls, "-text,&").concat(componentCls, "-link"), {
|
|
19
21
|
padding: "0 !important",
|
|
20
22
|
border: "none !important",
|
|
21
23
|
height: "20px",
|
package/lib/CWSelect/index.js
CHANGED
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
import _Checkbox from "@chaoswise/ui/lib/Checkbox";
|
|
3
2
|
import _Tooltip from "@chaoswise/ui/lib/Tooltip";
|
|
4
3
|
import _Tag from "@chaoswise/ui/lib/Tag";
|
|
5
|
-
var _excluded = ["selectLabel", "label", "prefix", "defaultValue", "mode", "value", "labelInValue", "onChange", "onSelect", "onDeselect", "onDragEnd", "tagRender", "allowDrag", "maxTagCount", "
|
|
4
|
+
var _excluded = ["selectLabel", "label", "prefix", "defaultValue", "mode", "value", "labelInValue", "onChange", "onSelect", "onDeselect", "onDragEnd", "tagRender", "allowDrag", "maxTagCount", "tagLabelRender", "maxTagTextLength", "dropdownRender", "children", "maxCount"];
|
|
6
5
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
7
|
-
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
8
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
-
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
10
|
-
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
11
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
13
8
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -33,7 +28,26 @@ import update from "immutability-helper";
|
|
|
33
28
|
import PropTypes from "prop-types";
|
|
34
29
|
import { useIntl } from "../locales";
|
|
35
30
|
import useStyle from "./index.style";
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* 检查是否为有效数组(非空数组)的辅助函数
|
|
34
|
+
* @param {*} arr - 待检查的值
|
|
35
|
+
* @returns {boolean} 是否为有效数组
|
|
36
|
+
*/
|
|
37
|
+
var isValidArray = function isValidArray(arr) {
|
|
38
|
+
return Array.isArray(arr) && arr.length > 0;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* CWSelect 组件 - 增强版的 Select 选择器
|
|
43
|
+
* 支持多选、拖拽排序、标签自定义等功能
|
|
44
|
+
*
|
|
45
|
+
* @param {Object} props - 组件属性
|
|
46
|
+
* @param {React.Ref} ref - 组件引用
|
|
47
|
+
* @returns {React.Component} CWSelect 组件
|
|
48
|
+
*/
|
|
36
49
|
var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
50
|
+
// 解构 props,设置默认值
|
|
37
51
|
var selectLabel = props.selectLabel,
|
|
38
52
|
label = props.label,
|
|
39
53
|
prefix = props.prefix,
|
|
@@ -53,17 +67,9 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
53
67
|
_props$allowDrag = props.allowDrag,
|
|
54
68
|
allowDrag = _props$allowDrag === void 0 ? false : _props$allowDrag,
|
|
55
69
|
maxTagCount = props.maxTagCount,
|
|
56
|
-
_props$showCheckbox = props.showCheckbox,
|
|
57
|
-
showCheckbox = _props$showCheckbox === void 0 ? false : _props$showCheckbox,
|
|
58
70
|
tagLabelRender = props.tagLabelRender,
|
|
59
71
|
maxTagTextLength = props.maxTagTextLength,
|
|
60
72
|
dropdownRender = props.dropdownRender,
|
|
61
|
-
_props$multipleOption = props.multipleOptions,
|
|
62
|
-
multipleOptions = _props$multipleOption === void 0 ? {
|
|
63
|
-
showCheckbox: false,
|
|
64
|
-
showSelectAll: true,
|
|
65
|
-
isCheckboxMultipleHasSelectAll: true
|
|
66
|
-
} : _props$multipleOption,
|
|
67
73
|
children = props.children,
|
|
68
74
|
maxCount = props.maxCount,
|
|
69
75
|
rest = _objectWithoutProperties(props, _excluded);
|
|
@@ -76,124 +82,211 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
76
82
|
wrapCSSVar = _useStyle2[0],
|
|
77
83
|
hashId = _useStyle2[1],
|
|
78
84
|
cssVarCls = _useStyle2[2];
|
|
79
|
-
|
|
85
|
+
|
|
86
|
+
// 状态管理
|
|
87
|
+
var keyIndexMapRef = useRef({}); // 存储键值索引映射,避免重新渲染
|
|
80
88
|
var _useState = useState([]),
|
|
81
89
|
_useState2 = _slicedToArray(_useState, 2),
|
|
82
90
|
allInstance = _useState2[0],
|
|
83
|
-
setAllInstance = _useState2[1];
|
|
91
|
+
setAllInstance = _useState2[1]; // 所有实例数组
|
|
84
92
|
var _useState3 = useState([]),
|
|
85
93
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
86
94
|
allOptions = _useState4[0],
|
|
87
|
-
setAllOptions = _useState4[1];
|
|
95
|
+
setAllOptions = _useState4[1]; // 所有选项数组
|
|
88
96
|
var _useState5 = useState([]),
|
|
89
97
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
90
98
|
activeKey = _useState6[0],
|
|
91
|
-
setActiveKey = _useState6[1];
|
|
92
|
-
|
|
99
|
+
setActiveKey = _useState6[1]; // 当前激活的键值数组
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* 计算前缀标签,优先级:prefix > label > selectLabel
|
|
103
|
+
*/
|
|
104
|
+
var computedPrefix = useMemo(function () {
|
|
93
105
|
return prefix || label || selectLabel;
|
|
94
106
|
}, [prefix, label, selectLabel]);
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}, [multipleOptions.isCheckboxMultipleHasSelectAll, maxCount]);
|
|
101
|
-
useEffect(function () {
|
|
102
|
-
if (mode) {
|
|
103
|
-
getMapFromArray(defaultValue);
|
|
104
|
-
}
|
|
105
|
-
}, [defaultValue]);
|
|
106
|
-
useEffect(function () {
|
|
107
|
-
if (mode) {
|
|
108
|
-
getMapFromArray(value);
|
|
109
|
-
}
|
|
110
|
-
}, [value]);
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* 从数组值构建键值索引映射的函数
|
|
110
|
+
* @param {Array|*} _value - 输入值
|
|
111
|
+
*/
|
|
111
112
|
var getMapFromArray = useCallback(function (_value) {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
113
|
+
var normalizedValue = _value || [];
|
|
114
|
+
setActiveKey(normalizedValue);
|
|
115
|
+
|
|
116
|
+
// 如果没有值,清空映射和实例
|
|
117
|
+
if (!_value) {
|
|
118
|
+
keyIndexMapRef.current = {};
|
|
119
|
+
setAllInstance([]);
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// 确保值是数组格式
|
|
124
|
+
var valueArray = Array.isArray(_value) ? _value : [_value];
|
|
125
|
+
var newKeyIndexMap = {};
|
|
126
|
+
|
|
127
|
+
// 构建键值数组和索引映射
|
|
128
|
+
var allKeys = valueArray.map(function (item, index) {
|
|
129
|
+
var key = labelInValue ? item === null || item === void 0 ? void 0 : item.value : item;
|
|
130
|
+
if (key !== undefined && key !== null) {
|
|
131
|
+
newKeyIndexMap[key] = {
|
|
132
|
+
index: index
|
|
133
|
+
};
|
|
134
|
+
}
|
|
121
135
|
return key;
|
|
136
|
+
}).filter(function (key) {
|
|
137
|
+
return key !== undefined && key !== null;
|
|
122
138
|
});
|
|
139
|
+
keyIndexMapRef.current = newKeyIndexMap;
|
|
140
|
+
// fixed 节点详情拿不到
|
|
123
141
|
setTimeout(function () {
|
|
124
142
|
return setAllInstance(allKeys);
|
|
125
|
-
});
|
|
143
|
+
}, 0);
|
|
126
144
|
}, [labelInValue]);
|
|
127
|
-
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* 监听默认值变化,初始化键值映射
|
|
148
|
+
*/
|
|
149
|
+
useEffect(function () {
|
|
150
|
+
if (mode && defaultValue !== undefined) {
|
|
151
|
+
getMapFromArray(defaultValue);
|
|
152
|
+
}
|
|
153
|
+
}, [defaultValue, mode, getMapFromArray]);
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* 监听值变化,更新键值映射
|
|
157
|
+
*/
|
|
158
|
+
useEffect(function () {
|
|
159
|
+
if (mode && value !== undefined) {
|
|
160
|
+
getMapFromArray(value);
|
|
161
|
+
}
|
|
162
|
+
}, [value, mode, getMapFromArray]);
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* 处理值变化的回调函数
|
|
166
|
+
* @param {*} newValue - 新值
|
|
167
|
+
* @param {*} option - 选项数据
|
|
168
|
+
*/
|
|
169
|
+
var handleChange = useCallback(function (newValue, option) {
|
|
128
170
|
onChange(newValue, option);
|
|
129
|
-
setAllOptions(option);
|
|
130
|
-
|
|
131
|
-
|
|
171
|
+
setAllOptions(Array.isArray(option) ? option : []);
|
|
172
|
+
|
|
173
|
+
// 只有在非受控模式下才更新内部状态
|
|
174
|
+
if (!("value" in props) && mode) {
|
|
132
175
|
getMapFromArray(newValue);
|
|
133
176
|
}
|
|
134
|
-
};
|
|
135
|
-
|
|
177
|
+
}, [onChange, props, mode, getMapFromArray]);
|
|
178
|
+
|
|
179
|
+
/**
|
|
180
|
+
* 阻止鼠标按下事件的默认行为和冒泡
|
|
181
|
+
* @param {Event} e - 事件对象
|
|
182
|
+
*/
|
|
183
|
+
var handlePreventMouseDown = useCallback(function (e) {
|
|
136
184
|
e.preventDefault();
|
|
137
185
|
e.stopPropagation();
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
|
|
186
|
+
}, []);
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* 渲染普通标签的函数
|
|
190
|
+
* @param {Object} tagProps - 标签属性
|
|
191
|
+
* @returns {React.Component|null} 标签组件
|
|
192
|
+
*/
|
|
193
|
+
var renderTag = useCallback(function (tagProps) {
|
|
194
|
+
if (!(tagProps !== null && tagProps !== void 0 && tagProps.value)) return null;
|
|
195
|
+
var isDisabled = rest.disabled || tagProps.disabled;
|
|
141
196
|
return /*#__PURE__*/React.createElement(CustomTag, {
|
|
142
|
-
tagProps:
|
|
143
|
-
key:
|
|
197
|
+
tagProps: tagProps,
|
|
198
|
+
key: tagProps.value,
|
|
144
199
|
maxTagTextLength: maxTagTextLength,
|
|
145
200
|
tagLabelRender: tagLabelRender,
|
|
146
|
-
closeIcon: !
|
|
201
|
+
closeIcon: !isDisabled
|
|
147
202
|
});
|
|
148
203
|
}, [maxTagTextLength, tagLabelRender, rest.disabled]);
|
|
204
|
+
|
|
205
|
+
/**
|
|
206
|
+
* 移动节点的函数,用于拖拽排序
|
|
207
|
+
* @param {number} dragIndex - 拖拽项索引
|
|
208
|
+
* @param {number} hoverIndex - 悬停项索引
|
|
209
|
+
*/
|
|
149
210
|
var moveNode = useCallback(function (dragIndex, hoverIndex) {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
var
|
|
153
|
-
|
|
211
|
+
// 如果索引相同或实例数组无效,直接返回
|
|
212
|
+
if (dragIndex === hoverIndex || !isValidArray(allInstance)) return;
|
|
213
|
+
var dragItem = allInstance[dragIndex];
|
|
214
|
+
var hoverItem = allInstance[hoverIndex];
|
|
215
|
+
if (!dragItem || !hoverItem) return;
|
|
216
|
+
|
|
217
|
+
// 使用 immutability-helper 进行不可变更新
|
|
218
|
+
var newInstance = update(allInstance, {
|
|
219
|
+
$splice: [[dragIndex, 1], [hoverIndex, 0, dragItem]]
|
|
154
220
|
});
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
221
|
+
|
|
222
|
+
// 重新排序选项数组
|
|
223
|
+
var newOptions = newInstance.map(function (item) {
|
|
224
|
+
return allOptions.find(function (option) {
|
|
225
|
+
return (option === null || option === void 0 ? void 0 : option.value) === item;
|
|
158
226
|
});
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
227
|
+
}).filter(Boolean);
|
|
228
|
+
onDragEnd(newInstance);
|
|
229
|
+
handleChange(newInstance, newOptions);
|
|
230
|
+
}, [allInstance, allOptions, onDragEnd, handleChange]);
|
|
231
|
+
|
|
232
|
+
/**
|
|
233
|
+
* 标签下拉框覆盖层内容,用于显示超出最大数量的标签
|
|
234
|
+
*/
|
|
164
235
|
var tagDropdownOverlay = useMemo(function () {
|
|
236
|
+
if (!isValidArray(allInstance) || maxTagCount === undefined) {
|
|
237
|
+
return [];
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
// 获取超出最大数量的标签
|
|
165
241
|
return allInstance.slice(maxTagCount).map(function (key) {
|
|
166
|
-
var
|
|
167
|
-
if (!
|
|
168
|
-
var
|
|
242
|
+
var tagProps = keyIndexMapRef.current[key];
|
|
243
|
+
if (!tagProps) return null;
|
|
244
|
+
var isDisabled = rest.disabled || tagProps.disabled;
|
|
169
245
|
return /*#__PURE__*/React.createElement(CustomTag, {
|
|
170
|
-
tagProps:
|
|
246
|
+
tagProps: tagProps,
|
|
171
247
|
key: key,
|
|
172
248
|
maxTagTextLength: maxTagTextLength,
|
|
173
249
|
tagLabelRender: tagLabelRender,
|
|
174
|
-
closeIcon: !
|
|
250
|
+
closeIcon: !isDisabled
|
|
175
251
|
});
|
|
176
|
-
});
|
|
252
|
+
}).filter(Boolean);
|
|
177
253
|
}, [allInstance, maxTagCount, tagLabelRender, maxTagTextLength, rest.disabled]);
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* 自定义标签渲染函数
|
|
257
|
+
* 处理拖拽、标签数量限制等逻辑
|
|
258
|
+
* @param {Object} tagProps - 标签属性
|
|
259
|
+
* @returns {React.Component|null} 渲染的标签组件
|
|
260
|
+
*/
|
|
261
|
+
var customTagRender = useCallback(function (tagProps) {
|
|
262
|
+
if (!(tagProps !== null && tagProps !== void 0 && tagProps.value)) return null;
|
|
263
|
+
var currentNode = keyIndexMapRef.current[tagProps.value];
|
|
264
|
+
|
|
265
|
+
// 更新键值索引映射
|
|
266
|
+
if (currentNode) {
|
|
267
|
+
keyIndexMapRef.current[tagProps.value] = _objectSpread(_objectSpread({}, currentNode), tagProps);
|
|
182
268
|
}
|
|
269
|
+
|
|
270
|
+
// 拖拽模式:返回可拖拽的标签
|
|
183
271
|
if (allowDrag) {
|
|
184
|
-
var
|
|
272
|
+
var isDisabled = rest.disabled || tagProps.disabled;
|
|
185
273
|
return /*#__PURE__*/React.createElement(DragTag, {
|
|
186
|
-
tagProps:
|
|
274
|
+
tagProps: keyIndexMapRef.current[tagProps.value],
|
|
187
275
|
maxTagTextLength: maxTagTextLength,
|
|
188
276
|
tagLabelRender: tagLabelRender,
|
|
189
|
-
closeIcon: !
|
|
277
|
+
closeIcon: !isDisabled,
|
|
190
278
|
moveNode: moveNode
|
|
191
279
|
});
|
|
192
280
|
}
|
|
281
|
+
|
|
282
|
+
// 无限制标签数量:直接渲染标签
|
|
193
283
|
if (maxTagCount === undefined) {
|
|
194
|
-
return renderTag(
|
|
284
|
+
return renderTag(tagProps);
|
|
195
285
|
}
|
|
196
|
-
|
|
286
|
+
|
|
287
|
+
// 处理超出数量的标签:显示 "+N" 的聚合标签
|
|
288
|
+
if ((currentNode === null || currentNode === void 0 ? void 0 : currentNode.index) === maxTagCount) {
|
|
289
|
+
var extraCount = Math.max(0, Object.keys(keyIndexMapRef.current).length - maxTagCount);
|
|
197
290
|
return /*#__PURE__*/React.createElement(_Tooltip, {
|
|
198
291
|
overlayClassName: "".concat(prefixCls, "-tag-tooltip-wrapper"),
|
|
199
292
|
overlay: tagDropdownOverlay,
|
|
@@ -202,153 +295,108 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
202
295
|
className: "".concat(prefixCls, "-custom-tag"),
|
|
203
296
|
type: "custom_type01",
|
|
204
297
|
closeIcon: !rest.disabled,
|
|
205
|
-
onMouseDown:
|
|
206
|
-
onClose: function onClose(
|
|
207
|
-
|
|
208
|
-
var
|
|
209
|
-
|
|
210
|
-
|
|
298
|
+
onMouseDown: handlePreventMouseDown,
|
|
299
|
+
onClose: function onClose() {
|
|
300
|
+
// 关闭聚合标签时,移除所有超出数量的标签
|
|
301
|
+
var filteredInstance = activeKey.slice(0, maxTagCount);
|
|
302
|
+
var filteredOptions = allOptions.slice(0, maxTagCount);
|
|
303
|
+
var removedKeys = activeKey.slice(maxTagCount);
|
|
304
|
+
var removedOptions = allOptions.slice(maxTagCount);
|
|
305
|
+
handleChange(filteredInstance, filteredOptions);
|
|
306
|
+
onDeselect(removedKeys, removedOptions);
|
|
211
307
|
}
|
|
212
|
-
}, "+",
|
|
308
|
+
}, "+", extraCount));
|
|
213
309
|
}
|
|
214
|
-
|
|
215
|
-
|
|
310
|
+
|
|
311
|
+
// 正常显示的标签(在最大数量范围内)
|
|
312
|
+
if ((currentNode === null || currentNode === void 0 ? void 0 : currentNode.index) < maxTagCount) {
|
|
313
|
+
return renderTag(tagProps);
|
|
216
314
|
}
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
return
|
|
228
|
-
value: item.value,
|
|
229
|
-
label: item.children
|
|
230
|
-
} : item.value;
|
|
231
|
-
});
|
|
232
|
-
if (e.target.checked) {
|
|
233
|
-
activeDataSource = Array.from(new Set([].concat(_toConsumableArray(originActiveDataSource), _toConsumableArray(currentDataSource))));
|
|
234
|
-
_activeKey = Array.from(new Set([].concat(_toConsumableArray(activeKey), _toConsumableArray(currentDataSourceKey))));
|
|
235
|
-
onSelect(currentDataSourceKey, currentDataSource);
|
|
236
|
-
} else {
|
|
237
|
-
activeDataSource = originActiveDataSource.filter(function (item) {
|
|
238
|
-
return !currentDataSource.find(function (i) {
|
|
239
|
-
return i.value === item.value;
|
|
240
|
-
});
|
|
241
|
-
});
|
|
242
|
-
_activeKey = activeKey.filter(function (item) {
|
|
243
|
-
return !currentDataSourceKey.find(function (i) {
|
|
244
|
-
return labelInValue ? item.value === i.value : item === i;
|
|
245
|
-
});
|
|
246
|
-
});
|
|
247
|
-
onDeselect(currentDataSourceKey, currentDataSource);
|
|
315
|
+
return null;
|
|
316
|
+
}, [allowDrag, maxTagCount, renderTag, moveNode, tagDropdownOverlay, prefixCls, rest.disabled, handlePreventMouseDown, activeKey, allOptions, handleChange, onDeselect, maxTagTextLength, tagLabelRender]);
|
|
317
|
+
|
|
318
|
+
/**
|
|
319
|
+
* 计算最终的 value 值
|
|
320
|
+
* 受控模式:使用传入的 value
|
|
321
|
+
* 非受控模式:根据是否显示复选框或允许拖拽来决定使用 activeKey 还是 value
|
|
322
|
+
*/
|
|
323
|
+
var finalValue = useMemo(function () {
|
|
324
|
+
if ("value" in props) {
|
|
325
|
+
return value;
|
|
248
326
|
}
|
|
249
|
-
|
|
250
|
-
};
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
var flattenOptions = (originNode === null || originNode === void 0 || (_originNode$_owner = originNode._owner) === null || _originNode$_owner === void 0 || (_originNode$_owner = _originNode$_owner.dependencies) === null || _originNode$_owner === void 0 || (_originNode$_owner = _originNode$_owner.firstContext) === null || _originNode$_owner === void 0 || (_originNode$_owner = _originNode$_owner.memoizedValue) === null || _originNode$_owner === void 0 ? void 0 : _originNode$_owner.flattenOptions) || [];
|
|
254
|
-
var originDataSource = (originNode === null || originNode === void 0 || (_originNode$_owner2 = originNode._owner) === null || _originNode$_owner2 === void 0 || (_originNode$_owner2 = _originNode$_owner2.dependencies) === null || _originNode$_owner2 === void 0 || (_originNode$_owner2 = _originNode$_owner2.firstContext) === null || _originNode$_owner2 === void 0 || (_originNode$_owner2 = _originNode$_owner2.memoizedValue) === null || _originNode$_owner2 === void 0 ? void 0 : _originNode$_owner2.options) || [];
|
|
255
|
-
var dataSource = flattenOptions.filter(function (item) {
|
|
256
|
-
return item.hasOwnProperty("groupOption");
|
|
257
|
-
}).map(function (item) {
|
|
258
|
-
return item.data;
|
|
259
|
-
});
|
|
260
|
-
var activeValues = Array.from(originNode === null || originNode === void 0 || (_originNode$_owner3 = originNode._owner) === null || _originNode$_owner3 === void 0 || (_originNode$_owner3 = _originNode$_owner3.dependencies) === null || _originNode$_owner3 === void 0 || (_originNode$_owner3 = _originNode$_owner3.firstContext) === null || _originNode$_owner3 === void 0 || (_originNode$_owner3 = _originNode$_owner3.memoizedValue) === null || _originNode$_owner3 === void 0 ? void 0 : _originNode$_owner3.rawValues);
|
|
261
|
-
var filterActiveValues = dataSource.map(function (item) {
|
|
262
|
-
return item.value;
|
|
263
|
-
}).filter(function (item) {
|
|
264
|
-
return activeValues.includes(item);
|
|
265
|
-
});
|
|
266
|
-
var notFoundContent = rest.notFoundContent || /*#__PURE__*/React.createElement("div", {
|
|
267
|
-
className: "".concat(prefixCls, "-show-checkbox-empty")
|
|
268
|
-
}, intl.get("812f44fc-ed3c-4bd3-8ad5-35cd2996c5ae").d("未查找到任何结果"));
|
|
269
|
-
return !dataSource.length ? notFoundContent : /*#__PURE__*/React.createElement(React.Fragment, null, _showCheckAll && /*#__PURE__*/React.createElement("div", {
|
|
270
|
-
className: "".concat(prefixCls, "-check-all"),
|
|
271
|
-
onMouseDown: onPreventMouseDown
|
|
272
|
-
}, /*#__PURE__*/React.createElement(_Checkbox, {
|
|
273
|
-
indeterminate: filterActiveValues.length && filterActiveValues.length !== dataSource.length,
|
|
274
|
-
checked: filterActiveValues.length === dataSource.length,
|
|
275
|
-
onChange: function onChange(e) {
|
|
276
|
-
return onCheckAllChange(e, dataSource, originDataSource);
|
|
277
|
-
},
|
|
278
|
-
style: {
|
|
279
|
-
width: "100%"
|
|
280
|
-
}
|
|
281
|
-
}, intl.get("3991a1d0-65a8-45ca-94a4-f89fbd9f8555").d("全选"), "\uFF08", filterActiveValues.length, "/", dataSource.length, "\uFF09")), originNode);
|
|
282
|
-
};
|
|
283
|
-
var renderCheckboxItem = function renderCheckboxItem(child) {
|
|
284
|
-
var isChecked = labelInValue ? activeKey.map(function (item) {
|
|
285
|
-
return item.value;
|
|
286
|
-
}).includes(child.props.value) : activeKey.includes(child.props.value);
|
|
287
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
288
|
-
key: child.key,
|
|
289
|
-
className: "".concat(prefixCls, "-checkbox-item")
|
|
290
|
-
}, /*#__PURE__*/React.createElement(_Checkbox, {
|
|
291
|
-
disabled: child.props.disabled,
|
|
292
|
-
checked: isChecked
|
|
293
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
294
|
-
className: "".concat(prefixCls, "-item-children")
|
|
295
|
-
}, child.props.children));
|
|
296
|
-
};
|
|
297
|
-
var finalChildren = children;
|
|
298
|
-
if (_showCheckbox) {
|
|
299
|
-
finalChildren = React.Children.map(children, function (child) {
|
|
300
|
-
if (Array.isArray(child.props.children)) {
|
|
301
|
-
var groupChildren = React.Children.map(child.props.children, function (optGroupChild) {
|
|
302
|
-
return /*#__PURE__*/React.cloneElement(optGroupChild, {}, renderCheckboxItem(optGroupChild));
|
|
303
|
-
});
|
|
304
|
-
return /*#__PURE__*/React.cloneElement(child, {}, groupChildren);
|
|
305
|
-
}
|
|
306
|
-
return /*#__PURE__*/React.cloneElement(child, {}, renderCheckboxItem(child));
|
|
307
|
-
});
|
|
308
|
-
}
|
|
327
|
+
return allowDrag ? activeKey : value;
|
|
328
|
+
}, [props, value, allowDrag, activeKey]);
|
|
329
|
+
|
|
330
|
+
// 渲染组件
|
|
309
331
|
return wrapCSSVar(/*#__PURE__*/React.createElement(DndProvider, {
|
|
310
332
|
backend: HTML5Backend
|
|
311
333
|
}, /*#__PURE__*/React.createElement(Select, _extends({
|
|
312
334
|
ref: ref,
|
|
313
|
-
prefix:
|
|
335
|
+
prefix: computedPrefix,
|
|
314
336
|
defaultValue: defaultValue,
|
|
315
|
-
value:
|
|
337
|
+
value: finalValue,
|
|
316
338
|
mode: mode,
|
|
317
|
-
onChange:
|
|
318
|
-
tagRender: tagRender ||
|
|
339
|
+
onChange: handleChange,
|
|
340
|
+
tagRender: tagRender || customTagRender,
|
|
319
341
|
menuItemSelectedIcon: null,
|
|
320
342
|
onSelect: onSelect,
|
|
321
343
|
onDeselect: onDeselect,
|
|
322
|
-
|
|
323
|
-
dropdownRender: dropdownRender !== null && dropdownRender !== void 0 ? dropdownRender : _showCheckbox ? customDropdownRender : null,
|
|
344
|
+
dropdownRender: dropdownRender,
|
|
324
345
|
labelInValue: labelInValue,
|
|
325
346
|
maxCount: maxCount
|
|
326
|
-
}, rest))));
|
|
347
|
+
}, rest), children)));
|
|
327
348
|
});
|
|
349
|
+
|
|
350
|
+
// PropTypes 类型定义
|
|
328
351
|
CWSelect.propTypes = {
|
|
329
352
|
allowClear: PropTypes.bool,
|
|
353
|
+
// 是否允许清除
|
|
330
354
|
disabled: PropTypes.bool,
|
|
355
|
+
// 是否禁用
|
|
331
356
|
dropdownRender: PropTypes.func,
|
|
357
|
+
// 自定义下拉框渲染函数
|
|
332
358
|
labelInValue: PropTypes.bool,
|
|
359
|
+
// 是否把 label 包装到 value 中
|
|
333
360
|
maxTagCount: PropTypes.number,
|
|
361
|
+
// 最大标签显示数量
|
|
334
362
|
maxTagTextLength: PropTypes.number,
|
|
363
|
+
// 标签文本最大长度
|
|
335
364
|
mode: PropTypes.oneOf(["multiple", "tags"]),
|
|
365
|
+
// 选择模式
|
|
336
366
|
notFoundContent: PropTypes.node,
|
|
367
|
+
// 无数据时的内容
|
|
337
368
|
tagLabelRender: PropTypes.func,
|
|
369
|
+
// 标签文本渲染函数
|
|
338
370
|
menuItemSelectedIcon: PropTypes.node,
|
|
371
|
+
// 选中项图标
|
|
339
372
|
onChange: PropTypes.func,
|
|
373
|
+
// 值变化回调
|
|
340
374
|
onDeselect: PropTypes.func,
|
|
375
|
+
// 取消选中回调
|
|
341
376
|
onPopupScroll: PropTypes.func,
|
|
377
|
+
// 下拉框滚动回调
|
|
342
378
|
onSearch: PropTypes.func,
|
|
379
|
+
// 搜索回调
|
|
343
380
|
onSelect: PropTypes.func,
|
|
381
|
+
// 选中回调
|
|
344
382
|
loading: PropTypes.bool,
|
|
383
|
+
// 是否加载中
|
|
345
384
|
tagRender: PropTypes.func,
|
|
385
|
+
// 自定义标签渲染函数
|
|
346
386
|
allowDrag: PropTypes.bool,
|
|
387
|
+
// 是否允许拖拽
|
|
347
388
|
onDragEnd: PropTypes.func,
|
|
348
|
-
|
|
389
|
+
// 拖拽结束回调
|
|
349
390
|
listHeight: PropTypes.number,
|
|
391
|
+
// 列表高度
|
|
350
392
|
selectLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
351
|
-
|
|
393
|
+
// 选择器标签
|
|
394
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) // 标签
|
|
352
395
|
};
|
|
396
|
+
|
|
397
|
+
// 设置组件显示名称
|
|
398
|
+
CWSelect.displayName = "CWSelect";
|
|
399
|
+
|
|
400
|
+
// 克隆原始 Select 组件的属性
|
|
353
401
|
cloneComProps(Select, CWSelect);
|
|
354
402
|
export default CWSelect;
|