@oceanbase/design 1.0.0-alpha.15 → 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.
Files changed (79) hide show
  1. package/dist/design.min.js +1 -1
  2. package/es/alert/index.d.ts +1 -1
  3. package/es/alert/index.js +4 -2
  4. package/es/filter/components/CountNumber.js +2 -1
  5. package/es/filter/components/FilterButton.d.ts +2 -0
  6. package/es/filter/components/FilterButton.js +6 -3
  7. package/es/filter/components/FilterCascader/components/CascaderOption/OptionCheckbox.d.ts +20 -0
  8. package/es/filter/components/FilterCascader/components/CascaderOption/OptionCheckbox.js +101 -0
  9. package/es/filter/components/FilterCascader/components/CascaderOption/OptionItem.d.ts +13 -0
  10. package/es/filter/components/FilterCascader/components/CascaderOption/OptionItem.js +44 -0
  11. package/es/filter/components/FilterCascader/components/FlatCascaderContent/index.d.ts +16 -0
  12. package/es/filter/components/FilterCascader/components/FlatCascaderContent/index.js +64 -0
  13. package/es/filter/components/FilterCascader/components/NormalCascaderContent.d.ts +24 -0
  14. package/es/filter/components/FilterCascader/components/NormalCascaderContent.js +284 -0
  15. package/es/filter/components/FilterCascader/constants.d.ts +7 -0
  16. package/es/filter/components/FilterCascader/constants.js +8 -0
  17. package/es/filter/components/FilterCascader/hooks/useCascaderCallbacks.d.ts +12 -0
  18. package/es/filter/components/FilterCascader/hooks/useCascaderCallbacks.js +101 -0
  19. package/es/filter/components/FilterCascader/hooks/useCascaderLabels.d.ts +9 -0
  20. package/es/filter/components/FilterCascader/hooks/useCascaderLabels.js +50 -0
  21. package/es/filter/components/FilterCascader/hooks/useNormalizedValue.d.ts +7 -0
  22. package/es/filter/components/FilterCascader/hooks/useNormalizedValue.js +53 -0
  23. package/es/filter/components/FilterCascader/index.d.ts +5 -0
  24. package/es/filter/components/FilterCascader/index.js +317 -0
  25. package/es/filter/components/FilterCascader/types.d.ts +56 -0
  26. package/es/filter/components/FilterCascader/types.js +1 -0
  27. package/es/filter/components/FilterCascader/utils/countUtils.d.ts +13 -0
  28. package/es/filter/components/FilterCascader/utils/countUtils.js +48 -0
  29. package/es/filter/components/FilterCascader/utils/pathUtils.d.ts +17 -0
  30. package/es/filter/components/FilterCascader/utils/pathUtils.js +91 -0
  31. package/es/filter/components/FilterCheckbox.js +29 -7
  32. package/es/filter/components/FilterWrap.js +30 -1
  33. package/es/filter/components/ResponsiveFilterGroup.js +252 -359
  34. package/es/filter/index.d.ts +1 -1
  35. package/es/filter/index.js +11 -7
  36. package/es/filter/style/index.js +9 -2
  37. package/es/filter/type.d.ts +5 -0
  38. package/es/table/index.d.ts +2 -2
  39. package/lib/alert/index.d.ts +1 -1
  40. package/lib/alert/index.js +3 -1
  41. package/lib/filter/components/CountNumber.js +2 -1
  42. package/lib/filter/components/FilterButton.d.ts +2 -0
  43. package/lib/filter/components/FilterButton.js +4 -2
  44. package/lib/filter/components/FilterCascader/components/CascaderOption/OptionCheckbox.d.ts +20 -0
  45. package/lib/filter/components/FilterCascader/components/CascaderOption/OptionCheckbox.js +91 -0
  46. package/lib/filter/components/FilterCascader/components/CascaderOption/OptionItem.d.ts +13 -0
  47. package/lib/filter/components/FilterCascader/components/CascaderOption/OptionItem.js +51 -0
  48. package/lib/filter/components/FilterCascader/components/FlatCascaderContent/index.d.ts +16 -0
  49. package/lib/filter/components/FilterCascader/components/FlatCascaderContent/index.js +70 -0
  50. package/lib/filter/components/FilterCascader/components/NormalCascaderContent.d.ts +24 -0
  51. package/lib/filter/components/FilterCascader/components/NormalCascaderContent.js +263 -0
  52. package/lib/filter/components/FilterCascader/constants.d.ts +7 -0
  53. package/lib/filter/components/FilterCascader/constants.js +14 -0
  54. package/lib/filter/components/FilterCascader/hooks/useCascaderCallbacks.d.ts +12 -0
  55. package/lib/filter/components/FilterCascader/hooks/useCascaderCallbacks.js +81 -0
  56. package/lib/filter/components/FilterCascader/hooks/useCascaderLabels.d.ts +9 -0
  57. package/lib/filter/components/FilterCascader/hooks/useCascaderLabels.js +56 -0
  58. package/lib/filter/components/FilterCascader/hooks/useNormalizedValue.d.ts +7 -0
  59. package/lib/filter/components/FilterCascader/hooks/useNormalizedValue.js +48 -0
  60. package/lib/filter/components/FilterCascader/index.d.ts +5 -0
  61. package/lib/filter/components/FilterCascader/index.js +298 -0
  62. package/lib/filter/components/FilterCascader/types.d.ts +56 -0
  63. package/lib/filter/components/FilterCascader/types.js +5 -0
  64. package/lib/filter/components/FilterCascader/utils/countUtils.d.ts +13 -0
  65. package/lib/filter/components/FilterCascader/utils/countUtils.js +49 -0
  66. package/lib/filter/components/FilterCascader/utils/pathUtils.d.ts +17 -0
  67. package/lib/filter/components/FilterCascader/utils/pathUtils.js +56 -0
  68. package/lib/filter/components/FilterCheckbox.js +29 -7
  69. package/lib/filter/components/FilterWrap.js +28 -1
  70. package/lib/filter/components/ResponsiveFilterGroup.js +214 -340
  71. package/lib/filter/index.d.ts +1 -1
  72. package/lib/filter/index.js +11 -7
  73. package/lib/filter/style/index.js +10 -1
  74. package/lib/filter/type.d.ts +5 -0
  75. package/package.json +3 -3
  76. package/es/filter/components/FilterCascader.d.ts +0 -31
  77. package/es/filter/components/FilterCascader.js +0 -529
  78. package/lib/filter/components/FilterCascader.d.ts +0 -31
  79. package/lib/filter/components/FilterCascader.js +0 -449
