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

sashachabin · 2025-01-16T07:27:52Z

`<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
Локали. Наследуются значения DatePicker с добавлением нескольких новых (опциональные периоды и доступность)

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

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

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

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

Ссылки

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

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

Добавлены тесты на все изменения
✅ unit-тесты для логики
⌛️ скриншоты для верстки и кросс-браузерности
⬜ нерелевантно
Добавлена (обновлена) документация
✅ styleguidist для пропов и примеров использования компонентов
✅ jsdoc для утилит и хелперов
✅ комментарии для неочевидных мест в коде
✅ прочие инструкции (README.md, contributing.md и др.)
⬜ нерелевантно
Изменения корректно типизированы
✅ без использования any (см. PR 2856)
⬜ нерелевантно
Прочее
✅ все тесты и линтеры на CI проходят
✅ в коде нет лишних изменений**
✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

zhzz

Пока посмотрел только часть, без тестов и мобильного вида.

По поведению заметил такую особенность. Если maxDate меньше выбранной даты в инпуте, то при фокусе на нем Календарь покажет месяц, отличный от того, что выбран. И может быть сложно доскролить до выбранной даты, если она далеко, т.к. выпадашки месяца и года отключены.

Оригинальный DatePicker в этом плане отличается, показывая выбранный месяц.

Так и задумано? Не успел еще со всей аналитикой ознакомиться.

@sashachabin: всё так, это ошибка — поправил!

zhzz · 2025-03-04T04:27:42Z

packages/react-ui/components/DateRangePicker/DateRangePicker.tsx

+    Start: (props: DateRangePickerFieldWithTypeProps) => <DateRangePickerField {...props} type="start" />,
+    End: (props: DateRangePickerFieldWithTypeProps) => <DateRangePickerField {...props} type="end" />,


Для компонентов Start и End нужно применить forwardRef, либо другим образом соблюсти контракт для StrictMode. Иначе с тултипами вокруг них может быть проблема.

Указал forwardRef для Start и End

Еще сам ref нужно прокинуть, без этого не работает.

forwardRef((props, ref) => <Comp {...props} ref={ref} />)

Думаю тут тоже стоит сразу forwardRefAndName использовать.

Прокинул ref и сделал forwardRefAndName Start/End в DateRangePickerInput.tsx

packages/react-ui/components/DateRangePicker/DateRangePicker.tsx

zhzz · 2025-03-04T04:58:30Z

packages/react-ui/components/DateRangePicker/DateRangePicker.tsx

+          onValueChange={setStartValue}
+          disabled={startDisabled}
+        />
+        <DateRangePicker.Separator />


Тут второй раз Separator рисуется.

Картинка

Хмм, здесь фрагмент с нативным DateInput для телефона.

Не могу воспроизвести баг. А можешь подробнее описать, как воспроизвести?

Включить проп useMobileNativeDatePicker и зайти с мобилки.

Картинка

Починил — теперь нет лишней тирешки и теперь правильно отрабатывает фокус

zhzz · 2025-03-05T02:51:52Z

packages/react-ui/components/DateRangePicker/DateRangePickerField.tsx

+  optional?: boolean;
+  onValueChange: (value: string) => void;
+}
+export type DateRangePickerFieldWithTypeProps = Omit<DateRangePickerFieldProps, 'type'>;


Тут наверное имелось в виду Without?

Да, всё так, но уже неважно — я сделал проще и удалил этот фрагмент :)

Там пока все еще остался DateRangePickerInputWithTypeProps.

Да, он-таки вернулся в forwardRefWithName, но теперь перестал экспортироваться)

zhzz · 2025-03-05T02:54:37Z

packages/react-ui/components/DateRangePicker/DateRangePickerField.tsx

+  useEffect(() => {
+    if (isStart && startValue !== null) {
+      props.onValueChange(startValue);
+    }
+  }, [startValue]);
+
+  useEffect(() => {
+    if (isEnd && endValue !== null) {
+      props.onValueChange(endValue);
+    }
+  }, [endValue]);


А зачем и тут и в commonProps props.onValueChange вызывать? Из-за этого он два раза вызывается при изменении значения.

Убрал дублирование из commonProps

И докинул тестов

packages/react-ui/components/DateRangePicker/DateRangePickerField.tsx

packages/react-ui/components/DateRangePicker/__tests__/getStateForValue-test.ts

zhzz · 2025-03-06T04:44:31Z

packages/react-ui/components/DateRangePicker/__tests__/DateRangePicker-test.tsx

В свете последнего обсуждения, тесты на вызовы onValueChange как будто бы тоже были уместны.

Да, я добавил несколько тестов с onValueChange и toHaveBeenCalledTimes:

Проверка, что onValueChange не отрабатывает при монтировании (починил баг с тем, что мы тригерили onValueChange при каждом прокидывании в контекст)

Проверки, что нет лишних вызовов при вводе в start/end

Стирание значений

zhzz · 2025-03-11T03:27:43Z

packages/react-ui/components/DateRangePicker/DateRangePicker.tsx

+  children: React.ReactNode;
+}
+
+export const DateRangePicker = Object.assign(


Похоже, что тип у DateRangePicker получился any. И ему и его полям ts позволяет любые пропы передавать.

хмм
кажется, что всё в порядке

Подсказывает типы

Не даёт прокинуть, что попало в size

sashachabin requested a review from zhzz January 16, 2025 07:28

This comment was marked as outdated.

Sign in to view

sashachabin force-pushed the date-range-picker-5.x branch from a8b895b to 23df406 Compare January 16, 2025 08:35

sashachabin force-pushed the date-range-picker-5.x branch from 23df406 to 52fab02 Compare February 7, 2025 06:50

sashachabin changed the base branch from next to date-range-picker February 7, 2025 06:54

sashachabin force-pushed the date-range-picker branch from c3a26e8 to 81b4b52 Compare February 7, 2025 06:55

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 force-pushed the date-range-picker-5.x branch from 2a24d34 to df140b9 Compare February 26, 2025 10:46

sashachabin changed the base branch from date-range-picker to next February 26, 2025 12:05

sashachabin force-pushed the date-range-picker-5.x branch 2 times, most recently from 393cca9 to bd1cc39 Compare February 27, 2025 05:55

zhzz reviewed Mar 4, 2025

View reviewed changes

zhzz requested changes Mar 5, 2025

View reviewed changes

sashachabin force-pushed the date-range-picker-5.x branch from 6950e53 to f3a399c Compare March 5, 2025 03:53

zhzz requested changes Mar 6, 2025

View reviewed changes

sashachabin force-pushed the date-range-picker-5.x branch from f3a399c to 96e4794 Compare March 7, 2025 05:01

zhzz reviewed Mar 11, 2025

View reviewed changes

sashachabin force-pushed the date-range-picker-5.x branch 4 times, most recently from dcc1454 to ca4c46f Compare March 12, 2025 21:11

sashachabin and others added 6 commits March 14, 2025 10:35

chore(): rename <PeriodPicker> to <DateRangePicker>

11ddb0f

chore(): add styleguidist readme for DateRangePicker

5a30936

chore(): Update context

ca29d2e

feature(Calendar): increase cell clickable area

b64a5d0

feature(Calendar): add transition animation

cfc1e20

chore(): add renderDay() prop

a07e9e1

sashachabin and others added 29 commits March 14, 2025 10:35

chore(): set value prop type similar to DatePicker

f29628b

chore(): fix colors in calendar's range

58208b0

chore(): calendar should close if rerender with disable prop

4a9bf06

chore(): move inline styles to module

b91a6fc

chore(): move getDateRangeState to helper

92d9ef3

chore(): move scrollToMonth to another methods

e65ddcb

chore(): move validation tests to separate file

41930f3

chore(): add unit-tests for day-pick function

0a22a4e

chore(): add not working DatePicker test (WIP)

7e5852a

chore(): remove old component's docs

d809567

chore(): remove unused scrollToMonth

c9e64a6

chore(): remove duplicated props.value in input

3d97cc6

chore(): DateRangePickerField → DateRangePickerInput

0f5280f

chore(): use forwardRef in Start/End fields

f0b2358

chore(): add types to calendar props

61d5282

chore(): fix test selectMonthAriaLabel

8c04432

chore(): create 2 groups of tests, fix typos

0ca71b9

chore(): remove unused type DateRangePickerInputWithTypeProps

29f8b12

chore(): remove unused functions in context

be19122

chore(): show enableTodayLink with optional buttons

eef5ce8

chore(): remove type in Separator

13be975

chore(): add refs to Start, End fields

c5c64b6

chore(): rename focusField to focusInput

560da7e

chore(): remove unused PropsWithoutRef

e9eac44

chore(): fixe the number of onValueChange calls

a6354e3

chore(): add test for onValueChange when clear value

54b77bd

chore(): fix double fake and real focus on mobile

6ed4091

chore(): add a11y role/label/attributes support

7a90d52

chore(): fix focus on MobileDatePicker & MobileDatePicker

d6aab5d

sashachabin force-pushed the date-range-picker-5.x branch from 73e8461 to d6aab5d Compare March 14, 2025 10:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

sashachabin commented Jan 16, 2025 •

edited

Loading

This comment was marked as outdated.

zhzz left a comment •

edited by sashachabin

Loading

zhzz Mar 4, 2025 •

edited

Loading

sashachabin Mar 7, 2025

zhzz Mar 11, 2025

sashachabin Mar 12, 2025

zhzz Mar 4, 2025

sashachabin Mar 7, 2025

zhzz Mar 7, 2025

sashachabin Mar 14, 2025

zhzz Mar 5, 2025

sashachabin Mar 7, 2025

zhzz Mar 11, 2025

sashachabin Mar 12, 2025

zhzz Mar 5, 2025

sashachabin Mar 12, 2025

zhzz Mar 6, 2025

sashachabin Mar 12, 2025 •

edited

Loading

zhzz Mar 11, 2025

sashachabin Mar 12, 2025

		Start: (props: DateRangePickerFieldWithTypeProps) => <DateRangePickerField {...props} type="start" />,
		End: (props: DateRangePickerFieldWithTypeProps) => <DateRangePickerField {...props} type="end" />,

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

Are you sure you want to change the base?

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

Conversation

sashachabin commented Jan 16, 2025 • edited Loading

<DateRangePicker>

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

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

Ссылки

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

This comment was marked as outdated.

zhzz left a comment • edited by sashachabin Loading

Choose a reason for hiding this comment

zhzz Mar 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sashachabin Mar 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

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

sashachabin commented Jan 16, 2025 •

edited

Loading

`<DateRangePicker>`

zhzz left a comment •

edited by sashachabin

Loading

zhzz Mar 4, 2025 •

edited

Loading

sashachabin Mar 12, 2025 •

edited

Loading