From 90b5e32165c626fd31f792e9346b724362e40b50 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Thu, 7 Mar 2024 15:21:10 +0500 Subject: [PATCH] Revert "feat(Calendar): added period (#3258)" This reverts commit 0fce96495b36d8e06f985f02d25cdef0c38e2608. --- .../Calendar With Custom Dates/chrome.png | 4 +- .../Calendar With Custom Dates/firefox.png | 4 +- ...nth and year change when selecting day.png | 4 +- ...nth and year change when selecting day.png | 4 +- .../chromeDark.png | 4 +- .../firefoxDark.png | 4 +- .../Calendar/Calendar with period/chrome.png | 3 - .../opened/chrome2022Dark/opened.png | 4 +- .../opened/chromeDark/opened.png | 4 +- .../opened/firefox2022Dark/opened.png | 4 +- .../opened/firefoxDark/opened.png | 4 +- .../chrome2022Dark/DateSelect month.png | 4 +- .../chromeDark/DateSelect month.png | 4 +- .../firefox2022Dark/DateSelect month.png | 4 +- .../firefoxDark/DateSelect month.png | 4 +- .../chrome2022Dark/DateSelect year.png | 4 +- .../chromeDark/DateSelect year.png | 4 +- .../firefox2022Dark/DateSelect year.png | 4 +- .../firefoxDark/DateSelect year.png | 4 +- .../opened/chrome2022Dark/opened.png | 4 +- .../opened/chromeDark/opened.png | 4 +- .../opened/firefox2022Dark/opened.png | 4 +- .../opened/firefoxDark/opened.png | 4 +- .../react-ui/components/Calendar/Calendar.md | 118 ++---------- .../react-ui/components/Calendar/Calendar.tsx | 180 ++++++++---------- .../components/Calendar/CalendarContext.tsx | 27 --- .../components/Calendar/CalendarDateShape.ts | 2 +- .../components/Calendar/CalendarUtils.ts | 10 +- .../components/Calendar/DayCellView.styles.ts | 47 +---- .../components/Calendar/DayCellView.tsx | 165 ++++------------ .../react-ui/components/Calendar/Month.tsx | 94 +++++++-- .../components/Calendar/MonthView.tsx | 17 +- .../Calendar/__stories__/Calendar.stories.tsx | 122 ++---------- .../Calendar/__tests__/Calendar.test.tsx | 169 ++-------------- .../Calendar/__tests__/DayCellView.test.tsx | 28 ++- .../react-ui/components/Calendar/index.tsx | 1 - .../components/DatePicker/DatePicker.tsx | 24 +-- .../components/DatePicker/MobilePicker.tsx | 10 +- .../DatePicker/__tests__/DatePicker-test.tsx | 32 ++-- packages/react-ui/hooks/usePrevious.ts | 9 - packages/react-ui/lib/date/InternalDate.ts | 9 +- .../react-ui/lib/date/InternalDateGetter.ts | 4 +- .../lib/date/InternalDateTransformer.ts | 15 -- .../lib/date/InternalDateValidator.ts | 3 +- packages/react-ui/lib/locale/constants.ts | 5 - 45 files changed, 336 insertions(+), 846 deletions(-) delete mode 100644 packages/react-ui/.creevey/images/Calendar/Calendar with period/chrome.png delete mode 100644 packages/react-ui/components/Calendar/CalendarContext.tsx delete mode 100644 packages/react-ui/hooks/usePrevious.ts diff --git a/packages/react-ui/.creevey/images/Calendar/Calendar With Custom Dates/chrome.png b/packages/react-ui/.creevey/images/Calendar/Calendar With Custom Dates/chrome.png index 5fba82f242b..ea7e67e8e67 100644 --- a/packages/react-ui/.creevey/images/Calendar/Calendar With Custom Dates/chrome.png +++ b/packages/react-ui/.creevey/images/Calendar/Calendar With Custom Dates/chrome.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5fd377d30d0542efc6ae8235d44f61fd5f5ec9c16143d48e42c0c320115db92d -size 11863 +oid sha256:e473690f2350d01a1d8e041c5f5feeae9144b1a13a9ce8b1b864ceb0c0dcec0f +size 11658 diff --git a/packages/react-ui/.creevey/images/Calendar/Calendar With Custom Dates/firefox.png b/packages/react-ui/.creevey/images/Calendar/Calendar With Custom Dates/firefox.png index 1106cb73042..893a69435da 100644 --- a/packages/react-ui/.creevey/images/Calendar/Calendar With Custom Dates/firefox.png +++ b/packages/react-ui/.creevey/images/Calendar/Calendar With Custom Dates/firefox.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1a3d791de915110adc753f345a8baa3ffe9100f00857615cd3f5acc17574c1b0 -size 13495 +oid sha256:bd70f3d7aaa0e34bf387351bd0c1ee55a877e09a0751ce999778bc6f803ef2dc +size 13039 diff --git a/packages/react-ui/.creevey/images/Calendar/Calendar With Month Change Handle/month and year change when selecting day/chrome/month and year change when selecting day.png b/packages/react-ui/.creevey/images/Calendar/Calendar With Month Change Handle/month and year change when selecting day/chrome/month and year change when selecting day.png index 7c09a594a44..3c5feb83944 100644 --- a/packages/react-ui/.creevey/images/Calendar/Calendar With Month Change Handle/month and year change when selecting day/chrome/month and year change when selecting day.png +++ b/packages/react-ui/.creevey/images/Calendar/Calendar With Month Change Handle/month and year change when selecting day/chrome/month and year change when selecting day.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5318e8a3b3467f6a8e64c60aecf13f7f1e692d967302cfc44e6203c1564414ca -size 26159 +oid sha256:f0aa730fc66f1efdd05d7ec7fa91ada6385eecc50fb2b0fb343deae224e67fcf +size 24280 diff --git a/packages/react-ui/.creevey/images/Calendar/Calendar With Month Change Handle/month and year change when selecting day/firefox/month and year change when selecting day.png b/packages/react-ui/.creevey/images/Calendar/Calendar With Month Change Handle/month and year change when selecting day/firefox/month and year change when selecting day.png index 91d05829bd8..47bc3e01463 100644 --- a/packages/react-ui/.creevey/images/Calendar/Calendar With Month Change Handle/month and year change when selecting day/firefox/month and year change when selecting day.png +++ b/packages/react-ui/.creevey/images/Calendar/Calendar With Month Change Handle/month and year change when selecting day/firefox/month and year change when selecting day.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:da54591d626dae007ad86808ee2af2fabc792c034989d5eb45604646589cf658 -size 28999 +oid sha256:09a5cfee0046f312f2e11b7649638e4ea75e7cce321053c1aa79370d14e61708 +size 27126 diff --git a/packages/react-ui/.creevey/images/Calendar/Calendar with bottom separator/chromeDark.png b/packages/react-ui/.creevey/images/Calendar/Calendar with bottom separator/chromeDark.png index f0cc6287861..184441efab4 100644 --- a/packages/react-ui/.creevey/images/Calendar/Calendar with bottom separator/chromeDark.png +++ b/packages/react-ui/.creevey/images/Calendar/Calendar with bottom separator/chromeDark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:11a4155a528ca30d2f985cf44c17beb654d152a7fed7c2edb7fe771a219d38ee -size 13608 +oid sha256:d1f16f3d2b0a431a4590d13978a65a2db6cf8c684878e5f3f740fd6aedb9cce7 +size 15233 diff --git a/packages/react-ui/.creevey/images/Calendar/Calendar with bottom separator/firefoxDark.png b/packages/react-ui/.creevey/images/Calendar/Calendar with bottom separator/firefoxDark.png index 21a2d2280e9..b39a8e0963a 100644 --- a/packages/react-ui/.creevey/images/Calendar/Calendar with bottom separator/firefoxDark.png +++ b/packages/react-ui/.creevey/images/Calendar/Calendar with bottom separator/firefoxDark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b0d43fe7d8a954bdc0ba5c7207582dca0dd4282791697a0fc787b4e497b867aa -size 14517 +oid sha256:3477437ef777cb5fc1fea9497212b19c5cf023ce76ee95b7de4736fe2c643caa +size 15852 diff --git a/packages/react-ui/.creevey/images/Calendar/Calendar with period/chrome.png b/packages/react-ui/.creevey/images/Calendar/Calendar with period/chrome.png deleted file mode 100644 index da0bcd0dd7b..00000000000 --- a/packages/react-ui/.creevey/images/Calendar/Calendar with period/chrome.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e2a88c731799d73739e897f330ef8a6994ab054cc827709cd774bf2c78f804b3 -size 15390 diff --git a/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/chrome2022Dark/opened.png b/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/chrome2022Dark/opened.png index 5f5bbb05ecb..eb9bbc16b1d 100644 --- a/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/chrome2022Dark/opened.png +++ b/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/chrome2022Dark/opened.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:57f1ba79f43a965ba3022e833dceec73af900d764320d8956e6bbedac50bbb6a -size 22939 +oid sha256:d588353ef84e6ccf363e2b48c17719d88126aa30ae82c2362d6d6cd99cb27d0c +size 24767 diff --git a/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/chromeDark/opened.png b/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/chromeDark/opened.png index 928e2493422..755ab72efe6 100644 --- a/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/chromeDark/opened.png +++ b/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/chromeDark/opened.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:58f0043cdabfa9592489a00b6d2743a6e61e3f9f7da3f1f3bf2fb82bff017a7b -size 21429 +oid sha256:ca36d87833586ae5d623c7b236f762870aa9229b4b5aec9f6c2eeb250cdd5ab8 +size 23312 diff --git a/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/firefox2022Dark/opened.png b/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/firefox2022Dark/opened.png index cd43a2bb8cc..2cf43cb1b32 100644 --- a/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/firefox2022Dark/opened.png +++ b/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/firefox2022Dark/opened.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a47bed6c44b0161b4b4b41886762a70d78b82844bb2c61de128ee7535e182c04 -size 28351 +oid sha256:4b00d882722a8e2065a11fcbaabab4f85436fc2e52bba766c08280d63568fcb4 +size 30091 diff --git a/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/firefoxDark/opened.png b/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/firefoxDark/opened.png index 644135f927a..ebba88f00ea 100644 --- a/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/firefoxDark/opened.png +++ b/packages/react-ui/.creevey/images/DatePicker/DatePicker In Relative Body/opened/firefoxDark/opened.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4c0733d9c477a9d84871bb085a958fd449ea7867f7e99d5d49852a3ffc1fe54a -size 26739 +oid sha256:3b02f59af6775ed042c12d1679f3fa5a4c36b6660498f73b4ef9c21ee5cb5774 +size 28401 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/chrome2022Dark/DateSelect month.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/chrome2022Dark/DateSelect month.png index 58090255ca4..5135db32f89 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/chrome2022Dark/DateSelect month.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/chrome2022Dark/DateSelect month.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4f087078b6fc403f486c911bfbdc0037e62b6caf6c609b565ce2ab5989f3da3b -size 27368 +oid sha256:ba08ba94f2306bbf5a8614fc6db544579c99768bdad6f5581469d126ce466f18 +size 29058 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/chromeDark/DateSelect month.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/chromeDark/DateSelect month.png index ad990b08464..5b7f9e0fd59 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/chromeDark/DateSelect month.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/chromeDark/DateSelect month.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:caa954d9b5955017a4b39d01dcd35200d6a6da029114e33bc458b3e74477251d -size 25584 +oid sha256:6ed2998d0a44e9757ed8ecff483d2fbd8e85c2b4c624b9d16d5e151160d0dcc0 +size 27150 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/firefox2022Dark/DateSelect month.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/firefox2022Dark/DateSelect month.png index 92d317e7043..1fe131911b9 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/firefox2022Dark/DateSelect month.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/firefox2022Dark/DateSelect month.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f477c63c88324e6d3d16055ba3bdf48e3299db38cc14885de94a36dcdecbbf4d -size 31095 +oid sha256:e694dfc60b2f9535df077c1fada2fa85a9d83e7218739f45205c7e15af0c8791 +size 32834 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/firefoxDark/DateSelect month.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/firefoxDark/DateSelect month.png index 01068e3dce7..cfa5de59a22 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/firefoxDark/DateSelect month.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect month/firefoxDark/DateSelect month.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:765cfbdfc897559188c083439f40094025d274e8d5a031887e4421ec91170c5b -size 29507 +oid sha256:284ce9370eeabcdcb2cfbeded63c0761c4e02542d2087080958ddf2d5f8c5f95 +size 30977 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/chrome2022Dark/DateSelect year.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/chrome2022Dark/DateSelect year.png index 41836456dde..6eb74ace80d 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/chrome2022Dark/DateSelect year.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/chrome2022Dark/DateSelect year.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ee5f63fee8cd96d7d2bc863ad29e09462711529c5ae7afac7c0dfe5456cc5909 -size 24917 +oid sha256:85d6eb5629c8fdfe89abd339d75d8b86b37af54b7ccb532a030e7d80097f9db9 +size 26698 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/chromeDark/DateSelect year.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/chromeDark/DateSelect year.png index 1acd05cff04..385e5ff9ede 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/chromeDark/DateSelect year.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/chromeDark/DateSelect year.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3db6e9091fe32a76cc44a87017785f952b38c73bb7aadcc69c6dccb7e1ae12fc -size 23574 +oid sha256:ec5fc4b30f10b3a8acb64b63551fcbb9681861e8731b699998312860ad67fbc5 +size 25302 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/firefox2022Dark/DateSelect year.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/firefox2022Dark/DateSelect year.png index c25b8842a59..f82a45d3b1e 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/firefox2022Dark/DateSelect year.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/firefox2022Dark/DateSelect year.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2969f23ab60da7bd4c79511e496c88fc3d38223d0d789c87d6ab7135a0ce753b -size 28729 +oid sha256:dd326199156c2b7e0507c535d69483d6b9285821dbe2c308fdb72f52a4f3b666 +size 30263 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/firefoxDark/DateSelect year.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/firefoxDark/DateSelect year.png index bcf566473ad..51cd8445d96 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/firefoxDark/DateSelect year.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/firefoxDark/DateSelect year.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:af98fdc292094ef3380e71e8c2e8ba3363796471c7146f94818bac1480177552 -size 26927 +oid sha256:4955174806f885d3cc80233af21384e1a4390e4fb05562eab9274f6a572dc19b +size 28453 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/chrome2022Dark/opened.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/chrome2022Dark/opened.png index 49df02efc2d..ae78bc2579d 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/chrome2022Dark/opened.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/chrome2022Dark/opened.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cc0d0ef05a776a844b2fb35581a73067b9c36ee0c312ca40830b9533dacbbfe5 -size 18788 +oid sha256:560edec8eee30829503f16fff23efa4339c27164dd04dc35231039d35a2360c0 +size 20383 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/chromeDark/opened.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/chromeDark/opened.png index 0e68aeece1b..7474ef00225 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/chromeDark/opened.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/chromeDark/opened.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8cefb4f8618032ef7d9a2a7b3d705fe353f411ee1d5b59021b8331498f3114a2 -size 17940 +oid sha256:3ea3e9ec5ac0f9026620c59122760550c652323fda2f1dac7ee5bc89b86b0c3c +size 19563 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/firefox2022Dark/opened.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/firefox2022Dark/opened.png index fd8648383e3..ebd1c0e36d4 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/firefox2022Dark/opened.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/firefox2022Dark/opened.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:dc3cfef4e334778432b0f8cb6a1fe61010b6aac832f22fa03d5e16fd345e8ea0 -size 22540 +oid sha256:d46d23aebf0db039752a66e57f946d70e769e0f5b426b4627a7b5003301414fc +size 24157 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/firefoxDark/opened.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/firefoxDark/opened.png index fd6bc8367a3..aecf87b7056 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/firefoxDark/opened.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/opened/firefoxDark/opened.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f4f282c98470128bb5b9fdef11e8fd2fce7735864b15ec0a5bb0e332c9b4df83 -size 21605 +oid sha256:0b0fe0b447b5873fea6b7771aac038368be84885ac467890204d18bff1a8f242 +size 23210 diff --git a/packages/react-ui/components/Calendar/Calendar.md b/packages/react-ui/components/Calendar/Calendar.md index 1a2bfa72a66..58acd256f25 100644 --- a/packages/react-ui/components/Calendar/Calendar.md +++ b/packages/react-ui/components/Calendar/Calendar.md @@ -1,5 +1,4 @@ - Календарь с заданной датой ```jsx harmony @@ -82,69 +81,6 @@ const isHoliday = (day, isWeekend) => { ; ``` -### Период дат - -В календаре можно задать период пропами `periodStartDate` и `periodEndDate`. -Если задан только один из пропов, то при наведении мышью будет подсвечиваться период между заданным пропом и датой под указателем мыши. -```jsx harmony -import { Button, DateInput, Gapped, Radio, RadioGroup, Group } from '@skbkontur/react-ui'; - -const [periodStartDate, setPeriodStartDate] = React.useState('10.08.2022'); -const [periodEndDate, setPeriodEndDate] = React.useState('20.08.2022'); -const [period, setPeriod] = React.useState('start'); - -const onValueChange = (date) => { - if (period === 'start') { - setPeriodStartDate(date); - } - if (period === 'end') { - setPeriodEndDate(date); - } -} - - - - - - Как сохранять дату из onValueChange - Как начало периода - Как окончание периода - - - Начало периода - - - - - - - - - Окончание периода - - - - ); -}; +} diff --git a/packages/react-ui/components/Calendar/Month.tsx b/packages/react-ui/components/Calendar/Month.tsx index d1f957b6707..d22ac8f4519 100644 --- a/packages/react-ui/components/Calendar/Month.tsx +++ b/packages/react-ui/components/Calendar/Month.tsx @@ -3,8 +3,11 @@ import React from 'react'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { DateSelect } from '../../internal/DateSelect'; +import { Nullable } from '../../typings/utility-types'; +import { createPropsGetter } from '../../lib/createPropsGetter'; import { themeConfig } from './config'; +import * as CDS from './CalendarDateShape'; import { MonthViewModel } from './MonthViewModel'; import { DayCellViewModel } from './DayCellViewModel'; import { MonthView } from './MonthView'; @@ -15,26 +18,40 @@ import { styles } from './MonthView.styles'; interface MonthProps { top: number; month: MonthViewModel; + maxDate?: CDS.CalendarDateShape; + minDate?: CDS.CalendarDateShape; + today?: CDS.CalendarDateShape; + value?: Nullable; + onDateClick?: (date: CDS.CalendarDateShape) => void; onMonthYearChange: (month: number, year: number) => void; + isHoliday?: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => boolean; + renderDay?: (date: CDS.CalendarDateShape) => React.ReactNode; } +type DefaultProps = Required>; + export class Month extends React.Component { private theme!: Theme; private monthSelect: DateSelect | null = null; private yearSelect: DateSelect | null = null; - constructor(props: MonthProps) { - super(props); - this.state = {}; - } - public shouldComponentUpdate(nextProps: MonthProps) { - // console.log('Month shouldComponentUpdate', nextProps); if (this.props.top !== nextProps.top) { return true; } - + if (!CDS.isEqual(nextProps.value, this.props.value)) { + return true; + } + if (!CDS.isEqual(nextProps.today, this.props.today)) { + return true; + } + if (!CDS.isEqual(nextProps.minDate, this.props.minDate)) { + return true; + } + if (!CDS.isEqual(nextProps.maxDate, this.props.maxDate)) { + return true; + } return this.props.month !== nextProps.month; } @@ -54,13 +71,15 @@ export class Month extends React.Component { } public renderMain() { - const { month, top } = this.props; + const { month, maxDate, minDate, top } = this.props; return ( { } private renderCells() { - return ; + return ( + + ); } private closeSelects = () => { @@ -109,17 +140,38 @@ const DAYS_PER_WEEK = 7; interface MonthDayGridProps { days: DayCellViewModel[]; offset: number; + minDate?: CDS.CalendarDateShape; + maxDate?: CDS.CalendarDateShape; + today?: CDS.CalendarDateShape; + value?: Nullable; + onDateClick?: (x0: CDS.CalendarDateShape) => void; + isHoliday?: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => boolean; + renderItem: (date: CDS.CalendarDateShape) => React.ReactNode; } class MonthDayGrid extends React.Component { private theme!: Theme; - constructor(props: MonthDayGridProps) { - super(props); - this.state = {}; - } + public static defaultProps: DefaultProps = { + isHoliday: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => day.isWeekend, + renderItem: (date: CDS.CalendarDateShape) => date.date, + }; + + private getProps = createPropsGetter(MonthDayGrid.defaultProps); public shouldComponentUpdate(nextProps: MonthDayGridProps) { + if (!CDS.isEqual(nextProps.value, this.props.value)) { + return true; + } + if (!CDS.isEqual(nextProps.today, this.props.today)) { + return true; + } + if (!CDS.isEqual(nextProps.minDate, this.props.minDate)) { + return true; + } + if (!CDS.isEqual(nextProps.maxDate, this.props.maxDate)) { + return true; + } return this.props.days !== nextProps.days; } @@ -149,7 +201,21 @@ class MonthDayGrid extends React.Component { /> )); const days = this.props.days.map((day) => { - return ; + const isWeekend = this.getProps().isHoliday(day); + + return ( + + ); }); const weeks = divideToWeeks(leadingDays.concat(days, trailingDays)); return ( diff --git a/packages/react-ui/components/Calendar/MonthView.tsx b/packages/react-ui/components/Calendar/MonthView.tsx index a0276f575cc..88ef3bc78b3 100644 --- a/packages/react-ui/components/Calendar/MonthView.tsx +++ b/packages/react-ui/components/Calendar/MonthView.tsx @@ -4,7 +4,6 @@ import { DateSelect } from '../../internal/DateSelect'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import * as ColorFunctions from '../../lib/styles/ColorFunctions'; import { cx } from '../../lib/theming/Emotion'; -import { usePrevious } from '../../hooks/usePrevious'; import { useResponsiveLayout } from '../../components/ResponsiveLayout'; import { Nullable } from '../..//typings/utility-types'; @@ -12,7 +11,6 @@ import { styles } from './MonthView.styles'; import { themeConfig } from './config'; import * as CDS from './CalendarDateShape'; import { CalendarDataTids } from './Calendar'; -import { CalendarContext } from './CalendarContext'; export const getMinMonth = (year: number, minDate: Nullable) => { let min = 0; @@ -42,6 +40,8 @@ interface MonthViewProps { height: number; isFirstInYear?: boolean; isLastInYear?: boolean; + maxDate?: CDS.CalendarDateShape; + minDate?: CDS.CalendarDateShape; month: number; top: number; year: number; @@ -53,7 +53,6 @@ interface MonthViewProps { export function MonthView(props: MonthViewProps) { const theme = useContext(ThemeContext); - const { minDate, maxDate, onStuckMonth } = useContext(CalendarContext); const { isMobile } = useResponsiveLayout(); const { @@ -61,6 +60,8 @@ export function MonthView(props: MonthViewProps) { height, isFirstInYear, isLastInYear, + maxDate, + minDate, month, top, year, @@ -79,16 +80,6 @@ export function MonthView(props: MonthViewProps) { const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0; const monthSelectDisabled = top > 40 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT; const yearSelectDisabled = top > 40 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT); - const prevMonthSelectDisabled = usePrevious(monthSelectDisabled); - - const monthInfo = { - month: month + 1, - year, - }; - - if (onStuckMonth && prevMonthSelectDisabled && !monthSelectDisabled) { - onStuckMonth(monthInfo); - } return (
{ return ; }; - CalendarWithBottomSeparator.storyName = 'Calendar with bottom separator'; CalendarWithBottomSeparator.parameters = { creevey: { @@ -29,104 +27,14 @@ CalendarWithBottomSeparator.parameters = { }, }; -export const CalendarWithPeriod: Story = () => { - const [min, setMin] = React.useState('05.08.2022'); - const [max, setMax] = React.useState('30.08.2022'); - const [periodStartDate, setPeriodStartDate] = React.useState('10.08.2022'); - const [periodEndDate, setPeriodEndDate] = React.useState('20.08.2022'); - const [focus, setFocus] = useState<'periodStartDate' | 'periodEndDate'>('periodStartDate'); - - const getFocusStyle = (type: 'periodStartDate' | 'periodEndDate') => - focus === type ? { background: '#80A6FF' } : {}; - - const periodClearing = () => { - setFocus('periodStartDate'); - setPeriodStartDate(''); - setPeriodEndDate(''); - }; - - const onValueChange = (date: string) => { - if (focus === 'periodEndDate') { - setPeriodEndDate(date); - setFocus('periodStartDate'); - } - if (focus === 'periodStartDate') { - setPeriodStartDate(date); - setFocus('periodEndDate'); - } - }; - - return ( - - - - - - - -
- -
- - - ); -}; -CalendarWithPeriod.storyName = 'Calendar with period'; -CalendarWithPeriod.parameters = { - creevey: { - captureElement: '[data-tid="calendar_with_period"]', - skip: { 'logic is covered with unit tests': { in: /^(?!\bchrome\b)/ } }, - }, -}; - -const customDayItem: CalendarProps['renderDay'] = (date, defaultProps, RenderDefault) => { - const [dd] = date.split('.').map(Number); - +const CustomDayItem: React.FC<{ date: CalendarDateShape }> = ({ date }) => { const isEven = (num: number): boolean => num % 2 === 0; - return ( - -
{isEven(dd) ? '#' : dd}
- - ); + return
{isEven(date.date) ? : date.date}
; }; export const CalendarWithCustomDates: Story = () => { - return ; + return } />; }; CalendarWithCustomDates.parameters = { @@ -157,12 +65,17 @@ CalendarWithCustomCellSize.parameters = { }, }; +const CustomDay: React.FC<{ date: CalendarDateShape }> = ({ date }) => { + const isCustomDate = date.date === 2 && date.month === 0 && date.year === 2018; + return isCustomDate ?
{date.date}
:
{date.date}
; +}; + export const CalendarWithMonthChangeHandle: Story = () => { const [month, setMonth] = useState(12); const [year, setYear] = useState(2017); const [value, setValue] = useState('02.12.2017'); - const onStuckMonth = (changeInfo: CalendarMonthInfo): void => { + const onMonthChange = (changeInfo: CalendarMonthChangeInfo): void => { setMonth(changeInfo.month); setYear(changeInfo.year); }; @@ -180,7 +93,12 @@ export const CalendarWithMonthChangeHandle: Story = () => { return (
- + } + />
Отображаемый месяц @@ -203,7 +121,7 @@ CalendarWithMonthChangeHandle.parameters = { async 'month and year change when selecting day'() { await this.browser .actions({ bridge: true }) - .click(this.browser.findElement({ css: '[data-tid~="DayCellView__root"]' })) + .click(this.browser.findElement({ css: '[data-tid~="CustomDayItem"]' })) .perform(); await delay(2000); diff --git a/packages/react-ui/components/Calendar/__tests__/Calendar.test.tsx b/packages/react-ui/components/Calendar/__tests__/Calendar.test.tsx index a3efddbad2a..4315e5fdcef 100644 --- a/packages/react-ui/components/Calendar/__tests__/Calendar.test.tsx +++ b/packages/react-ui/components/Calendar/__tests__/Calendar.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { componentsLocales as DateSelectLocalesRu } from '../../../internal/DateSelect/locale/locales/ru'; @@ -7,7 +7,7 @@ import { componentsLocales as DateSelectLocalesEn } from '../../../internal/Date import { DateSelectDataTids } from '../../../internal/DateSelect'; import { Calendar } from '../Calendar'; import { LangCodes, LocaleContext } from '../../../lib/locale'; -import { CalendarDataTids } from '..'; +import { CalendarDataTids, CalendarDateShape } from '..'; import { CalendarLocaleHelper } from '../locale'; describe('Calendar', () => { @@ -48,23 +48,23 @@ describe('Calendar', () => { }); it('renders day cells with renderDay prop', async () => { - const CustomDayItem: React.FC<{ date: string }> = ({ date }) => ( - {date === '02.07.2017' ? 'Custom' : date} + const CustomDayItem: React.FC<{ date: CalendarDateShape }> = ({ date }) => ( + {date.date === 1 ? 'Custom' : date.date} ); render( } + renderDay={(date: CalendarDateShape): React.ReactNode => } />, ); expect(screen.getAllByTestId('customDayItem')[0]).toBeInTheDocument(); }); - it('onStuckMonth returns correct month', async () => { - const onStuckMonth = jest.fn(({ month, year }) => ({ month, year })); - render(); + it('onMonthChange returns correct month', async () => { + const onMonthChange = jest.fn(({ month, year }) => ({ month, year })); + render(); userEvent.click( screen.getByRole('button', { @@ -81,12 +81,12 @@ describe('Calendar', () => { }), ); - await waitFor(() => expect(onStuckMonth).toHaveReturnedWith({ month: 7, year: 2017 }), { timeout: 5000 }); + await waitFor(() => expect(onMonthChange).toHaveReturnedWith({ month: 7, year: 2017 }), { timeout: 2000 }); }); - it('onStuckMonth returns correct year', async () => { - const onStuckMonth = jest.fn(({ month, year }) => ({ month, year })); - render(); + it('onMonthChange returns correct year', async () => { + const onMonthChange = jest.fn(({ month, year }) => ({ month, year })); + render(); userEvent.click( screen.getByRole('button', { @@ -99,7 +99,7 @@ describe('Calendar', () => { }), ); - await waitFor(() => expect(onStuckMonth).toHaveLastReturnedWith({ month: 6, year: 2018 }), { timeout: 5000 }); + await waitFor(() => expect(onMonthChange).toHaveLastReturnedWith({ month: 6, year: 2018 }), { timeout: 3000 }); }); it('should set langCode', () => { @@ -305,147 +305,4 @@ describe('Calendar', () => { expect(screen.getAllByTestId(CalendarDataTids.headerYear)[1].querySelector('span')).toBeInTheDocument(); }); }); - - describe('Calendar with period', () => { - it('should set periodEndDate', () => { - let periodEndDate = ''; - const periodStartDate = '20.08.2022'; - const onValueChange = (date: string) => (periodEndDate = date); - - render( - , - ); - - //где 29 это 30.08.2023. - const button = screen.getAllByTestId(CalendarDataTids.dayCell)?.[29]; - - expect(button).toBeInTheDocument(); - - fireEvent.click(button); - - expect(screen.getByText(/Август/i)).toBeInTheDocument(); - expect(periodEndDate).toBe('30.08.2022'); - }); - - it('should set periodStartDate', () => { - let periodStartDate = ''; - const periodEndDate = '30.08.2023'; - const onValueChange = (date: string) => (periodStartDate = date); - - render( - , - ); - - //где 19 это 20.08.2023. - const button = screen.getAllByTestId(CalendarDataTids.dayCell)?.[19]; - - expect(button).toBeInTheDocument(); - - fireEvent.click(button); - - expect(screen.getByText(/Август/i)).toBeInTheDocument(); - expect(periodStartDate).toBe('20.08.2022'); - }); - - it('should change periodStartDate', () => { - let periodStartDate = '20.08.2023'; - const periodEndDate = '25.08.2023'; - const onValueChange = (date: string) => (periodStartDate = date); - - render( - , - ); - - //где 20 это 21.08.2023. - const button = screen.getAllByTestId(CalendarDataTids.dayCell)?.[20]; - - expect(button).toBeInTheDocument(); - - fireEvent.click(button); - - expect(screen.getByText(/Август/i)).toBeInTheDocument(); - expect(periodStartDate).toBe('21.08.2022'); - }); - - it('should change periodEndDate', () => { - let periodEndDate = '25.08.2023'; - const periodStartDate = '20.08.2023'; - const onValueChange = (date: string) => (periodEndDate = date); - - render( - , - ); - - //где 30 это 31.08.2023. - const button = screen.getAllByTestId(CalendarDataTids.dayCell)?.[30]; - - expect(button).toBeInTheDocument(); - - fireEvent.click(button); - - expect(screen.getByText(/Август/i)).toBeInTheDocument(); - expect(periodEndDate).toBe('31.08.2022'); - }); - - it('the days to the right should be blocked', () => { - let value = '20.08.2023'; - const periodEndDate = '20.08.2023'; - const maxDate = '20.08.2023'; - const onValueChange = (date: string) => (value = date); - - render(); - - //где 20 это 21.08.2023. - const blockedDayButton = screen.getAllByTestId(CalendarDataTids.dayCell)?.[20]; - - expect(blockedDayButton).toBeInTheDocument(); - - fireEvent.click(blockedDayButton, {}); - - expect(value).toBe('20.08.2023'); - - expect(screen.getByText(/Август/i)).toBeInTheDocument(); - }); - - it('the days to the left should be blocked', () => { - let value = '20.08.2023'; - const minDate = '20.08.2023'; - const periodStartDate = '20.08.2023'; - const onValueChange = (date: string) => (value = date); - - render( - , - ); - - //где 18 это 19.08.2023. - const blockedDayButton = screen.getAllByTestId(CalendarDataTids.dayCell)?.[18]; - - expect(blockedDayButton).toBeInTheDocument(); - - fireEvent.click(blockedDayButton); - - expect(value).toBe('20.08.2023'); - expect(screen.getByText(/Август/i)).toBeInTheDocument(); - }); - }); }); diff --git a/packages/react-ui/components/Calendar/__tests__/DayCellView.test.tsx b/packages/react-ui/components/Calendar/__tests__/DayCellView.test.tsx index ded1bf75b12..dc3d1218325 100644 --- a/packages/react-ui/components/Calendar/__tests__/DayCellView.test.tsx +++ b/packages/react-ui/components/Calendar/__tests__/DayCellView.test.tsx @@ -5,7 +5,6 @@ import { LangCodes, LocaleContext } from '../../../lib/locale'; import { Calendar, CalendarDataTids } from '../Calendar'; import { componentsLocales as DayCellViewLocalesRu } from '../locale/locales/ru'; import { componentsLocales as DayCellViewLocalesEn } from '../locale/locales/en'; -import { InternalDate } from '../../../lib/date/InternalDate'; describe('DayCellView', () => { describe('a11y', () => { @@ -13,11 +12,10 @@ describe('DayCellView', () => { const date = '1.2.2021'; render(); - const ariaLabel = `${DayCellViewLocalesRu.dayCellChooseDateAriaLabel}: ${new InternalDate({ - value: date, - }).toA11YFormat()}`; - - expect(screen.getAllByTestId(CalendarDataTids.dayCell)[0]).toHaveAttribute('aria-label', ariaLabel); + expect(screen.getAllByTestId(CalendarDataTids.dayCell)[0]).toHaveAttribute( + 'aria-label', + `${DayCellViewLocalesRu.dayCellChooseDateAriaLabel} ${date}`, + ); }); it('has correct aria-label (en)', () => { @@ -28,12 +26,10 @@ describe('DayCellView', () => { , ); - const ariaLabel = `${DayCellViewLocalesEn.dayCellChooseDateAriaLabel}: ${new InternalDate({ - langCode: LangCodes.en_GB, - value: date, - }).toA11YFormat()}`; - - expect(screen.getAllByTestId(CalendarDataTids.dayCell)[0]).toHaveAttribute('aria-label', ariaLabel); + expect(screen.getAllByTestId(CalendarDataTids.dayCell)[0]).toHaveAttribute( + 'aria-label', + `${DayCellViewLocalesEn.dayCellChooseDateAriaLabel} ${date}`, + ); }); it('sets custom value for `dayCellChooseDateAriaLabel` locale', () => { @@ -44,11 +40,11 @@ describe('DayCellView', () => { , ); - const ariaLabel = `${customAriaLabel}: ${new InternalDate({ - value: date, - }).toA11YFormat()}`; - expect(screen.getAllByTestId(CalendarDataTids.dayCell)[0]).toHaveAttribute('aria-label', ariaLabel); + expect(screen.getAllByTestId(CalendarDataTids.dayCell)[0]).toHaveAttribute( + 'aria-label', + `${customAriaLabel} ${date}`, + ); }); }); }); diff --git a/packages/react-ui/components/Calendar/index.tsx b/packages/react-ui/components/Calendar/index.tsx index adb4a576e84..3a49b927aa0 100644 --- a/packages/react-ui/components/Calendar/index.tsx +++ b/packages/react-ui/components/Calendar/index.tsx @@ -1,3 +1,2 @@ export * from './Calendar'; export * from './CalendarDateShape'; -export type { DayProps } from './DayCellView'; diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx index 9f6137476d7..2018f0662ec 100644 --- a/packages/react-ui/components/DatePicker/DatePicker.tsx +++ b/packages/react-ui/components/DatePicker/DatePicker.tsx @@ -46,17 +46,7 @@ export const MIN_WIDTH = 120; export interface DatePickerProps extends Pick, - Pick< - CalendarProps, - | 'isHoliday' - | 'minDate' - | 'maxDate' - | 'renderDay' - | 'onStuckMonth' - | 'onMonthSelect' - | 'periodStartDate' - | 'periodEndDate' - >, + Pick, CommonProps { autoFocus?: boolean; disabled?: boolean; @@ -170,7 +160,7 @@ export class DatePicker extends React.PureComponent ); } else { @@ -343,10 +330,7 @@ export class DatePicker extends React.PureComponent {this.props.enableTodayLink && this.renderTodayLink()}{' '}
diff --git a/packages/react-ui/components/DatePicker/MobilePicker.tsx b/packages/react-ui/components/DatePicker/MobilePicker.tsx index ac29fb5201e..d17558ca156 100644 --- a/packages/react-ui/components/DatePicker/MobilePicker.tsx +++ b/packages/react-ui/components/DatePicker/MobilePicker.tsx @@ -31,10 +31,7 @@ export interface MobilePickerProps | 'isHoliday' | 'enableTodayLink' | 'renderDay' - | 'onStuckMonth' - | 'onMonthSelect' - | 'periodStartDate' - | 'periodEndDate' + | 'onMonthChange' > { onCloseRequest?: () => void; } @@ -113,10 +110,7 @@ export const MobilePicker: React.FC = (props) => { onValueChange={onValueChange} isHoliday={props.isHoliday} renderDay={props.renderDay} - onStuckMonth={props.onStuckMonth} - onMonthSelect={props.onMonthSelect} - periodStartDate={props.periodStartDate} - periodEndDate={props.periodEndDate} + onMonthChange={props.onMonthChange} /> diff --git a/packages/react-ui/components/DatePicker/__tests__/DatePicker-test.tsx b/packages/react-ui/components/DatePicker/__tests__/DatePicker-test.tsx index a5716ab796b..9b5992aeca7 100644 --- a/packages/react-ui/components/DatePicker/__tests__/DatePicker-test.tsx +++ b/packages/react-ui/components/DatePicker/__tests__/DatePicker-test.tsx @@ -3,7 +3,7 @@ import { render, screen, waitFor, within, fireEvent } from '@testing-library/rea import userEvent from '@testing-library/user-event'; import { componentsLocales as DateSelectLocalesRu } from '../../../internal/DateSelect/locale/locales/ru'; -import { CalendarDataTids } from '../../../components/Calendar'; +import { CalendarDataTids, CalendarDateShape } from '../../../components/Calendar'; import { MASK_CHAR_EXEMPLAR } from '../../../internal/MaskCharLowLine'; import { InputLikeTextDataTids } from '../../../internal/InputLikeText'; import { InternalDate } from '../../../lib/date/InternalDate'; @@ -100,14 +100,14 @@ describe('DatePicker', () => { }); it('renders day cells with renderItem prop', async () => { - const CustomDayItem: React.FC<{ date: string }> = ({ date }) => ( - {date === '02.07.2017' ? 'Custom' : date} + const CustomDayItem: React.FC<{ date: CalendarDateShape }> = ({ date }) => ( + {date.date === 1 ? 'Custom' : date.date} ); render( } + renderDay={(date: CalendarDateShape): React.ReactNode => } />, ); await userEvent.click(screen.getByTestId(DatePickerDataTids.input)); @@ -115,9 +115,9 @@ describe('DatePicker', () => { expect(screen.getAllByTestId('customDayItem')[0]).toBeInTheDocument(); }); - it('onStuckMonth returns correct month', async () => { - const onStuckMonth = jest.fn(({ month, year }) => ({ month, year })); - render(); + it('onMonthChange returns correct month', async () => { + const onMonthChange = jest.fn(({ month, year }) => ({ month, year })); + render(); userEvent.click(screen.getByTestId(DatePickerDataTids.input)); userEvent.click( @@ -135,12 +135,12 @@ describe('DatePicker', () => { }), ); - await waitFor(() => expect(onStuckMonth).toHaveReturnedWith({ month: 7, year: 2017 }), { timeout: 3000 }); + await waitFor(() => expect(onMonthChange).toHaveReturnedWith({ month: 7, year: 2017 }), { timeout: 2000 }); }); - it('onStuckMonth returns correct year', async () => { - const onStuckMonth = jest.fn(({ month, year }) => ({ month, year })); - render(); + it('onMonthChange returns correct year', async () => { + const onMonthChange = jest.fn(({ month, year }) => ({ month, year })); + render(); userEvent.click(screen.getByTestId(DatePickerDataTids.input)); userEvent.click( @@ -154,7 +154,7 @@ describe('DatePicker', () => { }), ); - await waitFor(() => expect(onStuckMonth).toHaveLastReturnedWith({ month: 6, year: 2018 }), { timeout: 3000 }); + await waitFor(() => expect(onMonthChange).toHaveLastReturnedWith({ month: 6, year: 2018 }), { timeout: 3000 }); }); describe('Locale', () => { @@ -394,13 +394,13 @@ describe('DatePicker', () => { , ); - const ariaLabel = `${customAriaLabel}: ${new InternalDate({ - value: date, - }).toA11YFormat()}`; userEvent.click(screen.getByTestId(DatePickerDataTids.input)); - expect(screen.getAllByTestId(CalendarDataTids.dayCell)[0]).toHaveAttribute('aria-label', ariaLabel); + expect(screen.getAllByTestId(CalendarDataTids.dayCell)[0]).toHaveAttribute( + 'aria-label', + `${customAriaLabel} ${date}`, + ); }); }); diff --git a/packages/react-ui/hooks/usePrevious.ts b/packages/react-ui/hooks/usePrevious.ts deleted file mode 100644 index 463c75ec780..00000000000 --- a/packages/react-ui/hooks/usePrevious.ts +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -export const usePrevious = (primitive: string | number | undefined | null | boolean) => { - const prevRef = React.useRef(); - React.useEffect(() => { - prevRef.current = primitive; - }, [primitive]); - return prevRef.current; -}; diff --git a/packages/react-ui/lib/date/InternalDate.ts b/packages/react-ui/lib/date/InternalDate.ts index ac76c38bd40..e5b89562d23 100644 --- a/packages/react-ui/lib/date/InternalDate.ts +++ b/packages/react-ui/lib/date/InternalDate.ts @@ -1,4 +1,4 @@ -import { defaultLangCode, langCodesToCanonicalLocale } from '../locale/constants'; +import { defaultLangCode } from '../locale/constants'; import { defaultDateComponentsOrder, defaultDateComponentsSeparator, emptyDateComponents } from './constants'; import { InternalDateCalculator } from './InternalDateCalculator'; @@ -43,7 +43,6 @@ export class InternalDate { private order: InternalDateOrder; private separator: InternalDateSeparator; private components: InternalDateComponentsRaw = { ...emptyDateComponents }; - private canonicalLocale = 'ru-RU'; private start: InternalDate | null = null; private end: InternalDate | null = null; @@ -51,8 +50,6 @@ export class InternalDate { public constructor({ order, separator, langCode = defaultLangCode, value }: InternalDateConstructorProps = {}) { this.order = order ?? internalDateLocale[langCode].order; this.separator = separator ?? internalDateLocale[langCode].separator; - this.canonicalLocale = langCodesToCanonicalLocale[langCode]; - if (value !== undefined) { this.parseInternalValue(value); } @@ -298,10 +295,6 @@ export class InternalDate { return undefined; } - public toA11YFormat(): string { - return InternalDateTransformer.componentsToA11YFormat(this.components, this.canonicalLocale); - } - public clone(): InternalDate { return new InternalDate({ order: this.order, separator: this.separator }) .setComponents({ ...this.components }) diff --git a/packages/react-ui/lib/date/InternalDateGetter.ts b/packages/react-ui/lib/date/InternalDateGetter.ts index 4a9b4e624f2..62364be86b8 100644 --- a/packages/react-ui/lib/date/InternalDateGetter.ts +++ b/packages/react-ui/lib/date/InternalDateGetter.ts @@ -1,3 +1,5 @@ +import { getMonthInHumanFormat } from '../../components/Calendar/CalendarUtils'; + import { MAX_DATE, MAX_MONTH, MAX_YEAR, MIN_DATE, MIN_MONTH, MIN_YEAR } from './constants'; import { InternalDate } from './InternalDate'; import { @@ -9,7 +11,7 @@ import { const calculateMonth = (month: number) => { if (month <= 7) { - return month + 1; + return getMonthInHumanFormat(month); } return month; diff --git a/packages/react-ui/lib/date/InternalDateTransformer.ts b/packages/react-ui/lib/date/InternalDateTransformer.ts index 06bfe412a2a..4e44fd83341 100644 --- a/packages/react-ui/lib/date/InternalDateTransformer.ts +++ b/packages/react-ui/lib/date/InternalDateTransformer.ts @@ -169,19 +169,4 @@ export class InternalDateTransformer { .map(({ valueWithPad }) => valueWithPad) .join(InternalDateSeparator.Dot); } - - public static componentsToNativeDate(componentsRaw: InternalDateComponentsRaw): Date { - const { year, month, date } = InternalDateTransformer.dateComponentsStringToNumber(componentsRaw); - return new Date(Date.UTC(year, month - 1, date)); - } - - public static componentsToA11YFormat(components: InternalDateComponentsRaw, canonicalLocale: string): string { - const nativeDate = InternalDateTransformer.componentsToNativeDate(components); - return nativeDate.toLocaleDateString(canonicalLocale, { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric', - }); - } } diff --git a/packages/react-ui/lib/date/InternalDateValidator.ts b/packages/react-ui/lib/date/InternalDateValidator.ts index dcecd071423..eea23cff909 100644 --- a/packages/react-ui/lib/date/InternalDateValidator.ts +++ b/packages/react-ui/lib/date/InternalDateValidator.ts @@ -6,7 +6,6 @@ import { InternalDateComponentsRaw, InternalDateComponentType, } from './types'; -import { InternalDateTransformer } from './InternalDateTransformer'; const calculateStartDate = (startDate: number | null) => { if (startDate) { @@ -78,7 +77,7 @@ export class InternalDateValidator { } public static compareWithNativeDate({ year, month, date }: InternalDateComponentsNumber): boolean { - const nativeDate = InternalDateTransformer.componentsToNativeDate({ year, month, date }); + const nativeDate: Date = new Date(Date.UTC(year, month - 1, date)); return ( nativeDate.getUTCFullYear() === year && nativeDate.getUTCMonth() + 1 === month && nativeDate.getUTCDate() === date ); diff --git a/packages/react-ui/lib/locale/constants.ts b/packages/react-ui/lib/locale/constants.ts index bf3cbe11e8c..b3a48fbad00 100644 --- a/packages/react-ui/lib/locale/constants.ts +++ b/packages/react-ui/lib/locale/constants.ts @@ -1,8 +1,3 @@ import { LangCodes } from './types'; export const defaultLangCode: Readonly = LangCodes.ru_RU; - -export const langCodesToCanonicalLocale: { [key in LangCodes]: string } = { - [LangCodes.ru_RU]: 'ru-RU', - [LangCodes.en_GB]: 'en-GB', -};