Mailspring/internal_packages/thread-list/lib/message-list-toolbar.jsx
Juan Tejada e83bf2bbec feat(selection): Add new display for selection count + update toolbar
Summary:
- New behavior is that the in split mode, you will perform actions on
  the selection via the MessageListToolbar (the toolbar positioned above
  the message list)
- Refactored and moved around a bunch of code to achieve this:
  - Mostly renaming stuff and moving stuff around and removing some
    duplication
  - Update naming of toolbar role to a single role, and update relevant code
  - Converted and refactored a bunch of code into ES6, specifically to reuse the code for the ThreadActionsToolbar at the 2 locations
  - Deprecated MultiselectActionBar in favor of MultiselectToolbar
  - Deprecated old roles
- Punted the animation for the stackable cards in the selection display for now.
- #370

Test Plan: - Manual and unit tests

Reviewers: evan, drew, bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D2756
2016-03-21 12:20:11 -07:00

62 lines
1.6 KiB
JavaScript

import Rx from 'rx-lite'
import React, {Component, PropTypes} from 'react'
import {FocusedContentStore} from 'nylas-exports'
import {TimeoutTransitionGroup} from 'nylas-component-kit'
import ThreadListStore from './thread-list-store'
import InjectsToolbarButtons, {ToolbarRole} from './injects-toolbar-buttons'
function getObservable() {
return (
Rx.Observable.merge(
Rx.Observable.fromStore(FocusedContentStore),
ThreadListStore.selectionObservable(),
)
.map((data) => {
const storeChanged = data === FocusedContentStore
const selectionChanged = data instanceof Array
if (storeChanged) {
const focusedThread = FocusedContentStore.focused('thread')
if (focusedThread) {
return [focusedThread]
}
} else if (selectionChanged) {
return data
}
return []
})
)
}
class MessageListToolbar extends Component {
static displayName = 'MessageListToolbar';
static propTypes = {
items: PropTypes.array,
injectedButtons: PropTypes.element,
};
render() {
const {items, injectedButtons} = this.props
const shouldRender = items.length > 0
return (
<TimeoutTransitionGroup
className="message-toolbar-items"
leaveTimeout={125}
enterTimeout={125}
transitionName="opacity-125ms">
{shouldRender ? injectedButtons : undefined}
</TimeoutTransitionGroup>
)
}
}
const toolbarProps = {
getObservable,
extraRoles: [`MessageList:${ToolbarRole}`],
}
export default InjectsToolbarButtons(MessageListToolbar, toolbarProps)