# @bento-core/facet-filter 中文文档

规范地址：https://npmcn.com/package/%40bento-core/facet-filter/

版本：1\.0\.1-ccdiintegrated\.7
npm 元数据更新时间：2026-08-20T13:47:44.846Z
中文译文更新时间：2026-11-08T05:28:47.374Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bento-core/facet-filter
原文对照：https://npmcn.com/package/%40bento-core/facet-filter/?lang=original
项目主页：https://github.com/CBIIT/bento-frontend#readme
源码仓库：https://github.com/CBIIT/bento-frontend

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：354 kB，109 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：@material-ui/core ^4\.12\.4，@material-ui/icons ^4\.9\.1，@material-ui/lab ^4\.0\.0-alpha\.61，clsx ^1\.2\.1，react ^17\.0\.2，react-dom ^17\.0\.0，react-redux ^7\.2\.1，react-router-dom ^5\.1\.2
- 首次发布：2023-05-11T21:35:36.315Z
- 最新版本发布：2026-08-20T13:47:44.624Z
- 近 30 天下载量：1894（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：110（近 12 个月 19 个）

## 中文简介

### 本托核心侧边栏设计 :

## 安装

```sh
npm install @bento-core/facet-filter
```

也可以使用：`pnpm add @bento-core/facet-filter`、`yarn add @bento-core/facet-filter`、`bun add @bento-core/facet-filter`

## README

# 边框组件设计

### 本托核心侧边栏设计 :

-   所有点击事件使用本地状态
-   仅用于存储活动过滤器的全局redux
-   限制道具钻探的使用
-   本多核心侧边栏组件定义的核心布局
-   使用生成器函数来创建和配置组件( 由于本地状态问题, 生成器 funtion 不用于配置所有侧边栏组件)
-   实现侧边栏组件定制最大化的简单配置
-   在反应中应用 SOLID 原则( S)[https://konstantinlebedev.com/solid-in-react/ (中文(简体) )](https://konstantinlebedev.com/solid-in-react/)(中文(简体) )

## 1 Redux 存储活性过滤器值和配置

### 生成和整合 reduux 调度动作

```
import { sideBarReducerGenerator } from 'bento-core';
const { statusReducer } = sideBarReducerGenerator();

const reducers = {  statusReducer, ..., otherReducers };
const loggerMiddleware = createLogger();
const store = createStore( 
  combineReducers(reducers), 
  composeWithDevTools (applyMiddleware(ReduxThunk, loggerMiddleware)),
);
```

### 检查所有活动过滤器的全局 redux 商店

```
// active filter json structure
statusReducer:
  filterState:
    pr_status:
     {
       Not Reported: true
     },
     rc_scores: {
       11-15: true,
       21-25: true
     }
     tumor_grades: {}
     tumor_sizes: {(1,2]: true} 
```

#### (注: Bento Core sideBar 提供了覆盖 redux 过滤事件/动作的方法. )

## 2 导入组件和配置

```
import FacetFilter from 'bento-core';

<FacetFilterThemeProvider>
  <OtherComponent />
  <FacetFilter
    data={searchData}
    facetSectionConfig={facetSectionVariables}
    facetsConfig={facetsConfig}
    CustomFacetSection={CustomFacetSection}
    CustomFacetView={CustomFacetView}
  />
</FacetFilterThemeProvider>
```

## 3 个数据板

_**搜索数据**_ 传出DashBOARDQUERY数据

```
 <FacetFilter
    data={searchData}
    ...
 />
```

## 4 个面孔

```
import { InputTypes } from 'bento-core';

export const facetsConfig = [{ 
  section: CASES,
  label: 'Program', 
  apiForFiltering: 'filterSubjectCountByProgram', 
  datafield: 'programs', 
  field: GROUP, 
  type: InputTypes.CHECKBOX, 
  sort_type: sortType.ALPHABET,
  show: true, 
}, {
   section: CASES,
   label: 'Age',
    apiForFiltering: 'filterSubjectCountByAge',
    datafield: 'age_at_index',
    ApiLowerBoundName: 'lowerBound',    
    ApiUpperBoundName: 'upperBound',
    show: true,    
    slider: true,    
    type: InputTypes.SLIDER,
    sort_type: 'none',   
    minLowerBound: 0,  
    maxUpperBound: 100,   
    quantifier: 'Years',
].
```

1.  **用于编辑** 指从查询回复中检索名称和对象的对象密钥( DASHBOARDQUERY)
2.  **数据字段** 用于跟踪活动过滤项的全域再添加存储字段
3.  **类型** 表示输入类型(复选框或滑动器)
4.  **排序( t)** 本托核心侧边栏局部状态用于排序面值的属性
5.  **节** 指向表面区域的名称
6.  **显示** 属性必须是真实的,以便在 Bento 核心边框组件上显示正方形

根据复选框或滑动器等输入类型而不同的配置

#### (注 - SLIDER 需要额外的属性)

## 5个平面区域

```
export const facetSectionVariables = { 
Cases: { 
  isExpanded: true,
},  
Samples: {
  isExpanded: true,
},  
Files: {
  isExpanded: true,
}};
```

Facet 一节定义了将在 Bento 核心侧边栏组件上显示的节数. **已扩展** 属性设置该部分的默认状态,即如果真实,那么如果假面部分崩溃,则正面部分会扩展.

## 6 自定义节

Bento Core侧边栏组件为一些组件提供视图定制功能,如Facet Spection和Face组件.

```
const CustomFacetSection = ({ section }) => { 
  return (
    <>
     <CustomExpansionPanelSummary>
       <div className={classes.sectionSummaryTextContainer}>
         {section.name} 
       </div>
      </CustomExpansionPanelSummary>
    </> );
}; 

// provide as props
<FacetFilter
  data={searchData}
  facetSectionConfig={facetSectionVariables}
  facetsConfig={facetsConfig}
  CustomFacetSection={CustomFacetSection}
  CustomFacetView={CustomFacetView}
/>
```

## 7 自定义视窗

```
const CustomFacetView = ({ facet, facetClasses }) => {   
   return (
     <>        
       <CustomExpansionPanelSummary>          
         <div 
           className={clsx(classes.sectionSummaryText, classes[facetClasses])}
          >            
           {facet.label}
         </div>        
       </CustomExpansionPanelSummary>      
    </>    
)};

// provide as props
<FacetFilter
  data={searchData}
  facetSectionConfig={facetSectionVariables}
  facetsConfig={facetsConfig}
  CustomFacetSection={CustomFacetSection}
  CustomFacetView={CustomFacetView}
/>
```

## 8 FacetFilter 主题提供器

Bento Core 侧边栏对其组件动态指定类 _**(穆伊部分)**_ 根据该构成部分的当地状况, **面孔图形** 财务报告和审定财务报表 **平面区域**。本托核心侧边栏广泛使用 Mui 组件 _**主题提供**_ 可用于为 Bento Core Sidebar 中的每个组件覆盖样式。 这种方法类似于反应 _**内容**_防止道具钻孔.

```
const theme = {
overrides: {
 MuiListItem:
root: {        
  '&.casesCheckedEven': {
    //refer to class name table 
    ..//styles 
  }
  '&.casesCheckedOdd' :{
    //refer to class name table 
    ..//styles 
  },
  '&.samplesCheckedEven': { 
    //refer to class name table 
  ..//styles 
  }
  '&.samplesCheckedOdd' :{
  ..//styles 
  },
   MuiSvgIcon: {
  root: {
  '&.casesCheckedIcon': {
    //refer to class name table 
    ..//styles 
  }
  '&.samplesCheckedIcon': {
    ..//styles
  }
}

import FacetFilter from 'bento-core';
<ThemeProvider theme={computedTheme}>
   <FacetFilter />
</ThemeProvider>
```

**注:这些都是实例类名称,它基于配置,因此对于不同的配置,该类可能不适用)**

