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

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

@@ -0,0 +1,23 @@
+import type { FC, ReactNode } from 'react';
+import type { BaseFilterProps, InternalFilterProps } from '../type';
+export interface SelectOption {
+    label: ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+export interface FilterSelectProps extends BaseFilterProps, InternalFilterProps {
+    /** 选项列表 */
+    options?: SelectOption[];
+    /** 当前选中值 */
+    value?: string;
+    /** 值变化回调 */
+    onChange?: (value: string) => void;
+    /** 自定义渲染选项 */
+    optionRender?: (option: SelectOption, info: {
+        index: number;
+    }) => ReactNode;
+    /** 是否显示搜索框，默认为 false */
+    showSearch?: boolean;
+}
+declare const FilterSelect: FC<FilterSelectProps>;
+export default FilterSelect;

package/lib/filter/components/FilterSelect.js

@@ -0,0 +1,221 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _empty = _interopRequireDefault(require("../../empty"));
+var _theme = _interopRequireDefault(require("../../theme"));
+var _icons = require("@oceanbase/icons");
+var _useControlledState = require("../hooks/useControlledState");
+var _FilterContext = require("../FilterContext");
+var _useFilterCollapsed = require("../hooks/useFilterCollapsed");
+var _useFilterTooltip = require("../hooks/useFilterTooltip");
+var _style = _interopRequireWildcard(require("../style"));
+var _utils = require("../utils");
+var _FilterButton = _interopRequireDefault(require("./FilterButton"));
+var _input = _interopRequireDefault(require("../../input"));
+var _antd = require("antd");
+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 FilterSelect = ({
+  options = [],
+  value,
+  onChange,
+  icon,
+  label,
+  bordered = true,
+  optionRender,
+  loading = false,
+  showSearch = false,
+  _isCollapsed = false,
+  ...restProps
+}) => {
+  const isCollapsed = (0, _useFilterCollapsed.useFilterCollapsed)(_isCollapsed);
+  const {
+    token
+  } = _theme.default.useToken();
+  const {
+    prefixCls
+  } = (0, _style.default)();
+  const filterButtonRef = (0, _react.useRef)(null);
+  const {
+    updateFilterValue
+  } = (0, _FilterContext.useFilterContext)();
+  const filterId = (0, _react.useMemo)(() => (0, _utils.generateFilterId)('select', label), [label]);
+
+  // 搜索关键词状态
+  const [searchKeyword, setSearchKeyword] = (0, _react.useState)('');
+
+  // 从 restProps 中排除 onOpenChange，避免类型冲突
+  const {
+    onOpenChange: externalOnOpenChange,
+    ...filterButtonProps
+  } = restProps;
+
+  // 使用受控状态 hook
+  const [currentValue, setValue] = (0, _useControlledState.useControlledState)(value, '', onChange);
+
+  // 获取选中值的 label
+  const selectedOption = options.find(option => option.value === currentValue);
+  const selectedLabel = selectedOption?.label;
+  const currentLabel = selectedLabel || label;
+
+  // 使用 Tooltip hook
+  const {
+    onPopoverOpenChange,
+    wrapWithTooltip
+  } = (0, _useFilterTooltip.useFilterTooltip)({
+    hasValue: !!currentValue,
+    label,
+    content: selectedLabel ? selectedLabel : null,
+    disabled: isCollapsed // 折叠模式下禁用 Tooltip
+  });
+
+  // 处理 Popover 状态变化
+  const handlePopoverOpenChange = open => {
+    onPopoverOpenChange(open);
+    externalOnOpenChange?.(open);
+    // 弹窗关闭时清空搜索关键词
+    if (!open) {
+      setSearchKeyword('');
+    }
+  };
+
+  // 当值变化时，更新 context 中的值
+  (0, _react.useEffect)(() => {
+    if (isCollapsed && updateFilterValue) {
+      updateFilterValue(filterId, label, currentValue, options, 'select');
+    }
+  }, [isCollapsed, updateFilterValue, filterId, label, currentValue, options]);
+  const handleChange = option => {
+    if (option.disabled) {
+      return;
+    }
+    setValue(option.value);
+    filterButtonRef.current?.closePopover();
+  };
+  const handleClear = () => {
+    setValue('');
+  };
+
+  // 根据搜索关键词过滤选项
+  const filteredOptions = (0, _react.useMemo)(() => {
+    if (!showSearch || !searchKeyword) return options;
+    return (0, _utils.filterOptions)(options, searchKeyword);
+  }, [showSearch, searchKeyword, options]);
+
+  // 渲染弹框内容
+  const renderContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [showSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        marginInline: 4,
+        marginBottom: 8
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
+        placeholder: "\u641C\u7D22",
+        prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {}),
+        allowClear: true,
+        value: searchKeyword,
+        onChange: e => setSearchKeyword(e.target.value),
+        onClick: e => e.stopPropagation()
+      })
+    }), filteredOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.default, {
+      image: _empty.default.PRESENTED_IMAGE_SIMPLE,
+      description: "\u65E0\u5339\u914D\u7ED3\u679C",
+      style: {
+        padding: '16px 0'
+      }
+    }) : filteredOptions.map((option, index) => {
+      const isSelected = currentValue === option.value;
+      const isDisabled = option.disabled || false;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
+        gap: 8,
+        className: (0, _style.getFilterCls)(prefixCls, 'select-option'),
+        onClick: () => handleChange(option),
+        justify: "space-between",
+        style: {
+          cursor: isDisabled ? 'not-allowed' : 'pointer',
+          color: isDisabled ? token.colorTextDisabled : 'inherit'
+        },
+        children: [optionRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            flex: 1
+          },
+          children: optionRender(option, {
+            index
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+          children: option.label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            width: 14,
+            flexShrink: 0
+          },
+          children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {
+            style: {
+              color: token.colorPrimary
+            }
+          })
+        })]
+      }, option.value);
+    })]
+  });
+  const wrappedContent = (0, _utils.wrapContent)(renderContent);
+
+  // 折叠模式
+  if (isCollapsed) {
+    const hasValue = !!currentValue;
+    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: wrappedContent,
+        loading: loading,
+        selected: hasValue,
+        onOpenChange: handlePopoverOpenChange,
+        ...filterButtonProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+          style: (0, _utils.getWrappedValueStyle)(hasValue),
+          children: hasValue ? currentLabel : (0, _utils.getPlaceholder)()
+        })
+      })]
+    });
+  }
+
+  // 正常模式
+  const filterButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterButton.default, {
+    ref: filterButtonRef,
+    icon: icon,
+    label: label,
+    bordered: bordered,
+    onClear: handleClear,
+    content: wrappedContent,
+    loading: loading,
+    selected: !!currentValue,
+    onOpenChange: handlePopoverOpenChange,
+    ...filterButtonProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+      children: currentLabel
+    })
+  });
+  return wrapWithTooltip(filterButton);
+};
+var _default = exports.default = FilterSelect;

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