@@ -14,7 +14,7 @@ declare const Filter: {
14
14
  Checkbox: import("react").NamedExoticComponent<import("./components/FilterCheckbox").FilterCheckboxProps>;
15
15
  Range: import("react").FC<import("./components/FilterRange").FilterRangeProps>;
16
16
  Wrap: import("react").FC<import("./components/FilterWrap").FilterWrapProps>;
17
- Cascader: import("react").FC<import("./components/FilterCascader").FilterCascaderProps>;
17
+ Cascader: import("react").FC<import("./components/FilterCascader/types").FilterCascaderProps>;
18
18
  Switch: import("react").FC<import("./components/FilterSwitch").FilterSwitchProps>;
19
19
  Input: import("react").FC<import("./components/FilterInput").FilterInputProps>;
20
20
  ResponsiveGroup: import("react").FC<import("./components/ResponsiveFilterGroup").ResponsiveFilterGroupProps>;
@@ -16,7 +16,7 @@ Object.defineProperty(exports, "useFilterContext", {
16
16
  return _FilterContext.useFilterContext;
17
17
  }
18
18
  });
19
- var _FilterCascader = _interopRequireDefault(require("./components/FilterCascader"));
19
+ var _index = _interopRequireDefault(require("./components/FilterCascader/index"));
20
20
  var _FilterCheckbox = _interopRequireDefault(require("./components/FilterCheckbox"));
21
21
  var _FilterRange = _interopRequireDefault(require("./components/FilterRange"));
22
22
  var _FilterInput = _interopRequireDefault(require("./components/FilterInput"));
@@ -26,14 +26,18 @@ var _FilterWrap = _interopRequireDefault(require("./components/FilterWrap"));
26
26
  var _ResponsiveFilterGroup = _interopRequireDefault(require("./components/ResponsiveFilterGroup"));
27
27
  var _FilterContext = require("./FilterContext");
28
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
+ function markAsFilterComponent(component) {
30
+ component.__isFilterComponent = true;
31
+ return component;
32
+ }
29
33
  const Filter = {
30
- Select: _FilterSelect.default,
31
- Checkbox: _FilterCheckbox.default,
32
- Range: _FilterRange.default,
34
+ Select: markAsFilterComponent(_FilterSelect.default),
35
+ Checkbox: markAsFilterComponent(_FilterCheckbox.default),
36
+ Range: markAsFilterComponent(_FilterRange.default),
33
37
  Wrap: _FilterWrap.default,
34
- Cascader: _FilterCascader.default,
35
- Switch: _FilterSwitch.default,
36
- Input: _FilterInput.default,
38
+ Cascader: markAsFilterComponent(_index.default),
39
+ Switch: markAsFilterComponent(_FilterSwitch.default),
40
+ Input: markAsFilterComponent(_FilterInput.default),
37
41
  ResponsiveGroup: _ResponsiveFilterGroup.default
38
42
  };
