view | history | commit | commitdiff
Anna Kurylo
2018-10-16 caf7fe1a309d8da984b077ff3c49d59a1c751065
commit | author | age
caf7fe 1 /* eslint-disable */
d76f7b 2 'use strict';
M 3
11612b 4 var React = require('react'),
cf3d92 5     createClass = require('create-react-class'),
39b827 6     onClickOutside = require('react-onclickoutside').default
cf3d92 7     ;
d76f7b 8
84755c 9 var DateTimePickerMonths = onClickOutside( createClass({
eba92b 10     render: function() {
a50b2e 11         return React.createElement('div', { className: 'rdtMonths' }, [
GL 12             React.createElement('table', { key: 'a' }, React.createElement('thead', {}, React.createElement('tr', {}, [
13                 React.createElement('th', { key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'years' )}, React.createElement('span', {}, '‹' )),
99929e 14                 React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colspan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ),
a50b2e 15                 React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 1, 'years' )}, React.createElement('span', {}, '›' ))
eba92b 16             ]))),
a50b2e 17             React.createElement('table', { key: 'months' }, React.createElement('tbody', { key: 'b' }, this.renderMonths()))
eba92b 18         ]);
M 19     },
20
d76f7b 21     renderMonths: function() {
c37f80 22         var date = this.props.selectedDate,
62fd2f 23             month = this.props.viewDate.month(),
eba92b 24             year = this.props.viewDate.year(),
d76f7b 25             rows = [],
M 26             i = 0,
27             months = [],
eba92b 28             renderer = this.props.renderMonth || this.renderMonth,
bdad6c 29             isValid = this.props.isValidDate || this.alwaysValidDate,
f0ec5a 30             classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay,
SE 31             // Date is irrelevant because we're only interested in month
32             irrelevantDate = 1
cf3d92 33             ;
d76f7b 34
M 35         while (i < 12) {
462115 36             classes = 'rdtMonth';
b8112d 37             currentMonth =
bdad6c 38                 this.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate });
c306f2 39
bdad6c 40             noOfDaysInMonth = currentMonth.endOf( 'month' ).format( 'D' );
SE 41             daysInMonth = Array.from({ length: noOfDaysInMonth }, function( e, i ) {
42                 return i + 1;
43             });
44
45             validDay = daysInMonth.find(function( d ) {
46                 var day = currentMonth.clone().set( 'date', d );
47                 return isValid( day );
48             });
49
50             isDisabled = ( validDay === undefined );
51
52             if ( isDisabled )
c306f2 53                 classes += ' rdtDisabled';
R 54
c987d1 55             if ( date && i === date.month() && year === date.year() )
462115 56                 classes += ' rdtActive';
d76f7b 57
eba92b 58             props = {
M 59                 key: i,
60                 'data-value': i,
c306f2 61                 className: classes
eba92b 62             };
c306f2 63
bdad6c 64             if ( !isDisabled )
SE 65                 props.onClick = ( this.props.updateOn === 'months' ?
f0ec5a 66                     this.updateSelectedMonth : this.props.setDate( 'month' ) );
eba92b 67
f0ec5a 68             months.push( renderer( props, i, year, date && date.clone() ) );
eba92b 69
bdad6c 70             if ( months.length === 4 ) {
a50b2e 71                 rows.push( React.createElement('tr', { key: month + '_' + rows.length }, months ) );
d76f7b 72                 months = [];
M 73             }
74
75             i++;
76         }
77
78         return rows;
79     },
80
f99908 81     updateSelectedMonth: function( event ) {
11612b 82         this.props.updateSelectedDate( event );
f99908 83     },
SA 84
462115 85     renderMonth: function( props, month ) {
98310d 86         var localMoment = this.props.viewDate;
f0ec5a 87         var monthStr = localMoment.localeData().monthsShort( localMoment.month( month ) );
98310d 88         var strLength = 3;
SE 89         // Because some months are up to 5 characters long, we want to
90         // use a fixed string length for consistency
f0ec5a 91         var monthStrFixedLength = monthStr.substring( 0, strLength );
a50b2e 92         return React.createElement('td', props, capitalize( monthStrFixedLength ) );
c306f2 93     },
b8112d 94
bdad6c 95     alwaysValidDate: function() {
c306f2 96         return 1;
11612b 97     },
JM 98
cf3d92 99     handleClickOutside: function() {
SE 100         this.props.handleClickOutside();
101     }
11612b 102 }));
d76f7b 103
f0ec5a 104 function capitalize( str ) {
SE 105     return str.charAt( 0 ).toUpperCase() + str.slice( 1 );
ce7cf5 106 }
GK 107
d76f7b 108 module.exports = DateTimePickerMonths;
caf7fe 109 /* eslint-enable */