| | |
| | | /* eslint-disable */ |
| | | 'use strict'; |
| | | |
| | | var React = require('react'); |
| | | var React = require('react'), |
| | | createClass = require('create-react-class'), |
| | | onClickOutside = require('react-onclickoutside').default |
| | | ; |
| | | |
| | | var DOM = React.DOM; |
| | | var DateTimePickerYears = React.createClass({ |
| | | var DateTimePickerYears = onClickOutside( createClass({ |
| | | render: function() { |
| | | var year = parseInt(this.props.viewDate.year() / 10, 10) * 10; |
| | | var year = parseInt( this.props.viewDate.year() / 10, 10 ) * 10; |
| | | |
| | | return DOM.div({ className: 'rdtYears' },[ |
| | | DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[ |
| | | DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(10, 'years'), type: 'button' }, '‹')), |
| | | DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, year + '-' + (year + 9) ), |
| | | DOM.th({ key: 'next', className: 'next'}, DOM.button({onClick: this.props.addTime(10, 'years'), type: 'button' }, '›')) |
| | | ]))), |
| | | DOM.table({ key: 'years'}, DOM.tbody({}, this.renderYears( year ))) |
| | | return React.createElement('div', { className: 'rdtYears' }, [ |
| | | React.createElement('table', { key: 'a' }, React.createElement('thead', {}, React.createElement('tr', {}, [ |
| | | React.createElement('th', { key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 10, 'years' )}, React.createElement('span', {}, '‹' )), |
| | | React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colspan: 2 }, year + '-' + ( year + 9 ) ), |
| | | React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 10, 'years' )}, React.createElement('span', {}, '›' )) |
| | | ]))), |
| | | React.createElement('table', { key: 'years' }, React.createElement('tbody', {}, this.renderYears( year ))) |
| | | ]); |
| | | }, |
| | | |
| | |
| | | rows = [], |
| | | renderer = this.props.renderYear || this.renderYear, |
| | | selectedDate = this.props.selectedDate, |
| | | classes, props |
| | | ; |
| | | isValid = this.props.isValidDate || this.alwaysValidDate, |
| | | classes, props, currentYear, isDisabled, noOfDaysInYear, daysInYear, validDay, |
| | | // Month and date are irrelevant here because |
| | | // we're only interested in the year |
| | | irrelevantMonth = 0, |
| | | irrelevantDate = 1 |
| | | ; |
| | | |
| | | year--; |
| | | while (i < 11) { |
| | | classes = 'year'; |
| | | if( i === -1 | i === 10 ) |
| | | classes += ' old'; |
| | | if( selectedDate && selectedDate.year() === year ) |
| | | classes += ' active'; |
| | | classes = 'rdtYear'; |
| | | currentYear = this.props.viewDate.clone().set( |
| | | { year: year, month: irrelevantMonth, date: irrelevantDate } ); |
| | | |
| | | // Not sure what 'rdtOld' is for, commenting out for now as it's not working properly |
| | | // if ( i === -1 | i === 10 ) |
| | | // classes += ' rdtOld'; |
| | | |
| | | noOfDaysInYear = currentYear.endOf( 'year' ).format( 'DDD' ); |
| | | daysInYear = Array.from({ length: noOfDaysInYear }, function( e, i ) { |
| | | return i + 1; |
| | | }); |
| | | |
| | | validDay = daysInYear.find(function( d ) { |
| | | var day = currentYear.clone().dayOfYear( d ); |
| | | return isValid( day ); |
| | | }); |
| | | |
| | | isDisabled = ( validDay === undefined ); |
| | | |
| | | if ( isDisabled ) |
| | | classes += ' rdtDisabled'; |
| | | |
| | | if ( selectedDate && selectedDate.year() === year ) |
| | | classes += ' rdtActive'; |
| | | |
| | | props = { |
| | | key: year, |
| | | 'data-value': year, |
| | | className: classes, |
| | | onClick: this.props.setDate('year') |
| | | className: classes |
| | | }; |
| | | |
| | | if ( !isDisabled ) |
| | | props.onClick = ( this.props.updateOn === 'years' ? |
| | | this.updateSelectedYear : this.props.setDate('year') ); |
| | | |
| | | years.push( renderer( props, year, selectedDate && selectedDate.clone() )); |
| | | |
| | | if( years.length == 4 ){ |
| | | rows.push( DOM.tr({ key: i }, years ) ); |
| | | if ( years.length === 4 ) { |
| | | rows.push( React.createElement('tr', { key: i }, years ) ); |
| | | years = []; |
| | | } |
| | | |
| | |
| | | return rows; |
| | | }, |
| | | |
| | | renderYear: function( props, year, selectedDate ){ |
| | | return DOM.td( props, year ); |
| | | updateSelectedYear: function( event ) { |
| | | this.props.updateSelectedDate( event ); |
| | | }, |
| | | |
| | | renderYear: function( props, year ) { |
| | | return React.createElement('td', props, year ); |
| | | }, |
| | | |
| | | alwaysValidDate: function() { |
| | | return 1; |
| | | }, |
| | | |
| | | handleClickOutside: function() { |
| | | this.props.handleClickOutside(); |
| | | } |
| | | }); |
| | | })); |
| | | |
| | | module.exports = DateTimePickerYears; |
| | | /* eslint-enable */ |