ChipChoiceRow

Контейнер, который собирает несколько ChipChoice-фильтров в одну строку и управляет их общим состоянием. Добавляет кнопку выбора фильтров и кнопку сброса.

Когда использовать

• Для панели фильтров над таблицей или списком, где фильтров несколько и они меняются вместе.
• Когда часть фильтров должна быть закреплена (pinned), а остальные — добавляться пользователем по необходимости.

Когда не нужен ChipChoiceRow:

• Для одного фильтра — используйте нужный ChipChoice.* напрямую.
• Для действий, а не фильтрации — ChipAssist.

Анатомия

Size (default s)

Размер применяется ко всем чипам строки: s / m / l.

Filters

Проп filters — массив описаний фильтров. Каждый элемент задаёт:

• id — уникальный ключ фильтра в состоянии.
• type — тип чипа из CHIP_CHOICE_TYPE:
  • Single — одиночный выбор.
  • Multiple — множественный выбор.
  • Date — дата.
  • DateRange — период.
  • Time — время.
  • Custom — произвольный контент.
• label — подпись чипа.
• options — список значений (для Single / Multiple).

Pinned

Фильтр с pinned: true всегда виден в строке и не убирается из неё. Остальные фильтры пользователь добавляет через кнопку добавления.

Add / Clear buttons

• showAddButton (default true) — кнопка выбора дополнительных фильтров.
• showClearButton (default true) — кнопка сброса всех значений.

Установка

pnpm add @cloud-ru/ds-chips

import { ChipChoiceRow, CHIP_CHOICE_TYPE } from '@cloud-ru/ds-chips'

ChipChoiceRow использует портал для выпадающих меню фильтров — оберните дерево в PortalContextProvider из @cloud-ru/ds-portal-context.

Примеры использования

Строка фильтров

import { CHIP_CHOICE_TYPE, ChipChoiceRow } from '@cloud-ru/ds-chips';
import { useState } from 'react';

const FILTERS = [
  {
    id: 'status',
    type: CHIP_CHOICE_TYPE.Single,
    label: 'Статус',
    options: [
      { value: 'active', label: 'Активный' },
      { value: 'inactive', label: 'Неактивный' },
    ],
  },
  {
    id: 'category',
    type: CHIP_CHOICE_TYPE.Multiple,
    label: 'Категория',
    options: [
      { value: 'cat1', label: 'Категория 1' },
      { value: 'cat2', label: 'Категория 2' },
      { value: 'cat3', label: 'Категория 3' },
    ],
  },
  {
    id: 'date',
    type: CHIP_CHOICE_TYPE.Date,
    label: 'Дата',
  },
];

export function ChoiceRowBasic() {
  const [value, setValue] = useState({});

  return <ChipChoiceRow filters={FILTERS} value={value} onChange={setValue} showClearButton showAddButton />;
}

Закреплённый фильтр

import { CHIP_CHOICE_TYPE, ChipChoiceRow } from '@cloud-ru/ds-chips';
import { useState } from 'react';

const FILTERS = [
  {
    id: 'status',
    type: CHIP_CHOICE_TYPE.Single,
    label: 'Статус',
    pinned: true,
    options: [
      { value: 'active', label: 'Активный' },
      { value: 'inactive', label: 'Неактивный' },
    ],
  },
  {
    id: 'category',
    type: CHIP_CHOICE_TYPE.Multiple,
    label: 'Категория',
    options: [
      { value: 'cat1', label: 'Категория 1' },
      { value: 'cat2', label: 'Категория 2' },
    ],
  },
  {
    id: 'date',
    type: CHIP_CHOICE_TYPE.Date,
    label: 'Дата',
  },
];

export function ChoiceRowPinned() {
  const [value, setValue] = useState({});

  return <ChipChoiceRow filters={FILTERS} value={value} onChange={setValue} showAddButton showClearButton />;
}

Props

Types

ChipChoiceRowProps

BaseChipProps

ChipChoiceDateWithSeconds

Related props

DropdownBridgeProps

DroplistListProps

DroplistMobileSlots

EmptyState

PublicListContextType

ScrollProps

SelectionMultipleState

SelectionSingleState

SelectionState

Storybook

Figma

Смотри также

• ChipChoice.Single — одиночный фильтр.
• Chips — обзор пакета.