Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-11-15 06:06:35 +08:00
Code Issues Projects Releases Packages Wiki Activity
Mailspring/app/internal_packages/personal-level-indicators/docs/personal-level-icon.html

172 lines
7.6 KiB
HTML
Raw Normal View History

add personal level indicators example package
2015-10-03 08:42:52 +08:00
<!DOCTYPE html>
<html>
<head>
<title>Personal Level Icon</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">&#182;</a>
</div>
<h1 id="personal-level-icon">Personal Level Icon</h1>
<p>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.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
Rename nylas-component-kit, nylas-exports, nylas-store, nylas-observables
2017-09-27 02:42:18 +08:00
<p>Access core components by requiring <code>mailspring-exports</code>.</p>
add personal level indicators example package
2015-10-03 08:42:52 +08:00
</div>
Rename nylas-component-kit, nylas-exports, nylas-store, nylas-observables
2017-09-27 02:42:18 +08:00
<div class="content"><div class='highlight'><pre>{Utils, DraftStore, React} = <span class="hljs-built_in">require</span> <span class="hljs-string">'mailspring-exports'</span></pre></div></div>
add personal level indicators example package
2015-10-03 08:42:52 +08:00
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">&#182;</a>
</div>
<p>Access N1 React components by requiring <code>nylas-component-kit</code>.</p>
</div>
<div class="content"><div class='highlight'><pre>{RetinaImg} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-component-kit'</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PersonalLevelIcon</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span></pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">&#182;</a>
</div>
<p>Note: You should assign a new displayName to avoid naming
conflicts when injecting your item</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@displayName</span>: <span class="hljs-string">'PersonalLevelIcon'</span></pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">&#182;</a>
</div>
<p>In the constructor, we’re setting the component’s initial state.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">constructor</span>: <span class="hljs-function"><span class="hljs-params">(<span class="hljs-property">@props</span>)</span> -&gt;</span>
<span class="hljs-property">@state</span> =
<span class="hljs-attribute">level</span>: <span class="hljs-property">@_calculateLevel</span>(<span class="hljs-property">@props</span>.thread)</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">&#182;</a>
</div>
<p>React components’ <code>render</code> methods return a virtual DOM element to render.
The returned DOM fragment is a result of the component’s <code>state</code> and
<code>props</code>. In that sense, <code>render</code> methods are deterministic.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">render</span>: <span class="hljs-function">=&gt;</span>
React.createElement(<span class="hljs-string">"div"</span>, {<span class="hljs-string">"className"</span>: <span class="hljs-string">"personal-level-icon"</span>},
(<span class="hljs-property">@_renderIcon</span>())
)</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">&#182;</a>
</div>
<p>Some application logic which is specific to this package to decide which
character to render.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_renderIcon</span>: <span class="hljs-function">=&gt;</span>
<span class="hljs-keyword">switch</span> <span class="hljs-property">@state</span>.level
<span class="hljs-keyword">when</span> <span class="hljs-number">0</span> <span class="hljs-keyword">then</span> <span class="hljs-string">""</span>
<span class="hljs-keyword">when</span> <span class="hljs-number">1</span> <span class="hljs-keyword">then</span> <span class="hljs-string">"\u3009"</span>
<span class="hljs-keyword">when</span> <span class="hljs-number">2</span> <span class="hljs-keyword">then</span> <span class="hljs-string">"\u300b"</span>
<span class="hljs-keyword">when</span> <span class="hljs-number">3</span> <span class="hljs-keyword">then</span> <span class="hljs-string">"\u21ba"</span></pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">&#182;</a>
</div>
<p>Some more application logic which is specific to this package to decide
what level of personalness is related to the <code>thread</code>.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_calculateLevel</span>: <span class="hljs-function"><span class="hljs-params">(thread)</span> =&gt;</span>
<span class="hljs-function"> <span class="hljs-title">hasMe</span> = <span class="hljs-params">(thread.participants.filter (p) -&gt; p.isMe())</span>.<span class="hljs-title">length</span> &gt; 0
<span class="hljs-title">numOthers</span> = <span class="hljs-title">thread</span>.<span class="hljs-title">participants</span>.<span class="hljs-title">length</span> - <span class="hljs-title">hasMe</span>
<span class="hljs-title">if</span> <span class="hljs-title">not</span> <span class="hljs-title">hasMe</span>
<span class="hljs-title">return</span> 0
<span class="hljs-title">if</span> <span class="hljs-title">numOthers</span> &gt; 1
<span class="hljs-title">return</span> 1
<span class="hljs-title">if</span> <span class="hljs-title">numOthers</span> <span class="hljs-title">is</span> 1
<span class="hljs-title">return</span> 2
<span class="hljs-title">else</span>
<span class="hljs-title">return</span> 3
<span class="hljs-title">module</span>.<span class="hljs-title">exports</span> = <span class="hljs-title">PersonalLevelIcon</span>
</span></pre></div></div>
</li>
</ul>
</div>
</body>
</html>
Reference in a new issue Copy permalink