| commit | author | age | ||
| d76f7b | 1 | 'use strict'; |
| M | 2 | |
| 11612b | 3 | var React = require('react'), |
| cf3d92 | 4 | createClass = require('create-react-class'), |
| 39b827 | 5 | onClickOutside = require('react-onclickoutside').default |
| cf3d92 | 6 | ; |
| d76f7b | 7 | |
| 84755c | 8 | var DateTimePickerYears = onClickOutside( createClass({ |
| d76f7b | 9 | render: function() { |
| bdad6c | 10 | var year = parseInt( this.props.viewDate.year() / 10, 10 ) * 10; |
| d76f7b | 11 | |
| a50b2e | 12 | return React.createElement('div', { className: 'rdtYears' }, [ |
| GL | 13 | React.createElement('table', { key: 'a' }, React.createElement('thead', {}, React.createElement('tr', {}, [ |
| 14 | React.createElement('th', { key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 10, 'years' )}, React.createElement('span', {}, '‹' )), | |
| 15 | React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2 }, year + '-' + ( year + 9 ) ), | |
| 16 | React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 10, 'years' )}, React.createElement('span', {}, '›' )) | |
| cf3d92 | 17 | ]))), |
| a50b2e | 18 | React.createElement('table', { key: 'years' }, React.createElement('tbody', {}, this.renderYears( year ))) |
| d76f7b | 19 | ]); |
| eba92b | 20 | }, |
| M | 21 | |
| 22 | renderYears: function( year ) { | |
| 23 | var years = [], | |
| 24 | i = -1, | |
| 25 | rows = [], | |
| 26 | renderer = this.props.renderYear || this.renderYear, | |
| 62fd2f | 27 | selectedDate = this.props.selectedDate, |
| bdad6c | 28 | isValid = this.props.isValidDate || this.alwaysValidDate, |
| f0ec5a | 29 | classes, props, currentYear, isDisabled, noOfDaysInYear, daysInYear, validDay, |
| bdad6c | 30 | // Month and date are irrelevant here because |
| SE | 31 | // we're only interested in the year |
| 32 | irrelevantMonth = 0, | |
| f0ec5a | 33 | irrelevantDate = 1 |
| cf3d92 | 34 | ; |
| f0ec5a | 35 | |
| SE | 36 | year--; |
| eba92b | 37 | while (i < 11) { |
| e4010d | 38 | classes = 'rdtYear'; |
| b8112d | 39 | currentYear = this.props.viewDate.clone().set( |
| f0ec5a | 40 | { year: year, month: irrelevantMonth, date: irrelevantDate } ); |
| e9db5f | 41 | |
| SE | 42 | // Not sure what 'rdtOld' is for, commenting out for now as it's not working properly |
| 43 | // if ( i === -1 | i === 10 ) | |
| 44 | // classes += ' rdtOld'; | |
| c306f2 | 45 | |
| bdad6c | 46 | noOfDaysInYear = currentYear.endOf( 'year' ).format( 'DDD' ); |
| SE | 47 | daysInYear = Array.from({ length: noOfDaysInYear }, function( e, i ) { |
| 48 | return i + 1; | |
| 49 | }); | |
| 50 | ||
| 51 | validDay = daysInYear.find(function( d ) { | |
| 52 | var day = currentYear.clone().dayOfYear( d ); | |
| 53 | return isValid( day ); | |
| 54 | }); | |
| 55 | ||
| 56 | isDisabled = ( validDay === undefined ); | |
| 57 | ||
| 58 | if ( isDisabled ) | |
| c306f2 | 59 | classes += ' rdtDisabled'; |
| R | 60 | |
| 462115 | 61 | if ( selectedDate && selectedDate.year() === year ) |
| e4010d | 62 | classes += ' rdtActive'; |
| eba92b | 63 | |
| M | 64 | props = { |
| 65 | key: year, | |
| 66 | 'data-value': year, | |
| c306f2 | 67 | className: classes |
| eba92b | 68 | }; |
| c306f2 | 69 | |
| bdad6c | 70 | if ( !isDisabled ) |
| f0ec5a | 71 | props.onClick = ( this.props.updateOn === 'years' ? |
| SE | 72 | this.updateSelectedYear : this.props.setDate('year') ); |
| eba92b | 73 | |
| 62fd2f | 74 | years.push( renderer( props, year, selectedDate && selectedDate.clone() )); |
| eba92b | 75 | |
| f0ec5a | 76 | if ( years.length === 4 ) { |
| a50b2e | 77 | rows.push( React.createElement('tr', { key: i }, years ) ); |
| eba92b | 78 | years = []; |
| M | 79 | } |
| 80 | ||
| 81 | year++; | |
| 82 | i++; | |
| 83 | } | |
| 84 | ||
| 85 | return rows; | |
| 86 | }, | |
| 87 | ||
| f99908 | 88 | updateSelectedYear: function( event ) { |
| 11612b | 89 | this.props.updateSelectedDate( event ); |
| f99908 | 90 | }, |
| SA | 91 | |
| bdad6c | 92 | renderYear: function( props, year ) { |
| a50b2e | 93 | return React.createElement('td', props, year ); |
| c306f2 | 94 | }, |
| R | 95 | |
| bdad6c | 96 | alwaysValidDate: function() { |
| c306f2 | 97 | return 1; |
| 11612b | 98 | }, |
| JM | 99 | |
| cf3d92 | 100 | handleClickOutside: function() { |
| SE | 101 | this.props.handleClickOutside(); |
| 102 | } | |
| 11612b | 103 | })); |
| d76f7b | 104 | |
| M | 105 | module.exports = DateTimePickerYears; |
