React = require 'react' {Actions, MailViewFilter, AccountStore} = require("nylas-exports") {ScrollRegion} = require("nylas-component-kit") SidebarDividerItem = require("./account-sidebar-divider-item") SidebarSheetItem = require("./account-sidebar-sheet-item") AccountSidebarStore = require ("./account-sidebar-store") AccountSidebarMailViewItem = require("./account-sidebar-mail-view-item") crypto = require 'crypto' {RetinaImg} = require 'nylas-component-kit' classNames = require 'classnames' class AccountSidebar extends React.Component @displayName: 'AccountSidebar' @containerRequired: false @containerStyles: minWidth: 165 maxWidth: 210 constructor: (@props) -> @state = @_getStateFromStores() @state.showing = false componentDidMount: => @unsubscribers = [] @unsubscribers.push AccountSidebarStore.listen @_onStoreChange @unsubscribers.push AccountStore.listen @_onStoreChange # It's important that every React class explicitly stops listening to # atom events before it unmounts. Thank you event-kit # This can be fixed via a Reflux mixin componentWillUnmount: => unsubscribe() for unsubscribe in @unsubscribers render: => {@_accountSwitcher()}
{@_sections()}
_accountSwitcher: => return undefined if @state.accounts.length < 1
{@_renderAccount @state.account, true} {@_renderDropdown()}
_renderAccount: (account, isPrimaryItem) => classes = classNames "account": true "item": true "dropdown-item-padding": not isPrimaryItem "active": account is @state.account "bg-color-hover": not isPrimaryItem "primary-item": isPrimaryItem "account-option": not isPrimaryItem email = account.emailAddress.trim().toLowerCase() if isPrimaryItem dropdownClasses = classNames "account-switcher-dropdown": true, "account-switcher-dropdown-hidden": @state.showing dropdownArrow =
onClick = @_toggleDropdown else onClick = => @_onSwitchAccount account
{dropdownArrow}
{email}
_renderNewAccountOption: =>
Add account…
_renderDropdown: => display = if @state.showing then "block" else "none" # display = "block" accounts = @state.accounts.map (a) => @_renderAccount(a)
{accounts} {@_renderNewAccountOption()}
_toggleDropdown: => @setState showing: !@state.showing _gravatarUrl: (email) => hash = crypto.createHash('md5').update(email, 'utf8').digest('hex') "url(http://www.gravatar.com/avatar/#{hash}?d=blank&s=56)" _sections: => return @state.sections.map (section) =>
{section.label}
{@_itemComponents(section)}
_itemComponents: (section) => section.items?.map (item) => return unless item if item instanceof MailViewFilter else if item.sidebarComponent itemClass = item.sidebarComponent else itemClass = SidebarSheetItem _onStoreChange: => @setState @_getStateFromStores() _onBlur: (e) => target = e.nativeEvent.relatedTarget if target? and React.findDOMNode(@refs.button).contains(target) return @setState(showing: false) _onSwitchAccount: (account) => Actions.selectAccountId(account.id) @setState(showing: false) _onAddAccount: => require('remote').getGlobal('application').windowManager.newOnboardingWindow() @setState showing: false _getStateFromStores: => sections: AccountSidebarStore.sections() selected: AccountSidebarStore.selected() accounts: AccountStore.items() account: AccountStore.current() module.exports = AccountSidebar