:bug: fix colspan property to work with XML layout

Anna Kurylo

2018-10-16 99929e8c706aa7f6196ac4e02df1c04449feee7a

 dist/react-datetime.js

@@ -1,5 +1,5 @@
/*
react-datetime v2.10.3
react-datetime v2.15.0
https://github.com/YouCanBookMe/react-datetime
MIT: https://github.com/YouCanBookMe/react-datetime/raw/master/LICENSE
*/
@@ -69,15 +69,26 @@
      CalendarContainer = __webpack_require__(17)
      ;

   var viewModes = Object.freeze({
      YEARS: 'years',
      MONTHS: 'months',
      DAYS: 'days',
      TIME: 'time',
   });

   var TYPES = PropTypes;
   var Datetime = createClass({
      displayName: 'DateTime',
      propTypes: {
         // value: TYPES.object | TYPES.string,
         // defaultValue: TYPES.object | TYPES.string,
         // viewDate: TYPES.object | TYPES.string,
         onFocus: TYPES.func,
         onBlur: TYPES.func,
         onChange: TYPES.func,
         onViewModeChange: TYPES.func,
         onNavigateBack: TYPES.func,
         onNavigateForward: TYPES.func,
         locale: TYPES.string,
         utc: TYPES.bool,
         input: TYPES.bool,
@@ -85,33 +96,12 @@
         // timeFormat: TYPES.string | TYPES.bool,
         inputProps: TYPES.object,
         timeConstraints: TYPES.object,
         viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),
         viewMode: TYPES.oneOf([viewModes.YEARS, viewModes.MONTHS, viewModes.DAYS, viewModes.TIME]),
         isValidDate: TYPES.func,
         open: TYPES.bool,
         strictParsing: TYPES.bool,
         closeOnSelect: TYPES.bool,
         closeOnTab: TYPES.bool
      },

      getDefaultProps: function() {
         var nof = function() {};
         return {
            className: '',
            defaultValue: '',
            inputProps: {},
            input: true,
            onFocus: nof,
            onBlur: nof,
            onChange: nof,
            onViewModeChange: nof,
            timeFormat: true,
            timeConstraints: {},
            dateFormat: true,
            strictParsing: true,
            closeOnSelect: false,
            closeOnTab: true,
            utc: false
         };
      },

      getInitialState: function() {
@@ -120,9 +110,24 @@
         if ( state.open === undefined )
            state.open = !this.props.input;

         state.currentView = this.props.dateFormat ? (this.props.viewMode || state.updateOn || 'days') : 'time';
         state.currentView = this.props.dateFormat ?
            (this.props.viewMode || state.updateOn || viewModes.DAYS) : viewModes.TIME;

         return state;
      },

      parseDate: function (date, formats) {
         var parsedDate;

         if (date && typeof date === 'string')
            parsedDate = this.localMoment(date, formats.datetime);
         else if (date)
            parsedDate = this.localMoment(date);

         if (parsedDate && !parsedDate.isValid())
            parsedDate = null;

         return parsedDate;
      },

      getStateFromProps: function( props ) {
@@ -131,18 +136,13 @@
            selectedDate, viewDate, updateOn, inputValue
            ;

         if ( date && typeof date === 'string' )
            selectedDate = this.localMoment( date, formats.datetime );
         else if ( date )
            selectedDate = this.localMoment( date );
         selectedDate = this.parseDate(date, formats);

         if ( selectedDate && !selectedDate.isValid() )
            selectedDate = null;
         viewDate = this.parseDate(props.viewDate, formats);

         viewDate = selectedDate ?
            selectedDate.clone().startOf('month') :
            this.localMoment().startOf('month')
         ;
            viewDate ? viewDate.clone().startOf('month') : this.localMoment().startOf('month');

         updateOn = this.getUpdateOn(formats);

@@ -165,14 +165,14 @@

      getUpdateOn: function( formats ) {
         if ( formats.date.match(/[lLD]/) ) {
            return 'days';
            return viewModes.DAYS;
         } else if ( formats.date.indexOf('M') !== -1 ) {
            return 'months';
            return viewModes.MONTHS;
         } else if ( formats.date.indexOf('Y') !== -1 ) {
            return 'years';
            return viewModes.YEARS;
         }

         return 'days';
         return viewModes.DAYS;
      },

      getFormats: function( props ) {
@@ -186,7 +186,7 @@
         if ( formats.date === true ) {
            formats.date = locale.longDateFormat('L');
         }
         else if ( this.getUpdateOn(formats) !== 'days' ) {
         else if ( this.getUpdateOn(formats) !== viewModes.DAYS ) {
            formats.time = '';
         }

@@ -213,7 +213,9 @@
         }

         if ( updatedState.open === undefined ) {
            if ( this.props.closeOnSelect && this.state.currentView !== 'time' ) {
            if ( typeof nextProps.open !== 'undefined' ) {
               updatedState.open = nextProps.open;
            } else if ( this.props.closeOnSelect && this.state.currentView !== viewModes.TIME ) {
               updatedState.open = false;
            } else {
               updatedState.open = this.state.open;
@@ -252,6 +254,10 @@
                  updatedState.inputValue = updatedState.selectedDate.format(formats.datetime);
               }
            }
         }

         if ( nextProps.viewDate !== this.props.viewDate ) {
            updatedState.viewDate = moment(nextProps.viewDate);
         }
         //we should only show a valid date if we are provided a isValidDate function. Removed in 2.10.3
         /*if (this.props.isValidDate) {
@@ -298,8 +304,8 @@
      setDate: function( type ) {
         var me = this,
            nextViews = {
               month: 'days',
               year: 'months'
               month: viewModes.DAYS,
               year: viewModes.MONTHS,
            }
         ;
         return function( e ) {
@@ -311,26 +317,29 @@
         };
      },

      addTime: function( amount, type, toSelected ) {
         return this.updateTime( 'add', amount, type, toSelected );
      subtractTime: function( amount, type, toSelected ) {
         var me = this;
         return function() {
            me.props.onNavigateBack( amount, type );
            me.updateTime( 'subtract', amount, type, toSelected );
         };
      },

      subtractTime: function( amount, type, toSelected ) {
         return this.updateTime( 'subtract', amount, type, toSelected );
      addTime: function( amount, type, toSelected ) {
         var me = this;
         return function() {
            me.props.onNavigateForward( amount, type );
            me.updateTime( 'add', amount, type, toSelected );
         };
      },

      updateTime: function( op, amount, type, toSelected ) {
         var me = this;
         var update = {},
            date = toSelected ? 'selectedDate' : 'viewDate';

         return function() {
            var update = {},
               date = toSelected ? 'selectedDate' : 'viewDate'
            ;
         update[ date ] = this.state[ date ].clone()[ op ]( amount, type );

            update[ date ] = me.state[ date ].clone()[ op ]( amount, type );

            me.setState( update );
         };
         this.setState( update );
      },

      allowedSetTime: ['hours', 'minutes', 'seconds', 'milliseconds'],
@@ -412,10 +421,10 @@
         this.props.onChange( date );
      },

      openCalendar: function() {
         if (!this.state.open) {
      openCalendar: function( e ) {
         if ( !this.state.open ) {
            this.setState({ open: true }, function() {
               this.props.onFocus();
               this.props.onFocus( e );
            });
         }
      },
@@ -427,7 +436,7 @@
      },

      handleClickOutside: function() {
         if ( this.props.input && this.state.open && !this.props.open ) {
         if ( this.props.input && this.state.open && !this.props.open && !this.props.disableOnClickOutside ) {
            this.setState({ open: false }, function() {
               this.props.onBlur( this.state.selectedDate || this.state.inputValue );
            });
@@ -477,15 +486,20 @@
            children = [];

         if ( this.props.input ) {
            children = [ React.createElement('input', assign({
               key: 'i',
            var finalInputProps = assign({
               type: 'text',
               className: 'form-control',
               onClick: this.openCalendar,
               onFocus: this.openCalendar,
               onChange: this.onInputChange,
               onKeyDown: this.onInputKey,
               value: this.state.inputValue
            }, this.props.inputProps ))];
               value: this.state.inputValue,
            }, this.props.inputProps);
            if ( this.props.renderInput ) {
               children = [ React.createElement('div', { key: 'i' }, this.props.renderInput( finalInputProps, this.openCalendar, this.closeCalendar )) ];
            } else {
               children = [ React.createElement('input', assign({ key: 'i' }, finalInputProps ))];
            }
         } else {
            className += ' rdtStatic';
         }
@@ -493,14 +507,34 @@
         if ( this.state.open )
            className += ' rdtOpen';

         return React.createElement('div', {className: className}, children.concat(
            React.createElement('div',
         return React.createElement( 'div', { className: className }, children.concat(
            React.createElement( 'div',
               { key: 'dt', className: 'rdtPicker' },
               React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
               React.createElement( CalendarContainer, { view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
            )
         ));
      }
   });

   Datetime.defaultProps = {
      className: '',
      defaultValue: '',
      inputProps: {},
      input: true,
      onFocus: function() {},
      onBlur: function() {},
      onChange: function() {},
      onViewModeChange: function() {},
      onNavigateBack: function() {},
      onNavigateForward: function() {},
      timeFormat: true,
      timeConstraints: {},
      dateFormat: true,
      strictParsing: true,
      closeOnSelect: false,
      closeOnTab: true,
      utc: false
   };

   // Make moment accessible through the Datetime class
   Datetime.moment = moment;
@@ -2730,7 +2764,7 @@
            React.createElement('thead', { key: 'th' }, [
               React.createElement('tr', { key: 'h' }, [
                  React.createElement('th', { key: 'p', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'months' )}, React.createElement('span', {}, '‹' )),
                  React.createElement('th', { key: 's', className: 'rdtSwitch', onClick: this.props.showView( 'months' ), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ),
                  React.createElement('th', { key: 's', className: 'rdtSwitch', onClick: this.props.showView( 'months' ), colspan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ),
                  React.createElement('th', { key: 'n', className: 'rdtNext', onClick: this.props.addTime( 1, 'months' )}, React.createElement('span', {}, '›' ))
               ]),
               React.createElement('tr', { key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ) { return React.createElement('th', { key: day + index, className: 'dow'}, day ); }) )
@@ -2839,7 +2873,7 @@

         return React.createElement('tfoot', { key: 'tf'},
            React.createElement('tr', {},
               React.createElement('td', { onClick: this.props.showView( 'time' ), colSpan: 7, className: 'rdtTimeToggle' }, date.format( this.props.timeFormat ))
               React.createElement('td', { onClick: this.props.showView( 'time' ), colspan: 7, className: 'rdtTimeToggle' }, date.format( this.props.timeFormat ))
            )
         );
      },
@@ -3214,7 +3248,7 @@
         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: '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()))
@@ -3329,7 +3363,7 @@
         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: '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 )))
@@ -3455,17 +3489,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' ),
@@ -3485,9 +3521,9 @@
               }
            }
            return React.createElement('div', { key: type, className: 'rdtCounter' }, [
               React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
               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 ) }, '▼' )
               React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ), onContextMenu: this.disableContextMenu }, '▼' )
            ]);
         }
         return '';
@@ -3495,9 +3531,9 @@

      renderDayPart: function() {
         return React.createElement('div', { key: 'dayPart', className: 'rdtCounter' }, [
            React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▲' ),
            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') }, '▼' )
            React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▼' )
         ]);
      },

@@ -3583,7 +3619,7 @@

         var date = this.props.selectedDate || this.props.viewDate;
         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 ) )
            React.createElement('th', { className: 'rdtSwitch', colspan: 4, onClick: this.props.showView( 'days' ) }, date.format( this.props.dateFormat ) )
         ));
      },

@@ -3607,12 +3643,19 @@
               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: {
         hours: 1,
         minutes: 2,