-
Notifications
You must be signed in to change notification settings - Fork 131
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
base: next
Are you sure you want to change the base?
Conversation
Я пока в процессе активного перепиливания юнит-тестов (снёс перед ревью |
a8b895b
to
23df406
Compare
23df406
to
52fab02
Compare
c3a26e8
to
81b4b52
Compare
8a6fbaf
to
aa9ffd5
Compare
d3dc246
to
393cca9
Compare
393cca9
to
bd1cc39
Compare
@@ -0,0 +1,298 @@ | |||
Компонент `DateRangePicker` состоит из двух [DateInput](#/Components/DateInput) и одного общего [Calendar](#/Components/Calendar). |
There was a problem hiding this comment.
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 () => { |
There was a problem hiding this comment.
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 — чуть позже починю
<DateRangePicker>
Привет! Сделал компонент для выбора периода
<DateRangePicker>
Документация | Песочница 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Предыдущее API для работы со значениями (устарело после обсуждений)
Работа со значениями
Важная особенность компонента — он не только состоит из нескольких частей, но и в нём сразу 2 input. В процессе разработки выработал 2 принципа:
value={['dd.mm.yyyy', 'dd.mm.yyyy']}
(формат настраивается)optional
,warning
,error
задаются в формате[true, false]
children
подразумевается только кастомизация оберток и<DateInput>
без работы со значениямиСсылки
IF-87 — там ссылки на дизайн, референсы и фидбек от разных команд
Чек-лист перед запросом ревью
Добавлены тесты на все изменения
✅ unit-тесты для логики
⌛️ скриншоты для верстки и кросс-браузерности
⬜ нерелевантно
Добавлена (обновлена) документация
✅ styleguidist для пропов и примеров использования компонентов
✅ jsdoc для утилит и хелперов
✅ комментарии для неочевидных мест в коде
✅ прочие инструкции (
README.md
,contributing.md
и др.)⬜ нерелевантно
Изменения корректно типизированы
✅ без использования
any
(см. PR2856
)⬜ нерелевантно
Прочее
✅ все тесты и линтеры на CI проходят
✅ в коде нет лишних изменений**
✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)