- #
- _onClick: =>
- dialog = require('remote').require('dialog')
- dialog.showErrorBox('Success!', 'Button was clicked.')
+MyComposerButton = require './my-composer-button'
+MyMessageSidebar = require './my-message-sidebar'
module.exports =
# Activate is called when the package is loaded. If your package previously
# saved state using `serialize` it is provided.
#
activate: (@state) ->
- ComponentRegistry.register MyButton,
+ ComponentRegistry.register MyComposerButton,
role: 'Composer:ActionButton'
+ ComponentRegistry.register MyMessageSidebar,
+ role: 'sidebar:focusedContactInfo'
+
# Serialize is called when your package is about to be unmounted.
# You can return a state object that will be passed back to your package
# when it is re-activated.
@@ -37,4 +26,5 @@ module.exports =
# subscribing to events, release them here.
#
deactivate: ->
- ComponentRegistry.unregister(MyButton)
+ ComponentRegistry.unregister(MyComposerButton)
+ ComponentRegistry.unregister(MyMessageSidebar)
diff --git a/static/package-template/lib/my-composer-button.cjsx b/static/package-template/lib/my-composer-button.cjsx
new file mode 100644
index 000000000..573748cf6
--- /dev/null
+++ b/static/package-template/lib/my-composer-button.cjsx
@@ -0,0 +1,43 @@
+{Utils, DraftStore, React} = require 'nylas-exports'
+{RetinaImg} = require 'nylas-component-kit'
+
+class MyComposerButton extends React.Component
+
+ # Note: You should assign a new displayName to avoid naming
+ # conflicts when injecting your item
+ @displayName: 'MyComposerButton'
+
+ # When you register as a composer button, you receive a
+ # reference to the draft, and you can look it up to perform
+ # actions and retrieve data.
+ @propTypes:
+ draftLocalId: React.PropTypes.string.isRequired
+
+ render: =>
+
+
+
+
+ _onClick: =>
+ # To retrieve information about the draft, we fetch the current editing
+ # session from the draft store. We can access attributes of the draft
+ # and add changes to the session which will be appear immediately.
+ DraftStore.sessionForLocalId(@props.draftLocalId).then (session) =>
+ newSubject = "#{session.draft().subject} - It Worked!"
+
+ dialog = @_getDialog()
+ dialog.showMessageBox
+ title: 'Here we go...'
+ detail: "Adjusting the subject line To `#{newSubject}`"
+ buttons: ['OK']
+ type: 'info'
+
+ session.changes.add({subject: newSubject})
+
+ _getDialog: =>
+ require('remote').require('dialog')
+
+
+module.exports = MyComposerButton
\ No newline at end of file
diff --git a/static/package-template/lib/my-message-sidebar.cjsx b/static/package-template/lib/my-message-sidebar.cjsx
new file mode 100644
index 000000000..2178a61b5
--- /dev/null
+++ b/static/package-template/lib/my-message-sidebar.cjsx
@@ -0,0 +1,68 @@
+{Utils,
+ React,
+ FocusedContactsStore} = require 'nylas-exports'
+{RetinaImg} = require 'nylas-component-kit'
+
+class MyMessageSidebar extends React.Component
+ @displayName: 'MyMessageSidebar'
+
+ # Providing container styles tells the app how to constrain
+ # the column your component is being rendered in. The min and
+ # max size of the column are chosen automatically based on
+ # these values.
+ @containerStyles:
+ order: 1
+ maxWidth: 300
+ minWidth: 200
+ flexShrink: 0
+
+ # This sidebar component listens to the FocusedContactStore,
+ # which gives us access to the Contact object of the currently
+ # selected person in the conversation. If you wanted to take
+ # the contact and fetch your own data, you'd want to create
+ # your own store, so the flow of data would be:
+ #
+ # FocusedContactStore => Your Store => Your Component
+ #
+ constructor: (@props) ->
+ @state = @_getStateFromStores()
+
+ componentDidMount: =>
+ @unsubscribe = FocusedContactsStore.listen(@_onChange)
+
+ componentWillUnmount: =>
+ @unsubscribe()
+
+ render: =>
+ if @state.contact
+ content = @_renderContent()
+ else
+ content = @_renderPlaceholder()
+
+
+ {content}
+
+
+ _renderContent: =>
+ # Want to include images or other static assets in your components?
+ # Reference them using the nylas:// URL scheme:
+ #
+ #
+ #
+
+
Hi there {@state.contact.name}!
+
+
+ _renderPlaceholder: =>
+
No Data Available
+
+ _onChange: =>
+ @setState(@_getStateFromStores())
+
+ _getStateFromStores: =>
+ contact: FocusedContactsStore.focusedContact()
+
+
+module.exports = MyMessageSidebar
diff --git a/static/package-template/spec/main-spec.coffee b/static/package-template/spec/main-spec.coffee
index 6636dee73..169134c06 100644
--- a/static/package-template/spec/main-spec.coffee
+++ b/static/package-template/spec/main-spec.coffee
@@ -1,12 +1,19 @@
-describe "AccountSidebarStore", ->
- xit "should update it's selected ID when the focusTag action fires", ->
- true
+{ComponentRegistry} = require 'nylas-exports'
+{activate, deactivate} = require '../lib/main'
- xit "should update when the DatabaseStore emits changes to tags", ->
- true
+MyMessageSidebar = require '../lib/my-message-sidebar'
+MyComposerButton = require '../lib/my-composer-button'
- xit "should update when the NamespaceStore emits", ->
- true
+describe "activate", ->
+ it "should register the composer button and sidebar", ->
+ spyOn(ComponentRegistry, 'register')
+ activate()
+ expect(ComponentRegistry.register).toHaveBeenCalledWith(MyComposerButton, {role: 'Composer:ActionButton'})
+ expect(ComponentRegistry.register).toHaveBeenCalledWith(MyMessageSidebar, {role: 'sidebar:focusedContactInfo'})
- xit "should provide an array of sections to the sidebar view", ->
- true
+describe "deactivate", ->
+ it "should unregister the composer button and sidebar", ->
+ spyOn(ComponentRegistry, 'unregister')
+ deactivate()
+ expect(ComponentRegistry.unregister).toHaveBeenCalledWith(MyComposerButton)
+ expect(ComponentRegistry.unregister).toHaveBeenCalledWith(MyMessageSidebar)
diff --git a/static/package-template/spec/my-composer-button-spec.cjsx b/static/package-template/spec/my-composer-button-spec.cjsx
new file mode 100644
index 000000000..76f4f68ac
--- /dev/null
+++ b/static/package-template/spec/my-composer-button-spec.cjsx
@@ -0,0 +1,25 @@
+{React} = require 'nylas-exports'
+ReactTestUtils = React.addons.TestUtils
+
+MyComposerButton = require '../lib/my-composer-button'
+
+dialogStub =
+ showMessageBox: jasmine.createSpy('showMessageBox')
+
+describe "MyComposerButton", ->
+ beforeEach ->
+ @component = ReactTestUtils.renderIntoDocument(
+
+ )
+
+ it "should render into the page", ->
+ expect(@component).toBeDefined()
+
+ it "should have a displayName", ->
+ expect(MyComposerButton.displayName).toBe('MyComposerButton')
+
+ it "should show a dialog box when clicked", ->
+ spyOn(@component, '_onClick')
+ buttonNode = React.findDOMNode(@component.refs.button)
+ ReactTestUtils.Simulate.click(buttonNode)
+ expect(@component._onClick).toHaveBeenCalled()
\ No newline at end of file