**检查框组件 CLAS 名称表**

| 侧边栏组件 | 儿童部分 | 阿迈 | 类Name | 条件 |
| :-- | :-: | :-: | :-: | --: |
| 面值 | 框按钮 | 列表项目 | {_**检查区域**_已选中{ }_**索引类型**_{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | 活动 |
| 面值 | 复选框输入 | 复选框Icon | {_**检查区域**_检查 | 活动 |
| 面值 | 名称 | 类型 | {_**检查区域**_\\ 名称未检查 | 不活动 |
| 面值 | 名称 | 类型 | {_**检查区域**_\\ Name 已选中 | 活动 |
| 面值 | 议题 | 类型 | {_**检查区域**_对象未检查 | 活动 |
| 面值 | 议题 | 类型 | {_**检查区域**_对象已检查 | 不活动 |

随父至子的顺序  
**粗体** 文本表示变量  
活动 - 当检查输入类型时  
**\[indexType\] (英语)** = “ Even” / “ Odd” , 以平面值索引为基础  
**{已检查一节}** = 区名( 方块的属性) (类似案例、 样本、 文件)

**滑动组件**  
**{类型}** -分或最大(滑动输入类型)

| 侧边栏组件 | 儿童部分 | 阿迈 | 类Name | 条件 |
| :-- | :-: | :-: | :-: | --: |
| 面值 | 输入最小/最大值 | 投入 | 滑动器qq_**类型**_{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | 活动 |

## 9\. 造型自定义组件

本多核心侧边栏提供的类可以被应用于自定义元素.

```
className={clsx(classes.sectionSummaryText, classes[facetClasses])}
```

## 10 CLearallFilter 按钮组件

Bento Core提供 1. 清除所有活性过滤器的功能, 2. 禁用旗帜( 真实情况下没有活性过滤器) 。 客户端负责定义视图(Custom html).

```
import { generateClearAllFilterBtn } from 'bento-core';

const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
    //...custom component 1. bind onClearFilters fn
    // 2. disable flag to disable button
}

const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn); 
```

## 常见问题

### @bento-core/facet-filter 是什么？

本托核心侧边栏设计 :

### 如何安装 @bento-core/facet-filter？

在项目目录运行 npm install @bento-core/facet-filter，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@material-ui/core（^4\.12\.4）、@material-ui/icons（^4\.9\.1）、@material-ui/lab（^4\.0\.0-alpha\.61）、clsx（^1\.2\.1）、react（^17\.0\.2）、react-dom（^17\.0\.0）、react-redux（^7\.2\.1）、react-router-dom（^5\.1\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bento-core/facet-filter 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bento-core\_\_facet-filter 是否存在。

### @bento-core/facet-filter 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bento-core/facet-filter 可以商用吗？

@bento-core/facet-filter 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bento-core/facet-filter 的下载量有多少？

根据 npm 官方下载统计，@bento-core/facet-filter 在 2026/10/08 – 2026/11/06 这 30 天内被下载 1,894 次，日均约 63 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bento-core/facet-filter 还在维护吗？

最新版本 1\.0\.1-ccdiintegrated\.7 发布于 2026/08/20（2 个月前）；至今共发布 110 个版本，其中过去 12 个月发布了 19 个；首次发布于 2023/05/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。