@oceanbase/design 1.0.0-alpha.15 → 1.0.0-alpha.17

package/lib/filter/components/FilterCascader/index.js

@@ -0,0 +1,298 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _theme = _interopRequireDefault(require("../../../theme"));
+var _FilterContext = require("../../FilterContext");
+var _useFilterCollapsed = require("../../hooks/useFilterCollapsed");
+var _useFilterTooltip = require("../../hooks/useFilterTooltip");
+var _style = _interopRequireWildcard(require("../../style"));
+var _utils = require("../../utils");
+var _CountNumber = _interopRequireDefault(require("../CountNumber"));
+var _FilterButton = _interopRequireDefault(require("../FilterButton"));
+var _WrappedTagsDisplay = _interopRequireDefault(require("../WrappedTagsDisplay"));
+var _useNormalizedValue = require("./hooks/useNormalizedValue");
+var _useCascaderLabels = require("./hooks/useCascaderLabels");
+var _useCascaderCallbacks = require("./hooks/useCascaderCallbacks");
+var _countUtils = require("./utils/countUtils");
+var _FlatCascaderContent = require("./components/FlatCascaderContent");
+var _NormalCascaderContent = require("./components/NormalCascaderContent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const FilterCascader = ({
+  options = [],
+  value,
+  onChange,
+  icon,
+  label,
+  bordered = true,
+  multiple = false,
+  count = false,
+  showSearch = false,
+  _isCollapsed = false,
+  flat = false,
+  ...restProps
+}) => {
+  const isCollapsed = (0, _useFilterCollapsed.useFilterCollapsed)(_isCollapsed);
+  const {
+    prefixCls
+  } = (0, _style.default)();
+  const {
+    token
+  } = _theme.default.useToken();
+  const filterButtonRef = (0, _react.useRef)(null);
+  const {
+    updateFilterValue
+  } = (0, _FilterContext.useFilterContext)();
+  const filterId = (0, _react.useMemo)(() => (0, _utils.generateFilterId)('cascader', label), [label]);
+
+  // 用于控制二级 Popover 的打开状态（仅在单选模式下使用）
+  const [openPopoverKey, setOpenPopoverKey] = (0, _react.useState)(null);
+  // 用于 flat 模式下的多列路径（支持多层级）
+  const [flatColumnsPath, setFlatColumnsPath] = (0, _react.useState)([]);
+
+  // 搜索关键词状态
+  const [searchKeyword, setSearchKeyword] = (0, _react.useState)('');
+
+  // 从 restProps 中排除 onOpenChange，避免类型冲突
+  const {
+    onOpenChange: externalOnOpenChange,
+    ...filterButtonProps
+  } = restProps;
+
+  // 解析 count 配置
+  const showCount = !!count;
+  const showTotal = typeof count === 'object' ? count.showTotal ?? false : false;
+
+  // 值管理
+  const {
+    currentValue,
+    setValue
+  } = (0, _useNormalizedValue.useNormalizedValue)(value, onChange, multiple);
+
+  // 标签显示
+  const {
+    getSelectedLabel,
+    getSelectedTags
+  } = (0, _useCascaderLabels.useCascaderLabels)(currentValue, options, label, multiple, isCollapsed);
+
+  // 回调函数
+  const {
+    handleChange,
+    clearByParent,
+    handleClear,
+    selectAllChildren,
+    handleRemoveTag
+  } = (0, _useCascaderCallbacks.useCascaderCallbacks)(currentValue, setValue, options, multiple, filterButtonRef, setOpenPopoverKey);
+
+  // 使用 Tooltip hook
+  const {
+    onPopoverOpenChange,
+    wrapWithTooltip
+  } = (0, _useFilterTooltip.useFilterTooltip)({
+    hasValue: currentValue.length > 0,
+    label,
+    content: currentValue.length > 0 ? getSelectedTags().map(i => i.label).join(', ') : null,
+    disabled: isCollapsed
+  });
+
+  // 处理主弹窗状态变化
+  const handleMainPopoverOpenChange = (0, _react.useCallback)(open => {
+    onPopoverOpenChange(open);
+    // 当主弹窗关闭时，同步关闭二级弹窗（单选模式）
+    if (!open && !multiple) {
+      setOpenPopoverKey(null);
+    }
+    // flat 模式下，关闭弹窗时重置列路径，下次打开时只显示最顶层
+    if (!open && flat) {
+      setFlatColumnsPath([]);
+    }
+    // 弹窗关闭时清空搜索关键词
+    if (!open) {
+      setSearchKeyword('');
+    }
+    externalOnOpenChange?.(open);
+  }, [onPopoverOpenChange, externalOnOpenChange, multiple, flat]);
+
+  // 根据搜索关键词过滤选项（同时搜索父级和子级）
+  const filteredOptions = (0, _react.useMemo)(() => {
+    if (!showSearch || !searchKeyword) return options;
+    const lowerKeyword = searchKeyword.toLowerCase().trim();
+    return options.map(option => {
+      const parentLabel = (0, _utils.normalizeLabel)(option.label).toLowerCase();
+      const parentMatches = parentLabel.includes(lowerKeyword);
+
+      // 递归过滤子级选项
+      const filterChildren = children => {
+        return children.map(child => {
+          const childLabel = (0, _utils.normalizeLabel)(child.label).toLowerCase();
+          const childMatches = childLabel.includes(lowerKeyword);
+
+          // 如果有子级，递归过滤
+          if (child.children && child.children.length > 0) {
+            const filteredChildren = filterChildren(child.children);
+            // 如果当前节点匹配或有匹配的子级，则保留
+            if (childMatches || filteredChildren.length > 0) {
+              return {
+                ...child,
+                children: childMatches ? child.children : filteredChildren
+              };
+            }
+            return null;
+          }
+
+          // 叶子节点，如果匹配则保留
+          return childMatches ? child : null;
+        }).filter(child => child !== null);
+      };
+      const filteredChildren = option.children ? filterChildren(option.children) : [];
+
+      // 如果父级匹配或有匹配的子级，则保留该选项
+      if (parentMatches || filteredChildren.length > 0) {
+        return {
+          ...option,
+          // 如果父级不匹配但子级匹配，只显示匹配的子级
+          children: parentMatches ? option.children : filteredChildren
+        };
+      }
+      return null;
+    }).filter(option => option !== null);
+  }, [showSearch, searchKeyword, options]);
+
+  // 当值变化时，更新 context 中的值
+  (0, _react.useEffect)(() => {
+    if (isCollapsed && updateFilterValue) {
+      updateFilterValue(filterId, label, currentValue, options, 'cascader');
+    }
+  }, [isCollapsed, updateFilterValue, filterId, label, currentValue, options]);
+
+  // 渲染内容
+  const renderContent = flat ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlatCascaderContent.FlatCascaderContent, {
+    options: filteredOptions,
+    currentValue: currentValue,
+    multiple: multiple,
+    filterButtonRef: filterButtonRef,
+    onValueChange: setValue
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NormalCascaderContent.NormalCascaderContent, {
+    options: filteredOptions,
+    currentValue: currentValue,
+    multiple: multiple,
+    prefixCls: prefixCls,
+    openPopoverKey: openPopoverKey,
+    filterButtonRef: filterButtonRef,
+    onOpenPopoverKeyChange: setOpenPopoverKey,
+    onValueChange: setValue,
+    onHandleChange: handleChange,
+    onClearByParent: clearByParent,
+    onSelectAllChildren: selectAllChildren,
+    showSearch: showSearch,
+    searchKeyword: searchKeyword,
+    onSearchChange: setSearchKeyword
+  });
+
+  // flat 模式下的 Popover 样式（动态宽度）
+  const flatPopoverStyles = flat ? {
+    body: {
+      padding: 0
+    }
+  } : undefined;
+
+  // 计算总数（用于显示计数）
+  const totalCount = showTotal ? options.reduce((acc, curr) => {
+    return acc + (curr.children ? (0, _countUtils.countLeafNodes)(curr.children) : 0);
+  }, 0) : 0;
+
+  // Wrapped 模式
+  if (isCollapsed) {
+    const hasValue = currentValue.length > 0;
+    if (multiple) {
+      const selectedTags = getSelectedTags();
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          paddingBlock: token.paddingXXS
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginBottom: 8
+          },
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterButton.default, {
+          ref: filterButtonRef,
+          icon: icon,
+          label: label,
+          bordered: bordered,
+          onClear: handleClear,
+          content: renderContent,
+          selected: hasValue,
+          onOpenChange: handleMainPopoverOpenChange,
+          _isFlat: flat,
+          ...(flat ? {
+            styles: flatPopoverStyles
+          } : {}),
+          ...filterButtonProps,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WrappedTagsDisplay.default, {
+            tags: selectedTags,
+            onRemove: handleRemoveTag
+          })
+        })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginBottom: 8
+        },
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterButton.default, {
+        ref: filterButtonRef,
+        icon: icon,
+        label: label,
+        bordered: bordered,
+        onClear: handleClear,
+        content: renderContent,
+        selected: hasValue,
+        onOpenChange: handleMainPopoverOpenChange,
+        ...(flat ? {
+          styles: flatPopoverStyles
+        } : {}),
+        ...filterButtonProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+          style: (0, _utils.getWrappedValueStyle)(hasValue),
+          children: hasValue ? getSelectedLabel() : (0, _utils.getPlaceholder)()
+        })
+      })]
+    });
+  }
+
+  // 正常模式
+  const filterButton = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FilterButton.default, {
+    ref: filterButtonRef,
+    icon: icon,
+    label: label,
+    bordered: bordered,
+    onClear: handleClear,
+    content: renderContent,
+    selected: !!currentValue.length,
+    onOpenChange: handleMainPopoverOpenChange,
+    _isFlat: flat,
+    ...(flat ? {
+      styles: flatPopoverStyles
+    } : {}),
+    ...filterButtonProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+      children: getSelectedLabel()
+    }), multiple && showCount && currentValue.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountNumber.default, {
+      count: currentValue.length,
+      total: totalCount
+    })]
+  });
+  return wrapWithTooltip(filterButton);
+};
+var _default = exports.default = FilterCascader;

