DataGridPicker

Паттерны

Плотная матрица вариантов

Когда использовать: Показать много коротких вариантов в сетке, где форма пикера — часть продуктового опыта.

Заметки о композиции: Используйте DataGridPickerItem для каждой выбираемой ячейки и доверьте слою пикера стили активного и выбранного состояний.

Компромиссы: Макет экономит место, но каждому элементу нужна высокая визуальная ясность, потому что подписи короткие.

import {
  DataGridPicker,
  DataGridPickerItem,
  DataGridPickerRow,
  DataGridPickerRowGroup,
} from '@vega-ui/react';

const months = [
  ['Jan', 'Feb', 'Mar', 'Apr'],
  ['May', 'Jun', 'Jul', 'Aug'],
  ['Sep', 'Oct', 'Nov', 'Dec'],
];

Постраничный пикер

Когда использовать: Набор вариантов настолько велик, что его стоит разбить на страницы по горизонтали.

Заметки о композиции: Оберните сетку в DataGridPickerScroller и отрисуйте один компонент страницы внутри DataGridPickerScrollerContent. Страница берёт свой index из useIndexedSnapScrollerContext, вычисляет по нему данные и номера строк и передаёт его в scope своей группы строк.

Компромиссы: Вы выигрываете в плотности и получаете перелистывание в духе свайпа, но восстановление фокуса и активного состояния становится важнее.

import { useRef, useState } from 'react';
import { ChevronLeft, ChevronRight } from '@vega-ui/icons';
import {
  DataGridPicker,
  DataGridPickerItem,
  DataGridPickerRow,
  DataGridPickerRowGroup,
  DataGridPickerScroller,
  DataGridPickerScrollerContent,
  Icon,
  IconButton,
  Text,

Сравнение

Быстрое правило выбора

Выбирайте DataGridPicker, когда интерфейсу нужен пикер в форме сетки с визуальной семантикой VegaUI. Выбирайте DataGridSelectable, когда важно поведение выбора, но визуальный слой должен быть полностью собственным.

DataGridPicker и DataGridSelectable

Используйте DataGridPicker, когда компонент должен выглядеть и вести себя как пикер.

Используйте DataGridSelectable, когда нужно переиспользовать только слой поведения.

DataGridPicker и MonthPicker

Используйте DataGridPicker, когда выбираемые значения универсальные, а не именно месяцы.

Используйте MonthPicker, когда нужны помощники и семантика предметной области месяцев.

DataGridPicker и DayPicker

Используйте DataGridPicker, когда сетка универсальная.

Используйте DayPicker, когда важны вычисления с датами, контекст видимого месяца и семантика дней.

Выбирайте этот компонент, когда

• интерфейсу нужна плотная выбираемая сетка
• размер и вариант должны следовать семантике пикеров VegaUI
• предметная область собственная, но по форме это всё ещё пикер

Не выбирайте этот компонент, когда

• нужна обычная таблица данных
• визуальный слой должен быть полностью собственным
• уже существует более богатый предметный пикер

Решение проблем

Пикер прокручивается, но фокус восстанавливается не на той странице

Симптом

После перелистывания фокус перескакивает на неожиданный элемент или на первый элемент не той страницы.

Вероятная причина

Постраничные группы строк не задают стабильный scope, поэтому сетка не может отличить одну страницу от другой.

Как проверить

• изучите пропсы групп строк в постраничной композиции
• сравните поведение с явными значениями scope и без них

Решение

Задайте стабильный scope для каждой DataGridPickerRowGroup в макетах со скроллером.

Выбранное и активное состояния трудно различить

Симптом

Пользователи могут фокусировать и выбирать элементы, но визуальные состояния выглядят слишком похоже.

Вероятная причина

Собственный рендер элементов скрывает семантику элемента пикера.

Как проверить

• изучите итоговый DOM и классы элемента пикера
• сравните собственный рендер с оформлением элемента по умолчанию

Решение

Сохраните слой элементов пикера и убедитесь, что активное, выбранное и отключённое состояния остаются заметно различимыми.

Пикер ощущается как таблица, а не как пикер

Симптом

Технически интерфейс работает, но воспринимается как универсальная таблица данных, а не как элемент выбора.

Вероятная причина

Композиция использует табличное содержимое и собственные стили ячеек, игнорирующие семантику пикера.

Как проверить

• сравните рендер в продукте с готовыми историями пикера
• проверьте, отвечает ли DataGridPickerItem по-прежнему за поверхность выбора

Решение

Опирайтесь на слой элементов пикера или вернитесь к DataGridSelectable, если на самом деле нужна полностью собственная визуальная система.