From 6657752455bf51ddf818a181f94a660584b82de9 Mon Sep 17 00:00:00 2001 From: lisa Date: Tue, 26 Nov 2024 16:52:05 +0100 Subject: [PATCH] fix: hide on click --- .../__snapshots__/index.test.tsx.snap | 1101 +---------------- .../ui/src/components/DateInput/Context.tsx | 2 + .../__snapshots__/index.test.tsx.snap | 146 ++- .../DateInput/__tests__/index.test.tsx | 94 +- .../DateInput/components/CalendarDaily.tsx | 3 + .../DateInput/components/CalendarMonthly.tsx | 3 + .../ui/src/components/DateInput/index.tsx | 2 + 7 files changed, 209 insertions(+), 1142 deletions(-) diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap index 3958ce6d31..d6907c0a74 100644 --- a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap @@ -226,45 +226,6 @@ exports[`DateField > should render correctly 1`] = ` fill-rule="evenodd" /> - class="react-datepicker__input-container" - > -
-
-
- -
- - - - -
@@ -503,46 +464,6 @@ exports[`DateField > should render correctly disabled 1`] = ` fill-rule="evenodd" /> - class="react-datepicker__input-container" - > -
-
-
- -
- - - - -
@@ -556,25 +477,7 @@ exports[`DateField > should render correctly disabled 1`] = ` exports[`DateField > should trigger events 1`] = ` - @keyframes animation-0 { - 0% { - opacity: 0; - -webkit-transform: translate3d(0px, 4px, 0); - -moz-transform: translate3d(0px, 4px, 0); - -ms-transform: translate3d(0px, 4px, 0); - transform: translate3d(0px, 4px, 0); - } - - 100% { - opacity: 1; - -webkit-transform: translate3d(0px, 4px, 0); - -moz-transform: translate3d(0px, 4px, 0); - -ms-transform: translate3d(0px, 4px, 0); - transform: translate3d(0px, 4px, 0); - } -} - -.emotion-0 { + .emotion-0 { width: 100%; } @@ -746,354 +649,6 @@ exports[`DateField > should trigger events 1`] = ` fill: none; } -.emotion-15 { - background: #151a2d; - color: #ffffff; - border-radius: 0.25rem; - padding: 0.25rem 0.5rem; - text-align: center; - position: absolute; - max-width: 16.5rem; - overflow-wrap: break-word; - font-size: 0.8rem; - inset: 0 auto auto 0; - top: 0; - left: 0; - opacity: 0; - z-index: 1; - -webkit-transform: translate3d(0px, 4px, 0); - -moz-transform: translate3d(0px, 4px, 0); - -ms-transform: translate3d(0px, 4px, 0); - transform: translate3d(0px, 4px, 0); - width: 100%; - background-color: #ffffff; - color: #3f4250; - box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d; - padding: 1rem; - border-radius: 0.25rem; -} - -.emotion-15[data-animated="true"] { - -webkit-animation: 0ms animation-0 forwards; - animation: 0ms animation-0 forwards; -} - -.emotion-15[data-has-arrow="true"]::after { - content: " "; - position: absolute; - top: -5px; - left: 0px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); - margin-left: -8px; - border-width: 8px; - border-style: solid; - border-color: #151a2d transparent transparent transparent; - pointer-events: none; -} - -.emotion-15[data-visible-in-dom="false"] { - display: none; -} - -.emotion-17 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 1rem; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; - -webkit-box-pack: normal; - -ms-flex-pack: normal; - -webkit-justify-content: normal; - justify-content: normal; - -webkit-box-flex-wrap: nowrap; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} - -.emotion-19 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-box-flex-wrap: nowrap; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - width: 100%; -} - -.emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: 1.5rem; - padding: 0 0.25rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.25rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: 1.5rem; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-21:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-21:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-21:hover, -.emotion-21:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-23 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-23 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-26 { - color: #3f4250; - font-size: 1rem; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - text-transform: none; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-block; - text-transform: lowercase; -} - -.emotion-26::first-letter { - text-transform: uppercase; -} - -.emotion-32 { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 0.5rem; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; - -webkit-box-pack: normal; - -ms-flex-pack: normal; - -webkit-justify-content: normal; - justify-content: normal; -} - -.emotion-56 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: 3rem; - padding: 0 1rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 1rem; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; - height: 1.5625rem; - width: 100%; - padding: 0; -} - -.emotion-56:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-56:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-56:hover, -.emotion-56:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-58 { - color: #b5b7bd; - font-size: 1rem; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - text-transform: none; - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-73 { - color: #727683; - font-size: 1rem; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - text-transform: none; - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-141 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: 3rem; - padding: 0 1rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 1rem; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - paragraph-spacing: 0; - text-case: none; - background: #8c40ef; - border: none; - color: #ffffff; - height: 1.5625rem; - width: 100%; - padding: 0; -} - -.emotion-141:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-141:active { - box-shadow: 0px 0px 0px 3px #8c40ef40; -} - -.emotion-141:hover, -.emotion-141:active { - background: #792dd4; - color: #f9f9fa; -} - -.emotion-143 { - color: #ffffff; - font-size: 1rem; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - text-transform: none; - -webkit-text-decoration: none; - text-decoration: none; -} -
@@ -1151,660 +706,6 @@ exports[`DateField > should trigger events 1`] = `
- - class="react-datepicker__input-container" - > -
-
-
- -
- - - - -
-
-
-
- diff --git a/packages/ui/src/components/DateInput/Context.tsx b/packages/ui/src/components/DateInput/Context.tsx index 1d29525904..bb8cc537f1 100644 --- a/packages/ui/src/components/DateInput/Context.tsx +++ b/packages/ui/src/components/DateInput/Context.tsx @@ -14,6 +14,7 @@ export type ContextProps = { yearToShow: number excludeDates?: Date[] setMonthToShow: Dispatch> + setVisible: Dispatch> setYearToShow: Dispatch> minDate?: Date | null maxDate?: Date | null @@ -68,4 +69,5 @@ export const DateInputContext = createContext({ DAYS: {}, MONTHS_ARR: [], selectsRange: false, + setVisible: () => null, }) diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap index f65c10b736..1529ab5b3b 100644 --- a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap @@ -450,6 +450,24 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = ` justify-content: normal; } +.emotion-41 { + color: #3f4250; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 500; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-block; + text-transform: lowercase; +} + +.emotion-41::first-letter { + text-transform: uppercase; +} + .emotion-62 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -773,37 +791,37 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = ` class="emotion-38 emotion-39" >

Mo

Tu

We

Th

Fr

Sa

Su

@@ -3484,8 +3502,8 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon class="emotion-0 emotion-1" >
@@ -3500,7 +3518,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon > @@ -3519,7 +3537,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon autocomplete="false" class="emotion-14 emotion-15" data-size="large" - id=":r10a:" + id=":r194:" placeholder="YYYY-MM-DD" type="text" value="02/1995" @@ -3548,7 +3566,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon class="emotion-20 emotion-21 emotion-22" data-animated="false" data-has-arrow="false" - id=":r109:" + id=":r193:" role="dialog" style="opacity: 1;" > @@ -3995,8 +4013,8 @@ exports[`DateInput > renders correctly custom format with range 1`] = ` class="emotion-0 emotion-1" >
@@ -4011,7 +4029,7 @@ exports[`DateInput > renders correctly custom format with range 1`] = ` > @@ -4030,7 +4048,7 @@ exports[`DateInput > renders correctly custom format with range 1`] = ` autocomplete="false" class="emotion-14 emotion-15" data-size="large" - id=":r13p:" + id=":r1cj:" name="test" type="text" value="1995-12-11T03:24:00.000Z - 1995-12-11T03:24:00.000Z" @@ -6591,6 +6609,24 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` justify-content: normal; } +.emotion-41 { + color: #3f4250; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 500; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-block; + text-transform: lowercase; +} + +.emotion-41::first-letter { + text-transform: uppercase; +} + .emotion-62 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -6796,37 +6832,37 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-38 emotion-39" >

lu

ma

mi

ju

vi

sá

do

@@ -7804,6 +7840,24 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` justify-content: normal; } +.emotion-41 { + color: #3f4250; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 500; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-block; + text-transform: lowercase; +} + +.emotion-41::first-letter { + text-transform: uppercase; +} + .emotion-62 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -8009,37 +8063,37 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-38 emotion-39" >

lu

ma

me

je

ve

sa

di

@@ -9017,6 +9071,24 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` justify-content: normal; } +.emotion-41 { + color: #3f4250; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 500; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-block; + text-transform: lowercase; +} + +.emotion-41::first-letter { + text-transform: uppercase; +} + .emotion-62 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -9222,37 +9294,37 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-38 emotion-39" >

по

вт

ср

че

пя

су

во

diff --git a/packages/ui/src/components/DateInput/__tests__/index.test.tsx b/packages/ui/src/components/DateInput/__tests__/index.test.tsx index f8d3809838..ca195f9aca 100644 --- a/packages/ui/src/components/DateInput/__tests__/index.test.tsx +++ b/packages/ui/src/components/DateInput/__tests__/index.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event' import { renderWithTheme } from '@utils/test' import { es, fr, ru } from 'date-fns/locale' import tk from 'timekeeper' -import { describe, expect, test } from 'vitest' +import { describe, expect, test, vi } from 'vitest' import { DateInput } from '..' tk.freeze(new Date(1609503120000)) @@ -242,20 +242,27 @@ describe('DateInput', () => { const input = screen.getByPlaceholderText('YYYY-MM-DD') await userEvent.click(input) - const visibleMonth = screen.getByText(/December/i) + const calendar = screen.getByRole('dialog') expect(calendar).toBeVisible() + await userEvent.click(input) + await userEvent.click(screen.getByText('15')) expect(input.value).toBe('12/15/1995') - const dayFromLastMonth = screen.getAllByText('30')[0] // the first element in this array is necessarily from previous month + await userEvent.click(input) + + const dayFromLastMonth = screen.getAllByText('30')[0] // the first element in this array is from previous month await userEvent.click(dayFromLastMonth) - expect(visibleMonth.textContent).toContain('November') + await userEvent.click(input) + expect(input.value).toBe('11/30/1995') + + await userEvent.click(input) const dayFromNextMonth = screen.getAllByText('1')[1] await userEvent.click(dayFromNextMonth) - expect(visibleMonth.textContent).toContain('December') + expect(input.value).toBe('12/01/1995') }) test('handle correctly click on date range', async () => { @@ -284,6 +291,7 @@ describe('DateInput', () => { await userEvent.click(day) expect(input.value).toBe('02/15/1995 - 02/27/1995') + await userEvent.click(input) await userEvent.click(screen.getByText('31')) expect(input.value).toBe('01/31/1995 - ') }) @@ -372,4 +380,80 @@ describe('DateInput', () => { ) expect(asFragment()).toMatchSnapshot() }) + + test('handle correctly type in input', async () => { + const mockOnChange = vi.fn() + renderWithTheme( + , + ) + + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + + await userEvent.type(input, '08/21/1995') + expect(mockOnChange).toBeCalled() + expect(screen.getByText('August', { exact: false })).toBeInTheDocument() + }) + + test('handle correctly type in input with select range', async () => { + const mockOnChange = vi.fn() + renderWithTheme( + , + ) + + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + + await userEvent.type(input, '08/21/1995') + expect(mockOnChange).toBeCalled() + expect(screen.getByText('August', { exact: false })).toBeInTheDocument() + }) + + test('handle correctly type in input with showMonthYearPicker', async () => { + const mockOnChange = vi.fn() + renderWithTheme( + , + ) + + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + + await userEvent.type(input, '2000/08') + expect(mockOnChange).toBeCalled() + expect(screen.getByText('2000', { exact: false })).toBeInTheDocument() + }) + + test('handle correctly type in input with select range and showMonthYearPicker', async () => { + const mockOnChange = vi.fn() + renderWithTheme( + , + ) + + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + + await userEvent.type(input, '2000/08') + expect(mockOnChange).toBeCalled() + expect(screen.getByText('2000', { exact: false })).toBeInTheDocument() + }) }) diff --git a/packages/ui/src/components/DateInput/components/CalendarDaily.tsx b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx index 2781485d49..84334c5c46 100644 --- a/packages/ui/src/components/DateInput/components/CalendarDaily.tsx +++ b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx @@ -54,6 +54,7 @@ export const Daily = ({ disabled }: { disabled: boolean }) => { setRange, setInputValue, format, + setVisible, } = useContext(DateInputContext) const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>( @@ -205,6 +206,7 @@ export const Daily = ({ disabled }: { disabled: boolean }) => { format, ), ) + setVisible(false) setRangeState('done') } else { // End date before start @@ -250,6 +252,7 @@ export const Daily = ({ disabled }: { disabled: boolean }) => { setInputValue( formatValue(newDate, null, false, false, format), ) + setVisible(false) } } }} diff --git a/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx index 329f864298..ba7540f455 100644 --- a/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx +++ b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx @@ -45,6 +45,7 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => { value, setInputValue, format, + setVisible, } = useContext(DateInputContext) const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>( range?.start ? 'start' : 'none', @@ -117,6 +118,7 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => { format, ), ) + setVisible(false) setRangeState('done') } else { // End date before start @@ -153,6 +155,7 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => { setInputValue( formatValue(constructedDate, null, true, false, format), ) + setVisible(false) } } }} diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx index da99d91331..5363992076 100644 --- a/packages/ui/src/components/DateInput/index.tsx +++ b/packages/ui/src/components/DateInput/index.tsx @@ -149,6 +149,7 @@ export const DateInput = ({ selectsRange, format, setInputValue, + setVisible, }) as ContextProps, [ showMonthYearPicker, @@ -167,6 +168,7 @@ export const DateInput = ({ onChange, format, setInputValue, + setVisible, ], )