Add Year Picker variation (#2130)

* add year picker variation * removed rollup watch * add tests * add tests
Hacker0x01 · May 6, 2020 · 5f046b5 · 5f046b5
1 parent c4bdd55
commit 5f046b5
Show file tree

Hide file tree

Showing 13 changed files with 2,120 additions and 1,842 deletions.
diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js
@@ -63,6 +63,7 @@ import RenderCustomDay from "../../examples/renderCustomDay";
 import TimeInput from "../../examples/timeInput";
 import StrictParsing from "../../examples/strictParsing";
 import MonthPicker from "../../examples/monthPicker";
+import YearPicker from "../../examples/yearPicker";
 import monthPickerFullName from "../../examples/monthPickerFullName";
 import RangeMonthPicker from "../../examples/rangeMonthPicker";
 import QuarterPicker from "../../examples/quarterPicker";
@@ -320,6 +321,10 @@ export default class exampleComponents extends React.Component {
       title: "Month Picker",
       component: MonthPicker
     },
+    {
+      title: "Year Picker",
+      component: YearPicker
+    },
     {
       title: "Month Picker with Full Name",
       component: monthPickerFullName

diff --git a/docs-site/src/examples/yearPicker.js b/docs-site/src/examples/yearPicker.js
@@ -0,0 +1,11 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={date => setStartDate(date)}
+      showYearPicker
+      dateFormat="yyyy"
+    />
+  );
+};
diff --git a/package.json b/package.json
@@ -131,7 +131,8 @@
     "css:modules:prod": "node-sass --output-style compressed src/stylesheets/datepicker-cssmodules.scss > dist/react-datepicker-cssmodules.min.css",
     "css:dev": "node-sass --output-style expanded src/stylesheets/datepicker.scss > dist/react-datepicker.css",
     "css:modules:dev": "node-sass --output-style expanded src/stylesheets/datepicker-cssmodules.scss > dist/react-datepicker-cssmodules.css",
