@oceanbase/design 1.0.0-alpha.2 → 1.0.0-alpha.21

package/lib/filter/components/ResponsiveFilterGroup.js

@@ -0,0 +1,412 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _icons = require("@oceanbase/icons");
+var _button = _interopRequireDefault(require("../../button"));
+var _FilterWrap = _interopRequireDefault(require("./FilterWrap"));
+var _configProvider = _interopRequireDefault(require("../../config-provider"));
+var _enUS = _interopRequireDefault(require("../../locale/en-US"));
+var _FilterContext = require("../FilterContext");
+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; }
+// 检查元素是否是 Filter 组件（通过 __isFilterComponent 静态标记识别）
+const isFilterComponent = child => {
+  const type = child.type;
+  if (type?.__isFilterComponent) return true;
+  if (child.props?.children && /*#__PURE__*/(0, _react.isValidElement)(child.props.children)) {
+    const innerType = child.props.children.type;
+    if (innerType?.__isFilterComponent) return true;
+  }
+  return false;
+};
+
+// 检查子元素是否可以被折叠（只有 Filter 组件默认可折叠，其他组件需要显式设置 collapsible）
+const isCollapsibleCheck = child => {
+  const childProps = child.props;
+  if (childProps?.collapsible !== undefined) {
+    return childProps.collapsible !== false;
+  }
+  if (childProps?.children && /*#__PURE__*/(0, _react.isValidElement)(childProps.children)) {
+    const innerChild = childProps.children;
+    if (innerChild.props?.collapsible !== undefined) {
+      return innerChild.props.collapsible !== false;
+    }
+  }
+  return isFilterComponent(child);
+};
+
+// 检查子元素是否应该始终折叠
+const isAlwaysCollapseCheck = child => {
+  const childProps = child.props;
+  if (childProps?.alwaysCollapse !== undefined) {
+    return childProps.alwaysCollapse === true;
+  }
+  if (childProps?.children && /*#__PURE__*/(0, _react.isValidElement)(childProps.children)) {
+    const innerChild = childProps.children;
+    if (innerChild.props?.alwaysCollapse !== undefined) {
+      return innerChild.props.alwaysCollapse === true;
+    }
+  }
+  return false;
+};
+const ResponsiveFilterGroup = ({
+  children,
+  gap = 8,
+  label,
+  icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FilterOutlined, {}),
+  onApply,
+  onClearAll,
+  showActions = true,
+  style,
+  extra,
+  showCount = true,
+  locale: customLocale
+}) => {
+  const {
+    locale: contextLocale
+  } = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  const filterLocale = {
+    ..._enUS.default.Filter,
+    ...contextLocale?.Filter,
+    ...customLocale
+  };
+  const filterLabel = label ?? filterLocale?.filters;
+  const containerRef = (0, _react.useRef)(null);
+  const filterButtonRef = (0, _react.useRef)(null);
+  const moreButtonMeasureRef = (0, _react.useRef)(null);
+  const cachedWidths = (0, _react.useRef)([]);
+  const [visibleCount, setVisibleCount] = (0, _react.useState)(null);
+  const [filterValues, setFilterValues] = (0, _react.useState)([]);
+  const childrenArray = (0, _react.useMemo)(() => _react.Children.toArray(children).filter(_react.isValidElement), [children]);
+  const childInfo = (0, _react.useMemo)(() => childrenArray.map((child, index) => ({
+    child,
+    index,
+    isCollapsible: isCollapsibleCheck(child),
+    isAlwaysCollapse: isAlwaysCollapseCheck(child)
+  })), [childrenArray]);
+  const collapsibleItems = (0, _react.useMemo)(() => childInfo.filter(item => item.isCollapsible), [childInfo]);
+  const alwaysCollapseItems = (0, _react.useMemo)(() => collapsibleItems.filter(item => item.isAlwaysCollapse), [collapsibleItems]);
+  const normalCollapsibleItems = (0, _react.useMemo)(() => collapsibleItems.filter(item => !item.isAlwaysCollapse), [collapsibleItems]);
+
+  // 当 children 结构变化（增删/重排）时才重置为测量模式
+  // 不能用 childrenArray 引用比较，因为 JSX 每次渲染都产生新引用
+  const childrenStructureKey = childrenArray.map(c => c.key ?? c.type).join(',');
+  const [prevStructureKey, setPrevStructureKey] = (0, _react.useState)(childrenStructureKey);
+  if (childrenStructureKey !== prevStructureKey) {
+    setPrevStructureKey(childrenStructureKey);
+    setVisibleCount(null);
+  }
+  const isMeasuring = visibleCount === null;
+
+  // 纯计算函数：根据容器宽度计算可显示的可折叠项数量
+  const calculateVisibleCount = (0, _react.useCallback)(containerWidth => {
+    if (normalCollapsibleItems.length === 0) return 0;
+    const widths = cachedWidths.current;
+    if (widths.length === 0) return normalCollapsibleItems.length;
+    let uncollapsibleTotalWidth = 0;
+    let uncollapsibleCount = 0;
+    childInfo.forEach(info => {
+      if (!info.isCollapsible) {
+        uncollapsibleTotalWidth += widths[info.index] || 0;
+        uncollapsibleCount++;
+      }
+    });
+    const moreWidth = moreButtonMeasureRef.current?.offsetWidth || 0;
+    const hasAlwaysCollapse = alwaysCollapseItems.length > 0;
+    let visibleWidth = 0;
+    let count = 0;
+    for (let i = 0; i < normalCollapsibleItems.length; i++) {
+      const itemWidth = widths[normalCollapsibleItems[i].index] || 0;
+      const newWidth = visibleWidth + itemWidth;
+      const remaining = normalCollapsibleItems.length - i - 1;
+      const needMore = remaining > 0 || hasAlwaysCollapse;
+      const totalItems = uncollapsibleCount + count + 1 + (needMore ? 1 : 0);
+      const totalGaps = totalItems > 1 ? (totalItems - 1) * gap : 0;
+      const totalWidth = uncollapsibleTotalWidth + newWidth + (needMore ? moreWidth : 0) + totalGaps;
+      if (totalWidth <= containerWidth) {
+        visibleWidth = newWidth;
+        count++;
+      } else {
+        break;
+      }
+    }
+    return count;
+  }, [childInfo, normalCollapsibleItems, alwaysCollapseItems, gap]);
+
+  // 使用 ref 保存最新的计算函数，避免 ResizeObserver 等 effect 频繁重建
+  const calculateRef = (0, _react.useRef)(calculateVisibleCount);
+  calculateRef.current = calculateVisibleCount;
+
+  // Effect 1: 测量模式下，读取所有子元素宽度并计算 visibleCount
+  (0, _react.useLayoutEffect)(() => {
+    if (!containerRef.current || !isMeasuring) return;
+    const items = containerRef.current.querySelectorAll('[data-filter-item]');
+    const newWidths = [];
+    items.forEach(el => {
+      const idx = Number(el.dataset.filterItem);
+      if (!isNaN(idx)) {
+        newWidths[idx] = el.offsetWidth;
+      }
+    });
+    cachedWidths.current = newWidths;
+    const count = calculateRef.current(containerRef.current.offsetWidth);
+    setVisibleCount(count);
+  }, [isMeasuring]);
+
+  // Effect 2: 监听容器大小变化，用缓存宽度重新计算（不需要重新测量）
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current) return;
+    const el = containerRef.current;
+    const ro = new ResizeObserver(() => {
+      if (cachedWidths.current.length === 0) return;
+      const count = calculateRef.current(el.offsetWidth);
+      setVisibleCount(prev => prev === count ? prev : count);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // Effect 3: filterValues 变化时，more 按钮 badge 可能变化，需要重新计算
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current || cachedWidths.current.length === 0) return;
+    const count = calculateRef.current(containerRef.current.offsetWidth);
+    setVisibleCount(prev => prev === count ? prev : count);
+  }, [filterValues]);
+
+  // Effect 4: 监听子元素的宽度变化（如筛选值变化导致按钮变宽），
+  // 更新缓存宽度并重新计算可见数量。
+  // 依赖 visibleCount 以便在显隐切换后重新查询 DOM 元素。
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current || isMeasuring) return;
+    const el = containerRef.current;
+    const items = el.querySelectorAll('[data-filter-item]');
+    if (items.length === 0) return;
+    const ro = new ResizeObserver(() => {
+      let widthChanged = false;
+      items.forEach(item => {
+        const idx = Number(item.dataset.filterItem);
+        if (isNaN(idx)) return;
+        const w = item.offsetWidth;
+        if (w > 0 && Math.abs(w - (cachedWidths.current[idx] || 0)) > 1) {
+          cachedWidths.current[idx] = w;
+          widthChanged = true;
+        }
+      });
+      if (widthChanged) {
+        const count = calculateRef.current(el.offsetWidth);
+        setVisibleCount(prev => prev === count ? prev : count);
+      }
+    });
+    items.forEach(item => ro.observe(item));
+    return () => ro.disconnect();
+  }, [isMeasuring, visibleCount]);
+
+  // --- 派生状态 ---
+  const visibleIndexSet = (0, _react.useMemo)(() => {
+    if (visibleCount === null) return null;
+    return new Set(normalCollapsibleItems.slice(0, visibleCount).map(item => item.index));
+  }, [visibleCount, normalCollapsibleItems]);
+  const hiddenCollapsibleItems = (0, _react.useMemo)(() => {
+    if (!visibleIndexSet) return [];
+    return normalCollapsibleItems.filter(item => !visibleIndexSet.has(item.index));
+  }, [visibleIndexSet, normalCollapsibleItems]);
+  const allHiddenItems = (0, _react.useMemo)(() => [...alwaysCollapseItems, ...hiddenCollapsibleItems], [alwaysCollapseItems, hiddenCollapsibleItems]);
+
+  // --- 值管理 ---
+  const updateFilterValue = (0, _react.useCallback)((id, _filterLabel, value, options, componentName) => {
+    setFilterValues(prev => {
+      const isEmpty = value === undefined || value === null || value === '' || componentName === 'switch' && value === false || Array.isArray(value) && value.length === 0;
+      if (isEmpty) {
+        const filtered = prev.filter(item => item.id !== id);
+        return filtered.length === prev.length ? prev : filtered;
+      }
+      const existingIndex = prev.findIndex(item => item.id === id);
+      if (existingIndex >= 0) {
+        const existing = prev[existingIndex];
+        const optionsEqual = existing.options === options || existing.options === undefined && options === undefined || existing.options !== undefined && options !== undefined && JSON.stringify(existing.options) === JSON.stringify(options);
+        if (existing.value === value && optionsEqual && existing.componentName === componentName && existing.label === _filterLabel) {
+          return prev;
+        }
+        const newValues = [...prev];
+        newValues[existingIndex] = {
+          id,
+          label: _filterLabel,
+          value,
+          options,
+          componentName
+        };
+        return newValues;
+      }
+      return [...prev, {
+        id,
+        label: _filterLabel,
+        value,
+        options,
+        componentName
+      }];
+    });
+  }, []);
+  const handleClearAll = () => {
+    allHiddenItems.forEach(item => {
+      if ( /*#__PURE__*/(0, _react.isValidElement)(item.child)) {
+        const childProps = item.child.props;
+        if (childProps.children && /*#__PURE__*/(0, _react.isValidElement)(childProps.children)) {
+          const innerChildProps = childProps.children.props;
+          innerChildProps.onChange?.(undefined);
+        } else {
+          childProps.onChange?.(undefined);
+        }
+      }
+    });
+    setFilterValues([]);
+    onClearAll?.();
+  };
+
+  // --- 渲染 FilterWrap（收起的筛选项） ---
+  const renderHiddenChildren = () => {
+    if (allHiddenItems.length === 0) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
+      isCollapsed: true,
+      filterValues: filterValues,
+      updateFilterValue: updateFilterValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterWrap.default, {
+        collapsed: true,
+        filterButtonRef: filterButtonRef,
+        icon: icon,
+        label: filterLabel,
+        extra: extra,
+        onClearAll: handleClearAll,
+        showCount: showCount,
+        footer: showActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
+          justify: "space-between",
+          children: [onApply && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            type: "primary",
+            size: "small",
+            onClick: () => {
+              onApply?.();
+              filterButtonRef.current?.closePopover();
+            },
+            children: filterLocale?.apply
+          }), onClearAll && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            type: "link",
+            size: "small",
+            onClick: handleClearAll,
+            children: filterLocale?.clearAll
+          })]
+        }),
+        children: allHiddenItems.map((item, index) => {
+          if ( /*#__PURE__*/(0, _react.isValidElement)(item.child)) {
+            const stableKey = item.child.key || `responsive-filter-child-${index}`;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+              children: item.child
+            }, stableKey);
+          }
+          return item.child;
+        })
+      })
+    });
+  };
+
+  // --- 渲染子元素 ---
+  // 所有子元素始终保持在 Flex 中的稳定位置（FilterProvider + div 包裹 + 稳定 key），
+  // 通过 CSS display 控制显隐，避免在可见/折叠间切换时卸载重挂载导致表单值丢失。
+  // FilterProvider 使隐藏的原始组件能直接感知 isCollapsed 并上报值，无需依赖 Popover 中的克隆。
+  const renderChildren = () => {
+    const elements = [];
+    let filterWrapInserted = false;
+    let collapsibleIdx = 0;
+    childrenArray.forEach((child, index) => {
+      const info = childInfo[index];
+      const stableKey = child.key || `filter-item-${index}`;
+      let display;
+      let isHidden = false;
+      if (isMeasuring) {
+        display = 'inline-flex';
+      } else if (!info.isCollapsible) {
+        display = undefined;
+      } else if (info.isAlwaysCollapse) {
+        display = 'none';
+        isHidden = true;
+      } else {
+        const isVisible = collapsibleIdx < visibleCount;
+        display = isVisible ? undefined : 'none';
+        isHidden = !isVisible;
+        collapsibleIdx++;
+      }
+      elements.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
+        isCollapsed: !isMeasuring && isHidden,
+        filterValues: filterValues,
+        updateFilterValue: updateFilterValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          "data-filter-item": index,
+          style: {
+            display,
+            flexShrink: 0
+          },
+          children: child
+        })
+      }, stableKey));
+      if (!isMeasuring && isHidden && !filterWrapInserted && allHiddenItems.length > 0) {
+        filterWrapInserted = true;
+        elements.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+          children: renderHiddenChildren()
+        }, "filter-wrap"));
+      }
+    });
+    if (!isMeasuring && !filterWrapInserted && allHiddenItems.length > 0) {
+      elements.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+        children: renderHiddenChildren()
+      }, "filter-wrap"));
+    }
+    return elements;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    className: "responsive-filter-group",
+    style: {
+      flex: '1 1 auto',
+      minWidth: 0,
+      position: 'relative',
+      overflow: 'hidden',
+      visibility: isMeasuring ? 'hidden' : undefined,
+      ...style
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: moreButtonMeasureRef,
+      style: {
+        position: 'absolute',
+        visibility: 'hidden',
+        pointerEvents: 'none',
+        top: -9999,
+        left: -9999,
+        display: 'inline-flex'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
+        isCollapsed: true,
+        filterValues: filterValues,
+        updateFilterValue: updateFilterValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterWrap.default, {
+          collapsed: true,
+          icon: icon,
+          label: filterLabel,
+          showCount: showCount,
+          onClearAll: handleClearAll,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Flex, {
+      gap: gap,
+      align: "center",
+      wrap: "nowrap",
+      children: renderChildren()
+    })]
+  });
+};
+var _default = exports.default = ResponsiveFilterGroup;

