| | |
| | | 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'; |
| | |
| | | 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); |
| | |
| | | }, |
| | | |
| | | 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'; |
| | |
| | | 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'); |
| | | } |
| | | |
| | |
| | | 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; |
| | |
| | | |
| | | showView: function( view ){ |
| | | var me = this; |
| | | return function( e ){ |
| | | return function(){ |
| | | me.setState({ currentView: view }); |
| | | }; |
| | | }, |
| | |
| | | ; |
| | | 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 ] |
| | | }); |
| | | }; |
| | |
| | | }; |
| | | }, |
| | | |
| | | allowedSetTime: ['hours','minutes','seconds', 'milliseconds'], |
| | | allowedSetTime: ['hours', 'minutes', 'seconds', 'milliseconds'], |
| | | setTime: function( type, value ){ |
| | | var index = this.allowedSetTime.indexOf( type ) + 1, |
| | | state = this.state, |
| | |
| | | date[ nextType ]( date[nextType]() ); |
| | | } |
| | | |
| | | if( !this.props.value ){ |
| | | if ( !this.props.value ){ |
| | | this.setState({ |
| | | selectedDate: date, |
| | | inputValue: date.format( state.inputFormat ) |
| | |
| | | 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(); |
| | | } |
| | |
| | | }, |
| | | |
| | | 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 ); |
| | | } |
| | |
| | | |
| | | 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; |
| | | }, |
| | |
| | | children = [] |
| | | ; |
| | | |
| | | if( this.props.input ){ |
| | | if ( this.props.input ){ |
| | | children = [ DOM.input( assign({ |
| | | key: 'i', |
| | | type:'text', |
| | |
| | | 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( |
| | |
| | | .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 ) ) |
| | |
| | | |
| | | 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 ); |
| | |
| | | 'use strict'; |
| | | |
| | | var React = require('react'), |
| | | moment = require('moment') |
| | | ; |
| | |
| | | |
| | | 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')}, '›')) |
| | |
| | | DOM.tbody({key: 'tb'}, this.renderDays()) |
| | | ]; |
| | | |
| | | if( footer ) |
| | | if ( footer ) |
| | | tableChildren.push( footer ); |
| | | |
| | | return DOM.div({ className: 'rdtDays' }, |
| | |
| | | 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 = { |
| | |
| | | '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 = []; |
| | | } |
| | |
| | | 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; |
| | |
| | | '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')}, '›')) |
| | |
| | | ; |
| | | |
| | | 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 = []; |
| | | } |
| | |
| | | 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; |
| | |
| | | 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'; |
| | | } |
| | | |
| | |
| | | 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; |
| | | } |
| | | } |
| | |
| | | ; |
| | | |
| | | 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'}, |
| | |
| | | ]) |
| | | ); |
| | | }, |
| | | 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; |
| | |
| | | )); |
| | | }, |
| | | onStartClicking: function( action, type ){ |
| | | var me = this, |
| | | update = {}, |
| | | value = this.state[ type ] |
| | | ; |
| | | |
| | | var me = this; |
| | | |
| | | return function(){ |
| | | var update = {}; |
| | |
| | | me.increaseTimer = setInterval( function(){ |
| | | update[ type ] = me[ action ]( type ); |
| | | me.setState( update ); |
| | | },70); |
| | | }, 70); |
| | | }, 500); |
| | | |
| | | me.mouseUpListener = function(){ |
| | |
| | | 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; |
| | | } |
| | |
| | | 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')}, '›')) |
| | |
| | | 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 = []; |
| | | } |
| | |
| | | this.props.updateSelectedDate(event, true); |
| | | }, |
| | | |
| | | renderYear: function( props, year, selectedDate ){ |
| | | renderYear: function( props, year ){ |
| | | return DOM.td( props, year ); |
| | | } |
| | | }); |
| | |
| | | 'use strict'; |
| | | |
| | | // This is extracted from https://github.com/Pomax/react-onclickoutside |
| | | // And modified to support react 0.13 and react 0.14 |
| | | |
| | |
| | | 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 |
| | |
| | | |
| | | 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) { |
| | |
| | | // 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; |
| | |
| | | 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); |
| | |
| | | */ |
| | | enableOnClickOutside: function() { |
| | | var fn = this.__outsideClickHandler; |
| | | document.addEventListener("mousedown", fn); |
| | | document.addEventListener("touchstart", fn); |
| | | document.addEventListener('mousedown', fn); |
| | | document.addEventListener('touchstart', fn); |
| | | }, |
| | | |
| | | /** |
| | |
| | | */ |
| | | disableOnClickOutside: function() { |
| | | var fn = this.__outsideClickHandler; |
| | | document.removeEventListener("mousedown", fn); |
| | | document.removeEventListener("touchstart", fn); |
| | | document.removeEventListener('mousedown', fn); |
| | | document.removeEventListener('touchstart', fn); |
| | | } |
| | | }; |
| | |
| | | entry: ['./DateTime.js'], |
| | | |
| | | output: { |
| | | path: __dirname + "/dist/", |
| | | path: __dirname + '/dist/', |
| | | library: 'Datetime', |
| | | libraryTarget: 'umd', |
| | | libraryTarget: 'umd' |
| | | }, |
| | | |
| | | resolve: { |