:bug: fix colspan property to work with XML layout

Anna Kurylo

2018-10-16 99929e8c706aa7f6196ac4e02df1c04449feee7a

 src/TimeView.js

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

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

var DOM = React.DOM;
var DateTimePickerTime = onClickOutside( React.createClass({
var DateTimePickerTime = onClickOutside( createClass({
   getInitialState: function() {
      return this.calculateState( this.props );
   },
@@ -15,7 +15,7 @@
      var date = props.selectedDate || props.viewDate,
         format = props.timeFormat,
         counters = []
      ;
         ;

      if ( format.toLowerCase().indexOf('h') !== -1 ) {
         counters.push('hours');
@@ -27,17 +27,19 @@
         }
      }

      var hours = date.format( 'H' );

      var daypart = false;
      if ( this.state !== null && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) {
         if ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) {
            daypart = ( this.state.hours >= 12 ) ? 'PM' : 'AM';
            daypart = ( hours >= 12 ) ? 'PM' : 'AM';
         } else {
            daypart = ( this.state.hours >= 12 ) ? 'pm' : 'am';
            daypart = ( hours >= 12 ) ? 'pm' : 'am';
         }
      }

      return {
         hours: date.format( 'H' ),
         hours: hours,
         minutes: date.format( 'mm' ),
         seconds: date.format( 'ss' ),
         milliseconds: date.format( 'SSS' ),
@@ -56,20 +58,20 @@
               value = 12;
            }
         }
         return DOM.div({ key: type, className: 'rdtCounter' }, [
            DOM.span({ key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
            DOM.div({ key: 'c', className: 'rdtCount' }, value ),
            DOM.span({ key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )
         return React.createElement('div', { key: type, className: 'rdtCounter' }, [
            React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ), onContextMenu: this.disableContextMenu }, '▲' ),
            React.createElement('div', { key: 'c', className: 'rdtCount' }, value ),
            React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ), onContextMenu: this.disableContextMenu }, '▼' )
         ]);
      }
      return '';
   },

   renderDayPart: function() {
      return DOM.div({ key: 'dayPart', className: 'rdtCounter' }, [
         DOM.span({ key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▲' ),
         DOM.div({ key: this.state.daypart, className: 'rdtCount' }, this.state.daypart ),
         DOM.span({ key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▼' )
      return React.createElement('div', { key: 'dayPart', className: 'rdtCounter' }, [
         React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▲' ),
         React.createElement('div', { key: this.state.daypart, className: 'rdtCount' }, this.state.daypart ),
         React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▼' )
      ]);
   },

@@ -80,7 +82,7 @@

      this.state.counters.forEach( function( c ) {
         if ( counters.length )
            counters.push( DOM.div({ key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ) );
            counters.push( React.createElement('div', { key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ) );
         counters.push( me.renderCounter( c ) );
      });

@@ -89,19 +91,19 @@
      }

      if ( this.state.counters.length === 3 && this.props.timeFormat.indexOf( 'S' ) !== -1 ) {
         counters.push( DOM.div({ className: 'rdtCounterSeparator', key: 'sep5' }, ':' ) );
         counters.push( React.createElement('div', { className: 'rdtCounterSeparator', key: 'sep5' }, ':' ) );
         counters.push(
            DOM.div({ className: 'rdtCounter rdtMilli', key: 'm' },
               DOM.input({ value: this.state.milliseconds, type: 'text', onChange: this.updateMilli } )
            React.createElement('div', { className: 'rdtCounter rdtMilli', key: 'm' },
               React.createElement('input', { value: this.state.milliseconds, type: 'text', onChange: this.updateMilli } )
               )
            );
      }

      return DOM.div({ className: 'rdtTime' },
         DOM.table({}, [
      return React.createElement('div', { className: 'rdtTime' },
         React.createElement('table', {}, [
            this.renderHeader(),
            DOM.tbody({ key: 'b'}, DOM.tr({}, DOM.td({},
               DOM.div({ className: 'rdtCounters' }, counters )
            React.createElement('tbody', { key: 'b'}, React.createElement('tr', {}, React.createElement('td', {},
               React.createElement('div', { className: 'rdtCounters' }, counters )
            )))
         ])
      );
@@ -154,8 +156,8 @@
         return null;

      var date = this.props.selectedDate || this.props.viewDate;
      return DOM.thead({ key: 'h' }, DOM.tr({},
         DOM.th({ className: 'rdtSwitch', colSpan: 4, onClick: this.props.showView( 'days' ) }, date.format( this.props.dateFormat ) )
      return React.createElement('thead', { key: 'h' }, React.createElement('tr', {},
         React.createElement('th', { className: 'rdtSwitch', colspan: 4, onClick: this.props.showView( 'days' ) }, date.format( this.props.dateFormat ) )
      ));
   },

@@ -179,10 +181,17 @@
            clearInterval( me.increaseTimer );
            me.props.setTime( type, me.state[ type ] );
            document.body.removeEventListener( 'mouseup', me.mouseUpListener );
            document.body.removeEventListener( 'touchend', me.mouseUpListener );
         };

         document.body.addEventListener( 'mouseup', me.mouseUpListener );
         document.body.addEventListener( 'touchend', me.mouseUpListener );
      };
   },

   disableContextMenu: function( event ) {
      event.preventDefault();
      return false;
   },

   padValues: {
@@ -220,9 +229,9 @@
      return str;
   },

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

module.exports = DateTimePickerTime;