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