Added onYearChange prop (Hacker0x01#1075)

* Added onYearChange prop * Additional test * Lint and test fixes
vladferix · Dec 18, 2017 · f8c9868 · f8c9868
1 parent b8ab34c
commit f8c9868
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 2 deletions.
diff --git a/docs/datepicker.md b/docs/datepicker.md
@@ -45,6 +45,7 @@ General datepicker component.
 |`onFocus`|`func`|`function() {}`||
 |`onKeyDown`|`func`|`function() {}`||
 |`onMonthChange`|`func`|`function() {}`||
+|`onYearChange`|`func`|`function() {}`||
 |`onSelect`|`func`|`function() {}`||
 |`onWeekSelect`|`func`|||
 |`openToDate`|`object`|||
@@ -77,4 +78,4 @@ General datepicker component.
 |`value`|`string`|||
 |`weekLabel`|`string`|||
 |`withPortal`|`bool`|`false`||
-|`yearDropdownItemNumber`|`number`|||
+|`yearDropdownItemNumber`|`number`|||
diff --git a/src/calendar.jsx b/src/calendar.jsx
@@ -67,6 +67,7 @@ export default class Calendar extends React.Component {
     monthsShown: PropTypes.number,
     onClickOutside: PropTypes.func.isRequired,
     onMonthChange: PropTypes.func,
+    onYearChange: PropTypes.func,
     forceShowMonthNavigation: PropTypes.bool,
     onDropdownFocus: PropTypes.func,
     onSelect: PropTypes.func.isRequired,
@@ -187,6 +188,12 @@ export default class Calendar extends React.Component {
 
   handleMonthMouseLeave = () => this.setState({ selectingDate: null })
 
+  handleYearChange = (date) => {
+    if (this.props.onYearChange) {
+      this.props.onYearChange(date)
+    }
+  }
+
   handleMonthChange = (date) => {
     if (this.props.onMonthChange) {
       this.props.onMonthChange(date)
@@ -204,7 +211,7 @@ export default class Calendar extends React.Component {
   changeYear = (year) => {
     this.setState({
       date: setYear(cloneDate(this.state.date), year)
-    })
+    }, () => this.handleYearChange(this.state.date))
   }
 
   changeMonth = (month) => {

diff --git a/src/index.jsx b/src/index.jsx
@@ -86,6 +86,7 @@ export default class DatePicker extends React.Component {
     onFocus: PropTypes.func,
     onKeyDown: PropTypes.func,
     onMonthChange: PropTypes.func,
+    onYearChange: PropTypes.func,
     openToDate: PropTypes.object,
     peekNextMonth: PropTypes.bool,
     placeholderText: PropTypes.string,
@@ -138,6 +139,7 @@ export default class DatePicker extends React.Component {
       onSelect () {},
       onClickOutside () {},
       onMonthChange () {},
+      onYearChange () {},
       monthsShown: 1,
       withPortal: false,
       shouldCloseOnSelect: true,
@@ -456,6 +458,7 @@ export default class DatePicker extends React.Component {
       monthsShown={this.props.monthsShown}
       onDropdownFocus={this.handleDropdownFocus}
       onMonthChange={this.props.onMonthChange}
+      onYearChange={this.props.onYearChange}
       dayClassName={this.props.dayClassName}
       showTimeSelect={this.props.showTimeSelect}
       onTimeChange={this.handleTimeChange}

diff --git a/test/calendar_test.js b/test/calendar_test.js
@@ -336,6 +336,32 @@ describe('Calendar', function () {
     })
   })
 
+  describe('onYearChange', () => {
+    let onYearChangeSpy = sinon.spy()
+    let calendar
+
+    beforeEach(() => {
+      onYearChangeSpy = sinon.spy()
+      calendar = mount(
+        <Calendar
+          dateFormat={dateFormat}
+          onSelect={() => {}}
+          onClickOutside={() => {}}
+          hideCalendar={() => {}}
+          dropdownMode="select"
+          showYearDropdown
+          onYearChange={onYearChangeSpy}/>
+      )
+    })
+
+    it('calls onYearChange prop when year changed from year dropdown', () => {
+      const select = calendar.find(YearDropdown).find('select')
+      select.simulate('change')
+
+      assert(onYearChangeSpy.called === true, 'onYearChange should be called')
+    })
+  })
+
   describe('onDropdownFocus', () => {
     let onDropdownFocusSpy = sinon.spy()
     let calendar

diff --git a/test/datepicker_test.js b/test/datepicker_test.js
@@ -133,6 +133,27 @@ describe('DatePicker', () => {
     })
   })
 
+  it('should fire onYearChange when the year is selected', (done) => {
+    const onYearChangeSpy = sinon.spy()
+    const datePicker = mount(
+      <DatePicker
+        showYearDropdown
+        dropdownMode="select"
+        onYearChange={onYearChangeSpy}/>
+    )
+    const dateInputWrapper = datePicker.find('input')
+
+    dateInputWrapper.simulate('click')
+    const calendarWrapper = datePicker.find('Calendar')
+    const yearSelect = calendarWrapper.find('.react-datepicker__year-select')
+    yearSelect.simulate('change')
+
+    defer(() => {
+      assert(onYearChangeSpy.called === true, 'onYearChange should be called')
+      done()
+    })
+  })
+
   it('should keep the calendar shown when clicking the calendar', () => {
     var datePicker = TestUtils.renderIntoDocument(
       <DatePicker />