mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 07:46:06 +08:00
140 lines
3.7 KiB
JavaScript
140 lines
3.7 KiB
JavaScript
import {
|
|
localized,
|
|
React,
|
|
PropTypes,
|
|
Actions,
|
|
SendActionsStore,
|
|
SoundRegistry,
|
|
} from 'mailspring-exports';
|
|
import { Menu, RetinaImg, ButtonDropdown, ListensToFluxStore } from 'mailspring-component-kit';
|
|
|
|
class SendActionButton extends React.Component {
|
|
static displayName = 'SendActionButton';
|
|
|
|
static containerRequired = false;
|
|
|
|
static propTypes = {
|
|
draft: PropTypes.object,
|
|
isValidDraft: PropTypes.func,
|
|
sendActions: PropTypes.array,
|
|
};
|
|
|
|
/* This component is re-rendered constantly because `draft` changes in random ways.
|
|
We only use the draft prop when you click send, so update with more discretion. */
|
|
shouldComponentUpdate(nextProps) {
|
|
return (
|
|
nextProps.sendActions.map(a => a.configKey).join(',') !==
|
|
this.props.sendActions.map(a => a.configKey).join(',')
|
|
);
|
|
}
|
|
|
|
primarySend() {
|
|
this._onPrimaryClick();
|
|
}
|
|
|
|
_onPrimaryClick = () => {
|
|
this._onSendWithAction(this.props.sendActions[0]);
|
|
};
|
|
|
|
_onSendWithAction = sendAction => {
|
|
if (this.props.isValidDraft()) {
|
|
if (AppEnv.config.get('core.sending.sounds')) {
|
|
SoundRegistry.playSound('hit-send');
|
|
}
|
|
Actions.sendDraft(this.props.draft.headerMessageId, { actionKey: sendAction.configKey });
|
|
}
|
|
};
|
|
|
|
_renderSendActionItem = ({ iconUrl }) => {
|
|
let plusHTML = '';
|
|
let additionalImg = false;
|
|
|
|
if (iconUrl) {
|
|
plusHTML = <span> + </span>;
|
|
additionalImg = <RetinaImg url={iconUrl} mode={RetinaImg.Mode.ContentIsMask} />;
|
|
}
|
|
|
|
return (
|
|
<span>
|
|
<RetinaImg name="icon-composer-send.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
<span className="text">
|
|
{localized(`Send`)}
|
|
{plusHTML}
|
|
</span>
|
|
{additionalImg}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
_renderSingleButton() {
|
|
return (
|
|
<button
|
|
tabIndex={-1}
|
|
className={'btn btn-toolbar btn-normal btn-emphasis btn-text btn-send'}
|
|
style={{ order: -100 }}
|
|
onClick={this._onPrimaryClick}
|
|
>
|
|
{this._renderSendActionItem(this.props.sendActions[0])}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
_renderButtonDropdown() {
|
|
const { sendActions } = this.props;
|
|
const menu = (
|
|
<Menu
|
|
items={sendActions.slice(1)}
|
|
itemKey={actionConfig => actionConfig.configKey}
|
|
itemContent={this._renderSendActionItem}
|
|
onSelect={this._onSendWithAction}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<ButtonDropdown
|
|
className={'btn-send btn-emphasis btn-text'}
|
|
style={{ order: -100 }}
|
|
primaryItem={this._renderSendActionItem(sendActions[0])}
|
|
primaryTitle={sendActions[0].title}
|
|
primaryClick={this._onPrimaryClick}
|
|
closeOnMenuClick
|
|
menu={menu}
|
|
/>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return this.props.sendActions.length === 1
|
|
? this._renderSingleButton()
|
|
: this._renderButtonDropdown();
|
|
}
|
|
}
|
|
|
|
const EnhancedSendActionButton = ListensToFluxStore(SendActionButton, {
|
|
stores: [SendActionsStore],
|
|
getStateFromStores(props) {
|
|
return {
|
|
sendActions: SendActionsStore.orderedSendActionsForDraft(props.draft),
|
|
};
|
|
},
|
|
});
|
|
|
|
// TODO this is a hack so that the send button can still expose
|
|
// the `primarySend` method required by the ComposerView. Ideally, this
|
|
// decorator mechanism should expose whatever instance methods are exposed
|
|
// by the component its wrapping.
|
|
// However, I think the better fix will happen when mail merge lives in its
|
|
// own window and doesn't need to override the Composer's send button, which
|
|
// is already a bit of a hack.
|
|
Object.assign(EnhancedSendActionButton.prototype, {
|
|
primarySend() {
|
|
if (this._composedComponent) {
|
|
this._composedComponent.primarySend();
|
|
}
|
|
},
|
|
});
|
|
|
|
EnhancedSendActionButton.UndecoratedSendActionButton = SendActionButton;
|
|
|
|
export default EnhancedSendActionButton;
|