@@ -0,0 +1,28 @@
+import type { FC, ReactNode } from 'react';
+import type { BaseFilterProps, InternalFilterProps } from '../type';
+export interface FilterSlotProps extends BaseFilterProps, InternalFilterProps {
+    /**
+     * 直接渲染的自定义内容，不包裹 FilterButton + Popover。
+     * Filter.Slot 仅作为响应式收集的包裹容器，
+     * 会通过 cloneElement 自动注入 value/onChange。
+     */
+    children?: ReactNode;
+    /**
+     * Popover 弹框中的自定义筛选内容。
+     * 设置后使用 FilterButton + Popover 模式，
+     * 会通过 cloneElement 自动注入 value/onChange。
+     */
+    dropdownRender?: ReactNode;
+    /** 当前筛选值（受控） */
+    value?: any;
+    /** 默认筛选值（非受控） */
+    defaultValue?: any;
+    /** 值变化回调 */
+    onChange?: (value: any) => void;
+    /** 将 value 格式化为展示文本，用于 FilterButton 标签和折叠态 Tooltip */
+    formatValue?: (value: any) => string;
+    /** 未选值时的占位文本 */
+    placeholder?: string;
+}
+declare const FilterSlot: FC<FilterSlotProps>;
+export default FilterSlot;

package/lib/filter/components/FilterSlot.js