package/lib/filter/components/WrappedTagsDisplay.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface TagItem {
+    label: ReactNode;
+    value: string;
+}
+export interface WrappedTagsDisplayProps {
+    /** 选中的标签列表 */
+    tags: TagItem[];
+    /** 最多显示的标签数量，默认为 2 */
+    maxVisibleTags?: number;
+    /** 移除标签的回调 */
+    onRemove?: (value: string) => void;
+    /** 标签的最大宽度，默认为 80 */
+    tagMaxWidth?: number;
+}
+/**
+ * Wrapped 模式下的 Tag 展示组件
+ * 用于 FilterCheckbox、FilterCascader 等多选组件在 wrapped 模式下展示选中值
+ */
+declare const WrappedTagsDisplay: React.FC<WrappedTagsDisplayProps>;
+export default WrappedTagsDisplay;

package/lib/filter/components/WrappedTagsDisplay.js

@@ -0,0 +1,84 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _tag = _interopRequireDefault(require("../../tag"));
+var _tooltip = _interopRequireDefault(require("../../tooltip"));
+var _theme = _interopRequireDefault(require("../../theme"));
+var _configProvider = _interopRequireDefault(require("../../config-provider"));
+var _enUS = _interopRequireDefault(require("../../locale/en-US"));
+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; }
+/**
+ * Wrapped 模式下的 Tag 展示组件
+ * 用于 FilterCheckbox、FilterCascader 等多选组件在 wrapped 模式下展示选中值
+ */
+const WrappedTagsDisplay = ({
+  tags,
+  maxVisibleTags = 2,
+  onRemove,
+  tagMaxWidth = 80
+}) => {
+  const {
+    token
+  } = _theme.default.useToken();
+  const {
+    locale: contextLocale
+  } = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  const filterLocale = contextLocale?.Filter || _enUS.default.Filter;
+  const hasValue = tags.length > 0;
+  const visibleTags = tags.slice(0, maxVisibleTags);
+  const hiddenTags = tags.slice(maxVisibleTags);
+  const hiddenCount = hiddenTags.length;
+  if (!hasValue) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        color: token.colorTextPlaceholder
+      },
+      children: filterLocale?.pleaseSelect
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
+    align: "center",
+    style: {
+      overflow: 'hidden',
+      flex: 1
+    },
+    children: [visibleTags.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+      closable: !!onRemove,
+      onClose: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove?.(item.value);
+      },
+      style: {
+        maxWidth: tagMaxWidth,
+        marginRight: 4
+      },
+      children: item.label
+    }, item.value)), hiddenCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+      title: hiddenTags.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+        closable: !!onRemove,
+        onClose: e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onRemove?.(item.value);
+        },
+        children: item.label
+      }, item.value)),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+        style: {
+          margin: 0
+        },
+        children: ".."
+      })
+    })]
+  });
+};
+var _default = exports.default = WrappedTagsDisplay;

