Simon Egersand
2016-07-16 4621154ad6addec629588aa2fb20b13dbaa02c17
Fix lint errors
8 files modified
234 ■■■■ changed files
DateTime.js 88 ●●●● patch | view | raw | blame | history
gulpfile.js 9 ●●●●● patch | view | raw | blame | history
src/DaysView.js 24 ●●●● patch | view | raw | blame | history
src/MonthsView.js 26 ●●●● patch | view | raw | blame | history
src/TimeView.js 45 ●●●●● patch | view | raw | blame | history
src/YearsView.js 14 ●●●● patch | view | raw | blame | history
src/onClickOutside.js 24 ●●●● patch | view | raw | blame | history
webpack.config.js 4 ●●●● patch | view | raw | blame | history
DateTime.js
@@ -57,7 +57,7 @@
    getInitialState: function() {
        var state = this.getStateFromProps( this.props );
        if( state.open == undefined )
        if ( state.open === undefined )
            state.open = !this.props.input;
        state.currentView = this.props.dateFormat ? (this.props.viewMode || state.updateOn || 'days') : 'time';
@@ -71,17 +71,17 @@
            selectedDate, viewDate, updateOn
        ;
        if( date && typeof date == 'string' )
        if ( date && typeof date === 'string' )
            selectedDate = this.localMoment( date, formats.datetime );
        else if( date )
        else if ( date )
            selectedDate = this.localMoment( date );
        if( selectedDate && !selectedDate.isValid() )
        if ( selectedDate && !selectedDate.isValid() )
            selectedDate = null;
        viewDate = selectedDate ?
            selectedDate.clone().startOf("month") :
            this.localMoment().startOf("month")
            selectedDate.clone().startOf('month') :
            this.localMoment().startOf('month')
        ;
        updateOn = this.getUpdateOn(formats);
@@ -97,14 +97,14 @@
    },
    getUpdateOn: function(formats){
        if( formats.date.match(/[lLD]/) ){
            return "days";
        if ( formats.date.match(/[lLD]/) ){
            return 'days';
        }
        else if( formats.date.indexOf("M") != -1 ){
            return "months";
        else if ( formats.date.indexOf('M') !== -1 ){
            return 'months';
        }
        else if( formats.date.indexOf("Y") != -1 ){
            return "years";
        else if ( formats.date.indexOf('Y') !== -1 ){
            return 'years';
        }
        return 'days';
@@ -118,14 +118,14 @@
            locale = this.localMoment( props.date ).localeData()
        ;
        if( formats.date === true ){
        if ( formats.date === true ){
            formats.date = locale.longDateFormat('L');
        }
        else if( this.getUpdateOn(formats) !== 'days' ){
        else if ( this.getUpdateOn(formats) !== 'days' ){
            formats.time = '';
        }
        if( formats.time === true ){
        if ( formats.time === true ){
            formats.time = locale.longDateFormat('LT');
        }
@@ -142,35 +142,34 @@
            update = {}
        ;
        if( nextProps.value != this.props.value ){
        if ( nextProps.value !== this.props.value ){
            update = this.getStateFromProps( nextProps );
        }
        if ( formats.datetime !== this.getFormats( this.props ).datetime ) {
            update.inputFormat = formats.datetime;
        }
        if( update.open === undefined ){
            if( this.props.closeOnSelect && this.state.currentView !== 'time' ){
        if ( update.open === undefined ){
            if ( this.props.closeOnSelect && this.state.currentView !== 'time' ){
                update.open = false;
            }
            else{
            else {
                update.open = this.state.open;
            }
        }
        this.setState( update );
    },
    onInputChange: function( e ) {
        var value = e.target == null ? e : e.target.value,
        var value = e.target === null ? e : e.target.value,
            localMoment = this.localMoment( value, this.state.inputFormat ),
            update = { inputValue: value }
        ;
        if ( localMoment.isValid() && !this.props.value ) {
            update.selectedDate = localMoment;
            update.viewDate = localMoment.clone().startOf("month");
            update.viewDate = localMoment.clone().startOf('month');
        }
        else {
            update.selectedDate = null;
@@ -183,7 +182,7 @@
    showView: function( view ){
        var me = this;
        return function( e ){
        return function(){
            me.setState({ currentView: view });
        };
    },
@@ -197,7 +196,7 @@
        ;
        return function( e ){
            me.setState({
                viewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value')) ).startOf( type ),
                viewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value'), 10) ).startOf( type ),
                currentView: nextViews[ type ]
            });
        };
@@ -225,7 +224,7 @@
        };
    },
    allowedSetTime: ['hours','minutes','seconds', 'milliseconds'],
    allowedSetTime: ['hours', 'minutes', 'seconds', 'milliseconds'],
    setTime: function( type, value ){
        var index = this.allowedSetTime.indexOf( type ) + 1,
            state = this.state,
@@ -241,7 +240,7 @@
            date[ nextType ]( date[nextType]() );
        }
        if( !this.props.value ){
        if ( !this.props.value ){
            this.setState({
                selectedDate: date,
                inputValue: date.format( state.inputFormat )
@@ -258,41 +257,39 @@
            date
    ;
        if(target.className.indexOf("rdtDay") != -1){
            if(target.className.indexOf("rdtNew") != -1)
        if (target.className.indexOf('rdtDay') !== -1){
            if (target.className.indexOf('rdtNew') !== -1)
                modifier = 1;
            else if(target.className.indexOf("rdtOld") != -1)
            else if (target.className.indexOf('rdtOld') !== -1)
                modifier = -1;
            date = viewDate.clone()
                .month( viewDate.month() + modifier )
                .date( parseInt( target.getAttribute('data-value') ) )
            ;
        }else if(target.className.indexOf("rdtMonth") != -1){
                .date( parseInt( target.getAttribute('data-value'), 10 ) );
        } else if (target.className.indexOf('rdtMonth') !== -1){
            date = viewDate.clone()
                .month( parseInt( target.getAttribute('data-value') ) )
                .date( currentDate.date() )
        }else if(target.className.indexOf("rdtYear") != -1){
                .month( parseInt( target.getAttribute('data-value'), 10 ) )
                .date( currentDate.date() );
        } else if (target.className.indexOf('rdtYear') !== -1){
            date = viewDate.clone()
                .month( currentDate.month() )
                .date( currentDate.date() )
                .year( parseInt( target.getAttribute('data-value') ) )
                .year( parseInt( target.getAttribute('data-value'), 10 ) );
        }
        date.hours( currentDate.hours() )
            .minutes( currentDate.minutes() )
            .seconds( currentDate.seconds() )
            .milliseconds( currentDate.milliseconds() )
            .milliseconds( currentDate.milliseconds() );
        if( !this.props.value ){
        if ( !this.props.value ){
            this.setState({
                selectedDate: date,
                viewDate: date.clone().startOf('month'),
                inputValue: date.format( this.state.inputFormat ),
                open: !(this.props.closeOnSelect && close )
            });
        }
        else {
        } else {
            if (this.props.closeOnSelect && close) {
                this.closeCalendar();
            }
@@ -314,7 +311,7 @@
    },
    handleClickOutside: function(){
        if( this.props.input && this.state.open && !this.props.open ){
        if ( this.props.input && this.state.open && !this.props.open ){
            this.setState({ open: false });
            this.props.onBlur( this.state.selectedDate || this.state.inputValue );
        }
@@ -322,7 +319,7 @@
    localMoment: function( date, format ){
        var m = moment( date, format, this.props.strictParsing );
        if( this.props.locale )
        if ( this.props.locale )
            m.locale( this.props.locale );
        return m;
    },
@@ -359,7 +356,7 @@
            children = []
        ;
        if( this.props.input ){
        if ( this.props.input ){
            children = [ DOM.input( assign({
                key: 'i',
                type:'text',
@@ -368,12 +365,11 @@
                onChange: this.onInputChange,
                value: this.state.inputValue
            }, this.props.inputProps ))];
        }
        else {
        } else {
            className += ' rdtStatic';
        }
        if( this.state.open )
        if ( this.state.open )
            className += ' rdtOpen';
        return DOM.div({className: className}, children.concat(
gulpfile.js
@@ -29,9 +29,10 @@
    .replace( '%%homepage%%', pack.homepage)
;
var handleError =  function( err ){
    console.log( 'ERRRRROOOOOORRRR', err );
var handleError = function( err ){
    console.log( 'Error: ', err );
};
function wp( config, minify ){
    var stream =  gulp.src('./Datetime.js')
        .pipe( webpack( config ) )
@@ -43,12 +44,10 @@
    return stream.pipe( insert.prepend( cr ) )
        .pipe( gulp.dest('dist/') )
    ;
}
gulp.task("build", function( callback ) {
gulp.task( 'build', function( callback ) {
    var config = getWPConfig( 'react-datetime' );
    config.devtool = '#eval';
    wp( config );
src/DaysView.js
@@ -1,3 +1,5 @@
'use strict';
var React = require('react'),
    moment = require('moment')
;
@@ -14,7 +16,7 @@
        tableChildren = [
            DOM.thead({ key: 'th'}, [
                DOM.tr({ key: 'h'},[
                DOM.tr({ key: 'h'}, [
                    DOM.th({ key: 'p', className: 'rdtPrev' }, DOM.span({onClick: this.props.subtractTime(1, 'months')}, '‹')),
                    DOM.th({ key: 's', className: 'rdtSwitch', onClick: this.props.showView('months'), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ),
                    DOM.th({ key: 'n', className: 'rdtNext' }, DOM.span({onClick: this.props.addTime(1, 'months')}, '›'))
@@ -24,7 +26,7 @@
            DOM.tbody({key: 'tb'}, this.renderDays())
        ];
        if( footer )
        if ( footer )
            tableChildren.push( footer );
        return DOM.div({ className: 'rdtDays' },
@@ -68,23 +70,23 @@
        prevMonth.date( prevMonth.daysInMonth() ).startOf('week');
        var lastDay = prevMonth.clone().add(42, 'd');
        while( prevMonth.isBefore( lastDay ) ){
        while ( prevMonth.isBefore( lastDay ) ){
            classes = 'rdtDay';
            currentDate = prevMonth.clone();
            if( ( prevMonth.year() == currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) )
            if ( ( prevMonth.year() === currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) )
                classes += ' rdtOld';
            else if( ( prevMonth.year() == currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) )
            else if ( ( prevMonth.year() === currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) )
                classes += ' rdtNew';
            if( selected && prevMonth.isSame(selected, 'day') )
            if ( selected && prevMonth.isSame(selected, 'day') )
                classes += ' rdtActive';
            if (prevMonth.isSame(moment(), 'day') )
                classes += ' rdtToday';
            disabled = !isValid( currentDate, selected );
            if( disabled )
            if ( disabled )
                classes += ' rdtDisabled';
            dayProps = {
@@ -92,12 +94,12 @@
                'data-value': prevMonth.date(),
                className: classes
            };
            if( !disabled )
            if ( !disabled )
                dayProps.onClick = this.updateSelectedDate;
            days.push( renderer( dayProps, currentDate, selected ) );
            if( days.length == 7 ){
            if ( days.length === 7 ){
                weeks.push( DOM.tr( {key: prevMonth.format('M_D')}, days ) );
                days = [];
            }
@@ -112,12 +114,12 @@
        this.props.updateSelectedDate(event, true);
    },
    renderDay: function( props, currentDate, selectedDate ){
    renderDay: function( props, currentDate ){
        return DOM.td( props, currentDate.date() );
    },
    renderFooter: function(){
        if( !this.props.timeFormat )
        if ( !this.props.timeFormat )
            return '';
        var date = this.props.selectedDate || this.props.viewDate;
src/MonthsView.js
@@ -1,14 +1,12 @@
'use strict';
var React = require('react'),
moment = require('moment')
;
var React = require('react');
var DOM = React.DOM;
var DateTimePickerMonths = React.createClass({
    render: function() {
        return DOM.div({ className: 'rdtMonths' },[
            DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
        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')}, '›'))
@@ -29,20 +27,20 @@
        ;
        while (i < 12) {
            classes = "rdtMonth";
            if( date && i === month && year === date.year() )
                classes += " rdtActive";
            classes = 'rdtMonth';
            if ( date && i === month && year === date.year() )
                classes += ' rdtActive';
            props = {
                key: i,
                'data-value': i,
                className: classes,
                onClick: this.props.updateOn=="months"? this.updateSelectedMonth : this.props.setDate('month')
                onClick: this.props.updateOn === 'months'? this.updateSelectedMonth : this.props.setDate('month')
            };
            months.push( renderer( props, i, year, date && date.clone() ));
            if( months.length == 4 ){
            if ( months.length === 4 ){
                rows.push( DOM.tr({ key: month + '_' + rows.length }, months) );
                months = [];
            }
@@ -57,17 +55,17 @@
        this.props.updateSelectedDate(event, true);
    },
    renderMonth: function( props, month, year, selectedDate ) {
        var monthsShort = this.props.viewDate.localeData()._monthsShort
    renderMonth: function( props, month ) {
        var monthsShort = this.props.viewDate.localeData()._monthsShort;
        return DOM.td( props, monthsShort.standalone
            ? capitalize( monthsShort.standalone[ month ] )
            : monthsShort[ month ]
        )
        );
    }
});
function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
    return str.charAt(0).toUpperCase() + str.slice(1);
}
module.exports = DateTimePickerMonths;
src/TimeView.js
@@ -13,18 +13,18 @@
            counters = []
        ;
        if( format.indexOf('H') != -1 || format.indexOf('h') != -1 ){
        if ( format.indexOf('H') !== -1 || format.indexOf('h') !== -1 ){
            counters.push('hours');
            if( format.indexOf('m') != -1 ){
            if ( format.indexOf('m') !== -1 ){
                counters.push('minutes');
                if( format.indexOf('s') != -1 ){
                if ( format.indexOf('s') !== -1 ){
                    counters.push('seconds');
                }
            }
        }
        var daypart = false;
        if( this.props.timeFormat.indexOf(' A') != -1  && this.state != null ){
        if ( this.props.timeFormat.indexOf(' A') !== -1  && this.state !== null ){
            daypart = ( this.state.hours >= 12 ) ? 'PM' : 'AM';
        }
@@ -40,11 +40,11 @@
    renderCounter: function( type ){
        if (type !== 'daypart') {
            var value = this.state[ type ];
            if (type === 'hours' && this.props.timeFormat.indexOf(' A') != -1 && value > 12) {
                if(value > 12){
            if (type === 'hours' && this.props.timeFormat.indexOf(' A') !== -1 && value > 12) {
                if (value > 12){
                    value = value - 12;
                }
                if(value == 0) {
                if (value === 0) {
                    value = 12;
                }
            }
@@ -62,17 +62,16 @@
        ;
        this.state.counters.forEach( function(c){
            if( counters.length )
            if ( counters.length )
                counters.push( DOM.div( {key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ));
            counters.push( me.renderCounter( c ) );
        });
        if (this.state.daypart !== false) {
            counters.push(DOM.div({ key: this.state.daypart, className: 'rdtDayPart'}, this.state.daypart ));
        }
        if( this.state.counters.length == 3 && this.props.timeFormat.indexOf('S') != -1 ){
        if ( this.state.counters.length === 3 && this.props.timeFormat.indexOf('S') !== -1 ){
            counters.push( DOM.div( {className: 'rdtCounterSeparator', key: 'sep5' }, ':' ));
            counters.push(
                DOM.div( {className: 'rdtCounter rdtMilli', key:'m'},
@@ -90,18 +89,18 @@
            ])
        );
    },
    componentWillReceiveProps: function( nextProps, nextState ){
    componentWillReceiveProps: function( nextProps ){
        this.setState( this.calculateState( nextProps ) );
    },
    updateMilli: function( e ){
        var milli = parseInt( e.target.value );
        if( milli == e.target.value && milli >= 0 && milli < 1000 ){
        var milli = parseInt( e.target.value, 10 );
        if ( milli === e.target.value && milli >= 0 && milli < 1000 ){
            this.props.setTime( 'milliseconds', milli );
            this.setState({ milliseconds: milli });
        }
    },
    renderHeader: function(){
        if( !this.props.dateFormat )
        if ( !this.props.dateFormat )
            return null;
        var date = this.props.selectedDate || this.props.viewDate;
@@ -110,11 +109,7 @@
        ));
    },
    onStartClicking: function( action, type ){
        var me = this,
            update = {},
            value = this.state[ type ]
        ;
        var me = this;
        return function(){
            var update = {};
@@ -125,7 +120,7 @@
                me.increaseTimer = setInterval( function(){
                    update[ type ] = me[ action ]( type );
                    me.setState( update );
                },70);
                }, 70);
            }, 500);
            me.mouseUpListener = function(){
@@ -152,20 +147,20 @@
        milliseconds: 3
    },
    increase: function( type ){
        var value = parseInt(this.state[ type ]) + 1;
        if( value > this.maxValues[ type ] )
        var value = parseInt(this.state[ type ], 10) + 1;
        if ( value > this.maxValues[ type ] )
            value = 0;
        return this.pad( type, value );
    },
    decrease: function( type ){
        var value = parseInt(this.state[ type ]) - 1;
        if( value < 0 )
        var value = parseInt(this.state[ type ], 10) - 1;
        if ( value < 0 )
            value = this.maxValues[ type ];
        return this.pad( type, value );
    },
    pad: function( type, value ){
        var str = value + '';
        while( str.length < this.padValues[ type ] )
        while ( str.length < this.padValues[ type ] )
            str = '0' + str;
        return str;
    }
src/YearsView.js
@@ -7,8 +7,8 @@
    render: function() {
        var year = parseInt(this.props.viewDate.year() / 10, 10) * 10;
        return DOM.div({ className: 'rdtYears' },[
            DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
        return DOM.div({ className: 'rdtYears' }, [
            DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({}, [
                DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({onClick: this.props.subtractTime(10, 'years')}, '‹')),
                DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView('years'), colSpan: 2 }, year + '-' + (year + 9) ),
                DOM.th({ key: 'next', className: 'rdtNext'}, DOM.span({onClick: this.props.addTime(10, 'years')}, '›'))
@@ -29,21 +29,21 @@
        year--;
        while (i < 11) {
            classes = 'rdtYear';
            if( i === -1 | i === 10 )
            if ( i === -1 | i === 10 )
                classes += ' rdtOld';
            if( selectedDate && selectedDate.year() === year )
            if ( selectedDate && selectedDate.year() === year )
                classes += ' rdtActive';
            props = {
                key: year,
                'data-value': year,
                className: classes,
                onClick: this.props.updateOn=="years" ? this.updateSelectedYear : this.props.setDate('year')
                onClick: this.props.updateOn === 'years' ? this.updateSelectedYear : this.props.setDate('year')
            };
            years.push( renderer( props, year, selectedDate && selectedDate.clone() ));
            if( years.length == 4 ){
            if ( years.length === 4 ){
                rows.push( DOM.tr({ key: i }, years ) );
                years = [];
            }
@@ -59,7 +59,7 @@
        this.props.updateSelectedDate(event, true);
    },
    renderYear: function( props, year, selectedDate ){
    renderYear: function( props, year ){
        return DOM.td( props, year );
    }
});
src/onClickOutside.js
@@ -1,3 +1,5 @@
'use strict';
// This is extracted from https://github.com/Pomax/react-onclickoutside
// And modified to support react 0.13 and react 0.14
@@ -5,7 +7,7 @@
    version = React.version && React.version.split('.')
;
if( version && ( version[0] > 0 || version[1] > 13 ) )
if ( version && ( version[0] > 0 || version[1] > 13 ) )
    React = require('react-dom');
// Use a parallel array because we can't use
@@ -33,8 +35,8 @@
module.exports = {
 componentDidMount: function() {
   if(typeof this.handleClickOutside !== "function")
     throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");
   if (typeof this.handleClickOutside !== 'function')
     throw new Error('Component lacks a handleClickOutside(event) function for processing outside click events.');
   var fn = this.__outsideClickHandler = (function(localNode, eventHandler) {
     return function(evt) {
@@ -46,13 +48,13 @@
       // a layered approach, too, but that requires going back to
       // thinking in terms of Dom node nesting, running counter
       // to React's "you shouldn't care about the DOM" philosophy.
       while(source.parentNode) {
       while (source.parentNode) {
         found = isSourceFound(source, localNode);
         if(found) return;
         if (found) return;
         source = source.parentNode;
       }
       eventHandler(evt);
     }
     };
   }(React.findDOMNode(this), this.handleClickOutside));
   var pos = registeredComponents.length;
@@ -70,7 +72,7 @@
   this.disableOnClickOutside();
   this.__outsideClickHandler = false;
   var pos = registeredComponents.indexOf(this);
   if( pos>-1) {
   if ( pos>-1) {
     if (handlers[pos]) {
       // clean up so we don't leak memory
       handlers.splice(pos, 1);
@@ -85,8 +87,8 @@
  */
 enableOnClickOutside: function() {
   var fn = this.__outsideClickHandler;
   document.addEventListener("mousedown", fn);
   document.addEventListener("touchstart", fn);
   document.addEventListener('mousedown', fn);
   document.addEventListener('touchstart', fn);
 },
 /**
@@ -95,7 +97,7 @@
  */
 disableOnClickOutside: function() {
   var fn = this.__outsideClickHandler;
   document.removeEventListener("mousedown", fn);
   document.removeEventListener("touchstart", fn);
   document.removeEventListener('mousedown', fn);
   document.removeEventListener('touchstart', fn);
 }
};
webpack.config.js
@@ -11,9 +11,9 @@
  entry: ['./DateTime.js'],
  output: {
    path: __dirname + "/dist/",
    path: __dirname + '/dist/',
    library: 'Datetime',
    libraryTarget: 'umd',
    libraryTarget: 'umd'
  },
  resolve: {