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

package/lib/filter/components/FilterWrap.js

@@ -0,0 +1,306 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _theme = _interopRequireDefault(require("../../theme"));
+var _configProvider = _interopRequireDefault(require("../../config-provider"));
+var _enUS = _interopRequireDefault(require("../../locale/en-US"));
+var _FilterContext = require("../FilterContext");
+var _useFilterTooltip = require("../hooks/useFilterTooltip");
+var _FilterButton = _interopRequireDefault(require("./FilterButton"));
+var _CountNumber = _interopRequireDefault(require("./CountNumber"));
+var _icons = require("@oceanbase/icons");
+var _style = _interopRequireWildcard(require("../style"));
+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 FilterWrap = ({
+  children,
+  label,
+  icon,
+  bordered = true,
+  collapsed = false,
+  extra,
+  filterButtonRef,
+  gap = 8,
+  showCount = true,
+  onClearAll,
+  ...restProps
+}) => {
+  const {
+    token
+  } = _theme.default.useToken();
+  const {
+    locale: contextLocale
+  } = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  const filterLocale = contextLocale?.Filter || _enUS.default.Filter;
+  // 始终调用 Hook，但只在折叠模式下使用 filterValues
+  const contextValue = (0, _FilterContext.useFilterContext)();
+  const {
+    prefixCls
+  } = (0, _style.default)();
+
+  // 如果没有传入 label，使用国际化默认值
+  const filterLabel = label ?? filterLocale?.filters;
+  // 稳定化 filterValues 的引用，避免不必要的重新计算
+  // 需要包含 id 和 value，这样当值改变时也会触发更新
+  const stableFilterValuesKey = (0, _react.useMemo)(() => {
+    if (!collapsed || !contextValue.filterValues) return '';
+    return JSON.stringify(contextValue.filterValues.map(item => ({
+      id: item.id,
+      value: item.value
+    })));
+  }, [collapsed, contextValue.filterValues]);
+  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 '';
+    switch (componentName) {
+      case 'select':
+        {
+          const selectedOption = options?.find(opt => opt.value === value);
+          return selectedOption?.label ? String(selectedOption.label) : String(value);
+        }
+      case 'range':
+        {
+          // Range 的 value 是 [Dayjs, Dayjs]，需要使用 isSame 比较
+          const rangeValue = value;
+          if (!rangeValue || !Array.isArray(rangeValue) || rangeValue.length !== 2) {
+            return '';
+          }
+          const selectedOption = options?.find(opt => {
+            if (!opt.value || !rangeValue) return false;
+            // 使用 isSame 方法比较 Dayjs 对象
+            const optValue = opt.value;
+            return optValue[0]?.isSame?.(rangeValue[0], 'day') && optValue[1]?.isSame?.(rangeValue[1], 'day');
+          });
+          return selectedOption?.label ? String(selectedOption.label) : '';
+        }
+      case 'checkbox':
+        {
+          const selectedLabels = value.map(val => {
+            const option = options?.find(opt => opt.value === val);
+            return option?.label ? String(option.label) : val;
+          }).filter(Boolean);
+          return selectedLabels.join(', ');
+        }
+      case 'cascader':
+        {
+          const selectedLabels = value.map(valPair => {
+            const [parentVal, childVal] = valPair;
+            const parentOption = options?.find(opt => opt.value === parentVal);
+            const childOption = parentOption?.children?.find(childOpt => childOpt.value === childVal);
+            if (parentOption && childOption) {
+              return childOption.label ? String(childOption.label) : childVal;
+            }
+            return valPair.join('/');
+          });
+          return selectedLabels.join(', ');
+        }
+      case 'switch':
+        {
+          return value ? filterLocale?.open : '';
+        }
+      case 'input':
+        {
+          return String(value);
+        }
+      case 'slot':
+        {
+          const slotMeta = options;
+          if (slotMeta?.[0]?.formattedText) {
+            return slotMeta[0].formattedText;
+          }
+          return String(value);
+        }
+      default:
+        {
+          return String(value);
+        }
+    }
+  }, [filterLocale]);
+
+  // 生成 Tooltip 内容
+  const tooltipTitle = (0, _react.useMemo)(() => {
+    if (!collapsed || !filterValues || filterValues.length === 0) {
+      return null;
+    }
+    const validItems = filterValues.map(item => {
+      const formattedValue = formatValueForTooltip(item.value, item.options, item.componentName);
+      if (!formattedValue) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
+        gap: 4,
+        style: {
+          maxWidth: '300px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            color: token.colorTextLabel,
+            whiteSpace: 'nowrap'
+          },
+          children: [item.label, ":"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: formattedValue
+        })]
+      }, item.id);
+    }).filter(Boolean);
+    if (validItems.length === 0) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        maxWidth: 300,
+        padding: '0px 4px'
+      },
+      children: validItems
+    });
+  }, [filterValues, formatValueForTooltip, collapsed, token.colorTextLabel]);
+
+  // 使用 Tooltip hook
+  const {
+    onPopoverOpenChange,
+    wrapWithTooltip
+  } = (0, _useFilterTooltip.useFilterTooltip)({
+    hasValue: filterValues && filterValues.length > 0,
+    // label: filterLabel,
+    content: tooltipTitle,
+    disabled: !collapsed
+  });
+
+  // 如果不使用折叠模式，按原来的方式渲染
+  if (!collapsed) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Flex, {
+      gap: gap,
+      children: children
+    });
+  }
+
+  // 使用折叠模式
+  const handleClear = () => {
+    _react.Children.forEach(children, child => {
+      if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+        const props = child.props;
+        if (props.onChange) {
+          props.onChange(undefined);
+        }
+      }
+    });
+    if (contextValue.clearAllFilterValues) {
+      contextValue.clearAllFilterValues();
+    }
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
+    isCollapsed: true,
+    filterValues: contextValue.filterValues,
+    updateFilterValue: contextValue.updateFilterValue,
+    clearAllFilterValues: contextValue.clearAllFilterValues,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        padding: '8px 16px 16px',
+        maxHeight: 350,
+        overflowY: 'auto',
+        minWidth: 200,
+        maxWidth: 300,
+        fontSize: token.fontSize
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Flex, {
+        vertical: true,
+        gap: token.sizeXS,
+        children: _react.Children.map(children, (child, index) => {
+          if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+            const stableKey = child.key || `filter-wrap-child-${index}`;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+              children: child
+            }, stableKey);
+          }
+          return child;
+        })
+      })
+    })
+  });
+
+  // 从 restProps 中排除 onOpenChange，避免类型冲突
+  const {
+    onOpenChange: externalOnOpenChange,
+    ...filterButtonProps
+  } = restProps;
+  const filterButton = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FilterButton.default, {
+    ref: filterButtonRef,
+    icon: icon,
+    label: filterLabel,
+    bordered: bordered,
+    onClear: handleClear,
+    content: content,
+    extra: extra,
+    showSuffixIcon: false,
+    _isInWrapComponent: true,
+    showLabelDivider: !!restProps.footer,
+    onOpenChange: open => {
+      onPopoverOpenChange(open);
+      externalOnOpenChange?.(open);
+    },
+    selected: filterValues.length > 0,
+    ...filterButtonProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: filterLabel
+    }), showCount && filterValues.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _style.getFilterCls)(prefixCls, 'wrap-icon-wrapper'),
+      style: {
+        marginLeft: 0
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CountNumber.default, {
+        count: filterValues.length,
+        className: (0, _style.getFilterCls)(prefixCls, 'wrap-count')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _style.getFilterCls)(prefixCls, 'wrap-clear-icon'),
+        onClick: e => {
+          e.stopPropagation();
+          handleClear();
+          onClearAll?.();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {})
+      })]
+    })]
+  });
+  return wrapWithTooltip(filterButton);
+};
+var _default = exports.default = FilterWrap;

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

@@ -0,0 +1,27 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import type { FilterLocale } from '../../locale';
+export interface ResponsiveFilterGroupProps {
+    children: ReactNode;
+    /** 容器间距 */
+    gap?: number;
+    /** FilterWrap 的 label */
+    label?: ReactNode;
+    /** FilterWrap 的图标 */
+    icon?: ReactNode;
+    /** 点击 Apply 按钮时的回调 */
+    onApply?: () => void;
+    /** 点击 Clear All 按钮时的回调 */
+    onClearAll?: () => void;
+    /** 是否显示 Apply 和 Clear All 按钮 */
+    showActions?: boolean;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** 额外内容 */
+    extra?: ReactNode;
+    /** 是否显示计数 默认 true */
+    showCount?: boolean;
+    locale?: FilterLocale;
+}
+declare const ResponsiveFilterGroup: FC<ResponsiveFilterGroupProps>;
+export default ResponsiveFilterGroup;