Mailspring/app/internal_packages/thread-list/lib/thread-list-icon.tsx
Ben Gotow 149b389508
Replace Babel with TypeScript compiler, switch entire app to TypeScript 🎉 (#1404)
* Switch to using Typescript instead of Babel

* Switch all es6 / jsx file extensions to ts / tsx

* Convert Utils to a TS module from module.exports style module

* Move everything from module.exports to typescript exports

* Define .d.ts files for mailspring-exports and component kit… Yes it seems this is the best option :(

* Load up on those @types

* Synthesize TS types from PropTypes for standard components

* Add types to Model classes and move constructor constants to instance vars

* 9800 => 7700 TS errors

* 7700 => 5600 TS errors

* 5600 => 5330 TS errors

* 5330 => 4866 TS errors

* 4866 => 4426 TS errors

* 4426 => 2411 TS errors

* 2411 > 1598 TS errors

* 1598 > 769 TS errors

* 769 > 129 TS errors

* 129 > 22 TS errors

* Fix runtime errors

* More runtime error fixes

* Remove support for custom .es6 file extension

* Remove a few odd remaining references to Nylas

* Don’t ship Typescript support in the compiled app for now

* Fix issues in compiled app - module resolution in TS is case sensitive?

* README updates

* Fix a few more TS errors

* Make “No Signature” option clickable + selectable

* Remove flicker when saving file and reloading keymaps

* Fix mail rule item height in preferences

* Fix missing spacing in thread sharing popover

* Fix scrollbar ticks being nested incorrectly

* Add Japanese as a manually reviewed language

* Prevent the thread list from “sticking”

* Re-use Sheet when switching root tabs, prevent sidebar from resetting

* Ensure specs run

* Update package configuration to avoid shpping types

* Turn eslint back on - we will opt-in to the TS rules one by one
2019-03-04 11:03:12 -08:00

86 lines
2.3 KiB
TypeScript

import React from 'react';
import { localized, PropTypes, Actions, TaskFactory, ExtensionRegistry } from 'mailspring-exports';
import { ThreadWithMessagesMetadata } from './types';
class ThreadListIcon extends React.Component<{ thread: ThreadWithMessagesMetadata }> {
static displayName = 'ThreadListIcon';
static propTypes = { thread: PropTypes.object };
_extensionsIconClassNames = () => {
return ExtensionRegistry.ThreadList.extensions()
.filter(ext => ext.cssClassNamesForThreadListIcon != null)
.reduce((prev, ext) => prev + ' ' + ext.cssClassNamesForThreadListIcon(this.props.thread), '')
.trim();
};
_iconClassNames = () => {
if (!this.props.thread) {
return 'thread-icon-star-on-hover';
}
const extensionIconClassNames = this._extensionsIconClassNames();
if (extensionIconClassNames.length > 0) {
return extensionIconClassNames;
}
if (this.props.thread.starred) {
return 'thread-icon-star';
}
if (this.props.thread.unread) {
return 'thread-icon-unread thread-icon-star-on-hover';
}
const msgs = this._nonDraftMessages();
const last = msgs[msgs.length - 1];
if (msgs.length > 1 && (last.from[0] != null ? last.from[0].isMe() : undefined)) {
if (last.isForwarded()) {
return 'thread-icon-forwarded thread-icon-star-on-hover';
} else {
return 'thread-icon-replied thread-icon-star-on-hover';
}
}
return 'thread-icon-none thread-icon-star-on-hover';
};
_nonDraftMessages() {
let msgs = this.props.thread.__messages;
if (!msgs || !(msgs instanceof Array)) {
return [];
}
msgs = msgs.filter(m => m.id && !m.draft);
return msgs;
}
shouldComponentUpdate(nextProps) {
if (nextProps.thread === this.props.thread) {
return false;
}
return true;
}
render() {
return (
<div
className={`thread-icon ${this._iconClassNames()}`}
title={localized('Star')}
onClick={this._onToggleStar}
/>
);
}
_onToggleStar = event => {
Actions.queueTask(
TaskFactory.taskForInvertingStarred({
threads: [this.props.thread],
source: 'Thread List Icon',
})
);
// Don't trigger the thread row click
return event.stopPropagation();
};
}
export default ThreadListIcon;