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

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

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { BaseFilterProps, InternalFilterProps } from '../type';
-export interface CascaderOption {
-    label?: ReactNode;
-    value: string;
-    disabled?: boolean;
-    children?: {
-        label?: ReactNode;
-        value: string;
-        disabled?: boolean;
-    }[];
-}
-export interface FilterCascaderProps extends BaseFilterProps, InternalFilterProps {
-    /** 是否多选 */
-    multiple?: boolean;
-    /** 选项列表 */
-    options?: CascaderOption[];
-    /** 当前选中值，格式为 [[parentValue, childValue], ...] */
-    value?: string[][];
-    /** 值变化回调 */
-    onChange?: (value: string[][]) => void;
-    /** 是否显示计数，可传入 { showTotal: true } 同时显示总数 */
-    count?: boolean | {
-        showTotal?: boolean;
-    };
-    /** 是否显示搜索框，默认为 false */
-    showSearch?: boolean;
-}
-declare const FilterCascader: React.FC<FilterCascaderProps>;
-export default FilterCascader;

package/lib/filter/components/FilterCascader.js

@@ -1,449 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _antd = require("antd");
-var _checkbox = _interopRequireDefault(require("../../checkbox"));
-var _theme = _interopRequireDefault(require("../../theme"));
-var _input = _interopRequireDefault(require("../../input"));
-var _empty = _interopRequireDefault(require("../../empty"));
-var _icons = require("@oceanbase/icons");
-var _classnames = _interopRequireDefault(require("classnames"));
-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 _CountNumber = _interopRequireDefault(require("./CountNumber"));
-var _FilterButton = _interopRequireDefault(require("./FilterButton"));
-var _WrappedTagsDisplay = _interopRequireDefault(require("./WrappedTagsDisplay"));
-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,
-  ...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]);
-  const stableOptionsKey = (0, _react.useMemo)(() => (0, _utils.getStableOptionsKey)(options), [options]);
-  // 用于控制二级 Popover 的打开状态（仅在单选模式下使用）
-  const [openPopoverKey, setOpenPopoverKey] = (0, _react.useState)(null);
-
-  // 搜索关键词状态
-  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;
-
-  // 使用受控状态 hook
-  const [currentValue, setValue] = (0, _useControlledState.useControlledState)(value, [], onChange);
-
-  // 获取当前选中值的 label（用于单选模式显示）
-  const getSelectedLabel = (0, _react.useCallback)(() => {
-    if (isCollapsed && currentValue.length === 0) {
-      return '';
-    }
-    if (currentValue.length === 0) {
-      return label;
-    }
-    if (!multiple && currentValue.length === 1) {
-      const [parentValue, childValue] = currentValue[0];
-      const parentOption = options.find(opt => opt.value === parentValue);
-      const childOption = parentOption?.children?.find(child => child.value === childValue);
-      return childOption?.label || label;
-    }
-    return label;
-  }, [currentValue, isCollapsed, label, multiple, options]);
-
-  // 获取选中值的 tags（用于多选模式 Tag 显示）
-  const getSelectedTags = (0, _react.useCallback)(() => {
-    return currentValue.map(([parentValue, childValue], index) => {
-      const parentOption = options.find(opt => opt.value === parentValue);
-      const childOption = parentOption?.children?.find(child => child.value === childValue);
-      return {
-        label: childOption?.label || childValue,
-        value: `${parentValue}::${childValue}::${index}`,
-        parentValue,
-        childValue
-      };
-    });
-  }, [currentValue, options]);
-
-  // 移除某个选中的值
-  const handleRemoveTag = (0, _react.useCallback)(tagValue => {
-    const parts = tagValue.split('::');
-    if (parts.length >= 2) {
-      const [parentValue, childValue] = parts;
-      const newValueList = currentValue.filter(item => !(item[0] === parentValue && item[1] === childValue));
-      setValue(newValueList);
-    }
-  }, [currentValue, setValue]);
-
-  // 使用 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);
-    }
-    // 弹窗关闭时清空搜索关键词
-    if (!open) {
-      setSearchKeyword('');
-    }
-    externalOnOpenChange?.(open);
-  }, [onPopoverOpenChange, externalOnOpenChange, multiple]);
-
-  // 当值变化时，更新 context 中的值
-  (0, _react.useEffect)(() => {
-    if (isCollapsed && updateFilterValue) {
-      updateFilterValue(filterId, label, currentValue, options, 'cascader');
-    }
-  }, [isCollapsed, updateFilterValue, filterId, label, currentValue, options]);
-  const handleChange = (0, _react.useCallback)((parentValue, childValue) => {
-    const parentOption = options.find(opt => opt.value === parentValue);
-    const childOption = parentOption?.children?.find(child => child.value === childValue);
-    if (parentOption?.disabled || childOption?.disabled) {
-      return;
-    }
-    if (multiple) {
-      const existingIndex = currentValue.findIndex(item => item[0] === parentValue && item[1] === childValue);
-      let newValueList;
-      if (existingIndex !== -1) {
-        newValueList = currentValue.filter((_, index) => index !== existingIndex);
-      } else {
-        newValueList = [...currentValue, [parentValue, childValue]];
-      }
-      setValue(newValueList);
-    } else {
-      const isCurrentSelected = currentValue.length === 1 && currentValue[0][0] === parentValue && currentValue[0][1] === childValue;
-      let newValueList;
-      if (isCurrentSelected) {
-        newValueList = [];
-      } else {
-        newValueList = [[parentValue, childValue]];
-      }
-      setValue(newValueList);
-      setOpenPopoverKey(null);
-      setTimeout(() => {
-        filterButtonRef.current?.closePopover();
-      }, 0);
-    }
-  }, [currentValue, multiple, setValue, options]);
-  const clearByParent = (0, _react.useCallback)(parentValue => {
-    const newValueList = currentValue.filter(item => item[0] !== parentValue);
-    setValue(newValueList);
-  }, [currentValue, setValue]);
-  const handleClear = (0, _react.useCallback)(() => {
-    setValue([]);
-  }, [setValue]);
-  const selectAllChildren = (0, _react.useCallback)(option => {
-    if (option.disabled) {
-      return;
-    }
-    const otherValues = currentValue.filter(item => item[0] !== option.value);
-
-    // 当搜索时，只选择当前显示的子选项（filteredOptions 中的）
-    const childrenToSelect = option.children?.filter(child => !child.disabled) || [];
-    const allChildValues = childrenToSelect.map(child => [option.value, child.value]);
-    const newValueList = [...otherValues, ...allChildValues];
-    setValue(newValueList);
-  }, [currentValue, setValue]);
-
-  // 根据搜索关键词过滤选项（同时搜索父级和子级）
-  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 filteredChildren = option.children?.filter(child => {
-        const childLabel = (0, _utils.normalizeLabel)(child.label).toLowerCase();
-        return childLabel.includes(lowerKeyword);
-      });
-
-      // 如果父级匹配或有匹配的子级，则保留该选项
-      if (parentMatches || filteredChildren && filteredChildren.length > 0) {
-        return {
-          ...option,
-          // 如果父级不匹配但子级匹配，只显示匹配的子级
-          children: parentMatches ? option.children : filteredChildren
-        };
-      }
-      return null;
-    }).filter(option => option !== null);
-  }, [showSearch, searchKeyword, options]);
-
-  // 渲染弹框内容
-  const renderContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      padding: '8px 0px',
-      maxHeight: 300,
-      overflowY: 'auto'
-    },
-    children: [showSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        marginInline: 12,
-        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 => {
-      const selectedChildren = currentValue.filter(item => item[0] === option.value).map(item => item[1]);
-      const hasSelectedChildren = selectedChildren.length > 0;
-      const allChildrenSelected = multiple && option.children && option.children.length > 0 && selectedChildren.length === option.children.length;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
-        placement: "rightTop",
-        trigger: 'hover',
-        arrow: false,
-        open: option?.disabled ? false : multiple ? undefined : openPopoverKey === option.value,
-        onOpenChange: multiple ? undefined : open => {
-          if (!open) {
-            setOpenPopoverKey(null);
-          } else {
-            setOpenPopoverKey(option.value);
-          }
-        },
-        content: option.children?.map(child => {
-          const isSelected = selectedChildren.includes(child.value);
-          const isChildDisabled = child.disabled || false;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Flex, {
-            gap: 8,
-            className: (0, _style.getFilterCls)(prefixCls, 'select-option'),
-            justify: "space-between",
-            onClick: e => {
-              e.stopPropagation();
-              if (!isChildDisabled) {
-                handleChange(option.value, child.value);
-              }
-            },
-            style: {
-              cursor: isChildDisabled ? 'not-allowed' : 'pointer',
-              color: isChildDisabled ? token.colorTextDisabled : 'inherit'
-            },
-            children: multiple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
-              checked: isSelected,
-              disabled: isChildDisabled,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
-                children: child.label
-              })
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
-                children: child.label
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {
-                  style: {
-                    color: token.colorPrimary
-                  }
-                })
-              })]
-            })
-          }, child.value);
-        }),
-        styles: {
-          body: {
-            padding: 8,
-            maxHeight: 220,
-            maxWidth: 300,
-            overflowY: 'auto'
-          }
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            padding: '0px 8px'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
-            gap: 8,
-            className: (0, _classnames.default)((0, _style.getFilterCls)(prefixCls, 'select-option'), {
-              [(0, _style.getFilterCls)(prefixCls, 'has-selected')]: hasSelectedChildren
-            }),
-            justify: "space-between",
-            align: "center",
-            style: {
-              cursor: option.disabled ? 'not-allowed' : 'pointer',
-              color: option.disabled ? token.colorTextDisabled : 'inherit'
-            },
-            children: [multiple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
-              checked: allChildrenSelected,
-              indeterminate: hasSelectedChildren && !allChildrenSelected,
-              disabled: option.disabled,
-              onClick: e => e.stopPropagation(),
-              onChange: () => {
-                if (!option.disabled) {
-                  if (allChildrenSelected) {
-                    clearByParent(option.value);
-                  } else {
-                    selectAllChildren(option);
-                  }
-                }
-              },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
-                children: option.label
-              })
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
-              children: option.label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Flex, {
-              align: "center",
-              gap: 4,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _style.getFilterCls)(prefixCls, 'icon-wrapper'),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
-                  className: hasSelectedChildren ? (0, _style.getFilterCls)(prefixCls, 'arrow-icon') : ''
-                }), hasSelectedChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: (0, _style.getFilterCls)(prefixCls, 'clear-icon'),
-                  onClick: e => {
-                    e.stopPropagation();
-                    clearByParent(option.value);
-                  },
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {})
-                })]
-              })
-            })]
-          })
-        })
-      }, option.value);
-    })]
-  });
-
-  // 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,
-          ...filterButtonProps,
-          style: {
-            ...filterButtonProps?.style,
-            paddingInline: token.paddingXXS
-          },
-          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,
-        ...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,
-    ...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: showTotal ? options.reduce((acc, curr) => acc + (curr.children?.length || 0), 0) : 0
-    })]
-  });
-  return wrapWithTooltip(filterButton);
-};
-var _default = exports.default = FilterCascader;