package/lib/filter/components/FilterCascader/types.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { BaseFilterProps, InternalFilterProps } from '../../type';
+export interface CascaderOption {
+    label?: ReactNode;
+    value: string;
+    disabled?: boolean;
+    children?: CascaderOption[];
+}
+interface BaseFilterCascaderProps extends BaseFilterProps, InternalFilterProps {
+    /** 选项列表 */
+    options?: CascaderOption[];
+    /** 是否显示计数，可传入 { showTotal: true } 同时显示总数 */
+    count?: boolean | {
+        showTotal?: boolean;
+    };
+}
+type FilterCascaderSingleBase = BaseFilterCascaderProps & {
+    /** 是否多选 */
+    multiple?: false;
+    /** 当前选中值，格式为 [parentValue, childValue] */
+    value?: string[];
+    /** 值变化回调 */
+    onChange?: (value: string[]) => void;
+};
+type FilterCascaderMultipleBase = BaseFilterCascaderProps & {
+    /** 是否多选 */
+    multiple?: true;
+    /** 当前选中值，格式为 [[parentValue, childValue], ...] */
+    value?: string[][];
+    /** 值变化回调 */
+    onChange?: (value: string[][]) => void;
+};
+type FilterCascaderWithSearch<T extends FilterCascaderSingleBase | FilterCascaderMultipleBase> = T & {
+    /** 是否显示搜索框，默认为 false */
+    showSearch: true;
+    flat?: never;
+};
+type FilterCascaderWithFlat<T extends FilterCascaderSingleBase | FilterCascaderMultipleBase> = T & {
+    /** 扁平化展示 */
+    flat: true;
+    showSearch?: never;
+};
+type FilterCascaderNormal<T extends FilterCascaderSingleBase | FilterCascaderMultipleBase> = T & {
+    flat?: false;
+    showSearch?: false;
+};
+export type FilterCascaderSingleProps = FilterCascaderWithSearch<FilterCascaderSingleBase> | FilterCascaderWithFlat<FilterCascaderSingleBase> | FilterCascaderNormal<FilterCascaderSingleBase>;
+export type FilterCascaderMultipleProps = FilterCascaderWithSearch<FilterCascaderMultipleBase> | FilterCascaderWithFlat<FilterCascaderMultipleBase> | FilterCascaderNormal<FilterCascaderMultipleBase>;
+export type FilterCascaderProps = FilterCascaderSingleProps | FilterCascaderMultipleProps;
+export interface SelectedTag {
+    label: ReactNode;
+    value: string;
+    parentValue: string;
+    childValue: string;
+}
+export {};

