Twotenthree (#434)

Layne Anderson

2017-09-30 39b8275f9b2bbd8f11ffecba94fce7d339c4d577

 src/DaysView.js

@@ -1,79 +1,107 @@
'use strict';

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

var DOM = React.DOM;
var DateTimePickerDays = React.createClass({

var DateTimePickerDays = onClickOutside( createClass({
   render: function() {
      var footer = this.renderFooter(),
         date = this.props.viewDate,
         locale = date.localeData(),
         tableChildren
      ;
         ;

      tableChildren = [
         DOM.thead({ key: 'th'}, [
            DOM.tr({ key: 'h'},[
               DOM.th({ key: 'p', className: 'prev', onClick: this.props.subtractTime(1, 'months') }, '‹'),
               DOM.th({ key: 's', className: 'switch', onClick: this.props.showView('months'), colSpan: 5 }, moment.months()[date.month()] + ' ' + date.year() ),
               DOM.th({ key: 'n', className: 'next', onClick: this.props.addTime(1, 'months')}, '›' )
         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: 'n', className: 'rdtNext', onClick: this.props.addTime( 1, 'months' )}, React.createElement('span', {}, '›' ))
            ]),
            DOM.tr({ key: 'd'}, moment.weekdaysMin().map( function( day ){ return DOM.th({ key: day, className: 'dow'}, day) }) )
            React.createElement('tr', { key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ) { return React.createElement('th', { key: day + index, className: 'dow'}, day ); }) )
         ]),
         DOM.tbody({key: 'tb'}, this.renderDays())
         React.createElement('tbody', { key: 'tb' }, this.renderDays())
      ];

      if( footer )
      if ( footer )
         tableChildren.push( footer );

      return DOM.div({ className: 'datepicker-days' },
         DOM.table({}, tableChildren )
      return React.createElement('div', { className: 'rdtDays' },
         React.createElement('table', {}, tableChildren )
      );
   },

   /**
    * Get a list of the days of the week
    * depending on the current locale
    * @return {array} A list with the shortname of the days
    */
   getDaysOfWeek: function( locale ) {
      var days = locale._weekdaysMin,
         first = locale.firstDayOfWeek(),
         dow = [],
         i = 0
         ;

      days.forEach( function( day ) {
         dow[ (7 + ( i++ ) - first) % 7 ] = day;
      });

      return dow;
   },

   renderDays: function() {
      var date = this.props.viewDate,
         selected = this.props.selectedDate,
         selected = this.props.selectedDate && this.props.selectedDate.clone(),
         prevMonth = date.clone().subtract( 1, 'months' ),
         currentYear = date.year(),
         currentMonth = date.month(),
         selectedDate = {y: selected.year(), M: selected.month(), d: selected.date()},
         minDate = this.props.minDate,
         maxDate = this.props.maxDate,
         weeks = [],
         days = [],
         classes, disabled, dayProps
      ;
         renderer = this.props.renderDay || this.renderDay,
         isValid = this.props.isValidDate || this.alwaysValidDate,
         classes, isDisabled, dayProps, currentDate
         ;

      // Go to the last week of the previous month
      prevMonth.date( prevMonth.daysInMonth() ).startOf('week');
      var lastDay = prevMonth.clone().add(42, 'd');
      prevMonth.date( prevMonth.daysInMonth() ).startOf( 'week' );
      var lastDay = prevMonth.clone().add( 42, 'd' );

      while( prevMonth.isBefore( lastDay ) ){
         classes = 'day';
      while ( prevMonth.isBefore( lastDay ) ) {
         classes = 'rdtDay';
         currentDate = prevMonth.clone();

         if( prevMonth.year() < currentYear || prevMonth.month() < currentMonth )
            classes += ' old';
         else if( prevMonth.year() > currentYear || prevMonth.month() > currentMonth )
            classes += ' new';
         if ( ( prevMonth.year() === currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) )
            classes += ' rdtOld';
         else if ( ( prevMonth.year() === currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) )
            classes += ' rdtNew';

         if( prevMonth.isSame( selectedDate ) )
            classes += ' active';
         if ( selected && prevMonth.isSame( selected, 'day' ) )
            classes += ' rdtActive';

         if (prevMonth.isSame(moment(), 'day') )
            classes += ' today';
         if ( prevMonth.isSame( moment(), 'day' ) )
            classes += ' rdtToday';

         disabled = minDate && prevMonth.isBefore(minDate) || maxDate && prevMonth.isAfter(maxDate);
         if( disabled )
            classes += ' disabled';
         isDisabled = !isValid( currentDate, selected );
         if ( isDisabled )
            classes += ' rdtDisabled';

         dayProps = { key: prevMonth.format('M_D'), className: classes };
         if( !disabled )
            dayProps.onClick = this.props.updateDate;
         dayProps = {
            key: prevMonth.format( 'M_D' ),
            'data-value': prevMonth.date(),
            className: classes
         };

         days.push( DOM.td( dayProps, prevMonth.date() ));
         if( days.length == 7 ){
            weeks.push( DOM.tr( {key: prevMonth.format('M_D')}, days ) );
         if ( !isDisabled )
            dayProps.onClick = this.updateSelectedDate;

         days.push( renderer( dayProps, currentDate, selected ) );

         if ( days.length === 7 ) {
            weeks.push( React.createElement('tr', { key: prevMonth.format( 'M_D' )}, days ) );
            days = [];
         }

@@ -83,16 +111,34 @@
      return weeks;
   },

   renderFooter: function(){
      if( !this.props.timeFormat )
   updateSelectedDate: function( event ) {
      this.props.updateSelectedDate( event, true );
   },

   renderDay: function( props, currentDate ) {
      return React.createElement('td',  props, currentDate.date() );
   },

   renderFooter: function() {
      if ( !this.props.timeFormat )
         return '';

      return DOM.tfoot({ key: 'tf'},
         DOM.tr({},
            DOM.td({ onClick: this.props.showView('time'), colSpan: 7, className: 'timeToggle'}, this.props.selectedDate.format( this.props.timeFormat ))
      var date = this.props.selectedDate || this.props.viewDate;

      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 ))
         )
      );
   },

   alwaysValidDate: function() {
      return 1;
   },

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

module.exports = DateTimePickerDays;