package/lib/filter/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useControlledState } from './useControlledState';
+export { useFilterCollapsed } from './useFilterCollapsed';
+export { useFilterTooltip } from './useFilterTooltip';
+export type { UseFilterTooltipOptions, UseFilterTooltipReturn } from './useFilterTooltip';

package/lib/filter/hooks/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useControlledState", {
+  enumerable: true,
+  get: function () {
+    return _useControlledState.useControlledState;
+  }
+});
+Object.defineProperty(exports, "useFilterCollapsed", {
+  enumerable: true,
+  get: function () {
+    return _useFilterCollapsed.useFilterCollapsed;
+  }
+});
+Object.defineProperty(exports, "useFilterTooltip", {
+  enumerable: true,
+  get: function () {
+    return _useFilterTooltip.useFilterTooltip;
+  }
+});
+var _useControlledState = require("./useControlledState");
+var _useFilterCollapsed = require("./useFilterCollapsed");
+var _useFilterTooltip = require("./useFilterTooltip");

package/lib/filter/hooks/useControlledState.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 处理受控/非受控组件状态的通用 Hook
+ * @param value 外部传入的受控值
+ * @param defaultValue 默认值
+ * @param onChange 值变化时的回调
+ * @returns [currentValue, setValue, isControlled]
+ */
+export declare function useControlledState<T>(value: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T) => void, boolean];
+export default useControlledState;