@@ -0,0 +1,174 @@
+"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 _useControlledState = require("../hooks/useControlledState");
+var _FilterContext = require("../FilterContext");
+var _useFilterCollapsed = require("../hooks/useFilterCollapsed");
+var _useFilterTooltip = require("../hooks/useFilterTooltip");
+var _style = _interopRequireWildcard(require("../style"));
+var _utils = require("../utils");
+var _FilterButton = _interopRequireDefault(require("./FilterButton"));
+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 FilterSlot = ({
+  children,
+  dropdownRender,
+  value,
+  defaultValue,
+  onChange,
+  formatValue,
+  placeholder,
+  icon,
+  label,
+  bordered = true,
+  loading = false,
+  _isCollapsed = false,
+  ...restProps
+}) => {
+  const isCollapsed = (0, _useFilterCollapsed.useFilterCollapsed)(_isCollapsed);
+  const {
+    token
+  } = _theme.default.useToken();
+  const {
+    prefixCls
+  } = (0, _style.default)();
+  const filterButtonRef = (0, _react.useRef)(null);
+  const {
+    updateFilterValue
+  } = (0, _FilterContext.useFilterContext)();
+  const filterId = (0, _react.useMemo)(() => (0, _utils.generateFilterId)('slot', label), [label]);
+  const {
+    onOpenChange: externalOnOpenChange,
+    ...filterButtonProps
+  } = restProps;
+  const [currentValue, setValue] = (0, _useControlledState.useControlledState)(value, defaultValue, onChange);
+  const hasValue = currentValue !== undefined && currentValue !== null && currentValue !== '';
+  const formattedText = hasValue && formatValue ? formatValue(currentValue) : '';
+  const displayText = hasValue ? formattedText || String(currentValue) : '';
+  const currentLabel = hasValue && displayText ? displayText : label;
+  const isDirectRender = !dropdownRender;
+  const {
+    onPopoverOpenChange,
+    wrapWithTooltip
+  } = (0, _useFilterTooltip.useFilterTooltip)({
+    hasValue,
+    label,
+    content: displayText || null,
+    disabled: isCollapsed || isDirectRender
+  });
+  const handlePopoverOpenChange = open => {
+    onPopoverOpenChange(open);
+    externalOnOpenChange?.(open);
+  };
+  (0, _react.useEffect)(() => {
+    if (isCollapsed && updateFilterValue) {
+      updateFilterValue(filterId, label, currentValue, [{
+        formattedText
+      }], 'slot');
+    }
+  }, [isCollapsed, updateFilterValue, filterId, label, currentValue, formattedText]);
+  const handleClear = () => {
+    setValue(undefined);
+  };
+  const handleChildChange = (0, _react.useCallback)((...args) => {
+    const firstArg = args[0];
+    let newValue;
+    if (firstArg && typeof firstArg === 'object' && 'target' in firstArg && typeof firstArg.target === 'object') {
+      newValue = 'value' in firstArg.target ? firstArg.target.value : firstArg.target.checked;
+    } else {
+      newValue = firstArg;
+    }
+    setValue(newValue);
+  }, [setValue]);
+  const injectValueProps = (0, _react.useCallback)(element => {
+    if ( /*#__PURE__*/(0, _react.isValidElement)(element)) {
+      const childElement = element;
+      const originalOnChange = childElement.props?.onChange;
+      return /*#__PURE__*/_react.default.cloneElement(childElement, {
+        value: currentValue,
+        onChange: (...args) => {
+          handleChildChange(...args);
+          originalOnChange?.(...args);
+        }
+      });
+    }
+    return element;
+  }, [currentValue, handleChildChange]);
+
+  // ======== 直接渲染模式（仅 children，无 dropdownRender） ========
+  if (isDirectRender) {
+    if (isCollapsed) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          paddingBlock: token.paddingXXS
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginBottom: 8
+          },
+          children: label
+        }), injectValueProps(children)]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: injectValueProps(children)
+    });
+  }
+
+  // ======== Popover 模式（设置了 dropdownRender） ========
+  const wrappedContent = (0, _utils.wrapContent)(injectValueProps(dropdownRender));
+  if (isCollapsed) {
+    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: wrappedContent,
+        loading: loading,
+        selected: hasValue,
+        onOpenChange: handlePopoverOpenChange,
+        ...filterButtonProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+          style: (0, _utils.getWrappedValueStyle)(hasValue),
+          children: hasValue ? displayText : placeholder || (0, _utils.getPlaceholder)()
+        })
+      })]
+    });
+  }
+  const filterButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterButton.default, {
+    ref: filterButtonRef,
+    icon: icon,
+    label: label,
+    bordered: bordered,
+    onClear: handleClear,
+    content: wrappedContent,
+    loading: loading,
+    selected: hasValue,
+    onOpenChange: handlePopoverOpenChange,
+    ...filterButtonProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+      children: hasValue ? currentLabel : placeholder || label
+    })
+  });
+  return wrapWithTooltip(filterButton);
+};
+var _default = exports.default = FilterSlot;

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

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import { type SwitchProps } from '../../switch';
+import type { BaseFilterProps } from '../type';
+export interface FilterSwitchProps extends BaseFilterProps {
+    /** 当前值 */
+    value?: boolean;
+    /** 值变化回调 */
+    onChange?: (value: boolean) => void;
+    /** Switch 组件的额外属性 */
+    switchProps?: SwitchProps;
+}
+declare const FilterSwitch: FC<FilterSwitchProps>;
+export default FilterSwitch;

