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

package/lib/filter/hooks/useFilterTooltip.js

@@ -0,0 +1,121 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useFilterTooltip = useFilterTooltip;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _theme = _interopRequireDefault(require("../../theme"));
+var _tooltip = _interopRequireDefault(require("../../tooltip"));
+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 组件的 Tooltip 显示逻辑
+ *
+ * 功能：
+ * 1. 在有选中值时，hover 显示 Tooltip
+ * 2. 当 Popover 打开时，自动关闭 Tooltip
+ * 3. 当 Popover 关闭后，需要鼠标移出再移入才会显示 Tooltip
+ * 4. 没有值时不显示 Tooltip
+ */
+function useFilterTooltip({
+  hasValue,
+  label,
+  content,
+  disabled = false,
+  closeDelay = 100
+}) {
+  const {
+    token
+  } = _theme.default.useToken();
+  // Tooltip 是否可见
+  const [tooltipVisible, setTooltipVisible] = (0, _react.useState)(false);
+  // Popover 是否打开
+  const [isPopoverOpen, setIsPopoverOpen] = (0, _react.useState)(false);
+  // 标记 Popover 是否刚刚关闭
+  const justClosedRef = (0, _react.useRef)(false);
+  // 标记 Popover 是否曾经打开过，用于区分初始状态和关闭状态
+  const hasEverOpenedRef = (0, _react.useRef)(false);
+
+  // Popover 状态变化时处理
+  (0, _react.useEffect)(() => {
+    if (isPopoverOpen) {
+      // Popover 打开时，记录已打开过，并关闭 Tooltip
+      hasEverOpenedRef.current = true;
+      setTooltipVisible(false);
+      justClosedRef.current = false;
+    } else if (hasEverOpenedRef.current) {
+      // 只有在 Popover 曾经打开过的情况下，才执行关闭逻辑
+      // 避免初始化时触发这个逻辑
+      justClosedRef.current = true;
+      setTooltipVisible(false);
+      const timer = setTimeout(() => {
+        justClosedRef.current = false;
+      }, closeDelay);
+      return () => clearTimeout(timer);
+    }
+  }, [isPopoverOpen, closeDelay]);
+
+  // 当没有值时，关闭 Tooltip
+  (0, _react.useEffect)(() => {
+    if (!hasValue) {
+      setTooltipVisible(false);
+    }
+  }, [hasValue]);
+
+  // Popover 状态变化时调用
+  const onPopoverOpenChange = (0, _react.useCallback)(open => {
+    setIsPopoverOpen(open);
+  }, []);
+
+  // Tooltip 状态变化时调用
+  const handleTooltipOpenChange = (0, _react.useCallback)(open => {
+    // 如果禁用或没有值，不显示
+    if (disabled || !hasValue) {
+      setTooltipVisible(false);
+      return;
+    }
+
+    // 如果 Popover 打开或刚刚关闭，不显示
+    if (isPopoverOpen || justClosedRef.current) {
+      setTooltipVisible(false);
+      return;
+    }
+    setTooltipVisible(open);
+  }, [disabled, hasValue, isPopoverOpen]);
+
+  // 用 Tooltip 包裹 children
+  const wrapWithTooltip = (0, _react.useCallback)(children => {
+    if (disabled) {
+      return children;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+      mouseEnterDelay: 0.8,
+      title: hasValue ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
+        gap: 4,
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            color: token.colorTextLabel,
+            whiteSpace: 'nowrap'
+          },
+          children: [label, ": "]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Flex, {
+          wrap: "wrap",
+          children: content
+        })]
+      }) : null,
+      open: tooltipVisible,
+      onOpenChange: handleTooltipOpenChange,
+      children: children
+    });
+  }, [disabled, hasValue, label, content, tooltipVisible, handleTooltipOpenChange, token]);
+  return {
+    onPopoverOpenChange,
+    wrapWithTooltip
+  };
+}
+var _default = exports.default = useFilterTooltip;

