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

|名称 | 说明 | 类型 | 默认值 | |:---------------|:--------|:----|:----------| | styles | 自定义样式 | { [key:string]: CSSProperties} | {} | | config| 组合的组件配置数组（Component 属性必传，此处用 多选组件） | Array | [] | | filterKey| filterKey | String | 'more'| | resetButtonText| 重置按钮文字 | String | '重置'| | confirmButtonText| 确认按钮文字 | String | '确定选择'| | enableScroll| 开启滚动 | Boolean | true | | iphonexCompatible| iPhoneX 兼容性处理 | Boolean | true |

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

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

方法

|名称 | 说明 | 类型 | 默认值 | |:---------------|:--------|:----|:----------| | reset | 重置内部选中状态 | Function | | | rootRef | 根节点 ref | Object | |

CSS API

| 名称 | 说明 | |:---------------|:--------| |container| 外层容器样式(可通过此来设置 width, height) | |body| 中间内容样式 | |footer| 底部样式 | |reset__button| 重置按钮样式 | |reset__button__text| 重置按钮文字样式 | |confirm__button| 确认按钮 | |confirm__button__text| 确认按钮文字样式 | |separator| 分隔符样式 |