mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-01 13:14:16 +08:00
61 lines
2.7 KiB
HTML
61 lines
2.7 KiB
HTML
---
|
|
layout: docs
|
|
title: MultiselectActionBar
|
|
edit_url: "https://github.com/nylas/N1/blob/master/src/components/multiselect-action-bar.cjsx"
|
|
---
|
|
|
|
<h2>Summary</h2>
|
|
|
|
<div class="markdown-from-sourecode">
|
|
<p><p>MultiselectActionBar is a simple component that can be placed in a {Sheet} Toolbar.
|
|
When the provided <code>dataStore</code> has a selection, it appears over the other items in the toolbar.</p>
|
|
<p>Generally, you wrap <a href='multiselectactionbar.html'>MultiselectActionBar</a> in your own simple component to provide a dataStore
|
|
and other settings:</p>
|
|
<pre><code class="lang-coffee"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MultiselectActionBar</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>
|
|
</span> <span class="hljs-annotation">@displayName</span>: <span class="hljs-symbol">'MultiselectActionBa</span>r'
|
|
|
|
render: =>
|
|
<<span class="hljs-type">MultiselectActionBar</span>
|
|
dataStore={<span class="hljs-type">ThreadListStore</span>}
|
|
className=<span class="hljs-string">"thread-list"</span>
|
|
collection=<span class="hljs-string">"thread"</span> />
|
|
</code></pre>
|
|
<p>The MultiselectActionBar uses the <code>ComponentRegistry</code> to find items to display for the given
|
|
collection name. To add an item to the bar created in the example above, register it like this:</p>
|
|
<pre><code class="lang-coffee"><span class="hljs-tag">ComponentRegistry</span><span class="hljs-class">.register</span> <span class="hljs-tag">ThreadBulkRemoveButton</span>,
|
|
<span class="hljs-rule"><span class="hljs-attribute">role</span>:<span class="hljs-value"> <span class="hljs-string">'thread:BulkAction'</span></span></span>
|
|
</code></pre>
|
|
</p>
|
|
</div>
|
|
|
|
<ul>
|
|
</ul>
|
|
|
|
|
|
<h3>Class Properties</h3>
|
|
|
|
<h4 id=propTypes>propTypes <a href="#propTypes" class="link"></a></h4>
|
|
<p><p>React <code>props</code> supported by MultiselectActionBar:</p>
|
|
</p>
|
|
<table class="arguments">
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>dataStore</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>An instance of a {ModelView}.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>collection</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>The name of the collection. The collection name is used for the text that appears in the bar "1 thread selected" and is also used to find components in the component registry that should appear in the bar (<code>thread</code> => <code>thread:BulkAtion</code>)</p>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|