39
43
  var _default = exports.default = Filter;
@@ -20,6 +20,7 @@ const genSelectOptionStyle = token => {
20
20
  paddingInline: token.paddingXS,
21
21
  cursor: 'pointer',
22
22
  borderRadius: token.borderRadius,
23
+ transition: `background-color ${token.motionDurationMid} ease-in-out`,
23
24
  '&:hover': {
24
25
  backgroundColor: token.colorBgTextHover,
25
26
  // hover 时图标切换效果
@@ -35,6 +36,13 @@ const genSelectOptionStyle = token => {
35
36
  // 有选中子项的父级选项样式
36
37
  [`&${componentCls}-has-selected`]: {
37
38
  backgroundColor: token.colorBgTextHover
39
+ },
40
+ // flat 模式下激活的父节点样式(优先级更高)
41
+ [`&${componentCls}-flat-active`]: {
42
+ backgroundColor: token.colorBgTextHover,
43
+ '&:hover': {
44
+ backgroundColor: token.colorBgTextHover
45
+ }
38
46
  }
39
47
  }
40
48
  };
@@ -124,7 +132,8 @@ const genIconStyle = token => {
124
132
  },
125
133
  [`${componentCls}-count`]: {
126
134
  ...baseCountStyle,
127
- backgroundColor: 'var(--ob-color-border-container)'
135
+ backgroundColor: 'var(--ob-color-border-container)',
136
+ padding: '0px 2px'
128
137
  },
129
138
  [`${componentCls}-arrow-icon`]: {
130
139
  opacity: 1,
@@ -31,4 +31,9 @@ export interface InternalFilterProps {
31
31
  * 是否为 Wrap 组件透传,默认 false
32
32
  */
33
33
  _isInWrapComponent?: boolean;
34
+ /**
35
+ * @internal
36
+ * 是否为扁平化模式,默认 false
37
+ */
38
+ _isFlat?: boolean;
34
39
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oceanbase/design",
3
- "version": "1.0.0-alpha.15",
3
+ "version": "1.0.0-alpha.17",
4
4
  "description": "The Design System of OceanBase",
5
5
  "keywords": [
6
6
  "oceanbase",
@@ -41,7 +41,7 @@
41
41
  "@ctrl/tinycolor": "^4.2.0",
42
42
  "@inline-svg-unique-id/react": "^1.2.3",
43
43
  "@oceanbase/aliyun-theme": "^0.1.6",
44
- "@oceanbase/icons": "^1.0.0-alpha.0",
44
+ "@oceanbase/icons": "^1.0.0-alpha.1",
45
45
  "@oceanbase/util": "^1.0.0-alpha.2",
46
46
  "ahooks": "^2.10.14",
47
47
  "antd": "^5.29.3",
@@ -66,5 +66,5 @@
66
66
  "react": ">=16.9.0",
67
67
  "react-dom": ">=16.9.0"
68
68
  },
69
- "gitHead": "a445df617325d3e75fd7a8182ae8eb8d83559ff7"
69
+ "gitHead": "e23471bfca999f9dd9af8fd7c68c4f5ce3c848da"
70
70
  }
@@ -1,31 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- import React from 'react';
3
- import type { BaseFilterProps, InternalFilterProps } from '../type';
4
- export interface CascaderOption {
5
- label?: ReactNode;
6
- value: string;
7
- disabled?: boolean;
8
- children?: {
9
- label?: ReactNode;
10
- value: string;
11
- disabled?: boolean;
12
- }[];
13
- }
14
- export interface FilterCascaderProps extends BaseFilterProps, InternalFilterProps {
15
- /** 是否多选 */
16
- multiple?: boolean;
17
- /** 选项列表 */
18
- options?: CascaderOption[];
19
- /** 当前选中值,格式为 [[parentValue, childValue], ...] */
20
- value?: string[][];
21
- /** 值变化回调 */
22
- onChange?: (value: string[][]) => void;
23
- /** 是否显示计数,可传入 { showTotal: true } 同时显示总数 */
24
- count?: boolean | {
25
- showTotal?: boolean;
26
- };
27
- /** 是否显示搜索框,默认为 false */
28
- showSearch?: boolean;
29
- }
30
- declare const FilterCascader: React.FC<FilterCascaderProps>;
31
- export default FilterCascader;
@@ -1,529 +0,0 @@
1
- "use client";
2
- var _excluded = ["options", "value", "onChange", "icon", "label", "bordered", "multiple", "count", "showSearch", "_isCollapsed"],
3
- _excluded2 = ["onOpenChange"];
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
- 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
- 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; }
7
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
8
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
9
- function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
10
- 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."); }
11
- function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
12
- function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
13
- 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); }
14
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
15
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
16
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
17
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
18
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
19
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
20
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
21
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
22
- import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
23
- import { Flex, Popover } from 'antd';
24
- import Checkbox from "../../checkbox";
25
- import theme from "../../theme";
26
- import Input from "../../input";
27
- import Empty from "../../empty";
28
- import { CheckOutlined, CloseOutlined, RightOutlined, SearchOutlined } from '@oceanbase/icons';
29
- import classNames from 'classnames';
30
- import { useControlledState } from "../hooks/useControlledState";
31
- import { useFilterContext } from "../FilterContext";
32
- import { useFilterCollapsed } from "../hooks/useFilterCollapsed";
33
- import { useFilterTooltip } from "../hooks/useFilterTooltip";
34
- import useFilterStyle, { getFilterCls } from "../style";
35
- import { generateFilterId, getPlaceholder, getStableOptionsKey, getWrappedValueStyle, normalizeLabel } from "../utils";
36
- import CountNumber from "./CountNumber";
37
- import FilterButton from "./FilterButton";
38
- import WrappedTagsDisplay from "./WrappedTagsDisplay";
39
- import { jsx as _jsx } from "react/jsx-runtime";
40
- import { Fragment as _Fragment } from "react/jsx-runtime";
41
- import { jsxs as _jsxs } from "react/jsx-runtime";
42
- var FilterCascader = function FilterCascader(_ref) {
43
- var _count$showTotal;
44
- var _ref$options = _ref.options,
45
- options = _ref$options === void 0 ? [] : _ref$options,
46
- value = _ref.value,
47
- onChange = _ref.onChange,
48
- icon = _ref.icon,
49
- label = _ref.label,
50
- _ref$bordered = _ref.bordered,
51
- bordered = _ref$bordered === void 0 ? true : _ref$bordered,
52
- _ref$multiple = _ref.multiple,
53
- multiple = _ref$multiple === void 0 ? false : _ref$multiple,
54
- _ref$count = _ref.count,
55
- count = _ref$count === void 0 ? false : _ref$count,
56
- _ref$showSearch = _ref.showSearch,
57
- showSearch = _ref$showSearch === void 0 ? false : _ref$showSearch,
58
- _ref$_isCollapsed = _ref._isCollapsed,
59
- _isCollapsed = _ref$_isCollapsed === void 0 ? false : _ref$_isCollapsed,
60
- restProps = _objectWithoutProperties(_ref, _excluded);
61
- var isCollapsed = useFilterCollapsed(_isCollapsed);
62
- var _useFilterStyle = useFilterStyle(),
63
- prefixCls = _useFilterStyle.prefixCls;
64
- var _theme$useToken = theme.useToken(),
65
- token = _theme$useToken.token;
66
- var filterButtonRef = useRef(null);
67
- var _useFilterContext = useFilterContext(),
68
- updateFilterValue = _useFilterContext.updateFilterValue;
69
- var filterId = useMemo(function () {
70
- return generateFilterId('cascader', label);
71
- }, [label]);
72
- var stableOptionsKey = useMemo(function () {
73
- return getStableOptionsKey(options);
74
- }, [options]);
75
- // 用于控制二级 Popover 的打开状态(仅在单选模式下使用)
76
- var _useState = useState(null),
77
- _useState2 = _slicedToArray(_useState, 2),
78
- openPopoverKey = _useState2[0],
79
- setOpenPopoverKey = _useState2[1];
80
-
81
- // 搜索关键词状态
82
- var _useState3 = useState(''),
83
- _useState4 = _slicedToArray(_useState3, 2),
84
- searchKeyword = _useState4[0],
85
- setSearchKeyword = _useState4[1];
86
-
87
- // 从 restProps 中排除 onOpenChange,避免类型冲突
88
- var externalOnOpenChange = restProps.onOpenChange,
89
- filterButtonProps = _objectWithoutProperties(restProps, _excluded2);
90
-
91
- // 解析 count 配置
92
- var showCount = !!count;
93
- var showTotal = _typeof(count) === 'object' ? (_count$showTotal = count.showTotal) !== null && _count$showTotal !== void 0 ? _count$showTotal : false : false;
94
-
95
- // 使用受控状态 hook
96
- var _useControlledState = useControlledState(value, [], onChange),
97
- _useControlledState2 = _slicedToArray(_useControlledState, 2),
98
- currentValue = _useControlledState2[0],
99
- setValue = _useControlledState2[1];
100
-
101
- // 获取当前选中值的 label(用于单选模式显示)
102
- var getSelectedLabel = useCallback(function () {
103
- if (isCollapsed && currentValue.length === 0) {
104
- return '';
105
- }
106
- if (currentValue.length === 0) {
107
- return label;
108
- }
109
- if (!multiple && currentValue.length === 1) {
110
- var _parentOption$childre;
111
- var _currentValue$ = _slicedToArray(currentValue[0], 2),
112
- parentValue = _currentValue$[0],
113
- childValue = _currentValue$[1];
114
- var parentOption = options.find(function (opt) {
115
- return opt.value === parentValue;
116
- });
117
- var childOption = parentOption === null || parentOption === void 0 || (_parentOption$childre = parentOption.children) === null || _parentOption$childre === void 0 ? void 0 : _parentOption$childre.find(function (child) {
118
- return child.value === childValue;
119
- });
120
- return (childOption === null || childOption === void 0 ? void 0 : childOption.label) || label;
121
- }
122
- return label;
123
- }, [currentValue, isCollapsed, label, multiple, options]);
124
-
125
- // 获取选中值的 tags(用于多选模式 Tag 显示)
126
- var getSelectedTags = useCallback(function () {
127
- return currentValue.map(function (_ref2, index) {
128
- var _parentOption$childre2;
129
- var _ref3 = _slicedToArray(_ref2, 2),
130
- parentValue = _ref3[0],
131
- childValue = _ref3[1];
132
- var parentOption = options.find(function (opt) {
133
- return opt.value === parentValue;
134
- });
135
- var childOption = parentOption === null || parentOption === void 0 || (_parentOption$childre2 = parentOption.children) === null || _parentOption$childre2 === void 0 ? void 0 : _parentOption$childre2.find(function (child) {
136
- return child.value === childValue;
137
- });
138
- return {
139
- label: (childOption === null || childOption === void 0 ? void 0 : childOption.label) || childValue,
140
- value: "".concat(parentValue, "::").concat(childValue, "::").concat(index),
141
- parentValue: parentValue,
142
- childValue: childValue
143
- };
144
- });
145
- }, [currentValue, options]);
146
-
147
- // 移除某个选中的值
148
- var handleRemoveTag = useCallback(function (tagValue) {
149
- var parts = tagValue.split('::');
150
- if (parts.length >= 2) {
151
- var _parts = _slicedToArray(parts, 2),
152
- parentValue = _parts[0],
153
- childValue = _parts[1];
154
- var newValueList = currentValue.filter(function (item) {
155
- return !(item[0] === parentValue && item[1] === childValue);
156
- });
157
- setValue(newValueList);
158
- }
159
- }, [currentValue, setValue]);
160
-
161
- // 使用 Tooltip hook
162
- var _useFilterTooltip = useFilterTooltip({
163
- hasValue: currentValue.length > 0,
164
- label: label,
165
- content: currentValue.length > 0 ? getSelectedTags().map(function (i) {
166
- return i.label;
167
- }).join(', ') : null,
168
- disabled: isCollapsed
169
- }),
170
- onPopoverOpenChange = _useFilterTooltip.onPopoverOpenChange,
171
- wrapWithTooltip = _useFilterTooltip.wrapWithTooltip;
172
-
173
- // 处理主弹窗状态变化
174
- var handleMainPopoverOpenChange = useCallback(function (open) {
175
- onPopoverOpenChange(open);
176
- // 当主弹窗关闭时,同步关闭二级弹窗(单选模式)
177
- if (!open && !multiple) {
178
- setOpenPopoverKey(null);
179
- }
180
- // 弹窗关闭时清空搜索关键词
181
- if (!open) {
182
- setSearchKeyword('');
183
- }
184
- externalOnOpenChange === null || externalOnOpenChange === void 0 || externalOnOpenChange(open);
185
- }, [onPopoverOpenChange, externalOnOpenChange, multiple]);
186
-
187
- // 当值变化时,更新 context 中的值
188
- useEffect(function () {
189
- if (isCollapsed && updateFilterValue) {
190
- updateFilterValue(filterId, label, currentValue, options, 'cascader');
191
- }
192
- }, [isCollapsed, updateFilterValue, filterId, label, currentValue, options]);
193
- var handleChange = useCallback(function (parentValue, childValue) {
194
- var _parentOption$childre3;
195
- var parentOption = options.find(function (opt) {
196
- return opt.value === parentValue;
197
- });
198
- var childOption = parentOption === null || parentOption === void 0 || (_parentOption$childre3 = parentOption.children) === null || _parentOption$childre3 === void 0 ? void 0 : _parentOption$childre3.find(function (child) {
199
- return child.value === childValue;
200
- });
201
- if (parentOption !== null && parentOption !== void 0 && parentOption.disabled || childOption !== null && childOption !== void 0 && childOption.disabled) {
202
- return;
203
- }
204
- if (multiple) {
205
- var existingIndex = currentValue.findIndex(function (item) {
206
- return item[0] === parentValue && item[1] === childValue;
207
- });
208
- var newValueList;
209
- if (existingIndex !== -1) {
210
- newValueList = currentValue.filter(function (_, index) {
211
- return index !== existingIndex;
212
- });
213
- } else {
214
- newValueList = [].concat(_toConsumableArray(currentValue), [[parentValue, childValue]]);
215
- }
216
- setValue(newValueList);
217
- } else {
218
- var isCurrentSelected = currentValue.length === 1 && currentValue[0][0] === parentValue && currentValue[0][1] === childValue;
219
- var _newValueList;
220
- if (isCurrentSelected) {
221
- _newValueList = [];
222
- } else {
223
- _newValueList = [[parentValue, childValue]];
224
- }
225
- setValue(_newValueList);
226
- setOpenPopoverKey(null);
227
- setTimeout(function () {
228
- var _filterButtonRef$curr;
229
- (_filterButtonRef$curr = filterButtonRef.current) === null || _filterButtonRef$curr === void 0 || _filterButtonRef$curr.closePopover();
230
- }, 0);
231
- }
232
- }, [currentValue, multiple, setValue, options]);
233
- var clearByParent = useCallback(function (parentValue) {
234
- var newValueList = currentValue.filter(function (item) {
235
- return item[0] !== parentValue;
236
- });
237
- setValue(newValueList);
238
- }, [currentValue, setValue]);
239
- var handleClear = useCallback(function () {
240
- setValue([]);
241
- }, [setValue]);
242
- var selectAllChildren = useCallback(function (option) {
243
- var _option$children;
244
- if (option.disabled) {
245
- return;
246
- }
247
- var otherValues = currentValue.filter(function (item) {
248
- return item[0] !== option.value;
249
- });
250
-
251
- // 当搜索时,只选择当前显示的子选项(filteredOptions 中的)
252
- var childrenToSelect = ((_option$children = option.children) === null || _option$children === void 0 ? void 0 : _option$children.filter(function (child) {
253
- return !child.disabled;
254
- })) || [];
255
- var allChildValues = childrenToSelect.map(function (child) {
256
- return [option.value, child.value];
257
- });
258
- var newValueList = [].concat(_toConsumableArray(otherValues), _toConsumableArray(allChildValues));
259
- setValue(newValueList);
260
- }, [currentValue, setValue]);
261
-
262
- // 根据搜索关键词过滤选项(同时搜索父级和子级)
263
- var filteredOptions = useMemo(function () {
264
- if (!showSearch || !searchKeyword) return options;
265
- var lowerKeyword = searchKeyword.toLowerCase().trim();
266
- return options.map(function (option) {
267
- var _option$children2;
268
- var parentLabel = normalizeLabel(option.label).toLowerCase();
269
- var parentMatches = parentLabel.includes(lowerKeyword);
270
-
271
- // 过滤子级选项
272
- var filteredChildren = (_option$children2 = option.children) === null || _option$children2 === void 0 ? void 0 : _option$children2.filter(function (child) {
273
- var childLabel = normalizeLabel(child.label).toLowerCase();
274
- return childLabel.includes(lowerKeyword);
275
- });
276
-
277
- // 如果父级匹配或有匹配的子级,则保留该选项
278
- if (parentMatches || filteredChildren && filteredChildren.length > 0) {
279
- return _objectSpread(_objectSpread({}, option), {}, {
280
- // 如果父级不匹配但子级匹配,只显示匹配的子级
281
- children: parentMatches ? option.children : filteredChildren
282
- });
283
- }
284
- return null;
285
- }).filter(function (option) {
286
- return option !== null;
287
- });
288
- }, [showSearch, searchKeyword, options]);
289
-
290
- // 渲染弹框内容
291
- var renderContent = /*#__PURE__*/_jsxs("div", {
292
- style: {
293
- padding: '8px 0px',
294
- maxHeight: 300,
295
- overflowY: 'auto'
296
- },
297
- children: [showSearch && /*#__PURE__*/_jsx("div", {
298
- style: {
299
- marginInline: 12,
300
- marginBottom: 8
301
- },
302
- children: /*#__PURE__*/_jsx(Input, {
303
- placeholder: "\u641C\u7D22",
304
- prefix: /*#__PURE__*/_jsx(SearchOutlined, {}),
305
- allowClear: true,
306
- value: searchKeyword,
307
- onChange: function onChange(e) {
308
- return setSearchKeyword(e.target.value);
309
- },
310
- onClick: function onClick(e) {
311
- return e.stopPropagation();
312
- }
313
- })
314
- }), filteredOptions.length === 0 ? /*#__PURE__*/_jsx(Empty, {
315
- image: Empty.PRESENTED_IMAGE_SIMPLE,
316
- description: "\u65E0\u5339\u914D\u7ED3\u679C",
317
- style: {
318
- padding: '16px 0'
319
- }
320
- }) : filteredOptions.map(function (option) {
321
- var _option$children3;
322
- var selectedChildren = currentValue.filter(function (item) {
323
- return item[0] === option.value;
324
- }).map(function (item) {
325
- return item[1];
326
- });
327
- var hasSelectedChildren = selectedChildren.length > 0;
328
- var allChildrenSelected = multiple && option.children && option.children.length > 0 && selectedChildren.length === option.children.length;
329
- return /*#__PURE__*/_jsx(Popover, {
330
- placement: "rightTop",
331
- trigger: 'hover',
332
- arrow: false,
333
- open: option !== null && option !== void 0 && option.disabled ? false : multiple ? undefined : openPopoverKey === option.value,
334
- onOpenChange: multiple ? undefined : function (open) {
335
- if (!open) {
336
- setOpenPopoverKey(null);
337
- } else {
338
- setOpenPopoverKey(option.value);
339
- }
340
- },
341
- content: (_option$children3 = option.children) === null || _option$children3 === void 0 ? void 0 : _option$children3.map(function (child) {
342
- var isSelected = selectedChildren.includes(child.value);
343
- var isChildDisabled = child.disabled || false;
344
- return /*#__PURE__*/_jsx(Flex, {
345
- gap: 8,
346
- className: getFilterCls(prefixCls, 'select-option'),
347
- justify: "space-between",
348
- onClick: function onClick(e) {
349
- e.stopPropagation();
350
- if (!isChildDisabled) {
351
- handleChange(option.value, child.value);
352
- }
353
- },
354
- style: {
355
- cursor: isChildDisabled ? 'not-allowed' : 'pointer',
356
- color: isChildDisabled ? token.colorTextDisabled : 'inherit'
357
- },
358
- children: multiple ? /*#__PURE__*/_jsx(Checkbox, {
359
- checked: isSelected,
360
- disabled: isChildDisabled,
361
- children: /*#__PURE__*/_jsx("span", {
362
- className: getFilterCls(prefixCls, 'text-ellipsis'),
363
- children: child.label
364
- })
365
- }) : /*#__PURE__*/_jsxs(_Fragment, {
366
- children: [/*#__PURE__*/_jsx("span", {
367
- className: getFilterCls(prefixCls, 'text-ellipsis'),
368
- children: child.label
369
- }), /*#__PURE__*/_jsx("span", {
370
- children: isSelected && /*#__PURE__*/_jsx(CheckOutlined, {
371
- style: {
372
- color: token.colorPrimary
373
- }
374
- })
375
- })]
376
- })
377
- }, child.value);
378
- }),
379
- styles: {
380
- body: {
381
- padding: 8,
382
- maxHeight: 220,
383
- maxWidth: 300,
384
- overflowY: 'auto'
385
- }
386
- },
387
- children: /*#__PURE__*/_jsx("div", {
388
- style: {
389
- padding: '0px 8px'
390
- },
391
- children: /*#__PURE__*/_jsxs(Flex, {
392
- gap: 8,
393
- className: classNames(getFilterCls(prefixCls, 'select-option'), _defineProperty({}, getFilterCls(prefixCls, 'has-selected'), hasSelectedChildren)),
394
- justify: "space-between",
395
- align: "center",
396
- style: {
397
- cursor: option.disabled ? 'not-allowed' : 'pointer',
398
- color: option.disabled ? token.colorTextDisabled : 'inherit'
399
- },
400
- children: [multiple ? /*#__PURE__*/_jsx(Checkbox, {
401
- checked: allChildrenSelected,
402
- indeterminate: hasSelectedChildren && !allChildrenSelected,
403
- disabled: option.disabled,
404
- onClick: function onClick(e) {
405
- return e.stopPropagation();
406
- },
407
- onChange: function onChange() {
408
- if (!option.disabled) {
409
- if (allChildrenSelected) {
410
- clearByParent(option.value);
411
- } else {
412
- selectAllChildren(option);
413
- }
414
- }
415
- },
416
- children: /*#__PURE__*/_jsx("span", {
417
- className: getFilterCls(prefixCls, 'text-ellipsis'),
418
- children: option.label
419
- })
420
- }) : /*#__PURE__*/_jsx("div", {
421
- className: getFilterCls(prefixCls, 'text-ellipsis'),
422
- children: option.label
423
- }), /*#__PURE__*/_jsx(Flex, {
424
- align: "center",
425
- gap: 4,
426
- children: /*#__PURE__*/_jsxs("div", {
427
- className: getFilterCls(prefixCls, 'icon-wrapper'),
428
- children: [/*#__PURE__*/_jsx(RightOutlined, {
429
- className: hasSelectedChildren ? getFilterCls(prefixCls, 'arrow-icon') : ''
430
- }), hasSelectedChildren && /*#__PURE__*/_jsx("div", {
431
- className: getFilterCls(prefixCls, 'clear-icon'),
432
- onClick: function onClick(e) {
433
- e.stopPropagation();
434
- clearByParent(option.value);
435
- },
436
- children: /*#__PURE__*/_jsx(CloseOutlined, {})
437
- })]
438
- })
439
- })]
440
- })
441
- })
442
- }, option.value);
443
- })]
444
- });
445
-
446
- // Wrapped 模式
447
- if (isCollapsed) {
448
- var hasValue = currentValue.length > 0;
449
- if (multiple) {
450
- var selectedTags = getSelectedTags();
451
- return /*#__PURE__*/_jsxs("div", {
452
- style: {
453
- paddingBlock: token.paddingXXS
454
- },
455
- children: [/*#__PURE__*/_jsx("div", {
456
- style: {
457
- marginBottom: 8
458
- },
459
- children: label
460
- }), /*#__PURE__*/_jsx(FilterButton, _objectSpread(_objectSpread({
461
- ref: filterButtonRef,
462
- icon: icon,
463
- label: label,
464
- bordered: bordered,
465
- onClear: handleClear,
466
- content: renderContent,
467
- selected: hasValue,
468
- onOpenChange: handleMainPopoverOpenChange
469
- }, filterButtonProps), {}, {
470
- style: _objectSpread(_objectSpread({}, filterButtonProps === null || filterButtonProps === void 0 ? void 0 : filterButtonProps.style), {}, {
471
- paddingInline: token.paddingXXS
472
- }),
473
- children: /*#__PURE__*/_jsx(WrappedTagsDisplay, {
474
- tags: selectedTags,
475
- onRemove: handleRemoveTag
476
- })
477
- }))]
478
- });
479
- }
480
- return /*#__PURE__*/_jsxs("div", {
481
- children: [/*#__PURE__*/_jsx("div", {
482
- style: {
483
- marginBottom: 8
484
- },
485
- children: label
486
- }), /*#__PURE__*/_jsx(FilterButton, _objectSpread(_objectSpread({
487
- ref: filterButtonRef,
488
- icon: icon,
489
- label: label,
490
- bordered: bordered,
491
- onClear: handleClear,
492
- content: renderContent,
493
- selected: hasValue,
494
- onOpenChange: handleMainPopoverOpenChange
495
- }, filterButtonProps), {}, {
496
- children: /*#__PURE__*/_jsx("span", {
497
- className: getFilterCls(prefixCls, 'text-ellipsis'),
498
- style: getWrappedValueStyle(hasValue),
499
- children: hasValue ? getSelectedLabel() : getPlaceholder()
500
- })
501
- }))]
502
- });
503
- }
504
-
505
- // 正常模式
506
- var filterButton = /*#__PURE__*/_jsxs(FilterButton, _objectSpread(_objectSpread({
507
- ref: filterButtonRef,
508
- icon: icon,
509
- label: label,
510
- bordered: bordered,
511
- onClear: handleClear,
512
- content: renderContent,
513
- selected: !!currentValue.length,
514
- onOpenChange: handleMainPopoverOpenChange
515
- }, filterButtonProps), {}, {
516
- children: [/*#__PURE__*/_jsx("span", {
517
- className: getFilterCls(prefixCls, 'text-ellipsis'),
518
- children: getSelectedLabel()
519
- }), multiple && showCount && currentValue.length > 0 && /*#__PURE__*/_jsx(CountNumber, {
520
- count: currentValue.length,
521
- total: showTotal ? options.reduce(function (acc, curr) {
522
- var _curr$children;
523
- return acc + (((_curr$children = curr.children) === null || _curr$children === void 0 ? void 0 : _curr$children.length) || 0);
524
- }, 0) : 0
525
- })]
526
- }));
527
- return wrapWithTooltip(filterButton);
528
- };
529
- export default FilterCascader;