# @stenajs-webui/filter 中文文档

规范地址：https://npmcn.com/package/%40stenajs-webui/filter/

版本：25\.3\.3
npm 元数据更新时间：2026-11-02T13:32:56.897Z
中文译文更新时间：2026-11-02T14:15:48.208Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：144 kB，37 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=8
- 运行依赖：11 个
- peer 依赖：react \>=19\.0\.0，redux \>=5\.0\.1，react-dom \>=19\.0\.0，prop-types \>=15\.5\.4，@emotion/react \>=11\.14\.0，@emotion/styled \>=11\.14\.0，@types/lodash-es \>=4\.17\.12，@fortawesome/fontawesome-svg-core \>=6\.7\.2
- 首次发布：2021-11-18T10:25:25.740Z
- 最新版本发布：2026-11-02T13:32:56.586Z
- 已发布版本数：506（近 12 个月 86 个）

## 中文简介

这个包包含组件和功能，可以轻松地在抽屉中创建自定义过滤器，以及包含芯片的概述行。

## 安装

```sh
npm install @stenajs-webui/filter
```

也可以使用：`pnpm add @stenajs-webui/filter`、`yarn add @stenajs-webui/filter`、`bun add @stenajs-webui/filter`

## README

# stenajs-webui /过滤器

这个包包含组件和功能，使它 易于在抽屉中创建自定义过滤器，以及包含芯片的概述行。

这个包裹是alpha。API很可能会改变，并添加更多的功能。 如果您使用它，请准备好进行破坏性更改。

# 一节

截面是过滤器的一个可扩展部分。过滤器可以由许多部分组成。各节可何无，一节可何无 或者很多芯片。

# 上下文

过滤器组件访问状态、分派和操作。这些是从上下文获取的，所以任何过滤器组件都必须 被…包裹着

```tsx
<SearchFilterContext actions={actions} state={state} dispatch={dispatch}>
  <SearchFilterButton/>
  <SearchFilterChips>
    <SectionChips {...stuff} />
  </SearchFilterChips>
  <SearchFilterDrawer>
    ... sections
  </SearchFilterDrawer>
```

如果你只使用本地状态（没有Redux、持久化等）， 你可以用 `SearchFilterLocalStateContext`. 它将自动设置动作、状态和分派。

```tsx
<SearchFilterLocalStateContext<FormModel>
  initialFormModel={{ startDate: undefined, endDate: undefined }}
>
  ... same as above
</SearchFilterLocalStateContext>
```

如果你使用 `SearchFilterLocalStateContext`，您可以使用它来访问过滤器状态。

```tsx
const state = useSearchFilterState();
```

# 自定义部分

您可以轻松地创建自定义节。

```tsx
const MySection = (...props) => (
  <SearchFilterSection sectionId={sectionId} loading={loading} error={error}>
    <ChipMultiSelect
      options={filteredOptions}
      value={listValue}
      onValueChange={onValueChangeInternal}
      inputValue={text}
      onInputChange={setText}
    />
  </SearchFilterSection>
);
```

参见源代码以获得示例。

# 随时可用的部分

有一些章节可供使用。

更多的将提供作为 `filter` 包的成熟。

## DateRangeCalendarSection

将该部分添加到抽屉中。

```tsx
<DateRangeCalendarSection
  sectionId={"comparisonDate"}
  {...createDateRangeSectionProps(state.formModel, "startDate", "endDate")}
/>
```

然后加入薯片。

```tsx
<SectionChips
  sectionId={"comparisonDate"}
  emptyChipLabel={"No dates"}
  {...createChipsPropsForDateRange(state.formModel, "startDate", "endDate")}
/>
```

## ChipMultiSelectSection

将该部分添加到抽屉中。本节没有用于创建道具的辅助方法。

必须手动指定。这种情况可能会改变。

```tsx
<ChipMultiSelectSection
  sectionId={"divisions"}
  loading={false}
  options={divisionOptions}
  value={state.formModel.divisions}
  onValueChange={(divisions) =>
    dispatch(actions.setFormModelFields({ divisions }))
  }
/>
```

然后加入薯片。

```tsx
<SectionChips
  sectionId={"divisions"}
  emptyChipLabel={"All division"}
  {...createChipsPropsForBooleanRecord(
    state.formModel,
    "divisions",
    divisionOptions
  )}
/>
```

在这个例子中， `state.formModel.divisions` 一定是。 `BooleanRecord`.

另一个部分 `BooleanRecord` 是 `SimpleCheckboxListSection`. 它们与API兼容并且可以互换。

```tsx
<SimpleCheckboxListSection
  sectionId={"divisions"}
  loading={false}
  options={divisionOptions}
  value={state.formModel.divisions}
  onValueChange={(divisions) =>
    dispatch(actions.setFormModelFields({ divisions }))
  }
/>
```

## 芯片

您可以添加所有芯片为一个部分使用 `SectionChips` 组件。

```tsx
<SectionChips
  sectionId={"divisions"}
  emptyChipLabel={"All division"}
  {...createChipsPropsForBooleanRecord(
    state.formModel,
    "divisions",
    divisionOptions
  )}
/>
```

### 手动芯片

如果您需要对每个芯片进行更多的手动控制，可以单独添加它们。

```tsx
{
  myList.map(({ value, label }) => (
    <SearchFilterChip
      key={value}
      label={label ?? sectionId}
      sectionId={sectionId}
      onClickRemove={onClickRemoveOnChip}
      value={value}
    />
  ));
}
```

如果你需要一个芯片来表示没有选择，你可以使用 `EmptyChip`.

```tsx
<EmptyChip sectionId={sectionId} label={emptyChipLabel} />
```

## 常见问题

### @stenajs-webui/filter 是什么？

这个包包含组件和功能，可以轻松地在抽屉中创建自定义过滤器，以及包含芯片的概述行。

### 如何安装 @stenajs-webui/filter？

在项目目录运行 npm install @stenajs-webui/filter，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.0\.0）、redux（\>=5\.0\.1）、react-dom（\>=19\.0\.0）、prop-types（\>=15\.5\.4）、@emotion/react（\>=11\.14\.0）、@emotion/styled（\>=11\.14\.0）、@types/lodash-es（\>=4\.17\.12）、@fortawesome/fontawesome-svg-core（\>=6\.7\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @stenajs-webui/filter 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @stenajs-webui/filter 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @stenajs-webui/filter 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @stenajs-webui/filter 可以商用吗？

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

### @stenajs-webui/filter 还在维护吗？

最新版本 25\.3\.3 发布于 2026/11/02（今天）；至今共发布 506 个版本，其中过去 12 个月发布了 86 个；首次发布于 2021/11/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。