feat(calendar-range): allow to select one-day range (#491)

core-ds · Feb 1, 2021 · 7fe56eb · 7fe56eb
1 parent bf03c2f
commit 7fe56eb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/packages/calendar-range/src/Component.test.tsx b/packages/calendar-range/src/Component.test.tsx
@@ -216,11 +216,40 @@ describe('CalendarRange', () => {
             expect(days[1]).toHaveClass('range');
         });
 
-        it('should unselected day, clear input and cancel selection if clicked on same day', () => {
+        it('should select new day, fill inputTo and end selection if clicked on same day twice', () => {
             const { container, queryAllByRole } = render(<CalendarRange />);
 
             const days = container.querySelectorAll('*[data-date]');
             const inputFrom = queryAllByRole('textbox')[0] as HTMLInputElement;
+            const inputTo = queryAllByRole('textbox')[1] as HTMLInputElement;
+
+            act(() => {
+                (days[0] as HTMLButtonElement).click();
+            });
+
+            act(() => {
+                (days[0] as HTMLButtonElement).click();
+            });
+
+            expect(days[0]).toHaveAttribute('aria-selected');
+            expect(inputFrom).toHaveValue(formatDate(currentMonth));
+            expect(inputTo).toHaveValue(formatDate(currentMonth));
+
+            fireEvent.mouseEnter(days[1]);
+
+            expect(days[1]).not.toHaveClass('range');
+        });
+
+        it('should unselected day, clear inputs and cancel selection if clicked on same day thrice', () => {
+            const { container, queryAllByRole } = render(<CalendarRange />);
+
+            const days = container.querySelectorAll('*[data-date]');
+            const inputFrom = queryAllByRole('textbox')[0] as HTMLInputElement;
+            const inputTo = queryAllByRole('textbox')[1] as HTMLInputElement;
+
+            act(() => {
+                (days[0] as HTMLButtonElement).click();
+            });
 
             act(() => {
                 (days[0] as HTMLButtonElement).click();
@@ -232,6 +261,7 @@ describe('CalendarRange', () => {
 
             expect(days[0]).not.toHaveAttribute('aria-selected');
             expect(inputFrom).toHaveValue('');
+            expect(inputTo).toHaveValue('');
 
             fireEvent.mouseEnter(days[1]);
 

diff --git a/packages/calendar-range/src/Component.tsx b/packages/calendar-range/src/Component.tsx
@@ -189,7 +189,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
                 return;
             }
 
-            if (date === inputValueFrom.date) {
+            if (date === inputValueFrom.date && date === inputValueTo.date) {
                 resetPeriod();
                 handleStateFromChange(initialValueState);
                 handleStateToChange(initialValueState);
@@ -202,6 +202,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
         },
         [
             inputValueFrom.date,
+            inputValueTo.date,
             handleStateToChange,
             setEnd,
             setStart,

diff --git a/packages/calendar-range/src/index.module.css b/packages/calendar-range/src/index.module.css
@@ -2,6 +2,10 @@
 
 .component {
     display: flex;
+
+    & button[aria-selected='true'] {
+        cursor: pointer;
+    }
 }
 
 .divider {