stenajs-webui /过滤器

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

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

一节

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

上下文

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

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

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

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

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

const state = useSearchFilterState();

自定义部分

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

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

参见源代码以获得示例。

随时可用的部分

有一些章节可供使用。

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

DateRangeCalendarSection

将该部分添加到抽屉中。

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

然后加入薯片。

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

ChipMultiSelectSection

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

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

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

然后加入薯片。

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

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

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

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

芯片

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

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

手动芯片

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

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

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

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