# @rax-ui/filter-combo-container

> --- display: @rax-ui/filter-combo-container family: other ---

Latest version **1.0.0-beta.15** (published 2019-11-27) · 0 weekly downloads

## Install

```sh
npm install @rax-ui/filter-combo-container
pnpm add @rax-ui/filter-combo-container
yarn add @rax-ui/filter-combo-container
bun add @rax-ui/filter-combo-container
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.15 |
| Published | 2019-11-27 |
| First published | 2019-10-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 30.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | amdgigabyte, lianmin, myronliu347 |
| Keywords | Rax, rax-component |

## Links

- npm: https://www.npmjs.com/package/@rax-ui/filter-combo-container
- npm.io page: https://npm.io/package/@rax-ui/filter-combo-container

## Dependencies (4)

- [rax-text](https://npm.io/package/rax-text.md) ^1.0.1
- [rax-view](https://npm.io/package/rax-view.md) ^1.0.1
- [@rax-ui/filter](https://npm.io/package/@rax-ui/filter.md) ^1.0.0-beta.15
- [@rax-ui/styles](https://npm.io/package/@rax-ui/styles.md) ^1.0.0-beta.10

## Recent versions

- 1.0.0-beta.15 (latest) — 2019-11-27
- 1.0.0-beta.10 — 2019-10-09
- 1.0.0-beta.9 — 2019-10-08

## README

---
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;
}
```

## 预览图
![预览图](https://img.alicdn.com/tfs/TB19XdNg9f2gK0jSZFPXXXsopXa-281-501.png)

## 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| 分隔符样式 |

---
_Source: https://npm.io/package/@rax-ui/filter-combo-container · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._