packages/client-app/internal_packages/personal-level-indicators/docs/personal-level-icon.html
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 nylas-exports.
{Utils, DraftStore, React} =require'nylas-exports'
Access N1 React components by requiring nylas-component-kit.
{RetinaImg} =require'nylas-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:=\>[email protected]""when1then"\u3009"when2then"\u300b"when3then"\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