/** @babel */ import Rx from 'rx-lite' import React, {Component, PropTypes} from 'react' import {DateUtils, Message, DatabaseStore} from 'nylas-exports' import {Popover, RetinaImg, Menu} from 'nylas-component-kit' import SendLaterActions from './send-later-actions' import SendLaterStore from './send-later-store' import {DATE_FORMAT_SHORT, DATE_FORMAT_LONG} from './send-later-constants' const SendLaterOptions = { 'In 1 hour': DateUtils.in1Hour, 'In 2 hours': DateUtils.in2Hours, 'Later Today': DateUtils.laterToday, 'Tomorrow Morning': DateUtils.tomorrow, 'Tomorrow Evening': DateUtils.tomorrowEvening, 'This Weekend': DateUtils.thisWeekend, 'Next Week': DateUtils.nextWeek, } class SendLaterPopover extends Component { static displayName = 'SendLaterPopover'; static propTypes = { draftClientId: PropTypes.string.isRequired, }; constructor(props) { super(props) this.state = { inputDate: null, scheduledDate: null, } } componentDidMount() { this._subscription = Rx.Observable.fromQuery( DatabaseStore.findBy(Message, {clientId: this.props.draftClientId}) ).subscribe((draft)=> { const nextScheduledDate = SendLaterStore.getScheduledDateForMessage(draft); if (nextScheduledDate !== this.state.scheduledDate) { const isPopout = (NylasEnv.getWindowType() === "composer"); const isFinishedSelecting = ((this.state.scheduledDate === 'saving') && (nextScheduledDate !== null)); if (isPopout && isFinishedSelecting) { NylasEnv.close(); } this.setState({scheduledDate: nextScheduledDate}); } }); } componentWillUnmount() { this._subscription.dispose(); } onSelectMenuOption = (optionKey)=> { const date = SendLaterOptions[optionKey](); this.onSelectDate(date); }; onSelectCustomOption = (value)=> { const date = DateUtils.futureDateFromString(value); if (date) { this.onSelectDate(date); } else { NylasEnv.showErrorDialog(`Sorry, we can't parse ${value} as a valid date.`); } } onSelectDate = (date)=> { const formatted = DateUtils.format(date.utc()); SendLaterActions.sendLater(this.props.draftClientId, formatted); this.setState({scheduledDate: 'saving', inputDate: null}); this.refs.popover.close(); } onCancelSendLater = ()=> { SendLaterActions.cancelSendLater(this.props.draftClientId); this.setState({inputDate: null}); this.refs.popover.close(); }; renderCustomTimeSection() { const onChange = (event)=> { this.setState({inputDate: DateUtils.futureDateFromString(event.target.value)}); } const onKeyDown = (event)=> { // we need to swallow these events so they don't reach the menu // containing the text input, but only when you've typed something. const val = event.target.value; if ((val.length > 0) && ((event.keyCode === 13) || (event.keyCode === 39))) { this.onSelectCustomOption(val); event.stopPropagation(); } }; let dateInterpretation = false; if (this.state.inputDate) { dateInterpretation = ( {DateUtils.format(this.state.inputDate, DATE_FORMAT_LONG)} ); } return (
{dateInterpretation}
) } renderMenuOption(optionKey) { const date = SendLaterOptions[optionKey](); const formatted = DateUtils.format(date, DATE_FORMAT_SHORT); return (
{optionKey}{formatted}
); } renderButton() { const {scheduledDate} = this.state; let className = 'btn btn-toolbar btn-send-later'; if (scheduledDate === 'saving') { return ( ); } let dateInterpretation = false; if (scheduledDate) { className += ' btn-enabled'; const momentDate = DateUtils.futureDateFromString(scheduledDate); if (momentDate) { dateInterpretation = Sending in {momentDate.fromNow(true)}; } } return ( ); } render() { const footerComponents = [
, this.renderCustomTimeSection(), ]; if (this.state.scheduledDate) { footerComponents.push(
) footerComponents.push(
) } return ( item } itemContent={this.renderMenuOption} defaultSelectedIndex={-1} footerComponents={footerComponents} onSelect={this.onSelectMenuOption} /> ); } } SendLaterPopover.containerStyles = { order: -99, }; export default SendLaterPopover