package/lib/filter/hooks/useControlledState.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useControlledState = useControlledState;
+var _react = require("react");
+/**
+ * 处理受控/非受控组件状态的通用 Hook
+ * @param value 外部传入的受控值
+ * @param defaultValue 默认值
+ * @param onChange 值变化时的回调
+ * @returns [currentValue, setValue, isControlled]
+ */
+function useControlledState(value, defaultValue, onChange) {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue);
+
+  // 使用受控值或内部值
+  const currentValue = isControlled ? value : internalValue;
+
+  // 统一的 setValue 方法
+  const setValue = (0, _react.useCallback)(newValue => {
+    // 如果是非受控组件，更新内部状态
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    // 总是调用 onChange 回调
+    onChange?.(newValue);
+  }, [isControlled, onChange]);
+  return [currentValue, setValue, isControlled];
+}
+var _default = exports.default = useControlledState;

package/lib/filter/hooks/useFilterCollapsed.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 判断 Filter 组件是否处于折叠模式
+ * 支持通过 context 或 prop 来判断
+ * @param isCollapsedProp 通过 prop 传入的 _isCollapsed 值
+ * @returns 是否处于折叠模式
+ */
+export declare function useFilterCollapsed(isCollapsedProp?: boolean): boolean;
+export default useFilterCollapsed;

