React = require 'react' _ = require 'underscore' _str = require 'underscore.string' AccountSidebarItem = require './account-sidebar-item' {RetinaImg, DisclosureTriangle} = require 'nylas-component-kit' class AccountSidebarSection extends React.Component @displayName: "AccountSidebarSection" @propTypes: { section: React.PropTypes.object.isRequired collapsed: React.PropTypes.object.isRequired onToggleCollapsed: React.PropTypes.func.isRequired selected: React.PropTypes.object } constructor: (@props) -> @state = {showCreateInput: false} render: -> section = @props.section showInput = @state.showCreateInput allowCreate = section.createItem?
{section.label}
{@_createItemButton(section) if allowCreate} {@_createItemInput(section) if allowCreate and showInput} {@_itemComponents(section.items)}
_createItemButton: ({label}) ->
_createItemInput: (section) -> label = _str.decapitalize section.label[...-1] placeholder = "Create new #{label}"
_itemComponents: (items) => components = [] items.forEach (item) => components.push( ) if item.children.length and not @props.collapsed[item.id] components.push(
{@_itemComponents(item.children)}
) components _onCreateButtonMouseDown: => @_clickingCreateButton = true _onCreateButtonClicked: (sectionLabel) => @_clickingCreateButton = false @setState(showCreateInput: not @state.showCreateInput) _onInputBlur: => @setState(showCreateInput: false) if not @_clickingCreateButton _onInputKeyDown: (event, section) => if event.key is 'Escape' @setState(showCreateInput: false) if event.key in ['Enter', 'Return'] @props.section.createItem?(event.target.value) @setState(showCreateInput: false) module.exports = AccountSidebarSection