Adding clickable week number feature. (Hacker0x01#936)

* Added optional 'onWeekSelect' prop method that allows for a click action to take place in the week number.

* Improving test expectation.

Author: Giancarlo Mariot

src/calendar.jsx

@@ -44,6 +44,7 @@ export default class Calendar extends React.Component {
     forceShowMonthNavigation: PropTypes.bool,
     onDropdownFocus: PropTypes.func,
     onSelect: PropTypes.func.isRequired,
+    onWeekSelect: PropTypes.func,
     openToDate: PropTypes.object,
     peekNextMonth: PropTypes.bool,
     scrollableYearDropdown: PropTypes.bool,
@@ -282,6 +283,7 @@ export default class Calendar extends React.Component {
                 onDayClick={this.handleDayClick}
                 onDayMouseEnter={this.handleDayMouseEnter}
                 onMouseLeave={this.handleMonthMouseLeave}
+                onWeekSelect={this.props.onWeekSelect}
                 formatWeekNumber={this.props.formatWeekNumber}
                 minDate={this.props.minDate}
                 maxDate={this.props.maxDate}

src/datepicker.jsx

@@ -50,6 +50,7 @@ export default class DatePicker extends React.Component {
     onBlur: PropTypes.func,
     onChange: PropTypes.func.isRequired,
     onSelect: PropTypes.func,
+    onWeekSelect: PropTypes.func,
     onClickOutside: PropTypes.func,
     onChangeRaw: PropTypes.func,
     onFocus: PropTypes.func,
@@ -339,6 +340,7 @@ export default class DatePicker extends React.Component {
         selected={this.props.selected}
         preSelection={this.state.preSelection}
         onSelect={this.handleSelect}
+        onWeekSelect={this.props.onWeekSelect}
         openToDate={this.props.openToDate}
         minDate={this.props.minDate}
         maxDate={this.props.maxDate}

src/month.jsx

@@ -22,6 +22,7 @@ export default class Month extends React.Component {
     onDayClick: PropTypes.func,
     onDayMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
+    onWeekSelect: PropTypes.func,
     peekNextMonth: PropTypes.bool,
     preSelection: PropTypes.object,
     selected: PropTypes.object,
@@ -71,6 +72,7 @@ export default class Month extends React.Component {
           month={this.props.day.month()}
           onDayClick={this.handleDayClick}
           onDayMouseEnter={this.handleDayMouseEnter}
+          onWeekSelect={this.props.onWeekSelect}
           formatWeekNumber={this.props.formatWeekNumber}
           minDate={this.props.minDate}
           maxDate={this.props.maxDate}

src/stylesheets/datepicker.scss

@@ -148,6 +148,13 @@
   line-height: $datepicker__item-size;
   text-align: center;
   margin: $datepicker__day-margin;
+  &.react-datepicker__week-number--clickable {
+    cursor: pointer;
+    &:hover {
+      border-radius: $datepicker__border-radius;
+      background-color: $datepicker__background-color;
+    }
+  }
 }
 
 .react-datepicker__day-name,

src/week.jsx

@@ -19,6 +19,7 @@ export default class Week extends React.Component {
     month: PropTypes.number,
     onDayClick: PropTypes.func,
     onDayMouseEnter: PropTypes.func,
+    onWeekSelect: PropTypes.func,
     preSelection: PropTypes.object,
     selected: PropTypes.object,
     selectingDate: PropTypes.object,
@@ -41,6 +42,12 @@ export default class Week extends React.Component {
     }
   }
 
+  handleWeekClick = (day, weekNumber, event) => {
+    if (typeof this.props.onWeekSelect === 'function') {
+      this.props.onWeekSelect(day, weekNumber, event)
+    }
+  }
+
   formatWeekNumber = (startOfWeek) => {
     if (this.props.formatWeekNumber) {
       return this.props.formatWeekNumber(startOfWeek)
@@ -51,8 +58,12 @@ export default class Week extends React.Component {
   renderDays = () => {
     const startOfWeek = this.props.day.clone().startOf('week')
     const days = []
+    const weekNumber = this.formatWeekNumber(startOfWeek)
     if (this.props.showWeekNumber) {
-      days.push(<WeekNumber key="W" weekNumber={this.formatWeekNumber(startOfWeek)} />)
+      const onClickAction = this.props.onWeekSelect
+          ? this.handleWeekClick.bind(this, startOfWeek, weekNumber)
+          : undefined
+      days.push(<WeekNumber key="W" weekNumber={weekNumber} onClick={onClickAction} />)
     }
     return days.concat([0, 1, 2, 3, 4, 5, 6].map(offset => {
       const day = startOfWeek.clone().add(offset, 'days')

src/week_number.jsx

@@ -1,16 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 export default class WeekNumber extends React.Component {
   static propTypes = {
-    weekNumber: PropTypes.number.isRequired
+    weekNumber: PropTypes.number.isRequired,
+    onClick: PropTypes.func
+  }
+
+  handleClick = (event) => {
+    if (this.props.onClick) {
+      this.props.onClick(event)
+    }
   }
 
   render () {
+    const weekNumberClasses = {
+      'react-datepicker__week-number': true,
+      'react-datepicker__week-number--clickable': !!this.props.onClick
+    }
     return (
       <div
-          className="react-datepicker__week-number"
-          aria-label={`week-${this.props.weekNumber}`}>
+          className={classnames(weekNumberClasses)}
+          aria-label={`week-${this.props.weekNumber}`}
+          onClick={this.handleClick}>
         {this.props.weekNumber}
       </div>
     )

test/week_test.js

@@ -57,6 +57,39 @@ describe('Week', () => {
     assert(day.prop('day').isSame(dayClicked, 'day'))
   })
 
+  it('should call the provided onWeekSelect function and pass the first day of the week', () => {
+    let firstDayReceived = null
+
+    function onWeekClick (newFirstWeekDay) {
+      firstDayReceived = newFirstWeekDay
+    }
+
+    const weekStart = moment('2015-12-20')
+    const week = shallow(
+      <Week day={weekStart} showWeekNumber onWeekSelect={onWeekClick} />
+    )
+    const weekNumberElement = week.find(WeekNumber)
+    weekNumberElement.simulate('click')
+    expect(firstDayReceived.isSame(weekStart)).to.be.true
+  })
+
+  it('should call the provided onWeekSelect function and pass the week number', () => {
+    let weekNumberReceived = null
+
+    function onWeekClick (unused, newWeekNumber) {
+      weekNumberReceived = newWeekNumber
+    }
+
+    const weekStart = moment('2015-12-20')
+    const realWeekNumber = parseInt(weekStart.format('w'), 10)
+    const week = shallow(
+      <Week day={weekStart} showWeekNumber onWeekSelect={onWeekClick} />
+    )
+    const weekNumberElement = week.find(WeekNumber)
+    weekNumberElement.simulate('click')
+    expect(weekNumberReceived).to.equal(realWeekNumber)
+  })
+
   it('should set the week number with the provided formatWeekNumber function', () => {
     let firstDayReceived = null