2015-09-21 23:57:54 +08:00
< html >
< head >
< meta charset = "utf-8" >
2015-10-02 03:34:16 +08:00
< title > N1 — ComponentRegistry< / title >
< meta property = "og:title" content = "An extensible mail client built on the modern web | N1" >
< meta property = "og:type" content = "website" >
< meta property = "og:image" content = "https://nylas.github.io/n1/images/meta_share.png" >
< link rel = "shortcut icon" href = "/images/favicon.ico" >
2015-09-21 23:57:54 +08:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" >
2015-10-02 03:34:16 +08:00
< link rel = "stylesheet" type = "text/css" href = "/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/css/tomorrow.css" >
2015-09-21 23:57:54 +08:00
< / head >
< body >
< div id = "header" >
< div class = "container" >
2015-10-02 03:34:16 +08:00
< img src = "/images/edgehill.png" class = "logo" / >
< div class = "title" > N1< div class = "small" > Developer Preview< / div > < / div >
2015-09-21 23:57:54 +08:00
< / div >
< / div >
< div class = "container" >
< div class = "page-title" >
ComponentRegistry
< / div >
< div id = "sidebar" >
< div class = "heading" > Getting Started< / div >
< ul >
2015-10-02 03:34:16 +08:00
< li > < a href = "/guides/FirstSteps.html" > First Steps< / a > < / li >
2015-09-21 23:57:54 +08:00
< / ul >
< div class = "heading" > Guides< / div >
< ul >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / 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 >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / ul >
< div class = "heading" > Component Kit< / div >
< ul >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / ul >
< div class = "heading" > Models< / div >
< ul >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / ul >
< div class = "heading" > Stores< / div >
< ul >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / ul >
< div class = "heading" > Database< / div >
< ul >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / ul >
< div class = "heading" > Drafts< / div >
< ul >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / ul >
< div class = "heading" > Atom< / div >
< ul >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / ul >
< / ul >
< / div >
< div id = "main" >
< h2 > Summary< / h2 >
< div class = "markdown-from-sourecode" >
< p > < p > The ComponentRegistry maintains an index of React components registered
2015-10-02 03:34:16 +08:00
by Nylas packages. Components can use < a href = '/docs/injectedcomponent.html' > InjectedComponent< / a > and < a href = '/docs/injectedcomponentset.html' > InjectedComponentSet< / a >
2015-09-21 23:57:54 +08:00
to dynamically render components registered with the ComponentRegistry.< / p >
< / p >
< / div >
< ul >
< / ul >
< h3 > Instance Methods< / h3 >
< h4 id = register class = "function-name" >
register(< span class = "args" > < span class = "arg" > component< / span > < span class = "arg" > options< / span > < / span > ) < a href = "#register" class = "link" > < / a >
< / h4 >
< div class = "function-description markdown-from-sourecode" >
< p > < p > Register a new component with the Component Registry.
Typically, packages call this method from their main < code > activate< / code > method
to extend the Nylas user interface, and call the corresponding < code > unregister< / code >
method in < code > deactivate< / code > .< / p >
< p > This method is chainable.< / p >
< / p >
< / div >
< strong > Parameters< / strong >
< table class = "arguments" >
< tr >
< th > Argument< / th >
< th > Description< / th >
< / tr >
< tr >
< td style = "width:15%;" >
< em > component< / em >
< / td >
< td class = "markdown-from-sourecode" >
< p > < a href = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object' > Object< / a > A React Component with a < code > displayName< / code > < / p >
< / td >
< / tr >
< tr >
< td style = "width:15%;" >
< em > options< / em >
< / td >
< td class = "markdown-from-sourecode" >
< p > < a href = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object' > Object< / a > : Note that for advanced use cases, you can also pass (< code > modes< / code > , < code > roles< / code > , < code > locations< / code > ) with arrays instead of single values.< / p >
< / td >
< / tr >
< / table >
< h4 id = findComponentByName class = "function-name" >
findComponentByName(< span class = "args" > < span class = "arg" > name< / span > < / span > ) < a href = "#findComponentByName" class = "link" > < / a >
< / h4 >
< div class = "function-description markdown-from-sourecode" >
< p > < p > Retrieve the registry entry for a given name.< / p >
< / p >
< / div >
< strong > Parameters< / strong >
< table class = "arguments" >
< tr >
< th > Argument< / th >
< th > Description< / th >
< / tr >
< tr >
< td style = "width:15%;" >
< em > name< / em >
< / td >
< td class = "markdown-from-sourecode" >
< p > The < a href = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string' > String< / a > name of the registered component to retrieve.< / p >
< / td >
< / tr >
< / table >
< strong > Returns< / strong >
< table class = "arguments" >
< tr >
< th > Return Values< / th >
< / tr >
< tr > < td class = "markdown-from-sourecode" > < p > Returns a < a href = 'https://facebook.github.io/react/docs/component-api.html' > React.Component< / a > < / p >
< / td > < / tr >
< / table >
< h4 id = findComponentsMatching class = "function-name" >
findComponentsMatching(< span class = "args" > < span class = "arg" > descriptor< / span > < / span > ) < a href = "#findComponentsMatching" class = "link" > < / a >
< / h4 >
< div class = "function-description markdown-from-sourecode" >
< p > < p > Retrieve all of the registry entries matching a given descriptor.< / p >
< pre > < code class = "lang-coffee" > < span class = "hljs-tag" > ComponentRegistry< / span > < span class = "hljs-class" > .findComponentsMatching< / span > (< span class = "hljs-rules" > {
< span class = "hljs-rule" > < span class = "hljs-attribute" > role< / span > :< span class = "hljs-value" > < span class = "hljs-string" > 'Composer:ActionButton'< / span >
})
ComponentRegistry.< span class = "hljs-function" > findComponentsMatching< / span > ({
location: WorkspaceStore.Location.RootSidebar.Toolbar
})< / span > < / span > < / span >
< / code > < / pre >
< / p >
< / div >
< strong > Parameters< / strong >
< table class = "arguments" >
< tr >
< th > Argument< / th >
< th > Description< / th >
< / tr >
< tr >
< td style = "width:15%;" >
< em > descriptor< / em >
< / td >
< td class = "markdown-from-sourecode" >
< p > An < a href = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object' > Object< / a > that specifies set of components using the available keys below. Note that for advanced use cases, you can also pass (< code > modes< / code > , < code > roles< / code > , < code > locations< / code > ) with arrays instead of single values.< / p >
< / td >
< / tr >
< / table >
< strong > Returns< / strong >
< table class = "arguments" >
< tr >
< th > Return Values< / th >
< / tr >
< tr > < td class = "markdown-from-sourecode" > < p > Returns an < a href = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/array' > Array< / a > of < a href = 'https://facebook.github.io/react/docs/component-api.html' > React.Component< / a > objects< / p >
< / td > < / tr >
< / table >
< / div >
< / div >
< div id = "footer" >
< div class = "container" >
< img src = "images/edgehill.png" class = "logo" / >
2015-10-02 03:34:16 +08:00
< div class = "small" > N1 Developer Preview< br > < em > © 2014-2015 Nylas, Inc.< / em > < / div >
2015-09-21 23:57:54 +08:00
< / div >
< / div >
2015-10-02 03:34:16 +08:00
< 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 >
2015-09-21 23:57:54 +08:00
< / body >
< / html >
