feat(TDOPS-448/Components): Enhance date picker to reduce clicks need…

…ed (#5157) * feat(TDOPS-448/Components): Enhance date picker to reduce clicks needed * fix tests * fix snapshots * fix tests * i heard you like snapshots so i've put snapshots in your snapshots * well well well
Talend · Feb 2, 2024 · 56d0d0a · 56d0d0a
1 parent dbf6368
commit 56d0d0a
Show file tree

Hide file tree

Showing 13 changed files with 622 additions and 89 deletions.
diff --git a/.changeset/eighty-files-clean.md b/.changeset/eighty-files-clean.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': minor
+---
+
+TDOPS-448 - Enhance date picker controls to reduce number of clicks needed
diff --git a/...mponents/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap b/...mponents/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap
@@ -26,16 +26,146 @@ exports[`DateRange.Picker should render 1`] = `
       <div
         class="theme-element-container theme-middle"
       >
-        <button
-          aria-label="Switch to month-and-year view"
-          class="theme-common theme-button btn-tertiary btn-info btn btn-default"
-          tabindex="-1"
-          type="button"
+        <div
+          class="theme-common"
         >
-          <span>
-            January 2007
-          </span>
-        </button>
+          <div
+            class="theme-month"
+          >
+            <button
+              aria-label="Switch to month view"
+              class="btn-tertiary btn-info btn btn-default"
+              tabindex="-1"
+              type="button"
+            >
+              <span>
+                January
+              </span>
+            </button>
+          </div>
+          <div
+            class="dropdown btn-group btn-group-default"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="2007"
+              class="theme-tc-dropdown-button tc-dropdown-button btn-tertiary btn-info dropdown-toggle btn btn-default"
+              role="button"
+              type="button"
+            >
+              <span
+                class="tc-dropdown-button-title-label"
+              >
+                2007
+              </span>
+              <span
+                class="CoralIcon theme-tc-dropdown-caret"
+                name="talend-caret-down"
+              />
+            </button>
+            <ul
+              class="dropdown-menu"
+              role="menu"
+            >
+              <div
+                class="theme-year-picker"
+              >
+                <button
+                  aria-describedby="42"
+                  aria-label="Go to previous year"
+                  class="theme-scroll theme-scroll-up tc-date-picker-scroll-up btn-icon-only btn btn-link"
+                  role="link"
+                  type="button"
+                >
+                  <span
+                    class="CoralIcon"
+                    name="talend-chevron-left"
+                    transform="rotate-90"
+                  />
+                </button>
+                <ol>
+                  <li>
+                    <button
+                      class="theme-year tc-date-picker-year"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2021
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      class="theme-year tc-date-picker-year"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2022
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      class="theme-year tc-date-picker-year"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2023
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      class="theme-year tc-date-picker-year"
+                      tabindex="0"
+                      type="button"
+                    >
+                      2024
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      class="theme-year tc-date-picker-year"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2025
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      class="theme-year tc-date-picker-year"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2026
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      class="theme-year tc-date-picker-year"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2027
+                    </button>
+                  </li>
+                </ol>
+                <button
+                  aria-describedby="42"
+                  aria-label="Go to next year"
+                  class="theme-scroll theme-scroll-down tc-date-picker-scroll-down btn-icon-only btn btn-link"
+                  role="link"
+                  type="button"
+                >
+                  <span
+                    class="CoralIcon"
+                    name="talend-chevron-left"
+                    transform="rotate-270"
+                  />
+                </button>
+              </div>
+            </ul>
+          </div>
+        </div>
       </div>
       <div
         class="theme-element-container theme-right"

diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.component.js b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.component.js
@@ -103,6 +103,7 @@ class CalendarPicker extends Component {
 
 	onSelectCalendarMonth(event, monthIndex) {
 		this.onSelectCalendarMonthYear({ monthIndex });
+		this.setView(true);
 	}
 
 	onSelectCalendarYear(event, year) {
@@ -111,11 +112,9 @@ class CalendarPicker extends Component {
 
 	onClickToday(event) {
 		const now = new Date();
-		if (!this.state.isDateView) {
-			this.onSelectCalendarYear(event, getYear(now));
-			this.onSelectCalendarMonth(event, getMonth(now));
-			this.setView(true);
-		}
+		this.onSelectCalendarYear(event, getYear(now));
+		this.onSelectCalendarMonth(event, getMonth(now));
+		this.setView(true);
 		this.onSelectDate(event, startOfDay(now));
 	}
 
@@ -146,6 +145,7 @@ class CalendarPicker extends Component {
 					calendar={this.state.calendar}
 					onSelectDate={this.onSelectDate}
 					onSelectMonthYear={this.onSelectCalendarMonthYear}
+					onSelectYear={this.onSelectCalendarYear}
 					onTitleClick={this.setMonthYearView}
 					selectedDate={this.state.selectedDate}
 					startDate={this.props.startDate}

diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.test.js b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.test.js
@@ -169,8 +169,8 @@ describe('CalendarPicker', () => {
 			await user.click(screen.getByText('onSelectMonth'));
 
 			// then
-			const props = JSON.parse(screen.getByTestId('MonthYearView').getAttribute('data-props'));
-			expect(props.selectedMonthIndex).toBe(5);
+			const props = JSON.parse(screen.getByTestId('DateView').getAttribute('data-props'));
+			expect(props.calendar.monthIndex).toBe(5);
 		});
 
 		it('should switch to new year from monthYear picker', async () => {

diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.component.js b/packages/components/src/DateTimePickers/views/DateView/DateView.component.js
@@ -32,6 +32,7 @@ class DateView extends PureComponent {
 		onTitleClick: PropTypes.func.isRequired,
 		onSelectMonthYear: PropTypes.func.isRequired,
 		onSelectDate: PropTypes.func.isRequired,
+		onSelectYear: PropTypes.func.isRequired,
 		selectedDate: PropTypes.instanceOf(Date),
 		startDate: PropTypes.instanceOf(Date),
 		endDate: PropTypes.instanceOf(Date),
@@ -84,11 +85,12 @@ class DateView extends PureComponent {
 					year={this.props.calendar.year}
 					button={{
 						'aria-label': t('DATEPICKER_TO_MONTH_YEAR', {
-							defaultValue: 'Switch to month-and-year view',
+							defaultValue: 'Switch to month view',
 						}),
 						onClick: this.props.onTitleClick,
 						tabIndex: this.props.allowFocus ? 0 : -1,
 					}}
+					onSelectYear={this.props.onSelectYear}
 				/>
 			),
 			rightElement: (

diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.test.js b/packages/components/src/DateTimePickers/views/DateView/DateView.test.js
@@ -51,7 +51,7 @@ describe('DateView', () => {
 		expect(onTitleClick).not.toHaveBeenCalled();
 
 		// when
-		await user.click(screen.getByLabelText('Switch to month-and-year view'));
+		await user.click(screen.getByLabelText('Switch to month view'));
 
 		// then
 		expect(onTitleClick).toHaveBeenCalled();
@@ -71,10 +71,7 @@ describe('DateView', () => {
 				onTitleClick={jest.fn()}
 			/>,
 		);
-		expect(screen.getByLabelText('Switch to month-and-year view')).toHaveAttribute(
-			'tabIndex',
-			'-1',
-		);
+		expect(screen.getByLabelText('Switch to month view')).toHaveAttribute('tabIndex', '-1');
 
 		// when
 		rerender(
@@ -92,7 +89,7 @@ describe('DateView', () => {
 		);
 
 		// then
-		expect(screen.getByLabelText('Switch to month-and-year view')).toHaveAttribute('tabIndex', '0');
+		expect(screen.getByLabelText('Switch to month view')).toHaveAttribute('tabIndex', '0');
 	});
 
 	test.each([