package/lib/filter/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export { FilterProvider, useFilterContext } from './FilterContext';
+export type { BaseFilterProps, InternalFilterProps } from './type';
+export type { FilterSelectProps, SelectOption } from './components/FilterSelect';
+export type { FilterCheckboxProps, CheckboxOption } from './components/FilterCheckbox';
+export type { FilterCascaderProps, CascaderOption } from './components/FilterCascader';
+export type { FilterSwitchProps } from './components/FilterSwitch';
+export type { FilterRangeProps, RangeOption } from './components/FilterRange';
+export type { FilterInputProps } from './components/FilterInput';
+export type { FilterSlotProps } from './components/FilterSlot';
+export type { FilterWrapProps } from './components/FilterWrap';
+export type { ResponsiveFilterGroupProps } from './components/ResponsiveFilterGroup';
+declare const Filter: {
+    Select: import("react").FC<import("./components/FilterSelect").FilterSelectProps>;
+    Checkbox: import("react").NamedExoticComponent<import("./components/FilterCheckbox").FilterCheckboxProps>;
+    Range: import("react").FC<import("./components/FilterRange").FilterRangeProps>;
+    Wrap: import("react").FC<import("./components/FilterWrap").FilterWrapProps>;
+    Cascader: import("react").FC<import("./components/FilterCascader/types").FilterCascaderProps>;
+    Switch: import("react").FC<import("./components/FilterSwitch").FilterSwitchProps>;
+    Input: import("react").FC<import("./components/FilterInput").FilterInputProps>;
+    Slot: import("react").FC<import("./components/FilterSlot").FilterSlotProps>;
+    ResponsiveGroup: import("react").FC<import("./components/ResponsiveFilterGroup").ResponsiveFilterGroupProps>;
+};
+export default Filter;

package/lib/filter/index.js

@@ -0,0 +1,45 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilterProvider", {
+  enumerable: true,
+  get: function () {
+    return _FilterContext.FilterProvider;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useFilterContext", {
+  enumerable: true,
+  get: function () {
+    return _FilterContext.useFilterContext;
+  }
+});
+var _index = _interopRequireDefault(require("./components/FilterCascader/index"));
+var _FilterCheckbox = _interopRequireDefault(require("./components/FilterCheckbox"));
+var _FilterRange = _interopRequireDefault(require("./components/FilterRange"));
+var _FilterInput = _interopRequireDefault(require("./components/FilterInput"));
+var _FilterSelect = _interopRequireDefault(require("./components/FilterSelect"));
+var _FilterSlot = _interopRequireDefault(require("./components/FilterSlot"));
+var _FilterSwitch = _interopRequireDefault(require("./components/FilterSwitch"));
+var _FilterWrap = _interopRequireDefault(require("./components/FilterWrap"));
+var _ResponsiveFilterGroup = _interopRequireDefault(require("./components/ResponsiveFilterGroup"));
+var _FilterContext = require("./FilterContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function markAsFilterComponent(component) {
+  component.__isFilterComponent = true;
+  return component;
+}
+const Filter = {
+  Select: markAsFilterComponent(_FilterSelect.default),
+  Checkbox: markAsFilterComponent(_FilterCheckbox.default),
+  Range: markAsFilterComponent(_FilterRange.default),
+  Wrap: markAsFilterComponent(_FilterWrap.default),
+  Cascader: markAsFilterComponent(_index.default),
+  Switch: markAsFilterComponent(_FilterSwitch.default),
+  Input: markAsFilterComponent(_FilterInput.default),
+  Slot: markAsFilterComponent(_FilterSlot.default),
+  ResponsiveGroup: _ResponsiveFilterGroup.default
+};
+var _default = exports.default = Filter;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { GlobalToken } from '../../theme/interface';
+export interface FilterToken extends GlobalToken {
+    antCls: string;
+    componentCls: string;
+    iconCls: string;
+    prefixCls: string;
+}
+export interface UseFilterStyleResult {
+    wrapSSR: (node: React.ReactElement) => React.ReactElement;
+    hashId: string;
+    prefixCls: string;
+}
+export default function useFilterStyle(prefixCls?: string): UseFilterStyleResult;
+export declare const getFilterCls: (prefixCls: string, className: string) => string;

package/lib/filter/style/index.js

