@ -3,25 +3,34 @@
import React from 'react' ;
import React from 'react' ;
import PropTypes from 'prop-types' ;
import PropTypes from 'prop-types' ;
import { connect } from 'react-redux' ;
import { connect } from 'react-redux' ;
import { defineMessages , injectIntl } from 'react-intl' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import DatePicker from 'react-datepicker' ;
import DatePicker from 'react-datepicker' ;
import 'react-datepicker/dist/react-datepicker.css' ;
import 'react-datepicker/dist/react-datepicker.css' ;
import IconButton from 'soapbox/components/icon_button' ;
import { removeSchedule } from 'soapbox/actions/compose' ;
const messages = defineMessages ( {
const messages = defineMessages ( {
schedule : { id : 'schedule.post_time' , defaultMessage : 'Post Date/Time' } ,
schedule : { id : 'schedule.post_time' , defaultMessage : 'Post Date/Time' } ,
remove : { id : 'schedule.remove' , defaultMessage : 'Remove schedule' } ,
} ) ;
} ) ;
const mapStateToProps = ( state , ownProps ) => ( {
scheduledAt : state . getIn ( [ 'compose' , 'schedule' ] ) ,
} ) ;
export default @ connect ( mapStateToProps )
@ injectIntl
class ScheduleForm extends React . Component {
class ScheduleForm extends React . Component {
static propTypes = {
static propTypes = {
schedule : PropTypes . instanceOf ( Date ) ,
schedule dAt : PropTypes . instanceOf ( Date ) ,
intl : PropTypes . object . isRequired ,
intl : PropTypes . object . isRequired ,
onSchedule : PropTypes . func . isRequired ,
onSchedule : PropTypes . func . isRequired ,
dispatch : PropTypes . func ,
active : PropTypes . bool ,
active : PropTypes . bool ,
} ;
} ;
setSchedule ( date ) {
setSchedule = date => {
this . setState ( { schedule : date } ) ;
this . props . onSchedule ( date ) ;
this . props . onSchedule ( date ) ;
}
}
@ -33,16 +42,6 @@ class ScheduleForm extends React.Component {
datePicker . setOpen ( true ) ;
datePicker . setOpen ( true ) ;
}
}
componentDidMount ( ) {
this . setState ( { schedule : this . props . schedule } ) ;
}
constructor ( props ) {
super ( props ) ;
this . setSchedule = this . setSchedule . bind ( this ) ;
}
isCurrentOrFutureDate ( date ) {
isCurrentOrFutureDate ( date ) {
return date && new Date ( ) . setHours ( 0 , 0 , 0 , 0 ) <= new Date ( date ) . setHours ( 0 , 0 , 0 , 0 ) ;
return date && new Date ( ) . setHours ( 0 , 0 , 0 , 0 ) <= new Date ( date ) . setHours ( 0 , 0 , 0 , 0 ) ;
}
}
@ -54,33 +53,42 @@ class ScheduleForm extends React.Component {
return fiveMinutesFromNow . getTime ( ) < selectedDate . getTime ( ) ;
return fiveMinutesFromNow . getTime ( ) < selectedDate . getTime ( ) ;
} ;
} ;
handleRemove = e => {
this . props . dispatch ( removeSchedule ( ) ) ;
e . preventDefault ( ) ;
}
render ( ) {
render ( ) {
if ( ! this . props . active || ! this . state ) {
if ( ! this . props . active ) {
return null ;
return null ;
}
}
const { schedule } = this . state ;
const { intl, scheduledAt } = this . prop s;
return (
return (
< DatePicker
< div className = 'datepicker' >
selected = { schedule }
< div className = 'datepicker__hint' >
showTimeSelect
< FormattedMessage id = 'datepicker.hint' defaultMessage = 'Scheduled to post at…' / >
dateFormat = 'MMMM d, yyyy h:mm aa'
< / d i v >
timeIntervals = { 15 }
< div className = 'datepicker__input' >
wrapperClassName = 'react-datepicker-wrapper'
< DatePicker
onChange = { this . setSchedule }
selected = { scheduledAt }
placeholderText = { this . props . intl . formatMessage ( messages . schedule ) }
showTimeSelect
filterDate = { this . isCurrentOrFutureDate }
dateFormat = 'MMMM d, yyyy h:mm aa'
filterTime = { this . isFiveMinutesFromNow }
timeIntervals = { 15 }
ref = { this . isCurrentOrFutureDate ( schedule ) ? null : this . openDatePicker }
wrapperClassName = 'react-datepicker-wrapper'
/ >
onChange = { this . setSchedule }
placeholderText = { this . props . intl . formatMessage ( messages . schedule ) }
filterDate = { this . isCurrentOrFutureDate }
filterTime = { this . isFiveMinutesFromNow }
ref = { this . isCurrentOrFutureDate ( scheduledAt ) ? null : this . openDatePicker }
/ >
< div className = 'datepicker__cancel' >
< IconButton size = { 20 } title = { intl . formatMessage ( messages . remove ) } icon = 'times' onClick = { this . handleRemove } / >
< / d i v >
< / d i v >
< / d i v >
) ;
) ;
}
}
}
}
const mapStateToProps = ( state , ownProps ) => ( {
schedule : state . getIn ( [ 'compose' , 'schedule' ] ) ,
} ) ;
export default injectIntl ( connect ( mapStateToProps ) ( ScheduleForm ) ) ;