2015-10-02 03:34:16 +08:00
< html >
< head >
< meta charset = "utf-8" >
< title > N1 — MultiselectActionBar< / title >
< meta property = "og:title" content = "An extensible mail client built on the modern web | N1" >
< meta property = "og:type" content = "website" >
2015-10-02 04:15:43 +08:00
< meta property = "og:image" content = "https://nylas.github.io/N1/images/meta_share.png" >
< link rel = "shortcut icon" href = "/N1/images/favicon.ico" >
2015-10-02 03:34:16 +08:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" >
2015-10-02 04:15:43 +08:00
< link rel = "stylesheet" type = "text/css" href = "/N1/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/N1/css/tomorrow.css" >
2015-10-02 03:34:16 +08:00
< / head >
< body >
< div id = "header" >
< div class = "container" >
< img src = "/images/edgehill.png" class = "logo" / >
< div class = "title" > N1< div class = "small" > Developer Preview< / div > < / div >
< / div >
< / div >
< div class = "container" >
< div class = "page-title" >
MultiselectActionBar
< span class = "extends" > extends React.Component< / span >
< / div >
< div id = "sidebar" >
< div class = "heading" > Getting Started< / div >
< ul >
< li > < a href = "/guides/FirstSteps.html" > First Steps< / a > < / li >
< / ul >
< div class = "heading" > Guides< / div >
< ul >
< li > < a href = "/guides/InterfaceConcepts.html" > Interface Concepts< / a > < / li >
< li > < a href = "/guides/PackageOverview.html" > Building a Package< / a > < / li >
< li > < a href = "/guides/React.html" > Interface Components< / a > < / li >
< li > < a href = "/guides/Architecture.html" > Application Architecture< / a > < / li >
< li > < a href = "/guides/Debugging.html" > Debugging N1< / a > < / li >
< li > < a href = "/guides/Database.html" > Accessing the Database< / a > < / li >
< li > < a href = "/guides/DraftStoreExtensions.html" > Extending the Composer< / a > < / li >
< li > < a href = "/guides/WritingSpecs.html" > Writing Specs< / a > < / li >
< / ul >
< div class = "heading" > Sample Code< / div >
< ul >
< li > < a href = "https://github.com/nylas/edgehill-plugins/tree/master/translate" target = "_blank" > Composer Translation< / a > < / li >
< li > < a href = "https://github.com/nylas/edgehill-plugins/tree/master/sidebar-github-profile" target = "_blank" > Github Sidebar< / a > < / li >
< / ul >
< div class = "heading" > API Reference< / div >
< ul >
< div class = "heading" > General< / div >
< ul >
< li > < a href = "/docs/Actions.html" > Actions< / a > < / li >
< li > < a href = "/docs/Atom.html" > Atom< / a > < / li >
< li > < a href = "/docs/BufferedNodeProcess.html" > BufferedNodeProcess< / a > < / li >
< li > < a href = "/docs/BufferedProcess.html" > BufferedProcess< / a > < / li >
< li > < a href = "/docs/ChangeFolderTask.html" > ChangeFolderTask< / a > < / li >
< li > < a href = "/docs/ChangeLabelsTask.html" > ChangeLabelsTask< / a > < / li >
< li > < a href = "/docs/Config.html" > Config< / a > < / li >
< li > < a href = "/docs/DraggableImg.html" > DraggableImg< / a > < / li >
< li > < a href = "/docs/FocusTrackingRegion.html" > FocusTrackingRegion< / a > < / li >
< li > < a href = "/docs/Switch.html" > Switch< / a > < / li >
< li > < a href = "/docs/Task.html" > Task< / a > < / li >
< li > < a href = "/docs/TaskQueueStatusStore.html" > TaskQueueStatusStore< / a > < / li >
< / ul >
< div class = "heading" > Component Kit< / div >
< ul >
< li > < a href = "/docs/EventedIFrame.html" > EventedIFrame< / a > < / li >
< li > < a href = "/docs/Flexbox.html" > Flexbox< / a > < / li >
< li > < a href = "/docs/InjectedComponent.html" > InjectedComponent< / a > < / li >
< li > < a href = "/docs/InjectedComponentSet.html" > InjectedComponentSet< / a > < / li >
< li > < a href = "/docs/Menu.html" > Menu< / a > < / li >
< li > < a href = "/docs/MenuItem.html" > MenuItem< / a > < / li >
< li > < a href = "/docs/MenuNameEmailItem.html" > MenuNameEmailItem< / a > < / li >
< li > < a href = "/docs/MultiselectActionBar.html" > MultiselectActionBar< / a > < / li >
< li > < a href = "/docs/MultiselectList.html" > MultiselectList< / a > < / li >
< li > < a href = "/docs/Popover.html" > Popover< / a > < / li >
< li > < a href = "/docs/ResizableRegion.html" > ResizableRegion< / a > < / li >
< li > < a href = "/docs/RetinaImg.html" > RetinaImg< / a > < / li >
< li > < a href = "/docs/Spinner.html" > Spinner< / a > < / li >
< li > < a href = "/docs/TimeoutTransitionGroupChild.html" > TimeoutTransitionGroupChild< / a > < / li >
< li > < a href = "/docs/UnsafeComponent.html" > UnsafeComponent< / a > < / li >
< / ul >
< div class = "heading" > Models< / div >
< ul >
< li > < a href = "/docs/Account.html" > Account< / a > < / li >
< li > < a href = "/docs/Calendar.html" > Calendar< / a > < / li >
< li > < a href = "/docs/Contact.html" > Contact< / a > < / li >
< li > < a href = "/docs/File.html" > File< / a > < / li >
< li > < a href = "/docs/Folder.html" > Folder< / a > < / li >
< li > < a href = "/docs/Label.html" > Label< / a > < / li >
< li > < a href = "/docs/Message.html" > Message< / a > < / li >
< li > < a href = "/docs/Model.html" > Model< / a > < / li >
< li > < a href = "/docs/Thread.html" > Thread< / a > < / li >
< / ul >
< div class = "heading" > Stores< / div >
< ul >
< li > < a href = "/docs/AccountStore.html" > AccountStore< / a > < / li >
< li > < a href = "/docs/ComponentRegistry.html" > ComponentRegistry< / a > < / li >
< li > < a href = "/docs/ContactStore.html" > ContactStore< / a > < / li >
< li > < a href = "/docs/EventStore.html" > EventStore< / a > < / li >
< li > < a href = "/docs/FocusedContentStore.html" > FocusedContentStore< / a > < / li >
< li > < a href = "/docs/MessageStoreExtension.html" > MessageStoreExtension< / a > < / li >
< li > < a href = "/docs/TaskQueue.html" > TaskQueue< / a > < / li >
< li > < a href = "/docs/WorkspaceStore.html" > WorkspaceStore< / a > < / li >
< / ul >
< div class = "heading" > Database< / div >
< ul >
< li > < a href = "/docs/Attribute.html" > Attribute< / a > < / li >
< li > < a href = "/docs/AttributeBoolean.html" > AttributeBoolean< / a > < / li >
< li > < a href = "/docs/AttributeCollection.html" > AttributeCollection< / a > < / li >
< li > < a href = "/docs/AttributeDateTime.html" > AttributeDateTime< / a > < / li >
< li > < a href = "/docs/AttributeJoinedData.html" > AttributeJoinedData< / a > < / li >
< li > < a href = "/docs/AttributeNumber.html" > AttributeNumber< / a > < / li >
< li > < a href = "/docs/AttributeObject.html" > AttributeObject< / a > < / li >
< li > < a href = "/docs/AttributeServerId.html" > AttributeServerId< / a > < / li >
< li > < a href = "/docs/AttributeString.html" > AttributeString< / a > < / li >
< li > < a href = "/docs/DatabaseStore.html" > DatabaseStore< / a > < / li >
< li > < a href = "/docs/DatabaseView.html" > DatabaseView< / a > < / li >
< li > < a href = "/docs/Matcher.html" > Matcher< / a > < / li >
< li > < a href = "/docs/ModelQuery.html" > ModelQuery< / a > < / li >
< li > < a href = "/docs/SortOrder.html" > SortOrder< / a > < / li >
< / ul >
< div class = "heading" > Drafts< / div >
< ul >
< li > < a href = "/docs/DraftChangeSet.html" > DraftChangeSet< / a > < / li >
< li > < a href = "/docs/DraftStore.html" > DraftStore< / a > < / li >
< li > < a href = "/docs/DraftStoreExtension.html" > DraftStoreExtension< / a > < / li >
< li > < a href = "/docs/DraftStoreProxy.html" > DraftStoreProxy< / a > < / li >
< / ul >
< div class = "heading" > Atom< / div >
< ul >
< li > < a href = "/docs/Clipboard.html" > Clipboard< / a > < / li >
< li > < a href = "/docs/Color.html" > Color< / a > < / li >
< li > < a href = "/docs/CommandRegistry.html" > CommandRegistry< / a > < / li >
< li > < a href = "/docs/MenuManager.html" > MenuManager< / a > < / li >
< li > < a href = "/docs/PackageManager.html" > PackageManager< / a > < / li >
< li > < a href = "/docs/ScopeDescriptor.html" > ScopeDescriptor< / a > < / li >
< li > < a href = "/docs/StyleManager.html" > StyleManager< / a > < / li >
< li > < a href = "/docs/ThemeManager.html" > ThemeManager< / a > < / li >
< / ul >
< / ul >
< / div >
< div id = "main" >
< 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 = '/docs/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" > ComponentRegistry< span class = "hljs-class" > .register< / span > ThreadBulkRemoveButton,
role: < span class = "hljs-string" > 'thread:BulkAction'< / 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 >
< / div >
< / div >
< div id = "footer" >
< div class = "container" >
< img src = "images/edgehill.png" class = "logo" / >
< div class = "small" > N1 Developer Preview< br > < em > © 2014-2015 Nylas, Inc.< / em > < / div >
< / div >
< / div >
< script >
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60022049-2', 'auto');
ga('send', 'pageview');
< / script >
< / body >
< / html >