@rax-ui/filter-combo-container v1.0.0-beta.15

display: @rax-ui/filter-combo-container

family: other

@rax-ui/filter-combo-container

用作 Filter 场景的业务组件组合容器，它只是一个滚动容器，包含 重置 和 确认选择按钮 和一些方法，内部渲染由 config 数组传递 子组件和 子组件props 来决定，详见 Demo

Feature

• 1、内部组件可动态扩展
• 2、容器统一封装，开发者无需关心容器实现，按照规范抛出结果即可
• 3、统一封装，必然有一些规范，规范如下

接入容器中的组件：规范约定

• 组件必须暴露 reset 重置选中值方法供容器调用：Function() => filterParam
• 组件必须暴露 getFilterParam 获取选中值方法供容器调用：Function() => filterParam
• 组件 onChange(filterParam) 回调函数返回形参 filterParam

// filterParam 格式
interface FilterParam {
  filterKey: string | number;
  filterText?: string;
  filterValue: any;
  // 和默认筛选值比较，筛选值是否变更
  filterValueChanged?: boolean;
}

预览图

API

Props

这里的 MultiSelect写法规范就是 Filter.Panel 子组件书写规范，详见 @rax-ui/filter 组件文档

config = [
  {
    Component: MultiSelect, // Component必传，此处用 多选组件
    {...compProps} // 如下都是多选组件的 Props
  },
  {
    Component: MultiSelect, // Component必传，此处用 多选组件
    {...compProps} // 如下都是多选组件的 Props
  },
]

方法

CSS API