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