Simon Egersand
2016-11-15 b8112dd738d1e6257891483c3a74f0340c008b4e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
'use strict';
 
var React = require('react');
 
var DOM = React.DOM;
var DateTimePickerYears = React.createClass({
    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({}, [
                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')}, '›'))
                ]))),
            DOM.table({ key: 'years'}, DOM.tbody({}, this.renderYears( year )))
        ]);
    },
 
    renderYears: function( year ) {
        var years = [],
            i = -1,
            rows = [],
            renderer = this.props.renderYear || this.renderYear,
            selectedDate = this.props.selectedDate,
            isValid = this.props.isValidDate || this.isValidDate,
            classes, props
        ;
 
        year--;
        var currentYear, disabled,
            // Month and date are irrelevant here because
            // we're only really interested in the year
            irrelevantMonth = 1,
            irrelevantDate = 1;
        while (i < 11) {
            classes = 'rdtYear';
            currentYear = this.props.viewDate.clone().set(
                { year: year, month: irrelevantMonth, date: irrelevantDate });
            if ( i === -1 | i === 10 )
                classes += ' rdtOld';
 
            disabled = !isValid(currentYear);
            if ( disabled )
                classes += ' rdtDisabled';
 
            if ( selectedDate && selectedDate.year() === year )
                classes += ' rdtActive';
 
            props = {
                key: year,
                'data-value': year,
                className: classes
            };
 
            if ( !disabled )
                props.onClick = this.props.updateOn === 'years' ? this.updateSelectedYear : this.props.setDate('year');
 
            years.push( renderer( props, year, selectedDate && selectedDate.clone() ));
 
            if ( years.length === 4 ){
                rows.push( DOM.tr({ key: i }, years ) );
                years = [];
            }
 
            year++;
            i++;
        }
 
        return rows;
    },
 
    updateSelectedYear: function( event ) {
        this.props.updateSelectedDate(event, true);
    },
 
    renderYear: function( props, year ){
        return DOM.td( props, year );
    },
 
    isValidDate: function(){
        return 1;
    }
});
 
module.exports = DateTimePickerYears;