Mailspring/internal_packages/message-list/lib/find-in-thread.jsx

141 lines
4 KiB
React
Raw Normal View History

import React from 'react'
import ReactDOM from 'react-dom'
import classnames from 'classnames'
import {Actions, MessageStore, SearchableComponentStore} from 'nylas-exports'
import {RetinaImg, KeyCommandsRegion} from 'nylas-component-kit'
export default class FindInThread extends React.Component {
static displayName = "FindInThread";
constructor(props) {
super(props);
this.state = SearchableComponentStore.getCurrentSearchData()
}
componentDidMount() {
this._usub = SearchableComponentStore.listen(this._onSearchableChange)
}
componentWillUnmount() {
this._usub()
}
_globalKeymapHandlers() {
return {
'application:find-in-thread': this._onFindInThread,
'application:find-in-thread-next': this._onNextResult,
'application:find-in-thread-previous': this._onPrevResult,
}
}
_onFindInThread = () => {
if (this.state.searchTerm === null) {
Actions.findInThread("");
if (MessageStore.hasCollapsedItems()) {
Actions.toggleAllMessagesExpanded()
}
}
this._focusSearch()
}
_onSearchableChange = () => {
this.setState(SearchableComponentStore.getCurrentSearchData())
}
_onFindChange = (event) => {
Actions.findInThread(event.target.value)
}
_onFindKeyDown = (event) => {
if (event.key === "Enter") {
return event.shiftKey ? this._onPrevResult() : this._onNextResult()
} else if (event.key === "Escape") {
this._clearSearch()
ReactDOM.findDOMNode(this.refs.searchBox).blur()
}
}
_selectionText() {
if (this.state.globalIndex !== null && this.state.resultsLength > 0) {
return `${this.state.globalIndex + 1} of ${this.state.resultsLength}`
}
return ""
}
_navEnabled() {
return this.state.resultsLength > 0;
}
_onPrevResult = () => {
if (this._navEnabled()) { Actions.previousSearchResult() }
}
_onNextResult = () => {
if (this._navEnabled()) { Actions.nextSearchResult() }
}
_clearSearch = () => {
Actions.findInThread(null)
}
_focusSearch = (event) => {
const cw = ReactDOM.findDOMNode(this.refs.controlsWrap)
if (!event || !(cw && cw.contains(event.target))) {
ReactDOM.findDOMNode(this.refs.searchBox).focus()
}
}
render() {
const rootCls = classnames({
"find-in-thread": true,
"enabled": this.state.searchTerm !== null,
})
const btnCls = "btn btn-find-in-thread";
return (
<div className={rootCls} onClick={this._focusSearch}>
<KeyCommandsRegion globalHandlers={this._globalKeymapHandlers()}>
<div className="controls-wrap" ref="controlsWrap">
<div className="input-wrap">
<input type="text"
ref="searchBox"
placeholder="Find in thread"
onChange={this._onFindChange}
onKeyDown={this._onFindKeyDown}
value={this.state.searchTerm || ""}/>
<div className="selection-progress">{this._selectionText()}</div>
<div className="btn-wrap">
fix(focus): Remove focusedField in favor of imperative focus, break apart ComposerView Summary: - Removes controlled focus in the composer! - No React components ever perfom focus in lifecycle methods. Never again. - A new `Utils.schedule({action, after, timeout})` helper makes it easy to say "setState or load draft, etc. and then focus" - The DraftStore issues a focusDraft action after creating a draft, which causes the MessageList to focus and scroll to the desired composer, which itself decides which field to focus. - The MessageList never focuses anything automatically. - Refactors ComposerView apart — ComposerHeader handles all top fields, DraftSessionContainer handles draft session initialization and exposes props to ComposerView - ComposerHeader now uses a KeyCommandRegion (with focusIn and focusOut) to do the expanding and collapsing of the participants fields. May rename that container very soon. - Removes all CommandRegistry handling of tab and shift-tab. Unless you preventDefault, the browser does it's thing. - Removes all tabIndexes greater than 1. This is an anti-pattern—assigning everything a tabIndex of 0 tells the browser to move between them based on their order in the DOM, and is almost always what you want. - Adds "TabGroupRegion" which allows you to create a tab/shift-tabbing group, (so tabbing does not leave the active composer). Can't believe this isn't a browser feature. Todos: - Occasionally, clicking out of the composer contenteditable requires two clicks. This is because atomicEdit is restoring selection within the contenteditable and breaking blur. - Because the ComposerView does not render until it has a draft, we're back to it being white in popout composers for a brief moment. We will fix this another way - all the "return unless draft" statements were untenable. - Clicking a row in the thread list no longer shifts focus to the message list and focuses the last draft. This will be restored soon. Test Plan: Broken Reviewers: juan, evan Reviewed By: juan, evan Differential Revision: https://phab.nylas.com/D2814
2016-04-05 06:22:01 +08:00
<button tabIndex={-1}
className={btnCls}
disabled={!this._navEnabled()}
onClick={this._onPrevResult}>
<RetinaImg name="ic-findinthread-previous.png"
mode={RetinaImg.Mode.ContentIsMask}/>
</button>
<button className={btnCls}
fix(focus): Remove focusedField in favor of imperative focus, break apart ComposerView Summary: - Removes controlled focus in the composer! - No React components ever perfom focus in lifecycle methods. Never again. - A new `Utils.schedule({action, after, timeout})` helper makes it easy to say "setState or load draft, etc. and then focus" - The DraftStore issues a focusDraft action after creating a draft, which causes the MessageList to focus and scroll to the desired composer, which itself decides which field to focus. - The MessageList never focuses anything automatically. - Refactors ComposerView apart — ComposerHeader handles all top fields, DraftSessionContainer handles draft session initialization and exposes props to ComposerView - ComposerHeader now uses a KeyCommandRegion (with focusIn and focusOut) to do the expanding and collapsing of the participants fields. May rename that container very soon. - Removes all CommandRegistry handling of tab and shift-tab. Unless you preventDefault, the browser does it's thing. - Removes all tabIndexes greater than 1. This is an anti-pattern—assigning everything a tabIndex of 0 tells the browser to move between them based on their order in the DOM, and is almost always what you want. - Adds "TabGroupRegion" which allows you to create a tab/shift-tabbing group, (so tabbing does not leave the active composer). Can't believe this isn't a browser feature. Todos: - Occasionally, clicking out of the composer contenteditable requires two clicks. This is because atomicEdit is restoring selection within the contenteditable and breaking blur. - Because the ComposerView does not render until it has a draft, we're back to it being white in popout composers for a brief moment. We will fix this another way - all the "return unless draft" statements were untenable. - Clicking a row in the thread list no longer shifts focus to the message list and focuses the last draft. This will be restored soon. Test Plan: Broken Reviewers: juan, evan Reviewed By: juan, evan Differential Revision: https://phab.nylas.com/D2814
2016-04-05 06:22:01 +08:00
tabIndex={-1}
disabled={!this._navEnabled()}
onClick={this._onNextResult}>
<RetinaImg name="ic-findinthread-next.png"
mode={RetinaImg.Mode.ContentIsMask}/>
</button>
</div>
</div>
<button className={btnCls}
onClick={this._clearSearch}>
<RetinaImg name="ic-findinthread-close.png"
mode={RetinaImg.Mode.ContentIsMask}/>
</button>
</div>
</KeyCommandsRegion>
</div>
)
}
}