| commit | author | age | ||
| caf7fe | 1 | /* eslint-disable */ |
| d76f7b | 2 | 'use strict'; |
| M | 3 | |
| bc8e0f | 4 | var React = require('react'), |
| cf3d92 | 5 | createClass = require('create-react-class'), |
| 11612b | 6 | assign = require('object-assign'), |
| 39b827 | 7 | onClickOutside = require('react-onclickoutside').default |
| cf3d92 | 8 | ; |
| d76f7b | 9 | |
| 84755c | 10 | var DateTimePickerTime = onClickOutside( createClass({ |
| cf1e72 | 11 | getInitialState: function() { |
| c658ad | 12 | return this.calculateState( this.props ); |
| M | 13 | }, |
| f0ec5a | 14 | |
| cf1e72 | 15 | calculateState: function( props ) { |
| 62fd2f | 16 | var date = props.selectedDate || props.viewDate, |
| c658ad | 17 | format = props.timeFormat, |
| d76f7b | 18 | counters = [] |
| cf3d92 | 19 | ; |
| d76f7b | 20 | |
| cf1e72 | 21 | if ( format.toLowerCase().indexOf('h') !== -1 ) { |
| d76f7b | 22 | counters.push('hours'); |
| cf1e72 | 23 | if ( format.indexOf('m') !== -1 ) { |
| d76f7b | 24 | counters.push('minutes'); |
| cf1e72 | 25 | if ( format.indexOf('s') !== -1 ) { |
| d76f7b | 26 | counters.push('seconds'); |
| M | 27 | } |
| 28 | } | |
| 29 | } | |
| 30 | ||
| f7c600 | 31 | var hours = date.format( 'H' ); |
| 99929e | 32 | |
| fa70cd | 33 | var daypart = false; |
| f0ec5a | 34 | if ( this.state !== null && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) { |
| SE | 35 | if ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) { |
| f7c600 | 36 | daypart = ( hours >= 12 ) ? 'PM' : 'AM'; |
| cf1e72 | 37 | } else { |
| f7c600 | 38 | daypart = ( hours >= 12 ) ? 'pm' : 'am'; |
| cf1e72 | 39 | } |
| a17593 | 40 | } |
| MK | 41 | |
| d76f7b | 42 | return { |
| f7c600 | 43 | hours: hours, |
| f0ec5a | 44 | minutes: date.format( 'mm' ), |
| SE | 45 | seconds: date.format( 'ss' ), |
| 46 | milliseconds: date.format( 'SSS' ), | |
| a17593 | 47 | daypart: daypart, |
| d76f7b | 48 | counters: counters |
| M | 49 | }; |
| 50 | }, | |
| 1a0429 | 51 | |
| f0ec5a | 52 | renderCounter: function( type ) { |
| SE | 53 | if ( type !== 'daypart' ) { |
| 54 | var value = this.state[ type ]; | |
| 55 | if ( type === 'hours' && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) { | |
| 56 | value = ( value - 1 ) % 12 + 1; | |
| 57 | ||
| 58 | if ( value === 0 ) { | |
| 7c7053 | 59 | value = 12; |
| ER | 60 | } |
| a17593 | 61 | } |
| a50b2e | 62 | return React.createElement('div', { key: type, className: 'rdtCounter' }, [ |
| 26446a | 63 | React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ), onContextMenu: this.disableContextMenu }, '▲' ), |
| a50b2e | 64 | React.createElement('div', { key: 'c', className: 'rdtCount' }, value ), |
| 26446a | 65 | React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ), onContextMenu: this.disableContextMenu }, '▼' ) |
| a17593 | 66 | ]); |
| MK | 67 | } |
| 68 | return ''; | |
| d76f7b | 69 | }, |
| f0ec5a | 70 | |
| 3bf154 | 71 | renderDayPart: function() { |
| a50b2e | 72 | return React.createElement('div', { key: 'dayPart', className: 'rdtCounter' }, [ |
| 26446a | 73 | React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▲' ), |
| a50b2e | 74 | React.createElement('div', { key: this.state.daypart, className: 'rdtCount' }, this.state.daypart ), |
| 26446a | 75 | React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▼' ) |
| 3bf154 | 76 | ]); |
| DF | 77 | }, |
| f0ec5a | 78 | |
| d76f7b | 79 | render: function() { |
| M | 80 | var me = this, |
| 81 | counters = [] | |
| 82 | ; | |
| 83 | ||
| f0ec5a | 84 | this.state.counters.forEach( function( c ) { |
| 462115 | 85 | if ( counters.length ) |
| a50b2e | 86 | counters.push( React.createElement('div', { key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ) ); |
| d76f7b | 87 | counters.push( me.renderCounter( c ) ); |
| M | 88 | }); |
| a17593 | 89 | |
| f0ec5a | 90 | if ( this.state.daypart !== false ) { |
| 3bf154 | 91 | counters.push( me.renderDayPart() ); |
| a17593 | 92 | } |
| MK | 93 | |
| f0ec5a | 94 | if ( this.state.counters.length === 3 && this.props.timeFormat.indexOf( 'S' ) !== -1 ) { |
| a50b2e | 95 | counters.push( React.createElement('div', { className: 'rdtCounterSeparator', key: 'sep5' }, ':' ) ); |
| d76f7b | 96 | counters.push( |
| a50b2e | 97 | React.createElement('div', { className: 'rdtCounter rdtMilli', key: 'm' }, |
| GL | 98 | React.createElement('input', { value: this.state.milliseconds, type: 'text', onChange: this.updateMilli } ) |
| d76f7b | 99 | ) |
| M | 100 | ); |
| 101 | } | |
| 102 | ||
| a50b2e | 103 | return React.createElement('div', { className: 'rdtTime' }, |
| GL | 104 | React.createElement('table', {}, [ |
| a3a33b | 105 | this.renderHeader(), |
| a50b2e | 106 | React.createElement('tbody', { key: 'b'}, React.createElement('tr', {}, React.createElement('td', {}, |
| GL | 107 | React.createElement('div', { className: 'rdtCounters' }, counters ) |
| a3a33b | 108 | ))) |
| M | 109 | ]) |
| d76f7b | 110 | ); |
| c658ad | 111 | }, |
| f0ec5a | 112 | |
| bc8e0f | 113 | componentWillMount: function() { |
| LG | 114 | var me = this; |
| 9c55be | 115 | me.timeConstraints = { |
| AG | 116 | hours: { |
| 117 | min: 0, | |
| 118 | max: 23, | |
| 119 | step: 1 | |
| 120 | }, | |
| 121 | minutes: { | |
| 122 | min: 0, | |
| 123 | max: 59, | |
| 124 | step: 1 | |
| 125 | }, | |
| 126 | seconds: { | |
| 127 | min: 0, | |
| 128 | max: 59, | |
| cf1e72 | 129 | step: 1 |
| 9c55be | 130 | }, |
| AG | 131 | milliseconds: { |
| 132 | min: 0, | |
| 133 | max: 999, | |
| 134 | step: 1 | |
| 135 | } | |
| 136 | }; | |
| f0ec5a | 137 | ['hours', 'minutes', 'seconds', 'milliseconds'].forEach( function( type ) { |
| cf1e72 | 138 | assign(me.timeConstraints[ type ], me.props.timeConstraints[ type ]); |
| bc8e0f | 139 | }); |
| 79e319 | 140 | this.setState( this.calculateState( this.props ) ); |
| bc8e0f | 141 | }, |
| f0ec5a | 142 | |
| cf1e72 | 143 | componentWillReceiveProps: function( nextProps ) { |
| c658ad | 144 | this.setState( this.calculateState( nextProps ) ); |
| d76f7b | 145 | }, |
| f0ec5a | 146 | |
| cf1e72 | 147 | updateMilli: function( e ) { |
| 462115 | 148 | var milli = parseInt( e.target.value, 10 ); |
| cf1e72 | 149 | if ( milli === e.target.value && milli >= 0 && milli < 1000 ) { |
| d76f7b | 150 | this.props.setTime( 'milliseconds', milli ); |
| cf1e72 | 151 | this.setState( { milliseconds: milli } ); |
| d76f7b | 152 | } |
| M | 153 | }, |
| f0ec5a | 154 | |
| cf1e72 | 155 | renderHeader: function() { |
| 462115 | 156 | if ( !this.props.dateFormat ) |
| 49a27b | 157 | return null; |
| d76f7b | 158 | |
| 62fd2f | 159 | var date = this.props.selectedDate || this.props.viewDate; |
| a50b2e | 160 | return React.createElement('thead', { key: 'h' }, React.createElement('tr', {}, |
| 99929e | 161 | React.createElement('th', { className: 'rdtSwitch', colspan: 4, onClick: this.props.showView( 'days' ) }, date.format( this.props.dateFormat ) ) |
| d76f7b | 162 | )); |
| M | 163 | }, |
| f0ec5a | 164 | |
| cf1e72 | 165 | onStartClicking: function( action, type ) { |
| 462115 | 166 | var me = this; |
| 59314a | 167 | |
| cf1e72 | 168 | return function() { |
| d76f7b | 169 | var update = {}; |
| M | 170 | update[ type ] = me[ action ]( type ); |
| 171 | me.setState( update ); | |
| 172 | ||
| cf1e72 | 173 | me.timer = setTimeout( function() { |
| SE | 174 | me.increaseTimer = setInterval( function() { |
| d76f7b | 175 | update[ type ] = me[ action ]( type ); |
| M | 176 | me.setState( update ); |
| 462115 | 177 | }, 70); |
| d76f7b | 178 | }, 500); |
| M | 179 | |
| cf1e72 | 180 | me.mouseUpListener = function() { |
| d76f7b | 181 | clearTimeout( me.timer ); |
| M | 182 | clearInterval( me.increaseTimer ); |
| 183 | me.props.setTime( type, me.state[ type ] ); | |
| f0ec5a | 184 | document.body.removeEventListener( 'mouseup', me.mouseUpListener ); |
| de2052 | 185 | document.body.removeEventListener( 'touchend', me.mouseUpListener ); |
| 4e9d38 | 186 | }; |
| M | 187 | |
| f0ec5a | 188 | document.body.addEventListener( 'mouseup', me.mouseUpListener ); |
| de2052 | 189 | document.body.addEventListener( 'touchend', me.mouseUpListener ); |
| d76f7b | 190 | }; |
| 0b3475 | 191 | }, |
| f0ec5a | 192 | |
| a8de69 | 193 | disableContextMenu: function( event ) { |
| SE | 194 | event.preventDefault(); |
| 195 | return false; | |
| 196 | }, | |
| 197 | ||
| 0b3475 | 198 | padValues: { |
| LG | 199 | hours: 1, |
| 200 | minutes: 2, | |
| 201 | seconds: 2, | |
| 202 | milliseconds: 3 | |
| d76f7b | 203 | }, |
| f0ec5a | 204 | |
| cf1e72 | 205 | toggleDayPart: function( type ) { // type is always 'hours' |
| f0ec5a | 206 | var value = parseInt( this.state[ type ], 10) + 12; |
| 0b3475 | 207 | if ( value > this.timeConstraints[ type ].max ) |
| cf1e72 | 208 | value = this.timeConstraints[ type ].min + ( value - ( this.timeConstraints[ type ].max + 1 ) ); |
| d76f7b | 209 | return this.pad( type, value ); |
| M | 210 | }, |
| f0ec5a | 211 | |
| SE | 212 | increase: function( type ) { |
| 213 | var value = parseInt( this.state[ type ], 10) + this.timeConstraints[ type ].step; | |
| 214 | if ( value > this.timeConstraints[ type ].max ) | |
| 215 | value = this.timeConstraints[ type ].min + ( value - ( this.timeConstraints[ type ].max + 1 ) ); | |
| 216 | return this.pad( type, value ); | |
| 217 | }, | |
| 218 | ||
| cf1e72 | 219 | decrease: function( type ) { |
| f0ec5a | 220 | var value = parseInt( this.state[ type ], 10) - this.timeConstraints[ type ].step; |
| 0b3475 | 221 | if ( value < this.timeConstraints[ type ].min ) |
| 4ed404 | 222 | value = this.timeConstraints[ type ].max + 1 - ( this.timeConstraints[ type ].min - value ); |
| d76f7b | 223 | return this.pad( type, value ); |
| M | 224 | }, |
| f0ec5a | 225 | |
| cf1e72 | 226 | pad: function( type, value ) { |
| d76f7b | 227 | var str = value + ''; |
| 462115 | 228 | while ( str.length < this.padValues[ type ] ) |
| d76f7b | 229 | str = '0' + str; |
| M | 230 | return str; |
| 11612b | 231 | }, |
| JM | 232 | |
| cf3d92 | 233 | handleClickOutside: function() { |
| SE | 234 | this.props.handleClickOutside(); |
| 235 | } | |
| 11612b | 236 | })); |
| d76f7b | 237 | |
| M | 238 | module.exports = DateTimePickerTime; |
| caf7fe | 239 | /* eslint-enable */ |
