Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(): Add new <DateRangePicker> component #3586

Open
wants to merge 95 commits into
base: next
Choose a base branch
from

Conversation

sashachabin
Copy link
Member

@sashachabin sashachabin commented Jan 16, 2025

<DateRangePicker>

Привет! Сделал компонент для выбора периода <DateRangePicker>

image

Документация | Песочница StackBlitz

  • Компонент состоит из двух <DateInput> и одного общего <Calendar> с диапазоном:
    • <DateRangePicker.Start /> — начало периода, настройки как у <DateInput>
    • <DateRangePicker.End /> — конец периода, настройки как у <DateInput>
    • <DateRangePicker.Separator /> — разделитель
  • В календаре диапазон рисуется через <Calendar renderDay={...} />. Проп renderDay так же доступен для настройки в DateRangePicker. Например, можно собрать календарь с ценами
  • Опциональные периоды. Добавлены кнопки «Без первой даты», «Без второй даты»
  • Поддержка всех пропо <DatePicker />. Например, enableTodayLink, useMobileNativeDatePicker , onMonthChange
  • По аналогии с DatePicker добавлен метод для валидации DatePickerRange.validate(startValue, endValue, {options}). В отдельном PR пример работы с библиотекой валидаций
  • Тёмная тема
  • Мобильная версия
  • Доступность. По умолчанию настроены aria-group и aria-label для полей и правки в DateInput
  • Локали. Наследуются значения DatePicker с добавлением нескольких новых (опциональные периоды и доступность)

Предыдущее API для работы со значениями (устарело после обсуждений)

Работа со значениями

Важная особенность компонента — он не только состоит из нескольких частей, но и в нём сразу 2 input. В процессе разработки выработал 2 принципа:

  1. Все значения задаются парами (так сделано в самых популярных библиотеках — ant.design и mui):
    • Период задается в формате value={['dd.mm.yyyy', 'dd.mm.yyyy']} (формат настраивается)
    • Пропы optional, warning, error задаются в формате [true, false]
  2. Внутри children подразумевается только кастомизация оберток и <DateInput> без работы со значениями

Ссылки

IF-87 — там ссылки на дизайн, референсы и фидбек от разных команд

Чек-лист перед запросом ревью

  1. Добавлены тесты на все изменения
    ✅ unit-тесты для логики
    ⌛️ скриншоты для верстки и кросс-браузерности
    ⬜ нерелевантно

  2. Добавлена (обновлена) документация
    ✅ styleguidist для пропов и примеров использования компонентов
    ✅ jsdoc для утилит и хелперов
    ✅ комментарии для неочевидных мест в коде
    ✅ прочие инструкции (README.md, contributing.md и др.)
    ⬜ нерелевантно

  3. Изменения корректно типизированы
    ✅ без использования any (см. PR 2856)
    ⬜ нерелевантно

  4. Прочее
    ✅ все тесты и линтеры на CI проходят
    ✅ в коде нет лишних изменений**
    ✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

@sashachabin sashachabin requested a review from zhzz January 16, 2025 07:28
@sashachabin
Copy link
Member Author

@zhzz

Я пока в процессе активного перепиливания юнит-тестов (снёс перед ревью __tests__ из-за большого количества изменений после пробного внедрения). Но уже можно ревьювить механику работы и API. И в целом буду очень рад любым советам!

@sashachabin sashachabin force-pushed the date-range-picker-5.x branch from a8b895b to 23df406 Compare January 16, 2025 08:35
@sashachabin sashachabin force-pushed the date-range-picker-5.x branch from 23df406 to 52fab02 Compare February 7, 2025 06:50
@sashachabin sashachabin changed the base branch from next to date-range-picker February 7, 2025 06:54
@sashachabin sashachabin force-pushed the date-range-picker-5.x branch 4 times, most recently from 8a6fbaf to aa9ffd5 Compare February 24, 2025 17:28
@sashachabin sashachabin force-pushed the date-range-picker-5.x branch from d3dc246 to 393cca9 Compare February 26, 2025 12:07
@sashachabin sashachabin force-pushed the date-range-picker-5.x branch from 393cca9 to bd1cc39 Compare February 27, 2025 05:55
@@ -0,0 +1,298 @@
Компонент `DateRangePicker` состоит из двух [DateInput](#/Components/DateInput) и одного общего [Calendar](#/Components/Calendar).
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Файл для старой доки, можно удалить

expect(screen.getByTestId(CalendarDataTids.root)).toBeInTheDocument();
});

// it('close on blur() method', async () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Закомментированные фрагменты не работают после рефакторинга — поломались ref'ы, у которых вызываются focus и blur у подкомпонентов Start и End — чуть позже починю

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

1 participant