package/lib/filter/components/FilterCascader/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/filter/components/FilterCascader/utils/countUtils.d.ts

@@ -0,0 +1,13 @@
+import type { CascaderOption } from '../types';
+/**
+ * 递归统计所有叶子节点数量（只统计没有children的节点）
+ */
+export declare const countLeafNodes: (options: CascaderOption[]) => number;
+/**
+ * 收集所有叶子节点的完整路径
+ */
+export declare const collectLeafPaths: (options: CascaderOption[], basePath: string[]) => string[][];
+/**
+ * 统计选中的子节点数量
+ */
+export declare const countSelectedChildren: (currentValue: string[][], currentPath: string[]) => number;

package/lib/filter/components/FilterCascader/utils/countUtils.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.countSelectedChildren = exports.countLeafNodes = exports.collectLeafPaths = void 0;
+/**
+ * 递归统计所有叶子节点数量（只统计没有children的节点）
+ */
+const countLeafNodes = options => {
+  let count = 0;
+  options.forEach(opt => {
+    if (opt.children && opt.children.length > 0) {
+      count += countLeafNodes(opt.children);
+    } else {
+      count += 1;
+    }
+  });
+  return count;
+};
+
+/**
+ * 收集所有叶子节点的完整路径
+ */
+exports.countLeafNodes = countLeafNodes;
+const collectLeafPaths = (options, basePath) => {
+  const paths = [];
+  options.forEach(opt => {
+    const optPath = [...basePath, opt.value];
+    if (opt.children && opt.children.length > 0) {
+      paths.push(...collectLeafPaths(opt.children, optPath));
+    } else {
+      paths.push(optPath);
+    }
+  });
+  return paths;
+};
+
+/**
+ * 统计选中的子节点数量
+ */
+exports.collectLeafPaths = collectLeafPaths;
+const countSelectedChildren = (currentValue, currentPath) => {
+  return currentValue.filter(selectedPath => {
+    if (selectedPath.length <= currentPath.length) return false;
+    return currentPath.every((val, idx) => selectedPath[idx] === val);
+  }).length;
+};
+exports.countSelectedChildren = countSelectedChildren;

