Mailspring/internal_packages/send-later/lib/send-later-button.jsx

111 lines
3.2 KiB
React
Raw Normal View History

/** @babel */
import Rx from 'rx-lite'
import React, {Component, PropTypes} from 'react'
import {Actions, DateUtils, Message, DatabaseStore} from 'nylas-exports'
import {RetinaImg} from 'nylas-component-kit'
import SendLaterPopover from './send-later-popover'
import SendLaterActions from './send-later-actions'
import {PLUGIN_ID} from './send-later-constants'
class SendLaterButton extends Component {
static displayName = 'SendLaterButton';
static propTypes = {
draftClientId: PropTypes.string.isRequired,
};
constructor() {
super()
this.state = {
scheduledDate: null,
}
}
componentDidMount() {
this._subscription = Rx.Observable.fromQuery(
DatabaseStore.findBy(Message, {clientId: this.props.draftClientId})
).subscribe(this.onMessageChanged);
}
componentWillUnmount() {
this._subscription.dispose();
}
onSendLater = (formattedDate, dateLabel)=> {
SendLaterActions.sendLater(this.props.draftClientId, formattedDate, dateLabel);
this.setState({scheduledDate: 'saving'});
Actions.closePopover()
};
onCancelSendLater = ()=> {
SendLaterActions.cancelSendLater(this.props.draftClientId);
Actions.closePopover()
};
onClick = ()=> {
const buttonRect = React.findDOMNode(this).getBoundingClientRect()
Actions.openPopover(
<SendLaterPopover
scheduledDate={this.state.scheduledDate}
onSendLater={this.onSendLater}
onCancelSendLater={this.onCancelSendLater} />,
{originRect: buttonRect, direction: 'up'}
)
};
onMessageChanged = (message)=> {
if (!message) return;
const messageMetadata = message.metadataForPluginId(PLUGIN_ID) || {}
const nextScheduledDate = messageMetadata.sendLaterDate
if (nextScheduledDate !== this.state.scheduledDate) {
const isComposer = NylasEnv.isComposerWindow()
const isFinishedSelecting = ((this.state.scheduledDate === 'saving') && (nextScheduledDate !== null));
if (isComposer && isFinishedSelecting) {
NylasEnv.close();
}
this.setState({scheduledDate: nextScheduledDate});
}
};
render() {
const {scheduledDate} = this.state;
let className = 'btn btn-toolbar btn-send-later';
if (scheduledDate === 'saving') {
return (
<button className={className} title="Saving send date...">
<RetinaImg
name="inline-loading-spinner.gif"
mode={RetinaImg.Mode.ContentDark}
style={{width: 14, height: 14}}/>
</button>
);
}
let dateInterpretation;
if (scheduledDate) {
className += ' btn-enabled';
const momentDate = DateUtils.futureDateFromString(scheduledDate);
if (momentDate) {
dateInterpretation = <span className="at">Sending in {momentDate.fromNow(true)}</span>;
}
}
return (
<button className={className} title="Send later…" onClick={this.onClick}>
<RetinaImg name="icon-composer-sendlater.png" mode={RetinaImg.Mode.ContentIsMask}/>
{dateInterpretation}
<span>&nbsp;</span>
<RetinaImg name="icon-composer-dropdown.png" mode={RetinaImg.Mode.ContentIsMask}/>
</button>
);
}
}
SendLaterButton.containerStyles = {
order: -99,
};
export default SendLaterButton;