DatePicker - adding better year selection

src/components/date-picker/calendar.tsx

@@ -1,4 +1,4 @@
-import {computed} from 'mobx';
+import {computed, observable} from 'mobx';
 import {observer} from 'mobx-react';
 import * as React from 'react';
 import {stylable} from 'wix-react-tools';
@@ -29,15 +29,19 @@ export interface CalendarProps {
 }
 
 export interface CalendarState {
-    showMonthView: boolean;
+    view: 'year' | 'month' | 'default';
+    viewDate: Date;
 }
 
 const monthNames = getMonthNames();
 
 @stylable(styles)
 @observer
-export class Calendar extends React.Component<CalendarProps, CalendarState> {
-    public state: CalendarState = {showMonthView: false};
+export class Calendar extends React.Component<CalendarProps> {
+    @observable private calendarState: CalendarState = {
+        view: 'default',
+        viewDate: this.props.value
+    };
 
     public render() {
         return (
@@ -55,7 +59,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
                         <span
                             data-automation-id="CALENDAR_HEADER"
                             className="headerDate"
-                            onMouseDown={this.headerClicked}
+                            onMouseDown={this.onHeaderClick}
                         >
                             {this.getHeader()}
                         </span>
@@ -67,28 +71,24 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
                             <i className="headerArrow headerArrowNext" />
                         </span>
                     </div>
-                    {this.state.showMonthView ?
-                        <div className="month-view" data-automation-id="MONTH_VIEW">
-                            {this.monthArray}
-                        </div>
-                        :
-                        <div className="calendar" data-automation-id="DAY_GRID">
-                            {this.dayNames}
-                            {this.previousDays}
-                            {this.days}
-                            {this.followingDays}
-                        </div>
-                    }
+                    {this.getCalendarView()}
                 </div>
             </div>
         );
     }
 
     private getHeader = () => {
-        if (this.state.showMonthView) {
+        if (this.calendarState.view === 'year') {
+            const decade = `${this.calendarState.viewDate.getFullYear() - 5}`
+               + `-${this.calendarState.viewDate.getFullYear() + 4}`;
             return (
                 <span data-automation-id="HEADER_DATE">
-                    {this.year}
+                    {decade}
+                </span>);
+        } else if (this.calendarState.view === 'month') {
+            return (
+                <span data-automation-id="HEADER_DATE">
+                    {this.calendarState.viewDate.getFullYear()}
                 </span>);
         } else {
             return (
@@ -98,6 +98,31 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
         }
     }
 
+    private getCalendarView = () => {
+        if (this.calendarState.view === 'year') {
+            return (
+                <div className="yearView" data-automation-id="YEAR_VIEW">
+                    {this.yearArray}
+                </div>
+            );
+        } else if (this.calendarState.view === 'month') {
+            return (
+                <div className="monthView" data-automation-id="MONTH_VIEW">
+                    {this.monthArray}
+                </div>
+            );
+        } else {
+            return (
+                <div className="calendar" data-automation-id="DAY_GRID">
+                    {this.dayNames}
+                    {this.previousDays}
+                    {this.days}
+                    {this.followingDays}
+                </div>
+            );
+        }
+    }
+
     @computed
     private get monthName(): string {
         return monthNames[this.props.value.getMonth()];
@@ -201,19 +226,40 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
         monthNames.forEach(month => {
             monthArray.push(
                 <span
-                    className="calendarItem monthName"
+                    className="monthName"
                     onMouseDown={this.onSelectMonth}
                     key={`MONTH_${month.toUpperCase()}`}
                     data-automation-id={`MONTH_${month.toUpperCase()}`}
                 >
                     {month}
                 </span>
-                );
+            );
         });
 
         return monthArray;
     }
 
+    @computed
+    private get yearArray(): JSX.Element[] {
+        const yearArray: JSX.Element[] = [];
+
+        for (let year = this.calendarState.viewDate.getFullYear() - 5;
+            year <= this.calendarState.viewDate.getFullYear() + 4; year ++) {
+            yearArray.push(
+                <span
+                    className="year"
+                    onMouseDown={this.onSelectYear}
+                    key={`YEAR_${year}`}
+                    data-automation-id={`YEAR_${year}`}
+                >
+                    {year}
+                </span>
+            );
+        }
+
+        return yearArray;
+    }
+
     private isCurrentDay(day: number): boolean {
         const currentDate = new Date();
         return (this.props.value.getFullYear() === currentDate.getFullYear()
@@ -240,41 +286,79 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
         }
     }
 
-    private toggleMonthView = () => {
-        this.setState({showMonthView: !this.state.showMonthView});
+    private toggleDateSelectView = () => {
+        if (this.calendarState.view === 'year') {
+            this.calendarState.view = 'default';
+            this.resetViewDate();
+        } else if (this.calendarState.view === 'default') {
+            this.calendarState.view = 'month';
+        } else if (this.calendarState.view === 'month') {
+            this.calendarState.view = 'year';
+        }
     }
 
-    private onSelectMonth: React.EventHandler<React.SyntheticEvent<Element>> = event => {
-        event.preventDefault();
-        this.toggleMonthView();
+    private closeDateSelectView = () => {
+        if (this.calendarState.view === 'year') {
+            this.calendarState.view = 'month';
+        } else if (this.calendarState.view === 'month') {
+            this.calendarState.view = 'default';
+        }
+    }
 
-        const date = new Date(this.props.value.getFullYear(),
+    private resetViewDate = () => {
+        this.calendarState.viewDate = this.props.value;
+    }
+
+    private onSelectMonth: React.EventHandler<React.SyntheticEvent<Element>> = event => {
+        const date = new Date(this.calendarState.viewDate.getFullYear(),
             monthNames.indexOf((event.target as HTMLSpanElement).textContent!),
-            this.props.value.getDate());
+            this.calendarState.viewDate.getDate());
+
+        this.props.updateDropdownDate(date);
+        this.calendarState.viewDate = date;
+        this.closeDateSelectView();
+    }
+
+    private onSelectYear: React.EventHandler<React.SyntheticEvent<Element>> = event => {
+        const date = new Date(parseInt((event.target as HTMLSpanElement).textContent!, 10),
+            this.calendarState.viewDate.getMonth(),
+            this.calendarState.viewDate.getDate());
 
         this.props.updateDropdownDate(date);
+        this.calendarState.viewDate = date;
+        this.closeDateSelectView();
     }
 
     private goToNextMonth: React.EventHandler<React.SyntheticEvent<Element>> = event => {
         event.preventDefault();
-        const nextDate: Date = this.state.showMonthView
-            ? new Date(this.props.value.getFullYear() + 1, this.props.value.getMonth(), 1)
-            : getMonthFromOffset(new Date(this.props.value.getFullYear(), this.props.value.getMonth(), 1), 1);
 
-        this.props.updateDropdownDate(nextDate);
+        if (this.calendarState.view === 'default') {
+            const nextDate: Date = getMonthFromOffset(
+                new Date(this.props.value.getFullYear(), this.props.value.getMonth(), 1), 1);
+            this.props.updateDropdownDate(nextDate);
+        } else {
+            this.calendarState.viewDate = this.calendarState.view === 'year'
+                ? new Date(this.calendarState.viewDate.getFullYear() + 10, this.calendarState.viewDate.getMonth(), 1)
+                : new Date(this.calendarState.viewDate.getFullYear() + 1, this.calendarState.viewDate.getMonth(), 1);
+        }
     }
 
     private goToPrevMonth: React.EventHandler<React.SyntheticEvent<Element>> = event => {
         event.preventDefault();
-        const nextDate: Date = this.state.showMonthView
-            ? new Date(this.props.value.getFullYear() - 1, this.props.value.getMonth(), 1)
-            : getMonthFromOffset(new Date(this.props.value.getFullYear(), this.props.value.getMonth(), 1), -1);
 
-        this.props.updateDropdownDate(nextDate);
+        if (this.calendarState.view === 'default') {
+            const nextDate: Date = getMonthFromOffset(
+                new Date(this.props.value.getFullYear(), this.props.value.getMonth(), 1), -1);
+            this.props.updateDropdownDate(nextDate);
+        } else {
+            this.calendarState.viewDate = this.calendarState.view === 'year'
+                ? new Date(this.calendarState.viewDate.getFullYear() - 10, this.calendarState.viewDate.getMonth(), 1)
+                : new Date(this.calendarState.viewDate.getFullYear() - 1, this.calendarState.viewDate.getMonth(), 1);
+        }
     }
 
-    private headerClicked: React.EventHandler<React.SyntheticEvent<Element>> = event => {
+    private onHeaderClick: React.EventHandler<React.SyntheticEvent<Element>> = event => {
         event.preventDefault();
-        this.toggleMonthView();
+        this.toggleDateSelectView();
     }
 }

src/components/date-picker/date-picker.st.css

@@ -165,6 +165,10 @@
     -st-extends: calendar;
 }
 
+.year-view {
+    -st-extends: calendar;
+}
+
 /* Styling for the days of the week */
 .dayName {
     font-family: value(fontFamily);
@@ -196,6 +200,24 @@
     background-color: value(color_Keyboard_Focused);
 }
 
+.year {
+    /* 100/2 = 50... show 2 years per row */
+    flex: 0 0 50%;
+    line-height: 54px;
+    font-family: value(fontFamily);
+    font-size: 14px;
+    font-weight: bold;
+    text-align: center;
+    color: value(color_MainText);
+    cursor: pointer;
+}
+
+/* Hover styles for year selection */
+.year:hover {
+    color: value(color_MainText);
+    background-color: value(color_Keyboard_Focused);
+}
+
 /* Styling for the days of the month */
 .day {
     -st-states: focused, selected, current, inactive, disabled;

test-kit/components/date-picker-driver.ts

@@ -51,6 +51,10 @@ export class DatePickerTestDriver extends DriverBase {
         simulate.mouseDown(this.getMonth(month));
     }
 
+    public clickOnYear(year: string): void {
+        simulate.mouseDown(this.getYear(year));
+    }
+
     public openCalender(): void {
         simulate.click(this.select('CALENDAR_ICON'));
     }
@@ -87,6 +91,10 @@ export class DatePickerTestDriver extends DriverBase {
         return bodySelect('MONTH_VIEW');
     }
 
+    public get yearView(): HTMLDivElement | null {
+        return bodySelect('YEAR_VIEW');
+    }
+
     public getDay(day: number | string): HTMLSpanElement | null {
         return bodySelect(datePickerDropdown, `DAY_${day}`);
     }
@@ -115,7 +123,11 @@ export class DatePickerTestDriver extends DriverBase {
         return bodySelect(datePickerDropdown, `MONTH_${month.toUpperCase()}`);
     }
 
-    public elementHasStylableState(element: Element, stateName: string): boolean {
+    public getYear(year: string): HTMLSpanElement | null {
+        return bodySelect(datePickerDropdown, `YEAR_${year}`);
+    }
+
+    public hasStylableState(element: Element, stateName: string): boolean {
         return elementHasStylableState(element, baseStyle, stateName);
     }
 }