| commit | author | age | ||
| d76f7b | 1 | 'use strict'; |
| M | 2 | |
| 11612b | 3 | var React = require('react'), |
| de3fe1 | 4 | createClass = require('create-react-class'), |
| SE | 5 | onClickOutside = require('react-onclickoutside').default; |
| d76f7b | 6 | |
| de3fe1 | 7 | var DateTimePickerYears = onClickOutside( |
| SE | 8 | createClass({ |
| 9 | render: function() { | |
| 10 | var year = parseInt(this.props.viewDate.year() / 10, 10) * 10; | |
| d76f7b | 11 | |
| de3fe1 | 12 | return React.createElement('div', { className: 'rdtYears' }, [ |
| SE | 13 | React.createElement( |
| 14 | 'table', | |
| 15 | { key: 'a' }, | |
| 16 | React.createElement( | |
| 17 | 'thead', | |
| 18 | {}, | |
| 19 | React.createElement('tr', {}, [ | |
| 20 | React.createElement( | |
| 21 | 'th', | |
| 22 | { | |
| 23 | key: 'prev', | |
| 24 | className: 'rdtPrev', | |
| 25 | onClick: this.props.subtractTime(10, 'years') | |
| 26 | }, | |
| 27 | React.createElement('span', {}, '‹') | |
| 28 | ), | |
| 29 | React.createElement( | |
| 30 | 'th', | |
| 31 | { | |
| 32 | key: 'year', | |
| 33 | className: 'rdtSwitch', | |
| 34 | onClick: this.props.showView('years'), | |
| 35 | colSpan: 2 | |
| 36 | }, | |
| 37 | year + '-' + (year + 9) | |
| 38 | ), | |
| 39 | React.createElement( | |
| 40 | 'th', | |
| 41 | { | |
| 42 | key: 'next', | |
| 43 | className: 'rdtNext', | |
| 44 | onClick: this.props.addTime(10, 'years') | |
| 45 | }, | |
| 46 | React.createElement('span', {}, '›') | |
| 47 | ) | |
| 48 | ]) | |
| 49 | ) | |
| 50 | ), | |
| 51 | React.createElement( | |
| 52 | 'table', | |
| 53 | { key: 'years' }, | |
| 54 | React.createElement('tbody', {}, this.renderYears(year)) | |
| 55 | ) | |
| 56 | ]); | |
| 57 | }, | |
| eba92b | 58 | |
| de3fe1 | 59 | renderYears: function(year) { |
| SE | 60 | var years = [], |
| 61 | i = -1, | |
| 62 | rows = [], | |
| 63 | renderer = this.props.renderYear || this.renderYear, | |
| 64 | selectedDate = this.props.selectedDate, | |
| 65 | isValid = this.props.isValidDate || this.alwaysValidDate, | |
| 66 | classes, | |
| 67 | props, | |
| 68 | currentYear, | |
| 69 | isDisabled, | |
| 70 | noOfDaysInYear, | |
| 71 | daysInYear, | |
| 72 | validDay, | |
| 73 | // Month and date are irrelevant here because | |
| 74 | // we're only interested in the year | |
| 75 | irrelevantMonth = 0, | |
| 76 | irrelevantDate = 1; | |
| f0ec5a | 77 | |
| de3fe1 | 78 | year--; |
| SE | 79 | while (i < 11) { |
| 80 | classes = 'rdtYear'; | |
| 81 | currentYear = this.props.viewDate | |
| 82 | .clone() | |
| 83 | .set({ year: year, month: irrelevantMonth, date: irrelevantDate }); | |
| e9db5f | 84 | |
| de3fe1 | 85 | // Not sure what 'rdtOld' is for, commenting out for now as it's not working properly |
| SE | 86 | // if ( i === -1 | i === 10 ) |
| 87 | // classes += ' rdtOld'; | |
| c306f2 | 88 | |
| de3fe1 | 89 | noOfDaysInYear = currentYear.endOf('year').format('DDD'); |
| SE | 90 | daysInYear = Array.from({ length: noOfDaysInYear }, function(e, i) { |
| 91 | return i + 1; | |
| 92 | }); | |
| bdad6c | 93 | |
| de3fe1 | 94 | validDay = daysInYear.find(function(d) { |
| SE | 95 | var day = currentYear.clone().dayOfYear(d); |
| 96 | return isValid(day); | |
| 97 | }); | |
| bdad6c | 98 | |
| de3fe1 | 99 | isDisabled = validDay === undefined; |
| bdad6c | 100 | |
| de3fe1 | 101 | if (isDisabled) classes += ' rdtDisabled'; |
| c306f2 | 102 | |
| de3fe1 | 103 | if (selectedDate && selectedDate.year() === year) |
| SE | 104 | classes += ' rdtActive'; |
| eba92b | 105 | |
| de3fe1 | 106 | props = { |
| SE | 107 | key: year, |
| 108 | 'data-value': year, | |
| 109 | className: classes | |
| 110 | }; | |
| c306f2 | 111 | |
| de3fe1 | 112 | if (!isDisabled) |
| SE | 113 | props.onClick = |
| 114 | this.props.updateOn === 'years' | |
| 115 | ? this.updateSelectedYear | |
| 116 | : this.props.setDate('year'); | |
| eba92b | 117 | |
| de3fe1 | 118 | years.push(renderer(props, year, selectedDate && selectedDate.clone())); |
| eba92b | 119 | |
| de3fe1 | 120 | if (years.length === 4) { |
| SE | 121 | rows.push(React.createElement('tr', { key: i }, years)); |
| 122 | years = []; | |
| 123 | } | |
| eba92b | 124 | |
| de3fe1 | 125 | year++; |
| SE | 126 | i++; |
| 127 | } | |
| eba92b | 128 | |
| de3fe1 | 129 | return rows; |
| SE | 130 | }, |
| eba92b | 131 | |
| de3fe1 | 132 | updateSelectedYear: function(event) { |
| SE | 133 | this.props.updateSelectedDate(event); |
| 134 | }, | |
| f99908 | 135 | |
| de3fe1 | 136 | renderYear: function(props, year) { |
| SE | 137 | return React.createElement('td', props, year); |
| 138 | }, | |
| c306f2 | 139 | |
| de3fe1 | 140 | alwaysValidDate: function() { |
| SE | 141 | return 1; |
| 142 | }, | |
| 11612b | 143 | |
| de3fe1 | 144 | handleClickOutside: function() { |
| SE | 145 | this.props.handleClickOutside(); |
| 146 | } | |
| 147 | }) | |
| 148 | ); | |
| d76f7b | 149 | |
| M | 150 | module.exports = DateTimePickerYears; |
