:bug: fix colspan property to work with XML layout

Anna Kurylo

2018-10-16 99929e8c706aa7f6196ac4e02df1c04449feee7a

 src/MonthsView.js

@@ -1,19 +1,19 @@
'use strict';

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

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

@@ -29,7 +29,7 @@
         classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay,
         // Date is irrelevant because we're only interested in month
         irrelevantDate = 1
      ;
         ;

      while (i < 12) {
         classes = 'rdtMonth';
@@ -51,7 +51,7 @@
         if ( isDisabled )
            classes += ' rdtDisabled';

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

         props = {
@@ -67,7 +67,7 @@
         months.push( renderer( props, i, year, date && date.clone() ) );

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

@@ -88,16 +88,16 @@
      // 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 DOM.td( props, capitalize( monthStrFixedLength ) );
      return React.createElement('td', props, capitalize( monthStrFixedLength ) );
   },

   alwaysValidDate: function() {
      return 1;
   },

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

function capitalize( str ) {