Twotenthree (#434)

Layne Anderson

2017-09-30 39b8275f9b2bbd8f11ffecba94fce7d339c4d577

 src/YearsView.js

@@ -1,19 +1,21 @@
'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 )))
      ]);
   },

@@ -22,28 +24,57 @@
         i = -1,
         rows = [],
         renderer = this.props.renderYear || this.renderYear,
         classes, props
      ;
         selectedDate = this.props.selectedDate,
         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( this.props.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
         };

         years.push( renderer( props, year, this.props.selectedDate.clone() ));
         if ( !isDisabled )
            props.onClick = ( this.props.updateOn === 'years' ?
               this.updateSelectedYear : this.props.setDate('year') );

         if( years.length == 4 ){
            rows.push( DOM.tr({ key: i }, years ) );
         years.push( renderer( props, year, selectedDate && selectedDate.clone() ));

         if ( years.length === 4 ) {
            rows.push( React.createElement('tr', { key: i }, years ) );
            years = [];
         }

@@ -54,9 +85,21 @@
      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;