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

153 lines
4.1 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 {
'core:find-in-thread': this._onFindInThread,
'core:find-in-thread-next': this._onNextResult,
'core: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()
}
return null
}
_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">
<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}
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>
)
}
}