package/lib/filter/components/FilterCascader/utils/pathUtils.d.ts

@@ -0,0 +1,17 @@
+import type { CascaderOption } from '../types';
+/**
+ * 根据路径查找选项
+ */
+export declare const findOptionByPath: (options: CascaderOption[], path: string[]) => CascaderOption | null;
+/**
+ * 根据路径获取当前层级的选项列表
+ */
+export declare const getCurrentLevelOptions: (options: CascaderOption[], path: string[]) => CascaderOption[];
+/**
+ * 检查路径是否在选中值中
+ */
+export declare const hasSelectedInPath: (currentValue: string[][], currentPath: string[]) => boolean;
+/**
+ * 检查路径是否完全匹配
+ */
+export declare const isExactMatch: (currentValue: string[][], currentPath: string[]) => boolean;

package/lib/filter/components/FilterCascader/utils/pathUtils.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isExactMatch = exports.hasSelectedInPath = exports.getCurrentLevelOptions = exports.findOptionByPath = void 0;
+/**
+ * 根据路径查找选项
+ */
+const findOptionByPath = (options, path) => {
+  if (!path || path.length === 0) return null;
+  let currentOptions = options;
+  let currentOption = null;
+  for (const pathValue of path) {
+    const found = currentOptions.find(opt => opt.value === pathValue);
+    if (!found) return null;
+    currentOption = found;
+    currentOptions = found.children || [];
+  }
+  return currentOption;
+};
+
+/**
+ * 根据路径获取当前层级的选项列表
+ */
+exports.findOptionByPath = findOptionByPath;
+const getCurrentLevelOptions = (options, path) => {
+  if (path.length === 0) return options;
+  let currentOptions = options;
+  for (const pathValue of path) {
+    const found = currentOptions.find(opt => opt.value === pathValue);
+    if (!found || !found.children) return [];
+    currentOptions = found.children;
+  }
+  return currentOptions;
+};
+
+/**
+ * 检查路径是否在选中值中
+ */
+exports.getCurrentLevelOptions = getCurrentLevelOptions;
+const hasSelectedInPath = (currentValue, currentPath) => {
+  return currentValue.some(selectedPath => {
+    if (selectedPath.length < currentPath.length) return false;
+    return currentPath.every((val, idx) => selectedPath[idx] === val);
+  });
+};
+
+/**
+ * 检查路径是否完全匹配
+ */
+exports.hasSelectedInPath = hasSelectedInPath;
+const isExactMatch = (currentValue, currentPath) => {
+  return currentValue.some(selectedPath => selectedPath.length === currentPath.length && selectedPath.every((val, idx) => val === currentPath[idx]));
+};
+exports.isExactMatch = isExactMatch;

