:bug: fix colspan property to work with XML layout

Anna Kurylo

2018-10-16 99929e8c706aa7f6196ac4e02df1c04449feee7a

 src/MonthsView.js

@@ -1,28 +1,73 @@
'use strict';

var React = require('react'),
moment = require('moment')
;
   createClass = require('create-react-class'),
   onClickOutside = require('react-onclickoutside').default
   ;

var DOM = React.DOM;
var DateTimePickerMonths = React.createClass({
var DateTimePickerMonths = onClickOutside( createClass({
   render: function() {
      return React.createElement('div', { className: 'rdtMonths' }, [
         React.createElement('table', { key: 'a' }, React.createElement('thead', {}, React.createElement('tr', {}, [
            React.createElement('th', { key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'years' )}, React.createElement('span', {}, '‹' )),
            React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colspan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ),
            React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 1, 'years' )}, React.createElement('span', {}, '›' ))
         ]))),
         React.createElement('table', { key: 'months' }, React.createElement('tbody', { key: 'b' }, this.renderMonths()))
      ]);
   },

   renderMonths: function() {
      var month = this.props.selectedDate.month(),
         monthsShort = moment.monthsShort(),
      var date = this.props.selectedDate,
         month = this.props.viewDate.month(),
         year = this.props.viewDate.year(),
         rows = [],
         i = 0,
         months = [],
         classes
      ;
         renderer = this.props.renderMonth || this.renderMonth,
         isValid = this.props.isValidDate || this.alwaysValidDate,
         classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay,
         // Date is irrelevant because we're only interested in month
         irrelevantDate = 1
         ;

      while (i < 12) {
         classes = "month";
         if( i === month && this.props.viewDate.year() === this.props.selectedDate.year() )
            classes += " active";
         classes = 'rdtMonth';
         currentMonth =
            this.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate });

         months.push( DOM.td( {key: i, className: classes, onClick: this.props.setDate('month') }, monthsShort[ i ] ));
         if( months.length == 4 ){
            rows.push( DOM.tr({ key: month + '_' + rows.length }, months) );
         noOfDaysInMonth = currentMonth.endOf( 'month' ).format( 'D' );
         daysInMonth = Array.from({ length: noOfDaysInMonth }, function( e, i ) {
            return i + 1;
         });

         validDay = daysInMonth.find(function( d ) {
            var day = currentMonth.clone().set( 'date', d );
            return isValid( day );
         });

         isDisabled = ( validDay === undefined );

         if ( isDisabled )
            classes += ' rdtDisabled';

         if ( date && i === date.month() && year === date.year() )
            classes += ' rdtActive';

         props = {
            key: i,
            'data-value': i,
            className: classes
         };

         if ( !isDisabled )
            props.onClick = ( this.props.updateOn === 'months' ?
               this.updateSelectedMonth : this.props.setDate( 'month' ) );

         months.push( renderer( props, i, year, date && date.clone() ) );

         if ( months.length === 4 ) {
            rows.push( React.createElement('tr', { key: month + '_' + rows.length }, months ) );
            months = [];
         }

@@ -32,16 +77,31 @@
      return rows;
   },

   render: function() {
      return DOM.div({ className: 'rdtMonths' },[
         DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
            DOM.th({ key: 'prev', className: 'prev', onClick: this.props.subtractTime(1, 'years') }, '‹'),
            DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 5 }, this.props.viewDate.year() ),
            DOM.th({ key: 'next', className: 'next', onClick: this.props.addTime(1, 'years')}, '›' )
         ]))),
         DOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))
      ]);
   updateSelectedMonth: function( event ) {
      this.props.updateSelectedDate( event );
   },

   renderMonth: function( props, month ) {
      var localMoment = this.props.viewDate;
      var monthStr = localMoment.localeData().monthsShort( localMoment.month( month ) );
      var strLength = 3;
      // Because some months are up to 5 characters long, we want to
      // use a fixed string length for consistency
      var monthStrFixedLength = monthStr.substring( 0, strLength );
      return React.createElement('td', props, capitalize( monthStrFixedLength ) );
   },

   alwaysValidDate: function() {
      return 1;
   },

   handleClickOutside: function() {
      this.props.handleClickOutside();
   }
});
}));

function capitalize( str ) {
   return str.charAt( 0 ).toUpperCase() + str.slice( 1 );
}

module.exports = DateTimePickerMonths;