Personal Level Icon

¶

Personal Level Icon

Show an icon for each thread to indicate whether you’re the only recipient, one of many recipients, or a member of a mailing list.

Access core components by requiring mailspring-exports.

{Utils, DraftStore, React} = require 'mailspring-exports'

Access N1 React components by requiring mailspring-component-kit.

{RetinaImg} = require 'mailspring-component-kit'

class PersonalLevelIcon extends React.Component

¶

Note: You should assign a new displayName to avoid naming conflicts when injecting your item
```
  @displayName: 'PersonalLevelIcon'
```

In the constructor, we’re setting the component’s initial state.

  constructor: (@props) ->
    @state =
      level: @_calculateLevel(@props.thread)

¶

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: =>
    React.createElement("div", {"className": "personal-level-icon"},
      (@_renderIcon())
    )
```

Some application logic which is specific to this package to decide which character to render.

  _renderIcon: =>
    switch @state.level
      when 0 then ""
      when 1 then "\u3009"
      when 2 then "\u300b"
      when 3 then "\u21ba"

Some more application logic which is specific to this package to decide what level of personalness is related to the thread.

  _calculateLevel: (thread) =>
    hasMe = (thread.participants.filter (p) -> p.isMe()).length > 0
    numOthers = thread.participants.length - hasMe
    if not hasMe
      return 0
    if numOthers > 1
      return 1
    if numOthers is 1
      return 2
    else
      return 3

module.exports = PersonalLevelIcon