mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
a9aaab9f38
Summary:
- Refactors account-sidebar internal package:
- Separates into smaller react components
- Makes DisclosureTriangle its own independent component
- Adds data to AccountSidebarStore to allow removal or addition of items for a
specific section of the sidebar
- Adds button and input and css styles to create categories
- Adds context menu to destroy a category
- Adds new method to CategoryStore to get the icon name for the categories of
the current account
- Removes some unused code
Test Plan: Manual
Reviewers: evan, bengotow
Reviewed By: bengotow
Differential Revision: https://phab.nylas.com/D2283
99 lines
2.9 KiB
CoffeeScript
99 lines
2.9 KiB
CoffeeScript
React = require 'react'
|
|
_ = require 'underscore'
|
|
_str = require 'underscore.string'
|
|
{RetinaImg} = require 'nylas-component-kit'
|
|
AccountSidebarItem = require './account-sidebar-item'
|
|
|
|
|
|
class AccountSidebarSection extends React.Component
|
|
@displayName: "AccountSidebarSection"
|
|
|
|
@propTypes: {
|
|
section: React.PropTypes.object.isRequired
|
|
collapsed: React.PropTypes.object.isRequired
|
|
selected: React.PropTypes.object.isRequired
|
|
onToggleCollapsed: React.PropTypes.func.isRequired
|
|
}
|
|
|
|
constructor: (@props) ->
|
|
@state = {showCreateInput: false}
|
|
|
|
render: ->
|
|
section = @props.section
|
|
showInput = @state.showCreateInput
|
|
allowCreate = section.createItem?
|
|
|
|
<section>
|
|
<div className="heading">{section.label}</div>
|
|
{@_createItemButton(section) if allowCreate}
|
|
{@_createItemInput(section) if allowCreate and showInput}
|
|
{@_itemComponents(section.items)}
|
|
</section>
|
|
|
|
_createItemButton: ({label}) ->
|
|
<div
|
|
className="add-item-button"
|
|
onClick={@_onCreateButtonClicked.bind(@, label)}>
|
|
<RetinaImg
|
|
url="nylas://account-sidebar/assets/icon-sidebar-addcategory@2x.png"
|
|
fallback="icon-sidebar-addcategory.png"
|
|
style={height: 14, width: 14}
|
|
mode={RetinaImg.Mode.ContentPreserve} />
|
|
</div>
|
|
|
|
_createItemInput: (section) ->
|
|
label = _str.decapitalize section.label[...-1]
|
|
placeholder = "Create new #{label}"
|
|
<span className="item-container">
|
|
<div className="item add-item-container">
|
|
<div className="icon">
|
|
<RetinaImg
|
|
name="#{section.iconName}"
|
|
fallback="folder.png"
|
|
mode={RetinaImg.Mode.ContentIsMask} />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
tabIndex="1"
|
|
className="input-bordered add-item-input"
|
|
autoFocus={true}
|
|
onKeyDown={_.partial @_onInputKeyDown, _, section}
|
|
placeholder={placeholder}/>
|
|
</div>
|
|
</span>
|
|
|
|
_itemComponents: (items) =>
|
|
components = []
|
|
|
|
items.forEach (item) =>
|
|
components.push(
|
|
<AccountSidebarItem
|
|
key={item.id}
|
|
item={item}
|
|
collapsed={@props.collapsed[item.id]}
|
|
selected={@props.selected}
|
|
onDestroyItem={@props.section.destroyItem}
|
|
onToggleCollapsed={@props.onToggleCollapsed} />
|
|
)
|
|
|
|
if item.children.length and not @props.collapsed[item.id]
|
|
components.push(
|
|
<section key={"#{item.id}-children"}>
|
|
{@_itemComponents(item.children)}
|
|
</section>
|
|
)
|
|
|
|
components
|
|
|
|
_onCreateButtonClicked: (sectionLabel) =>
|
|
@setState(showCreateInput: not @state.showCreateInput)
|
|
|
|
_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
|