@ant-design/agentic-ui 2.17.0 → 2.18.0
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.
|
@@ -18,5 +18,5 @@ export interface ChartFilterProps {
|
|
|
18
18
|
theme?: 'light' | 'dark';
|
|
19
19
|
variant?: 'default' | 'compact';
|
|
20
20
|
}
|
|
21
|
-
declare const ChartFilter: React.
|
|
21
|
+
declare const ChartFilter: React.FC<ChartFilterProps>;
|
|
22
22
|
export default ChartFilter;
|
|
@@ -1,125 +1,13 @@
|
|
|
1
|
-
function _array_like_to_array(arr, len) {
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_with_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return arr;
|
|
8
|
-
}
|
|
9
|
-
function _iterable_to_array_limit(arr, i) {
|
|
10
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
11
|
-
if (_i == null) return;
|
|
12
|
-
var _arr = [];
|
|
13
|
-
var _n = true;
|
|
14
|
-
var _d = false;
|
|
15
|
-
var _s, _e;
|
|
16
|
-
try {
|
|
17
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
18
|
-
_arr.push(_s.value);
|
|
19
|
-
if (i && _arr.length === i) break;
|
|
20
|
-
}
|
|
21
|
-
} catch (err) {
|
|
22
|
-
_d = true;
|
|
23
|
-
_e = err;
|
|
24
|
-
} finally{
|
|
25
|
-
try {
|
|
26
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
27
|
-
} finally{
|
|
28
|
-
if (_d) throw _e;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
return _arr;
|
|
32
|
-
}
|
|
33
|
-
function _non_iterable_rest() {
|
|
34
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
35
|
-
}
|
|
36
|
-
function _sliced_to_array(arr, i) {
|
|
37
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
38
|
-
}
|
|
39
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
40
|
-
if (!o) return;
|
|
41
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
42
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
43
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
44
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
45
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
46
|
-
}
|
|
47
1
|
import { ChevronDown } from "@sofa-design/icons";
|
|
48
2
|
import { Button, ConfigProvider, Dropdown, Segmented } from "antd";
|
|
49
3
|
import classNames from "classnames";
|
|
50
|
-
import React, { useContext,
|
|
4
|
+
import React, { useContext, useMemo, useRef } from "react";
|
|
51
5
|
import { I18nContext } from "../../../../I18n";
|
|
52
6
|
import { debounce } from "../../utils";
|
|
53
7
|
import { useStyle } from "./style";
|
|
54
|
-
/**
|
|
55
|
-
* 比较两个数组是否相等（浅比较）
|
|
56
|
-
*/ var areArraysEqual = function(a, b) {
|
|
57
|
-
if (a === b) return true;
|
|
58
|
-
if (!a || !b) return false;
|
|
59
|
-
if (a.length !== b.length) return false;
|
|
60
|
-
return a.every(function(item, index) {
|
|
61
|
-
var other = b[index];
|
|
62
|
-
if (!other) return false;
|
|
63
|
-
// 比较所有属性
|
|
64
|
-
return Object.keys(item).every(function(key) {
|
|
65
|
-
return item[key] === other[key];
|
|
66
|
-
});
|
|
67
|
-
});
|
|
68
|
-
};
|
|
69
|
-
/**
|
|
70
|
-
* ChartFilter 组件的 props 比较函数
|
|
71
|
-
* 用于 React.memo 优化，只在真正需要时重新渲染
|
|
72
|
-
*
|
|
73
|
-
* 注意：由于组件内部使用 ref 保存上一次有效的 filterOptions，
|
|
74
|
-
* 即使 filterOptions 暂时为空也不会导致组件消失。
|
|
75
|
-
* 因此比较时，如果当前值为空但之前有值，我们仍然认为它们"相等"（使用稳定值）。
|
|
76
|
-
*/ var arePropsEqual = function(prevProps, nextProps) {
|
|
77
|
-
// 比较基本属性
|
|
78
|
-
if (prevProps.selectedFilter !== nextProps.selectedFilter || prevProps.selectedCustomSelection !== nextProps.selectedCustomSelection || prevProps.className !== nextProps.className || prevProps.theme !== nextProps.theme || prevProps.variant !== nextProps.variant) {
|
|
79
|
-
return false;
|
|
80
|
-
}
|
|
81
|
-
// 比较数组属性（filterOptions 和 customOptions）
|
|
82
|
-
// 如果两个都是空或都有效，比较内容
|
|
83
|
-
// 如果一个为空一个有效，认为不相等（需要更新稳定值）
|
|
84
|
-
var prevFilterValid = prevProps.filterOptions && prevProps.filterOptions.length > 1;
|
|
85
|
-
var nextFilterValid = nextProps.filterOptions && nextProps.filterOptions.length > 1;
|
|
86
|
-
// 如果两个都有效，比较内容
|
|
87
|
-
if (prevFilterValid && nextFilterValid) {
|
|
88
|
-
if (!areArraysEqual(prevProps.filterOptions, nextProps.filterOptions)) {
|
|
89
|
-
return false;
|
|
90
|
-
}
|
|
91
|
-
} else if (prevFilterValid !== nextFilterValid) {
|
|
92
|
-
return false;
|
|
93
|
-
}
|
|
94
|
-
// 如果两个都无效，认为相等（使用上一次的稳定值）
|
|
95
|
-
var prevCustomValid = prevProps.customOptions && prevProps.customOptions.length > 1;
|
|
96
|
-
var nextCustomValid = nextProps.customOptions && nextProps.customOptions.length > 1;
|
|
97
|
-
if (prevCustomValid && nextCustomValid) {
|
|
98
|
-
if (!areArraysEqual(prevProps.customOptions, nextProps.customOptions)) {
|
|
99
|
-
return false;
|
|
100
|
-
}
|
|
101
|
-
} else if (prevCustomValid !== nextCustomValid) {
|
|
102
|
-
return false;
|
|
103
|
-
}
|
|
104
|
-
// 回调函数比较
|
|
105
|
-
// 由于我们已经用 ref 处理回调，即使引用变化也不会影响防抖逻辑
|
|
106
|
-
// 为了 memo 优化，我们只检查回调是否存在，不比较引用
|
|
107
|
-
var prevHasFilterChange = prevProps.onFilterChange !== undefined;
|
|
108
|
-
var nextHasFilterChange = nextProps.onFilterChange !== undefined;
|
|
109
|
-
if (prevHasFilterChange !== nextHasFilterChange) {
|
|
110
|
-
return false;
|
|
111
|
-
}
|
|
112
|
-
var prevHasSelectionChange = prevProps.onSelectionChange !== undefined;
|
|
113
|
-
var nextHasSelectionChange = nextProps.onSelectionChange !== undefined;
|
|
114
|
-
if (prevHasSelectionChange !== nextHasSelectionChange) {
|
|
115
|
-
return false;
|
|
116
|
-
}
|
|
117
|
-
// 所有关键属性都相同，可以跳过重新渲染
|
|
118
|
-
return true;
|
|
119
|
-
};
|
|
120
8
|
var ChartFilterComponent = function(param) {
|
|
121
9
|
var filterOptions = param.filterOptions, selectedFilter = param.selectedFilter, onFilterChange = param.onFilterChange, customOptions = param.customOptions, selectedCustomSelection = param.selectedCustomSelection, onSelectionChange = param.onSelectionChange, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_theme = param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme, _param_variant = param.variant, variant = _param_variant === void 0 ? 'default' : _param_variant;
|
|
122
|
-
var
|
|
10
|
+
var _customOptions_find, _i18n_locale;
|
|
123
11
|
var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
|
|
124
12
|
var i18n = useContext(I18nContext);
|
|
125
13
|
var prefixCls = getPrefixCls('chart-filter');
|
|
@@ -161,68 +49,27 @@ var ChartFilterComponent = function(param) {
|
|
|
161
49
|
debouncedFilterChange,
|
|
162
50
|
debouncedSelectionChange
|
|
163
51
|
]);
|
|
164
|
-
// 稳定化 filterOptions 和 customOptions，避免在流式更新时频繁变化导致组件跳动
|
|
165
|
-
// 使用 useState 保存稳定的值，只在内容真正变化时才更新
|
|
166
|
-
var _useState = _sliced_to_array(useState(function() {
|
|
167
|
-
return filterOptions && filterOptions.length > 1 ? filterOptions : undefined;
|
|
168
|
-
}), 2), stableFilterOptions = _useState[0], setStableFilterOptions = _useState[1];
|
|
169
|
-
var _useState1 = _sliced_to_array(useState(function() {
|
|
170
|
-
return customOptions && customOptions.length > 1 ? customOptions : undefined;
|
|
171
|
-
}), 2), stableCustomOptions = _useState1[0], setStableCustomOptions = _useState1[1];
|
|
172
|
-
// 使用 useRef 保存上一次的值用于内容比较
|
|
173
|
-
var prevFilterOptionsRef = useRef(filterOptions);
|
|
174
|
-
var prevCustomOptionsRef = useRef(customOptions);
|
|
175
|
-
// 当 filterOptions 变化时，只在内容真正变化时才更新
|
|
176
|
-
useEffect(function() {
|
|
177
|
-
if (filterOptions && filterOptions.length > 1) {
|
|
178
|
-
// 比较内容是否真的变化
|
|
179
|
-
var contentChanged = !areArraysEqual(prevFilterOptionsRef.current, filterOptions);
|
|
180
|
-
if (contentChanged) {
|
|
181
|
-
// 内容变化，更新稳定值
|
|
182
|
-
setStableFilterOptions(filterOptions);
|
|
183
|
-
prevFilterOptionsRef.current = filterOptions;
|
|
184
|
-
}
|
|
185
|
-
// 如果内容相同，不更新，避免不必要的重新渲染
|
|
186
|
-
} else if (filterOptions && filterOptions.length <= 1) {
|
|
187
|
-
// 如果新值无效（长度 <= 1），但之前有有效值，保持上一次的值（不更新）
|
|
188
|
-
// 这样 filter 不会消失
|
|
189
|
-
}
|
|
190
|
-
// 注意：如果 filterOptions 变为 undefined 或 null，我们不更新稳定值，保持上一次的值
|
|
191
|
-
}, [
|
|
192
|
-
filterOptions
|
|
193
|
-
]);
|
|
194
|
-
useEffect(function() {
|
|
195
|
-
if (customOptions && customOptions.length > 1) {
|
|
196
|
-
var contentChanged = !areArraysEqual(prevCustomOptionsRef.current, customOptions);
|
|
197
|
-
if (contentChanged) {
|
|
198
|
-
setStableCustomOptions(customOptions);
|
|
199
|
-
prevCustomOptionsRef.current = customOptions;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
}, [
|
|
203
|
-
customOptions
|
|
204
|
-
]);
|
|
205
52
|
var handleRegionChange = function(region) {
|
|
206
53
|
debouncedSelectionChange(region);
|
|
207
54
|
};
|
|
208
55
|
var handleFilterChange = function(value) {
|
|
209
56
|
debouncedFilterChange(value);
|
|
210
57
|
};
|
|
211
|
-
var hasMain = Array.isArray(
|
|
212
|
-
var hasSecondary = Array.isArray(
|
|
58
|
+
var hasMain = Array.isArray(filterOptions) && filterOptions.length > 1;
|
|
59
|
+
var hasSecondary = Array.isArray(customOptions) && customOptions.length > 1;
|
|
213
60
|
if (!hasMain && !hasSecondary) {
|
|
214
61
|
return null;
|
|
215
62
|
}
|
|
216
|
-
if (!
|
|
63
|
+
if (!filterOptions || filterOptions.length < 2) {
|
|
217
64
|
return null;
|
|
218
65
|
}
|
|
219
66
|
return wrapSSR(/*#__PURE__*/ React.createElement("div", {
|
|
220
67
|
className: classNames(prefixCls, "".concat(prefixCls, "-").concat(theme), "".concat(prefixCls, "-").concat(variant), hashId, className)
|
|
221
|
-
},
|
|
68
|
+
}, customOptions && customOptions.length > 1 && /*#__PURE__*/ React.createElement("div", {
|
|
222
69
|
className: classNames("".concat(prefixCls, "-region-filter"), hashId)
|
|
223
70
|
}, /*#__PURE__*/ React.createElement(Dropdown, {
|
|
224
71
|
menu: {
|
|
225
|
-
items:
|
|
72
|
+
items: customOptions.map(function(item) {
|
|
226
73
|
return {
|
|
227
74
|
key: item.key,
|
|
228
75
|
label: item.label,
|
|
@@ -244,12 +91,12 @@ var ChartFilterComponent = function(param) {
|
|
|
244
91
|
type: "default",
|
|
245
92
|
size: "small",
|
|
246
93
|
className: classNames("".concat(prefixCls, "-region-dropdown-btn"), hashId)
|
|
247
|
-
}, /*#__PURE__*/ React.createElement("span", null, ((
|
|
94
|
+
}, /*#__PURE__*/ React.createElement("span", null, ((_customOptions_find = customOptions.find(function(r) {
|
|
248
95
|
return r.key === selectedCustomSelection;
|
|
249
|
-
})) === null ||
|
|
96
|
+
})) === null || _customOptions_find === void 0 ? void 0 : _customOptions_find.label) || (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale.all) || '全部'), /*#__PURE__*/ React.createElement(ChevronDown, {
|
|
250
97
|
className: classNames("".concat(prefixCls, "-dropdown-icon"), hashId)
|
|
251
|
-
})))),
|
|
252
|
-
options:
|
|
98
|
+
})))), filterOptions && filterOptions.length > 1 && /*#__PURE__*/ React.createElement(Segmented, {
|
|
99
|
+
options: filterOptions || [],
|
|
253
100
|
value: selectedFilter,
|
|
254
101
|
size: "small",
|
|
255
102
|
className: classNames("".concat(prefixCls, "-segmented-filter"), 'custom-segmented', hashId),
|
|
@@ -258,6 +105,5 @@ var ChartFilterComponent = function(param) {
|
|
|
258
105
|
}
|
|
259
106
|
})));
|
|
260
107
|
};
|
|
261
|
-
|
|
262
|
-
var ChartFilter = /*#__PURE__*/ React.memo(ChartFilterComponent, arePropsEqual);
|
|
108
|
+
var ChartFilter = ChartFilterComponent;
|
|
263
109
|
export default ChartFilter;
|