package/lib/filter/hooks/useFilterCollapsed.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useFilterCollapsed = useFilterCollapsed;
+var _FilterContext = require("../FilterContext");
+/**
+ * 判断 Filter 组件是否处于折叠模式
+ * 支持通过 context 或 prop 来判断
+ * @param isCollapsedProp 通过 prop 传入的 _isCollapsed 值
+ * @returns 是否处于折叠模式
+ */
+function useFilterCollapsed(isCollapsedProp = false) {
+  const {
+    isCollapsed: isCollapsedFromContext
+  } = (0, _FilterContext.useFilterContext)();
+  return isCollapsedFromContext || isCollapsedProp;
+}
+var _default = exports.default = useFilterCollapsed;

package/lib/filter/hooks/useFilterTooltip.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export interface UseFilterTooltipOptions {
+    /** 是否有选中的值 */
+    hasValue: boolean;
+    /** Tooltip 显示的内容 */
+    label?: ReactNode;
+    content: ReactNode;
+    /** 是否禁用 Tooltip，默认 false */
+    disabled?: boolean;
+    /** Popover 关闭后的延迟时间（毫秒），用于防止 Tooltip 立即显示，默认 100 */
+    closeDelay?: number;
+}
+export interface UseFilterTooltipReturn {
+    /** Popover 状态变化时调用，用于同步状态 */
+    onPopoverOpenChange: (open: boolean) => void;
+    /** 用 Tooltip 包裹 children */
+    wrapWithTooltip: (children: ReactNode) => ReactNode;
+}
+/**
+ * 用于管理 Filter 组件的 Tooltip 显示逻辑
+ *
+ * 功能：
+ * 1. 在有选中值时，hover 显示 Tooltip
+ * 2. 当 Popover 打开时，自动关闭 Tooltip
+ * 3. 当 Popover 关闭后，需要鼠标移出再移入才会显示 Tooltip
+ * 4. 没有值时不显示 Tooltip
+ */
+export declare function useFilterTooltip({ hasValue, label, content, disabled, closeDelay, }: UseFilterTooltipOptions): UseFilterTooltipReturn;
+export default useFilterTooltip;