Mailspring/packages/client-app/internal_packages/personal-level-indicators/lib/personal-level-icon.jsx

45 lines
1.2 KiB
React
Raw Normal View History

import {React} from 'nylas-exports';
2016-05-12 07:40:03 +08:00
import {RetinaImg} from 'nylas-component-kit';
const StaticEmptyIndicator = (
2016-10-18 08:59:33 +08:00
<div className="personal-level-icon" />
2016-05-12 07:40:03 +08:00
);
export default class PersonalLevelIcon extends React.Component {
// Note: You should assign a new displayName to avoid naming
// conflicts when injecting your item
static displayName = 'PersonalLevelIcon';
static propTypes = {
thread: React.PropTypes.object.isRequired,
};
2016-05-12 07:40:03 +08:00
renderIndicator(level) {
return (
<div className="personal-level-icon">
<RetinaImg
url={`nylas://personal-level-indicators/assets/PLI-Level${level}@2x.png`}
mode={RetinaImg.Mode.ContentDark}
/>
</div>
)
}
// React components' `render` methods return a virtual DOM element to render.
// The returned DOM fragment is a result of the component's `state` and
// `props`. In that sense, `render` methods are deterministic.
render() {
2016-05-12 07:40:03 +08:00
const {thread} = this.props;
const me = thread.participants.find(p => p.isMe());
2016-05-12 07:40:03 +08:00
if (me && thread.participants.length === 2) {
return this.renderIndicator(2);
}
if (me && thread.participants.length > 2) {
return this.renderIndicator(1);
}
return StaticEmptyIndicator;
}
}