package/lib/filter/components/FilterSwitch.js

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _antd = require("antd");
+var _theme = _interopRequireDefault(require("../../theme"));
+var _switch = _interopRequireDefault(require("../../switch"));
+var _useControlledState = require("../hooks/useControlledState");
+var _FilterContext = require("../FilterContext");
+var _useFilterCollapsed = require("../hooks/useFilterCollapsed");
+var _utils = require("../utils");
+var _FilterButton = _interopRequireDefault(require("./FilterButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const FilterSwitch = ({
+  value,
+  onChange,
+  icon,
+  label,
+  bordered = true,
+  switchProps,
+  ...restProps
+}) => {
+  const {
+    token
+  } = _theme.default.useToken();
+  const isCollapsed = (0, _useFilterCollapsed.useFilterCollapsed)();
+  const {
+    updateFilterValue
+  } = (0, _FilterContext.useFilterContext)();
+  const filterId = (0, _react.useMemo)(() => (0, _utils.generateFilterId)('switch', label), [label]);
+
+  // 支持从 Form.Item 通过 `valuePropName="checked"` 传入的 checked 属性
+  const propChecked = restProps.checked;
+
+  // 使用受控状态 hook：优先使用明确的 value，其次使用 checked（来自 Form.Item）
+  const [currentValue, setValue] = (0, _useControlledState.useControlledState)(value !== undefined ? value : propChecked, false, onChange);
+
+  // 当值变化时，更新 context 中的值
+  (0, _react.useEffect)(() => {
+    if (isCollapsed && updateFilterValue) {
+      updateFilterValue(filterId, label, currentValue, undefined, 'switch');
+    }
+  }, [isCollapsed, updateFilterValue, filterId, label, currentValue]);
+  const handleClear = () => {
+    setValue(false);
+  };
+
+  // 渲染弹框内容
+  const renderContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
+    justify: "space-between",
+    align: "center",
+    style: {
+      paddingBlock: token.paddingXXS
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.default, {
+      checked: currentValue,
+      onChange: setValue,
+      size: "small",
+      ...switchProps
+    })]
+  });
+
+  // 如果处于折叠模式，只渲染内容部分
+  if (isCollapsed) {
+    return renderContent;
+  }
+  const wrappedContent = (0, _utils.wrapContent)(renderContent, '8px 12px');
+
+  // 从 restProps 中排除不需要的属性，避免类型冲突
+  const {
+    ...filterButtonProps
+  } = restProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterButton.default, {
+    icon: icon,
+    label: label,
+    bordered: bordered,
+    onClear: handleClear,
+    content: wrappedContent,
+    ...filterButtonProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: label
+    })
+  });
+};
+var _default = exports.default = FilterSwitch;

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

@@ -0,0 +1,20 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import type { BaseFilterProps } from '../type';
+import type { FilterButtonRef } from './FilterButton';
+export interface FilterWrapProps extends Omit<BaseFilterProps, 'label'> {
+    children: ReactNode;
+    label?: ReactNode;
+    /** 是否折叠模式（使用弹框包裹所有子元素），默认 false */
+    collapsed?: boolean;
+    /** 额外内容 */
+    extra?: ReactNode;
+    filterButtonRef?: React.RefObject<FilterButtonRef>;
+    gap?: number;
+    /** 是否显示计数 默认 true */
+    showCount?: boolean;
+    /** 点击清除所有按钮时的回调 */
+    onClearAll?: () => void;
+}
+declare const FilterWrap: FC<FilterWrapProps>;
+export default FilterWrap;