package/lib/filter/components/FilterCheckbox.js

@@ -143,8 +143,30 @@ const FilterCheckbox = ({
     const iconWidth = 10;
     const iconWidthUnselected = 8;
     const overlapDistance = 6;
-    const containerWidth = iconWidth + (options.length - 1) * overlapDistance + 1;
-    const selectedStatuses = selectedValues || [];
+
+    // 按颜色分组选项，并检查每种颜色是否有选中的选项
+    const colorGroups = [];
+    const colorMap = new Map();
+    options.forEach(option => {
+      if (option.color) {
+        const isSelected = selectedValues.includes(option.value);
+        const existing = colorMap.get(option.color);
+        if (existing) {
+          // 如果已有该颜色，更新选中状态（只要有一个选中即为选中）
+          if (isSelected) {
+            existing.hasSelected = true;
+          }
+        } else {
+          const group = {
+            color: option.color,
+            hasSelected: isSelected
+          };
+          colorMap.set(option.color, group);
+          colorGroups.push(group);
+        }
+      }
+    });
+    const containerWidth = iconWidth + (colorGroups.length - 1) * overlapDistance + 1;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         position: 'relative',
@@ -153,8 +175,8 @@ const FilterCheckbox = ({
         display: 'flex',
         alignItems: 'center'
       },
-      children: options.map((item, index) => {
-        const isSelected = selectedStatuses.includes(item.value) && item.color;
+      children: colorGroups.map((group, index) => {
+        const isSelected = group.hasSelected;
         const baseSize = isSelected ? iconWidth : iconWidthUnselected;
         return isSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
@@ -164,10 +186,10 @@ const FilterCheckbox = ({
             height: baseSize,
             borderRadius: '50%',
             zIndex: index,
-            backgroundColor: item.color,
+            backgroundColor: group.color,
             border: `1px solid ${token.white}`
           }
-        }, item.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }, group.color) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
             position: 'absolute',
             left: index * overlapDistance,
@@ -184,7 +206,7 @@ const FilterCheckbox = ({
               border: `1px solid ${token.colorBorderSecondary}`
             }
           })
-        }, item.value);
+        }, group.color);
       })
     });
   }, [isStatusMode, options, selectedValues, token]);

package/lib/filter/components/FilterWrap.js

@@ -56,12 +56,39 @@ const FilterWrap = ({
       value: item.value
     })));
   }, [collapsed, contextValue.filterValues]);
-  const filterValues = (0, _react.useMemo)(() => {
+  const allFilterValues = (0, _react.useMemo)(() => {
     if (!collapsed) return [];
     return contextValue.filterValues || [];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [collapsed, stableFilterValuesKey]);
 
+  // 从 children 中递归提取 label 集合，用于过滤 filterValues 只保留当前折叠项的值
+  // children 结构可能是 Fragment → Form.Item → Filter.Select，需要递归查找
+  const childLabelSet = (0, _react.useMemo)(() => {
+    const labels = new Set();
+    const extractLabel = node => {
+      if (! /*#__PURE__*/(0, _react.isValidElement)(node)) return;
+      const props = node.props;
+      if (props.label !== undefined) {
+        labels.add(props.label);
+        return;
+      }
+      if (props.children) {
+        if ( /*#__PURE__*/(0, _react.isValidElement)(props.children)) {
+          extractLabel(props.children);
+        } else if (Array.isArray(props.children)) {
+          props.children.forEach(extractLabel);
+        }
+      }
+    };
+    _react.Children.forEach(children, extractLabel);
+    return labels;
+  }, [children]);
+  const filterValues = (0, _react.useMemo)(() => {
+    if (childLabelSet.size === 0) return allFilterValues;
+    return allFilterValues.filter(item => childLabelSet.has(item.label));
+  }, [allFilterValues, childLabelSet]);
+
   // 格式化值用于 Tooltip 显示
   const formatValueForTooltip = (0, _react.useCallback)((value, options, componentName) => {
     if (!value) return '';