-    "build:js": "rollup -c"
+    "build:js": "rollup -c",
+    "js:dev": "rollup -cw"
   },
   "lint-staged": {
     "*.{js,jsx,json,css,scss,md}": [

diff --git a/src/calendar.jsx b/src/calendar.jsx
@@ -3,6 +3,7 @@ import MonthDropdown from "./month_dropdown";
 import MonthYearDropdown from "./month_year_dropdown";
 import Month from "./month";
 import Time from "./time";
+import Year from "./year";
 import InputTime from "./inputTime";
 import React from "react";
 import PropTypes from "prop-types";
@@ -112,6 +113,7 @@ export default class Calendar extends React.Component {
     showTimeInput: PropTypes.bool,
     showMonthYearPicker: PropTypes.bool,
     showFullMonthYearPicker: PropTypes.bool,
+    showYearPicker: PropTypes.bool,
     showQuarterYearPicker: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
     timeFormat: PropTypes.string,
@@ -375,7 +377,7 @@ export default class Calendar extends React.Component {
   decreaseYear = () => {
     this.setState(
       ({ date }) => ({
-        date: subYears(date, 1)
+        date: subYears(date, this.props.showYearPicker ? 11 : 1)
       }),
       () => this.handleYearChange(this.state.date)
     );
@@ -406,7 +408,11 @@ export default class Calendar extends React.Component {
 
     let clickHandler = this.decreaseMonth;
 
-    if (this.props.showMonthYearPicker || this.props.showQuarterYearPicker) {
+    if (
+      this.props.showMonthYearPicker ||
+      this.props.showQuarterYearPicker ||
+      this.props.showYearPicker
+    ) {
       clickHandler = this.decreaseYear;
     }
 
@@ -440,7 +446,7 @@ export default class Calendar extends React.Component {
   increaseYear = () => {
     this.setState(
       ({ date }) => ({
-        date: addYears(date, 1)
+        date: addYears(date, this.props.showYearPicker ? 11 : 1)
       }),
       () => this.handleYearChange(this.state.date)
     );
@@ -477,7 +483,11 @@ export default class Calendar extends React.Component {
 
     let clickHandler = this.increaseMonth;
 
-    if (this.props.showMonthYearPicker || this.props.showQuarterYearPicker) {
+    if (
+      this.props.showMonthYearPicker ||
+      this.props.showQuarterYearPicker ||
+      this.props.showYearPicker
+    ) {
       clickHandler = this.increaseYear;
     }
 
@@ -665,7 +675,9 @@ export default class Calendar extends React.Component {
   renderYearHeader = () => {
     return (
       <div className="react-datepicker__header react-datepicker-year-header">
-        {getYear(this.state.date)}
+        {this.props.showYearPicker
+          ? `${getYear(this.state.date) - 11} - ${getYear(this.state.date)}`
+          : getYear(this.state.date)}
       </div>
     );
   };
@@ -674,15 +686,17 @@ export default class Calendar extends React.Component {
     switch (true) {
       case this.props.renderCustomHeader !== undefined:
         return this.renderCustomHeader(headerArgs);
-      case this.props.showMonthYearPicker || this.props.showQuarterYearPicker:
+      case this.props.showMonthYearPicker ||
+        this.props.showQuarterYearPicker ||
+        this.props.showYearPicker:
         return this.renderYearHeader(headerArgs);
       default:
         return this.renderDefaultHeader(headerArgs);
     }
   };
 
   renderMonths = () => {
-    if (this.props.showTimeSelectOnly) {
+    if (this.props.showTimeSelectOnly || this.props.showYearPicker) {
       return;
     }
 
@@ -743,6 +757,7 @@ export default class Calendar extends React.Component {
             disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
             showMonthYearPicker={this.props.showMonthYearPicker}
             showFullMonthYearPicker={this.props.showFullMonthYearPicker}
+            showYearPicker={this.props.showYearPicker}
             showQuarterYearPicker={this.props.showQuarterYearPicker}
             isInputFocused={this.props.isInputFocused}
             containerRef={this.containerRef}
@@ -753,6 +768,20 @@ export default class Calendar extends React.Component {
     return monthList;
   };
 
+  renderYears = () => {
+    if (this.props.showTimeSelectOnly) {
+      return;
+    }
+    if (this.props.showYearPicker) {
+      return (
+        <div className="react-datepicker__year">
+          {this.renderHeader()}
+          <Year onDayClick={this.handleDayClick} date={this.state.date} />
+        </div>
+      );
+    }
+  };
+
   renderTimeSection = () => {
     if (
       this.props.showTimeSelect &&
@@ -814,6 +843,7 @@ export default class Calendar extends React.Component {
           {this.renderPreviousButton()}
           {this.renderNextButton()}
           {this.renderMonths()}
+          {this.renderYears()}
           {this.renderTodayButton()}
           {this.renderTimeSection()}
           {this.renderInputTimeSection()}

diff --git a/src/date_utils.js b/src/date_utils.js
@@ -192,7 +192,9 @@ export {
 };
 
 export function getWeek(date, locale) {
-  let localeObj = (locale && getLocaleObject(locale)) || (getDefaultLocale() && getLocaleObject(getDefaultLocale()));
+  let localeObj =
+    (locale && getLocaleObject(locale)) ||
+    (getDefaultLocale() && getLocaleObject(getDefaultLocale()));
   return dfgetWeek(date, localeObj ? { locale: localeObj } : null);
 }
 
@@ -217,6 +219,10 @@ export function getStartOfMonth(date) {
   return startOfMonth(date);
 }
 
+export function getStartOfYear(date) {
+  return startOfYear(date);
+}
+
 export function getStartOfQuarter(date) {
   return startOfQuarter(date);
 }

diff --git a/src/index.jsx b/src/index.jsx
@@ -90,6 +90,7 @@ export default class DatePicker extends React.Component {
       showPreviousMonths: false,
       showMonthYearPicker: false,
       showFullMonthYearPicker: false,
+      showYearPicker: false,
       showQuarterYearPicker: false,
       strictParsing: false,
       timeIntervals: 30,
@@ -211,6 +212,7 @@ export default class DatePicker extends React.Component {
     showTimeInput: PropTypes.bool,
     showMonthYearPicker: PropTypes.bool,
     showFullMonthYearPicker: PropTypes.bool,
+    showYearPicker: PropTypes.bool,
     showQuarterYearPicker: PropTypes.bool,
     showTimeSelect: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
@@ -804,6 +806,7 @@ export default class DatePicker extends React.Component {
         showTimeInput={this.props.showTimeInput}
         showMonthYearPicker={this.props.showMonthYearPicker}
         showFullMonthYearPicker={this.props.showFullMonthYearPicker}
+        showYearPicker={this.props.showYearPicker}
         showQuarterYearPicker={this.props.showQuarterYearPicker}
         showPopperArrow={this.props.showPopperArrow}
         excludeScrollbar={this.props.excludeScrollbar}

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -51,7 +51,7 @@
       @extend %triangle-arrow-up;
     }
   }
-  
+
   &[data-placement="bottom-end"],
   &[data-placement="top-end"] {
     .react-datepicker__triangle {
@@ -208,6 +208,22 @@
   float: left;
 }
 
+.react-datepicker__year {
+  &-container {
+    margin: $datepicker__margin;
+    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    &-text {
+      display: inline-block;
+      cursor: pointer;
+      flex: 1 0 30%;
+      width: 12px;
+      padding: 2px;
+    }
+  }
+}
+
 .react-datepicker__month {
   margin: $datepicker__margin;
   text-align: center;

diff --git a/src/year.jsx b/src/year.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { getYear } from "./date_utils";
+import * as utils from "./date_utils";
+
+export default class Year extends React.Component {
+  static propTypes = {
+    date: PropTypes.string,
+    onDayClick: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  handleYearClick = (day, event) => {
+    if (this.props.onDayClick) {
+      this.props.onDayClick(day, event);
+    }
+  };
+
+  onYearClick = (e, y) => {
+    this.handleYearClick(
+      utils.getStartOfYear(utils.setYear(this.props.date, y)),
+      e
+    );
+  };
+
+  render() {
+    const yearsToShow = 11;
+    const yearsList = [];
+    const { date } = this.props;
+    for (
+      let y = getYear(date) - yearsToShow, i = 0;
+      y <= getYear(date);
+      y++, i++
+    ) {
+      yearsList.push(
+        <div
+          onClick={ev => {
+            this.onYearClick(ev, y);
+          }}
+          className="react-datepicker__year-container-text"
+          key={y}
+        >
+          {y}
+        </div>
+      );
+    }
+    return <div className="react-datepicker__year-container">{yearsList}</div>;
+  }
+}
diff --git a/test/calendar_test.js b/test/calendar_test.js
@@ -1064,6 +1064,53 @@ describe("Calendar", function() {
     });
   });
 
+  describe("renderYearPicker", function() {
+    it("should render YearPicker component", function() {
+      let calendar = mount(
+        <Calendar
+          dateFormat={dateFormat}
+          onSelect={() => {}}
+          onClickOutside={() => {}}
+          hideCalendar={() => {}}
+          dropdownMode="select"
+          showYearPicker
+        />
+      );
+      const timeInputClassname = calendar.find(".react-datepicker__year");
+      expect(timeInputClassname).to.have.length(1);
+    });
+
+    it("calls increaseYear when next year button clicked", () => {
+      var calendar = TestUtils.renderIntoDocument(
+        <Calendar
+          dateFormat={DATE_FORMAT}
+          onSelect={() => {}}
+          onClickOutside={() => {}}
+          showYearPicker
+        />
+      );
+      calendar.state.date = utils.parseDate("09/28/1993", DATE_FORMAT);
+      var increaseYear = calendar.increaseYear;
+      increaseYear();
+      assert.equal(utils.getYear(calendar.state.date), 2004);
+    });
+
+    it("calls decreaseYear when previous year button clicked", () => {
+      var calendar = TestUtils.renderIntoDocument(
+        <Calendar
+          dateFormat={DATE_FORMAT}
+          onSelect={() => {}}
+          onClickOutside={() => {}}
+          showYearPicker
+        />
+      );
+      calendar.state.date = utils.parseDate("09/28/1993", DATE_FORMAT);
+      var decreaseYear = calendar.decreaseYear;
+      decreaseYear();
+      assert.equal(utils.getYear(calendar.state.date), 1982);
+    });
+  });
+
   describe("when showMonthYearPicker is enabled", () => {
     let calendar = mount(
       <Calendar

diff --git a/test/date_utils_test.js b/test/date_utils_test.js
@@ -22,7 +22,8 @@ import {
   isDayInRange,
   parseDate,
   isMonthinRange,
-  isQuarterInRange
+  isQuarterInRange,
+  getStartOfYear
 } from "../src/date_utils";
 import setMinutes from "date-fns/setMinutes";
 import setHours from "date-fns/setHours";
@@ -690,6 +691,14 @@ describe("date_utils", function() {
     });
   });
 
+  describe("getStartOfYear", () => {
+    it("should return the start of the year", () => {
+      const day = new Date("2020-04-13T00:00:00.000+08:00");
+      expect(getStartOfYear(day).getDate()).to.be.eq(1);
+      expect(getStartOfYear(day).getMonth()).to.be.eq(0);
+    });
+  });
+
   describe("isQuarterInRange", () => {
     it("should return true if the quarter passed is in range", () => {
       const day = newDate("2015-02-01");

diff --git a/test/time_input_test.js b/test/time_input_test.js
@@ -4,7 +4,7 @@ import DatePicker from "../src/index.jsx";
 import InputTimeComponent from "../src/inputTime";
 import PropTypes from "prop-types";
 
-describe("DatePicker", () => {
+describe("timeInput", () => {
   let sandbox;
 
   beforeEach(() => {