@oceanbase/design 1.0.0-alpha.16 → 1.0.0-alpha.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.
- package/dist/design.min.js +1 -1
- package/es/alert/index.d.ts +1 -1
- package/es/alert/index.js +4 -2
- package/es/filter/components/FilterButton.js +1 -0
- package/es/filter/components/FilterCheckbox.js +29 -7
- package/es/filter/components/FilterWrap.js +30 -1
- package/es/filter/components/ResponsiveFilterGroup.js +251 -359
- package/es/filter/index.js +10 -6
- package/lib/alert/index.d.ts +1 -1
- package/lib/alert/index.js +3 -1
- package/lib/filter/components/FilterButton.js +1 -0
- package/lib/filter/components/FilterCheckbox.js +29 -7
- package/lib/filter/components/FilterWrap.js +28 -1
- package/lib/filter/components/ResponsiveFilterGroup.js +213 -340
- package/lib/filter/index.js +10 -6
- package/package.json +2 -2
package/es/alert/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export interface AlertProps extends AntAlertProps {
|
|
|
6
6
|
mini?: boolean;
|
|
7
7
|
}
|
|
8
8
|
declare const Alert: {
|
|
9
|
-
({ type: typeProp, showIcon, closable, ghost, mini, banner, action, prefixCls: customizePrefixCls, className, ...restProps }: AlertProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
9
|
+
({ type: typeProp, showIcon, closable, closeIcon, ghost, mini, banner, action, prefixCls: customizePrefixCls, className, ...restProps }: AlertProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
10
10
|
ErrorBoundary: typeof import("antd/es/alert/ErrorBoundary").default;
|
|
11
11
|
displayName: string;
|
|
12
12
|
};
|
package/es/alert/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
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); }
|
|
3
|
-
var _excluded = ["type", "showIcon", "closable", "ghost", "mini", "banner", "action", "prefixCls", "className"];
|
|
3
|
+
var _excluded = ["type", "showIcon", "closable", "closeIcon", "ghost", "mini", "banner", "action", "prefixCls", "className"];
|
|
4
4
|
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; }
|
|
5
5
|
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; }
|
|
6
6
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -33,6 +33,7 @@ var Alert = function Alert(_ref) {
|
|
|
33
33
|
_ref$showIcon = _ref.showIcon,
|
|
34
34
|
showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
|
|
35
35
|
closable = _ref.closable,
|
|
36
|
+
closeIcon = _ref.closeIcon,
|
|
36
37
|
ghost = _ref.ghost,
|
|
37
38
|
mini = _ref.mini,
|
|
38
39
|
banner = _ref.banner,
|
|
@@ -48,11 +49,12 @@ var Alert = function Alert(_ref) {
|
|
|
48
49
|
var _useStyle = useStyle(prefixCls),
|
|
49
50
|
_useStyle2 = _slicedToArray(_useStyle, 1),
|
|
50
51
|
wrapCSSVar = _useStyle2[0];
|
|
51
|
-
var alertCls = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-closable"), closable), "".concat(prefixCls, "-ghost"), ghost), "".concat(prefixCls, "-mini"), mini), "".concat(prefixCls, "-with-action"), !!action), className);
|
|
52
|
+
var alertCls = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-closable"), closable || closeIcon), "".concat(prefixCls, "-ghost"), ghost), "".concat(prefixCls, "-mini"), mini), "".concat(prefixCls, "-with-action"), !!action), className);
|
|
52
53
|
return wrapCSSVar( /*#__PURE__*/_jsx(AntAlert, _objectSpread({
|
|
53
54
|
type: type,
|
|
54
55
|
showIcon: showIcon,
|
|
55
56
|
closable: closable,
|
|
57
|
+
closeIcon: closeIcon,
|
|
56
58
|
banner: banner,
|
|
57
59
|
icon: iconMapOutlined[type],
|
|
58
60
|
action: action,
|
|
@@ -177,8 +177,30 @@ var FilterCheckbox = function FilterCheckbox(_ref) {
|
|
|
177
177
|
var iconWidth = 10;
|
|
178
178
|
var iconWidthUnselected = 8;
|
|
179
179
|
var overlapDistance = 6;
|
|
180
|
-
|
|
181
|
-
|
|
180
|
+
|
|
181
|
+
// 按颜色分组选项,并检查每种颜色是否有选中的选项
|
|
182
|
+
var colorGroups = [];
|
|
183
|
+
var colorMap = new Map();
|
|
184
|
+
options.forEach(function (option) {
|
|
185
|
+
if (option.color) {
|
|
186
|
+
var isSelected = selectedValues.includes(option.value);
|
|
187
|
+
var existing = colorMap.get(option.color);
|
|
188
|
+
if (existing) {
|
|
189
|
+
// 如果已有该颜色,更新选中状态(只要有一个选中即为选中)
|
|
190
|
+
if (isSelected) {
|
|
191
|
+
existing.hasSelected = true;
|
|
192
|
+
}
|
|
193
|
+
} else {
|
|
194
|
+
var group = {
|
|
195
|
+
color: option.color,
|
|
196
|
+
hasSelected: isSelected
|
|
197
|
+
};
|
|
198
|
+
colorMap.set(option.color, group);
|
|
199
|
+
colorGroups.push(group);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
var containerWidth = iconWidth + (colorGroups.length - 1) * overlapDistance + 1;
|
|
182
204
|
return /*#__PURE__*/_jsx("div", {
|
|
183
205
|
style: {
|
|
184
206
|
position: 'relative',
|
|
@@ -187,8 +209,8 @@ var FilterCheckbox = function FilterCheckbox(_ref) {
|
|
|
187
209
|
display: 'flex',
|
|
188
210
|
alignItems: 'center'
|
|
189
211
|
},
|
|
190
|
-
children:
|
|
191
|
-
var isSelected =
|
|
212
|
+
children: colorGroups.map(function (group, index) {
|
|
213
|
+
var isSelected = group.hasSelected;
|
|
192
214
|
var baseSize = isSelected ? iconWidth : iconWidthUnselected;
|
|
193
215
|
return isSelected ? /*#__PURE__*/_jsx("div", {
|
|
194
216
|
style: {
|
|
@@ -198,10 +220,10 @@ var FilterCheckbox = function FilterCheckbox(_ref) {
|
|
|
198
220
|
height: baseSize,
|
|
199
221
|
borderRadius: '50%',
|
|
200
222
|
zIndex: index,
|
|
201
|
-
backgroundColor:
|
|
223
|
+
backgroundColor: group.color,
|
|
202
224
|
border: "1px solid ".concat(token.white)
|
|
203
225
|
}
|
|
204
|
-
},
|
|
226
|
+
}, group.color) : /*#__PURE__*/_jsx("div", {
|
|
205
227
|
style: {
|
|
206
228
|
position: 'absolute',
|
|
207
229
|
left: index * overlapDistance,
|
|
@@ -218,7 +240,7 @@ var FilterCheckbox = function FilterCheckbox(_ref) {
|
|
|
218
240
|
border: "1px solid ".concat(token.colorBorderSecondary)
|
|
219
241
|
}
|
|
220
242
|
})
|
|
221
|
-
},
|
|
243
|
+
}, group.color);
|
|
222
244
|
})
|
|
223
245
|
});
|
|
224
246
|
}, [isStatusMode, options, selectedValues, token]);
|
|
@@ -67,12 +67,41 @@ var FilterWrap = function FilterWrap(_ref) {
|
|
|
67
67
|
};
|
|
68
68
|
}));
|
|
69
69
|
}, [collapsed, contextValue.filterValues]);
|
|
70
|
-
var
|
|
70
|
+
var allFilterValues = useMemo(function () {
|
|
71
71
|
if (!collapsed) return [];
|
|
72
72
|
return contextValue.filterValues || [];
|
|
73
73
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
74
74
|
}, [collapsed, stableFilterValuesKey]);
|
|
75
75
|
|
|
76
|
+
// 从 children 中递归提取 label 集合,用于过滤 filterValues 只保留当前折叠项的值
|
|
77
|
+
// children 结构可能是 Fragment → Form.Item → Filter.Select,需要递归查找
|
|
78
|
+
var childLabelSet = useMemo(function () {
|
|
79
|
+
var labels = new Set();
|
|
80
|
+
var extractLabel = function extractLabel(node) {
|
|
81
|
+
if (! /*#__PURE__*/isValidElement(node)) return;
|
|
82
|
+
var props = node.props;
|
|
83
|
+
if (props.label !== undefined) {
|
|
84
|
+
labels.add(props.label);
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (props.children) {
|
|
88
|
+
if ( /*#__PURE__*/isValidElement(props.children)) {
|
|
89
|
+
extractLabel(props.children);
|
|
90
|
+
} else if (Array.isArray(props.children)) {
|
|
91
|
+
props.children.forEach(extractLabel);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
Children.forEach(children, extractLabel);
|
|
96
|
+
return labels;
|
|
97
|
+
}, [children]);
|
|
98
|
+
var filterValues = useMemo(function () {
|
|
99
|
+
if (childLabelSet.size === 0) return allFilterValues;
|
|
100
|
+
return allFilterValues.filter(function (item) {
|
|
101
|
+
return childLabelSet.has(item.label);
|
|
102
|
+
});
|
|
103
|
+
}, [allFilterValues, childLabelSet]);
|
|
104
|
+
|
|
76
105
|
// 格式化值用于 Tooltip 显示
|
|
77
106
|
var formatValueForTooltip = useCallback(function (value, options, componentName) {
|
|
78
107
|
if (!value) return '';
|