@@ -0,0 +1,308 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFilterStyle;
+exports.getFilterCls = void 0;
+var _react = require("react");
+var _cssinjs = require("@ant-design/cssinjs");
+var _theme = _interopRequireDefault(require("../../theme"));
+var _configProvider = _interopRequireDefault(require("../../config-provider"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const genSelectOptionStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-select-option`]: {
+      paddingBlock: token.paddingXXS,
+      paddingInline: token.paddingXS,
+      cursor: 'pointer',
+      borderRadius: token.borderRadius,
+      transition: `background-color ${token.motionDurationMid} ease-in-out`,
+      '&:hover': {
+        backgroundColor: token.colorBgTextHover,
+        // hover 时图标切换效果
+        [`${componentCls}-arrow-icon`]: {
+          opacity: 0,
+          visibility: 'hidden'
+        },
+        [`${componentCls}-clear-icon`]: {
+          opacity: 1,
+          visibility: 'visible'
+        }
+      },
+      // 有选中子项的父级选项样式
+      [`&${componentCls}-has-selected`]: {
+        backgroundColor: token.colorBgTextHover
+      },
+      // flat 模式下激活的父节点样式（优先级更高）
+      [`&${componentCls}-flat-active`]: {
+        backgroundColor: token.colorBgTextHover,
+        '&:hover': {
+          backgroundColor: token.colorBgTextHover
+        }
+      }
+    }
+  };
+};
+const genCheckboxOptionStyle = token => {
+  const {
+    antCls,
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-checkbox-option`]: {
+      paddingBlock: token.paddingXXS,
+      paddingInline: token.paddingXS,
+      cursor: 'pointer',
+      borderRadius: token.borderRadius,
+      '&:hover': {
+        backgroundColor: token.colorBgTextHover
+      },
+      [`&${antCls}-checkbox-wrapper-disabled`]: {
+        cursor: 'not-allowed',
+        color: token.colorTextDisabled,
+        '&:hover': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  };
+};
+const genSwitchOptionStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-switch-option`]: {
+      cursor: 'default'
+    }
+  };
+};
+
+// 通用图标样式
+const genIconStyle = token => {
+  const {
+    componentCls
+  } = token;
+
+  // 基础计数样式（复用）
+  const baseCountStyle = {
+    opacity: 1,
+    fontSize: token.fontSizeSM,
+    color: token.colorIcon,
+    borderRadius: 8,
+    width: '18px',
+    height: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // 基础清除图标样式（复用）
+  const baseClearIconStyle = {
+    opacity: 0,
+    cursor: 'pointer',
+    visibility: 'hidden',
+    position: 'absolute',
+    color: token.colorIcon,
+    fontSize: token.fontSizeSM,
+    transform: 'translateY(-50%)',
+    transition: `opacity ${token.motionDurationMid} ease-in-out, visibility ${token.motionDurationMid} ease-in-out`
+  };
+
+  // 基础图标容器样式（复用）
+  const baseIconWrapperStyle = {
+    position: 'relative',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: token.paddingXS,
+    color: token.colorIcon
+  };
+  return {
+    [`${componentCls}-button-prefix-icon`]: {
+      marginRight: token.paddingXXS,
+      color: token.colorIcon
+    },
+    [`${componentCls}-icon-wrapper`]: {
+      ...baseIconWrapperStyle
+    },
+    [`${componentCls}-count`]: {
+      ...baseCountStyle,
+      backgroundColor: 'var(--ob-color-border-container)',
+      padding: '0px 2px'
+    },
+    [`${componentCls}-arrow-icon`]: {
+      opacity: 1,
+      fontSize: token.fontSizeSM,
+      color: token.colorIcon,
+      visibility: 'visible',
+      transition: `opacity ${token.motionDurationMid} ease-in-out, visibility ${token.motionDurationMid} ease-in-out`
+    },
+    [`${componentCls}-clear-icon`]: {
+      ...baseClearIconStyle,
+      left: 0,
+      top: '60%'
+    },
+    [`${componentCls}-wrap-icon-wrapper`]: {
+      ...baseIconWrapperStyle,
+      '&:hover': {
+        [`${componentCls}-wrap-count`]: {
+          opacity: 0,
+          visibility: 'hidden'
+        },
+        [`${componentCls}-wrap-clear-icon`]: {
+          opacity: 1,
+          visibility: 'visible'
+        }
+      }
+    },
+    [`${componentCls}-wrap-count`]: {
+      ...baseCountStyle,
+      backgroundColor: 'var(--ob-color-border-container)',
+      visibility: 'visible',
+      transition: `opacity ${token.motionDurationMid} ease-in-out, visibility ${token.motionDurationMid} ease-in-out`
+    },
+    [`${componentCls}-wrap-clear-icon`]: {
+      ...baseClearIconStyle,
+      ...baseCountStyle,
+      opacity: 0,
+      cursor: 'pointer',
+      visibility: 'hidden',
+      position: 'absolute',
+      left: 0,
+      top: '50%'
+    }
+  };
+};
+const genFilterButtonStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-button-wrapper`]: {
+      display: 'inline-block'
+    },
+    [`${componentCls}-button`]: {
+      height: token.controlHeight,
+      paddingBlock: token.paddingXXS,
+      paddingInline: token.paddingSM,
+      borderRadius: token.borderRadius,
+      backgroundColor: token.white,
+      cursor: 'pointer',
+      display: 'flex',
+      gap: token.paddingXS,
+      alignItems: 'center',
+      justifyContent: 'right',
+      color: token.colorText,
+      whiteSpace: 'nowrap',
+      maxWidth: '268px',
+      '&:hover': {
+        [`${componentCls}-arrow-icon`]: {
+          opacity: 0,
+          visibility: 'hidden'
+        },
+        [`${componentCls}-clear-icon`]: {
+          opacity: 1,
+          visibility: 'visible'
+        }
+      }
+    },
+    [`${componentCls}-button-label-wrapper`]: {
+      width: '100%',
+      paddingBlock: token.paddingXS,
+      paddingInline: token.paddingSM,
+      borderBottom: `1px solid ${token.colorFillSecondary}`,
+      color: token.colorTextSecondary,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    [`${componentCls}-button-label-wrapper-no-border`]: {
+      borderBottom: 'none',
+      padding: `${(0, _cssinjs.unit)(token.paddingXS)} ${(0, _cssinjs.unit)(token.paddingSM)} 0px`
+    },
+    [`${componentCls}-border`]: {
+      border: `${token.lineWidth}px solid ${token.colorBorder}`,
+      transition: `background-color ${token.motionDurationSlow} ease-in-out, border-color ${token.motionDurationSlow} ease-in-out`,
+      '&:hover, &:active, &:focus, &:focus-within': {
+        borderColor: token.colorTextTertiary
+      }
+    },
+    [`${componentCls}-active`]: {
+      borderColor: token.colorBorder,
+      color: token.colorTextLabel
+    },
+    [`${componentCls}-disabled`]: {
+      backgroundColor: token.colorBgContainerDisabled,
+      borderColor: token.colorBorder,
+      color: token.colorTextQuaternary,
+      cursor: 'not-allowed',
+      '&:hover, &:active, &:focus, &:focus-within': {
+        borderColor: token.colorBorder,
+        [`${componentCls}-arrow-icon`]: {
+          opacity: 1,
+          visibility: 'visible'
+        },
+        [`${componentCls}-clear-icon`]: {
+          opacity: 0,
+          visibility: 'hidden'
+        }
+      }
+    },
+    [`${componentCls}-selected`]: {
+      backgroundColor: 'var(--ob-color-bg-hover)'
+    }
+  };
+};
+const genFilterTextEllipsisStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-text-ellipsis`]: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  };
+};
+const genFilterStyle = token => {
+  return [genIconStyle(token), genSelectOptionStyle(token), genCheckboxOptionStyle(token), genSwitchOptionStyle(token), genFilterButtonStyle(token), genFilterTextEllipsisStyle(token)];
+};
+function useFilterStyle(prefixCls = 'ant-filter') {
+  const {
+    theme,
+    token
+  } = _theme.default.useToken();
+  const {
+    getPrefixCls,
+    iconPrefixCls
+  } = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  const filterToken = {
+    ...token,
+    antCls: getPrefixCls(),
+    componentCls: `.${prefixCls}`,
+    iconCls: `.${iconPrefixCls}`,
+    prefixCls
+  };
+  const wrapSSR = (0, _cssinjs.useStyleRegister)({
+    theme,
+    token,
+    path: ['filter', prefixCls],
+    hashId: '',
+    order: -900
+  }, () => genFilterStyle(filterToken));
+  return {
+    wrapSSR,
+    hashId: '',
+    prefixCls
+  };
+}
+
+// 导出样式类名生成器，方便组件使用
+const getFilterCls = (prefixCls, className) => `${prefixCls}-${className}`;
+exports.getFilterCls = getFilterCls;

package/lib/filter/type.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { PopoverProps } from 'antd';
+export interface BaseFilterProps extends Omit<PopoverProps, 'title' | 'content' | 'children'> {
+    /** 前缀图标 */
+    icon?: ReactNode;
+    /** 筛选器标签 */
+    label?: ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示边框，默认 true */
+    bordered?: boolean;
+    /** 底部操作区域 */
+    footer?: ReactNode;
+    /** 额外内容，显示在筛选器弹框的标签旁边 */
+    extra?: ReactNode;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 是否可以被 ResponsiveGroup 收集到折叠容器中，默认为 true */
+    collapsible?: boolean;
+    /** 是否始终折叠到"更多"按钮中，无论容器宽度是否充足，默认为 false */
+    alwaysCollapse?: boolean;
+    /** 是否显示后缀图标区域（包括下拉箭头和清除图标），默认 true */
+    showSuffixIcon?: boolean;
+    /** 是否显示清除按钮，默认 true */
+    allowClear?: boolean;
+}
+/** 内部属性，用于标记组件是否在折叠模式中 */
+export interface InternalFilterProps {
+    /** @internal 是否处于折叠模式 */
+    _isCollapsed?: boolean;
+    /**
+     * @internal
+     * 是否为 Wrap 组件透传，默认 false
+     */
+    _isInWrapComponent?: boolean;
+    /**
+     * @internal
+     * 是否为扁平化模式，默认 false
+     */
+    _isFlat?: boolean;
+}

package/lib/filter/type.js

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

package/lib/filter/utils.d.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties, ReactNode } from 'react';
+export declare const getIcon: (icon?: 'time' | 'filter') => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * 生成稳定的 filterId
+ * 基于 componentName 和 label 生成，确保 label 变化时 ID 也会更新
+ */
+export declare const generateFilterId: (componentName: string, label: ReactNode, fallbackIndex?: number) => string;
+/**
+ * 获取 Filter 组件的占位符文案
+ */
+export declare const getPlaceholder: () => string;
+/**
+ * Wrapped 模式下显示值的样式
+ */
+export declare const wrappedValueStyle: CSSProperties;
+/**
+ * 获取 Wrapped 模式下显示值的样式（包含颜色）
+ * @param hasValue 是否有值
+ */
+export declare const getWrappedValueStyle: (hasValue: boolean) => CSSProperties;
+/**
+ * 包装 Filter 内容的容器
+ * @param content 内容
+ * @param padding 内边距，默认为 8
+ * @param maxHeight 最大高度，默认为 300
+ */
+export declare const wrapContent: (content: ReactNode, padding?: number | string, maxHeight?: number) => ReactNode;
+/**
+ * 深度比较两个数组是否相等（用于 options 比较）
+ */
+export declare const areArraysEqual: (a: unknown[] | undefined, b: unknown[] | undefined) => boolean;
+/**
+ * 稳定化 options 数组的引用（使用 JSON.stringify 作为 key）
+ * 这是一个普通函数，不是 Hook
+ */
+export declare const getStableOptionsKey: (options: unknown[] | undefined) => string;
+/**
+ * 将 ReactNode 转换为可搜索的字符串
+ * 用于搜索功能中的文本匹配
+ */
+export declare const normalizeLabel: (label: ReactNode) => string;
+/**
+ * 根据关键词过滤选项列表
+ * @param options 选项列表
+ * @param keyword 搜索关键词
+ * @returns 过滤后的选项列表
+ */
+export declare const filterOptions: <T extends {
+    label?: ReactNode;
+}>(options: T[], keyword: string) => T[];