mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
1467 lines
41 KiB
HTML
1467 lines
41 KiB
HTML
|
|
<!DOCTYPE HTML>
|
|
<html lang="" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
<title>UI Components · Nylas Mail Plugin SDK</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="description" content="">
|
|
<meta name="generator" content="GitBook 3.2.2">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/style.css">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-anchors/plugin.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../styles/website.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta name="HandheldFriendly" content="true"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
|
|
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
|
|
|
|
|
|
<link rel="next" href="Architecture.html" />
|
|
|
|
|
|
<link rel="prev" href="InterfaceConcepts.html" />
|
|
|
|
|
|
|
|
<link rel="shortcut icon" href='../img/favicon.png' type="image/x-icon">
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="book">
|
|
<div class="book-summary">
|
|
|
|
|
|
<div id="book-search-input" role="search">
|
|
<input type="text" placeholder="Type to search" />
|
|
</div>
|
|
|
|
|
|
<nav role="navigation">
|
|
|
|
|
|
|
|
<ul class="summary">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="chapter " data-level="1.1" >
|
|
|
|
<span>
|
|
|
|
|
|
Nylas Mail SDK Guides
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.2" data-path="../">
|
|
|
|
<a href="../">
|
|
|
|
|
|
Introduction
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.3" data-path="GettingStarted.html">
|
|
|
|
<a href="GettingStarted.html">
|
|
|
|
|
|
Getting Started
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.4" data-path="GettingStarted-2.html">
|
|
|
|
<a href="GettingStarted-2.html">
|
|
|
|
|
|
Getting Started Part 2
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.5" data-path="PackageOverview.html">
|
|
|
|
<a href="PackageOverview.html">
|
|
|
|
|
|
Building a Package
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6" data-path="InterfaceConcepts.html">
|
|
|
|
<a href="InterfaceConcepts.html">
|
|
|
|
|
|
Interface Concepts
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter active" data-level="1.7" data-path="React.html">
|
|
|
|
<a href="React.html">
|
|
|
|
|
|
UI Components
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.8" data-path="Architecture.html">
|
|
|
|
<a href="Architecture.html">
|
|
|
|
|
|
Application Architecture
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.9" data-path="Debugging.html">
|
|
|
|
<a href="Debugging.html">
|
|
|
|
|
|
Debugging Nylas Mail
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.10" data-path="Database.html">
|
|
|
|
<a href="Database.html">
|
|
|
|
|
|
Accessing the Database
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.11" data-path="ComposerExtensions.html">
|
|
|
|
<a href="ComposerExtensions.html">
|
|
|
|
|
|
Extending the Composer
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.12" data-path="WritingSpecs.html">
|
|
|
|
<a href="WritingSpecs.html">
|
|
|
|
|
|
Writing Tests
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.13" data-path="IntegrationTesting.html">
|
|
|
|
<a href="IntegrationTesting.html">
|
|
|
|
|
|
Integration Testing
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.14" data-path="Windows.html">
|
|
|
|
<a href="Windows.html">
|
|
|
|
|
|
Developing on Windows
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.15" data-path="FAQ.html">
|
|
|
|
<a href="FAQ.html">
|
|
|
|
|
|
FAQ
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="header">Full Class Reference</li>
|
|
|
|
|
|
|
|
<li class="chapter " data-level="2.1" >
|
|
|
|
<span>
|
|
|
|
|
|
General
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.1.1" data-path="../classes/Actions.html">
|
|
|
|
<a href="../classes/Actions.html">
|
|
|
|
|
|
Actions
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.2" data-path="../classes/BufferedProcess.html">
|
|
|
|
<a href="../classes/BufferedProcess.html">
|
|
|
|
|
|
BufferedProcess
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.3" data-path="../classes/ChangeFolderTask.html">
|
|
|
|
<a href="../classes/ChangeFolderTask.html">
|
|
|
|
|
|
ChangeFolderTask
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.4" data-path="../classes/ChangeLabelsTask.html">
|
|
|
|
<a href="../classes/ChangeLabelsTask.html">
|
|
|
|
|
|
ChangeLabelsTask
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.5" data-path="../classes/ChangeMailTask.html">
|
|
|
|
<a href="../classes/ChangeMailTask.html">
|
|
|
|
|
|
ChangeMailTask
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.6" data-path="../classes/Color.html">
|
|
|
|
<a href="../classes/Color.html">
|
|
|
|
|
|
Color
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.7" data-path="../classes/Config.html">
|
|
|
|
<a href="../classes/Config.html">
|
|
|
|
|
|
Config
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.8" data-path="../classes/Contenteditable.html">
|
|
|
|
<a href="../classes/Contenteditable.html">
|
|
|
|
|
|
Contenteditable
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.9" data-path="../classes/KeyCommandsRegion.html">
|
|
|
|
<a href="../classes/KeyCommandsRegion.html">
|
|
|
|
|
|
KeyCommandsRegion
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.10" data-path="../classes/NylasEnvConstructor.html">
|
|
|
|
<a href="../classes/NylasEnvConstructor.html">
|
|
|
|
|
|
NylasEnvConstructor
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.11" data-path="../classes/QueryResultSet.html">
|
|
|
|
<a href="../classes/QueryResultSet.html">
|
|
|
|
|
|
QueryResultSet
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.12" data-path="../classes/QuerySubscriptionPool.html">
|
|
|
|
<a href="../classes/QuerySubscriptionPool.html">
|
|
|
|
|
|
QuerySubscriptionPool
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.13" data-path="../classes/StyleManager.html">
|
|
|
|
<a href="../classes/StyleManager.html">
|
|
|
|
|
|
StyleManager
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.14" data-path="../classes/Task.html">
|
|
|
|
<a href="../classes/Task.html">
|
|
|
|
|
|
Task
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.15" data-path="../classes/TaskQueueStatusStore.html">
|
|
|
|
<a href="../classes/TaskQueueStatusStore.html">
|
|
|
|
|
|
TaskQueueStatusStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.16" data-path="../classes/ThemeManager.html">
|
|
|
|
<a href="../classes/ThemeManager.html">
|
|
|
|
|
|
ThemeManager
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2" >
|
|
|
|
<span>
|
|
|
|
|
|
Component Kit
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.2.1" data-path="../classes/EventedIFrame.html">
|
|
|
|
<a href="../classes/EventedIFrame.html">
|
|
|
|
|
|
EventedIFrame
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.2" data-path="../classes/Flexbox.html">
|
|
|
|
<a href="../classes/Flexbox.html">
|
|
|
|
|
|
Flexbox
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.3" data-path="../classes/InjectedComponent.html">
|
|
|
|
<a href="../classes/InjectedComponent.html">
|
|
|
|
|
|
InjectedComponent
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.4" data-path="../classes/InjectedComponentSet.html">
|
|
|
|
<a href="../classes/InjectedComponentSet.html">
|
|
|
|
|
|
InjectedComponentSet
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.5" data-path="../classes/Menu.html">
|
|
|
|
<a href="../classes/Menu.html">
|
|
|
|
|
|
Menu
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.6" data-path="../classes/MenuItem.html">
|
|
|
|
<a href="../classes/MenuItem.html">
|
|
|
|
|
|
MenuItem
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.7" data-path="../classes/MenuNameEmailItem.html">
|
|
|
|
<a href="../classes/MenuNameEmailItem.html">
|
|
|
|
|
|
MenuNameEmailItem
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.8" data-path="../classes/MultiselectActionBar.html">
|
|
|
|
<a href="../classes/MultiselectActionBar.html">
|
|
|
|
|
|
MultiselectActionBar
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.9" data-path="../classes/MultiselectList.html">
|
|
|
|
<a href="../classes/MultiselectList.html">
|
|
|
|
|
|
MultiselectList
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.10" data-path="../classes/ResizableRegion.html">
|
|
|
|
<a href="../classes/ResizableRegion.html">
|
|
|
|
|
|
ResizableRegion
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.11" data-path="../classes/RetinaImg.html">
|
|
|
|
<a href="../classes/RetinaImg.html">
|
|
|
|
|
|
RetinaImg
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.12" data-path="../classes/Spinner.html">
|
|
|
|
<a href="../classes/Spinner.html">
|
|
|
|
|
|
Spinner
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.13" data-path="../classes/UnsafeComponent.html">
|
|
|
|
<a href="../classes/UnsafeComponent.html">
|
|
|
|
|
|
UnsafeComponent
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3" >
|
|
|
|
<span>
|
|
|
|
|
|
Extensions
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.3.1" data-path="../classes/ComposerExtension.html">
|
|
|
|
<a href="../classes/ComposerExtension.html">
|
|
|
|
|
|
ComposerExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3.2" data-path="../classes/ContenteditableExtension.html">
|
|
|
|
<a href="../classes/ContenteditableExtension.html">
|
|
|
|
|
|
ContenteditableExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3.3" data-path="../classes/DraftStoreExtension.html">
|
|
|
|
<a href="../classes/DraftStoreExtension.html">
|
|
|
|
|
|
DraftStoreExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3.4" data-path="../classes/MessageStoreExtension.html">
|
|
|
|
<a href="../classes/MessageStoreExtension.html">
|
|
|
|
|
|
MessageStoreExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3.5" data-path="../classes/MessageViewExtension.html">
|
|
|
|
<a href="../classes/MessageViewExtension.html">
|
|
|
|
|
|
MessageViewExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.4" >
|
|
|
|
<span>
|
|
|
|
|
|
Models
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.4.1" data-path="../classes/Contact.html">
|
|
|
|
<a href="../classes/Contact.html">
|
|
|
|
|
|
Contact
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.4.2" data-path="../classes/Message.html">
|
|
|
|
<a href="../classes/Message.html">
|
|
|
|
|
|
Message
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.4.3" data-path="../classes/Model.html">
|
|
|
|
<a href="../classes/Model.html">
|
|
|
|
|
|
Model
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.4.4" data-path="../classes/Thread.html">
|
|
|
|
<a href="../classes/Thread.html">
|
|
|
|
|
|
Thread
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5" >
|
|
|
|
<span>
|
|
|
|
|
|
Stores
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.5.1" data-path="../classes/AccountStore.html">
|
|
|
|
<a href="../classes/AccountStore.html">
|
|
|
|
|
|
AccountStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.2" data-path="../classes/ComponentRegistry.html">
|
|
|
|
<a href="../classes/ComponentRegistry.html">
|
|
|
|
|
|
ComponentRegistry
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.3" data-path="../classes/ContactStore.html">
|
|
|
|
<a href="../classes/ContactStore.html">
|
|
|
|
|
|
ContactStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.4" data-path="../classes/FocusedContentStore.html">
|
|
|
|
<a href="../classes/FocusedContentStore.html">
|
|
|
|
|
|
FocusedContentStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.5" data-path="../classes/TaskQueue.html">
|
|
|
|
<a href="../classes/TaskQueue.html">
|
|
|
|
|
|
TaskQueue
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.6" data-path="../classes/WorkspaceStore.html">
|
|
|
|
<a href="../classes/WorkspaceStore.html">
|
|
|
|
|
|
WorkspaceStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6" >
|
|
|
|
<span>
|
|
|
|
|
|
Database
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.6.1" data-path="../classes/Attribute.html">
|
|
|
|
<a href="../classes/Attribute.html">
|
|
|
|
|
|
Attribute
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.2" data-path="../classes/AttributeBoolean.html">
|
|
|
|
<a href="../classes/AttributeBoolean.html">
|
|
|
|
|
|
AttributeBoolean
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.3" data-path="../classes/AttributeCollection.html">
|
|
|
|
<a href="../classes/AttributeCollection.html">
|
|
|
|
|
|
AttributeCollection
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.4" data-path="../classes/AttributeDateTime.html">
|
|
|
|
<a href="../classes/AttributeDateTime.html">
|
|
|
|
|
|
AttributeDateTime
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.5" data-path="../classes/AttributeJoinedData.html">
|
|
|
|
<a href="../classes/AttributeJoinedData.html">
|
|
|
|
|
|
AttributeJoinedData
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.6" data-path="../classes/AttributeNumber.html">
|
|
|
|
<a href="../classes/AttributeNumber.html">
|
|
|
|
|
|
AttributeNumber
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.7" data-path="../classes/AttributeObject.html">
|
|
|
|
<a href="../classes/AttributeObject.html">
|
|
|
|
|
|
AttributeObject
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.8" data-path="../classes/AttributeServerId.html">
|
|
|
|
<a href="../classes/AttributeServerId.html">
|
|
|
|
|
|
AttributeServerId
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.9" data-path="../classes/AttributeString.html">
|
|
|
|
<a href="../classes/AttributeString.html">
|
|
|
|
|
|
AttributeString
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.10" data-path="../classes/DatabaseStore.html">
|
|
|
|
<a href="../classes/DatabaseStore.html">
|
|
|
|
|
|
DatabaseStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.11" data-path="../classes/Matcher.html">
|
|
|
|
<a href="../classes/Matcher.html">
|
|
|
|
|
|
Matcher
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.12" data-path="../classes/ModelQuery.html">
|
|
|
|
<a href="../classes/ModelQuery.html">
|
|
|
|
|
|
ModelQuery
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.13" data-path="../classes/SortOrder.html">
|
|
|
|
<a href="../classes/SortOrder.html">
|
|
|
|
|
|
SortOrder
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.7" >
|
|
|
|
<span>
|
|
|
|
|
|
Drafts
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.7.1" data-path="../classes/DraftChangeSet.html">
|
|
|
|
<a href="../classes/DraftChangeSet.html">
|
|
|
|
|
|
DraftChangeSet
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.7.2" data-path="../classes/DraftEditingSession.html">
|
|
|
|
<a href="../classes/DraftEditingSession.html">
|
|
|
|
|
|
DraftEditingSession
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.7.3" data-path="../classes/DraftStore.html">
|
|
|
|
<a href="../classes/DraftStore.html">
|
|
|
|
|
|
DraftStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.8" >
|
|
|
|
<span>
|
|
|
|
|
|
NylasEnv
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.8.1" data-path="../classes/PackageManager.html">
|
|
|
|
<a href="../classes/PackageManager.html">
|
|
|
|
|
|
PackageManager
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.9" >
|
|
|
|
<span>
|
|
|
|
|
|
Atom
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="divider"></li>
|
|
|
|
<li>
|
|
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
|
Published with GitBook
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="book-body">
|
|
|
|
<div class="body-inner">
|
|
|
|
|
|
|
|
<div class="book-header" role="navigation">
|
|
|
|
|
|
<!-- Title -->
|
|
<h1>
|
|
<i class="fa fa-circle-o-notch fa-spin"></i>
|
|
<a href=".." >UI Components</a>
|
|
</h1>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="page-wrapper" tabindex="-1" role="main">
|
|
<div class="page-inner">
|
|
|
|
<div id="book-search-results">
|
|
<div class="search-noresults">
|
|
|
|
<section class="normal markdown-section">
|
|
|
|
<h1 id="interface-components"><a name="interface-components" class="plugin-anchor" href="#interface-components"><i class="fa fa-link" aria-hidden="true"></i></a>Interface Components</h1>
|
|
<p>Nylas Mail uses <a href="https://facebook.github.io/react/" target="_blank">React</a> to create a fast, responsive UI. Packages that want to extend the Nylas Mail interface should use React. Using React's <a href="https://facebook.github.io/react/jsx-in-depth.html" target="_blank">JSX</a> syntax is optional, but both <a href="https://facebook.github.io/react/jsx-in-depth.html" target="_blank">JSX</a> and <a href="https://github.com/jsdf/coffee-react" target="_blank">CJSX</a> (CoffeeScript) are available.</p>
|
|
<p>For a quick introduction to React, take a look at Facebook's <a href="http://facebook.github.io/react/docs/getting-started.html" target="_blank">Getting Started with React</a>.</p>
|
|
<h4 id="react-components"><a name="react-components" class="plugin-anchor" href="#react-components"><i class="fa fa-link" aria-hidden="true"></i></a>React Components</h4>
|
|
<p>Nylas Mail provides a set of core React components you can use in your packages. Many of the standard components listen for key events, include considerations for different platforms, and have extensive CSS. Wrapping standard components makes it easy to build rich interfaces that are consistent with the rest of the Nylas Mail platform.</p>
|
|
<p>To use a standard component, require it from <code>nylas-component-kit</code> and use it in your component's <code>render</code> method.</p>
|
|
<p class="well">Keep in mind that React's Component model is based on composition rather than inheritance. On other platforms, you might subclass {Popover} to create your own custom Popover. In React, you should wrap the standard Popover component in your own component, which provides the Popover with <code>props</code> and children to customize its behavior.</p>
|
|
|
|
|
|
<p>Here's a quick look at standard components you can require from <code>nylas-component-kit</code>:</p>
|
|
<ul>
|
|
<li><p><strong>{Menu}</strong>: Allows you to display a list of items consistent with the rest of the Nylas Mail user experience.</p>
|
|
</li>
|
|
<li><p><strong>{Spinner}</strong>: Displays an indeterminate progress indicator centered within it's container.</p>
|
|
</li>
|
|
<li><p><strong>{Popover}</strong>: Component for creating menus and popovers that appear in response to a click and stay open until the user clicks outside them.</p>
|
|
</li>
|
|
<li><p><strong>{Flexbox}</strong>: Component for creating a Flexbox layout.</p>
|
|
</li>
|
|
<li><p><strong>{RetinaImg}</strong>: Replacement for standard <code><img></code> tags which automatically resolves the best version of the image for the user's display and can apply many image transforms.</p>
|
|
</li>
|
|
<li><p><strong>{ListTabular}</strong>: Component for creating a list of items backed by a paginating ListDataSource.</p>
|
|
</li>
|
|
<li><p><strong>{MultiselectList}</strong>: Component for creating a list that supports multi-selection. (Internally wraps ListTabular)</p>
|
|
</li>
|
|
<li><p><strong>{MultiselectActionBar}</strong>: Component for creating a contextual toolbar that is activated when the user makes a selection on a ListDataSource.</p>
|
|
</li>
|
|
<li><p><strong>{ResizableRegion}</strong>: Component that renders it's children inside a resizable region with a draggable handle.</p>
|
|
</li>
|
|
<li><p><strong>{TokenizingTextField}</strong>: Wraps a standard <code><input></code> and takes function props for tokenizing input values and displaying autocompletion suggestions.</p>
|
|
</li>
|
|
<li><p><strong>{EventedIFrame}</strong>: Replacement for the standard <code><iframe></code> tag which handles events directed at the iFrame to ensure a consistent user experience.</p>
|
|
</li>
|
|
</ul>
|
|
<h2 id="react-component-injection"><a name="react-component-injection" class="plugin-anchor" href="#react-component-injection"><i class="fa fa-link" aria-hidden="true"></i></a>React Component Injection</h2>
|
|
<p>The Nylas Mail interface is composed at runtime from components added by different packages. The app's left sidebar contains components from the composer package, the source list package, the activity package, and more. You can leverage the flexibility of this system to extend almost any part of Nylas Mail's interface.</p>
|
|
<h3 id="registering-components"><a name="registering-components" class="plugin-anchor" href="#registering-components"><i class="fa fa-link" aria-hidden="true"></i></a>Registering Components</h3>
|
|
<p>After you've created React components in your package, you should register them with the {ComponentRegistry}. The Component Registry manages the dynamic injection of components that makes Nylas Mail so extensible. You can request that your components appear in a specific <code>Location</code> defined by the {WorkspaceStore}, or register your component for a <code>Role</code> that another package has declared.</p>
|
|
<blockquote>
|
|
<p>The Component Registry allows you to insert your custom component without hacking up the DOM. Register for a <code>Location</code> or <code>Role</code> and your Component will be rendered into that part of the interface.</p>
|
|
</blockquote>
|
|
<p>It's easy to see where registered components are displayed in Nylas Mail. Enable the Developer bar at the bottom of the app by opening the Inspector panel, and then click "<strong>Component Regions</strong>":</p>
|
|
<p><img src="../img/injected-components.png"></p>
|
|
<p>Each region outlined in red is filled dynamically by looking up a React component or set of components from the Component Registry. You can see the role or location you'd need to register for, and the <code>props</code> that your component will receive in those locations.</p>
|
|
<p>Here are a few examples of how to use it to extend Nylas Mail. Typically, packages register components in their main <code>activate</code> method, and unregister them in <code>deactivate</code>:</p>
|
|
<ol>
|
|
<li><p>Add a component to the Thread List column:</p>
|
|
<pre><code class="lang-coffee"> ComponentRegistry.register ThreadList,
|
|
location: WorkspaceStore.Location.ThreadList
|
|
</code></pre>
|
|
</li>
|
|
<li><p>Add a component to the action bar at the bottom of the Composer:</p>
|
|
<pre><code class="lang-coffee"> ComponentRegistry.register TemplatePicker,
|
|
role: <span class="hljs-string">'Composer:ActionButton'</span>
|
|
</code></pre>
|
|
</li>
|
|
</ol>
|
|
<p><em>Tip: Remember to unregister components in the <code>deactivate</code> method of your package.</em></p>
|
|
<h3 id="using-registered-components"><a name="using-registered-components" class="plugin-anchor" href="#using-registered-components"><i class="fa fa-link" aria-hidden="true"></i></a>Using Registered Components</h3>
|
|
<p>It's easy to build packages that use the Component Registry to display components vended by other parts of the application. You can query the Component Registry and display the components it returns. The Component Registry is a Reflux-compatible Store, so you can listen to it and update your state as the registry changes.</p>
|
|
<p>There are also several convenience components that make it easy to dynamically inject components into your Virtual DOM. These are the preferred way of using injected components.</p>
|
|
<ul>
|
|
<li>{InjectedComponent}: Renders the first component for the <code>matching</code> criteria you provide, and passes it the props in <code>externalProps</code>. See the API reference for more information.</li>
|
|
</ul>
|
|
<pre><code class="lang-coffee"><InjectedComponent
|
|
matching={role:<span class="hljs-string">"Attachment"</span>}
|
|
exposedProps={file: file, messageLocalId: @props.localId}/>
|
|
</code></pre>
|
|
<ul>
|
|
<li>{InjectedComponentSet}: Renders all of the components <code>matching</code> criteria you provide inside a {Flexbox}, and passes it the props in <code>externalProps</code>. See the API reference for more information.</li>
|
|
</ul>
|
|
<pre><code class="lang-coffee"><InjectedComponentSet
|
|
className=<span class="hljs-string">"message-actions"</span>
|
|
matching={role:<span class="hljs-string">"MessageAction"</span>}
|
|
exposedProps={thread:@props.thread, message: @props.message}>
|
|
</code></pre>
|
|
<h3 id="unsafe-components"><a name="unsafe-components" class="plugin-anchor" href="#unsafe-components"><i class="fa fa-link" aria-hidden="true"></i></a>Unsafe Components</h3>
|
|
<p>Nylas Mail considers all injected components "unsafe". When you render them using {InjectedComponent} or {InjectedComponentSet}, they will be wrapped in a component that prevents exceptions in their React render and lifecycle methods from impacting your component. Instead of your component triggering a React Invariant exception in the application, an exception notice will be rendered in place of the unsafe component.</p>
|
|
<p><img src="../img/unsafe-component-exception.png"></p>
|
|
<p>In the future, Nylas Mail may automatically disable packages when their React components throw exceptions.</p>
|
|
|
|
|
|
</section>
|
|
|
|
</div>
|
|
<div class="search-results">
|
|
<div class="has-results">
|
|
|
|
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
<ul class="search-results-list"></ul>
|
|
|
|
</div>
|
|
<div class="no-results">
|
|
|
|
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<a href="InterfaceConcepts.html" class="navigation navigation-prev " aria-label="Previous page: Interface Concepts">
|
|
<i class="fa fa-angle-left"></i>
|
|
</a>
|
|
|
|
|
|
<a href="Architecture.html" class="navigation navigation-next " aria-label="Next page: Application Architecture">
|
|
<i class="fa fa-angle-right"></i>
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var gitbook = gitbook || [];
|
|
gitbook.push(function() {
|
|
gitbook.page.hasChanged({"page":{"title":"UI Components","level":"1.7","depth":1,"next":{"title":"Application Architecture","level":"1.8","depth":1,"path":"guides/Architecture.md","ref":"guides/Architecture.md","articles":[]},"previous":{"title":"Interface Concepts","level":"1.6","depth":1,"path":"guides/InterfaceConcepts.md","ref":"guides/InterfaceConcepts.md","articles":[]},"dir":"ltr"},"config":{"plugins":["search","lunr","-fontsettings","-sharing","anchors","github","editlink","favicon"],"root":"./docs_src","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"editlink":{"label":"Edit This Page","multilingual":false,"base":"https://github.com/nylas/nylas-mail-docs/tree/master"},"github":{"url":"https://github.com/nylas/nylas-mail-docs"},"favicon":{"shortcut":"/img/favicon.png"},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"anchors":{},"highlight":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Nylas Mail Plugin SDK","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"3.2.2"},"file":{"path":"guides/React.md","mtime":"2017-01-30T09:55:21.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-30T10:28:53.038Z"},"basePath":"..","book":{"language":""}});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
<script src="../gitbook/gitbook.js"></script>
|
|
<script src="../gitbook/theme.js"></script>
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-editlink/plugin.js"></script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|