525 lines
15 KiB
JavaScript
Executable file
525 lines
15 KiB
JavaScript
Executable file
/* @flow */
|
|
|
|
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import Flux from '../lib/flux';
|
|
import i18n from '../i18n';
|
|
import ChannelSectionStore from '../stores/ChannelSectionStore';
|
|
import SelectedChannelStore from '../stores/SelectedChannelStore';
|
|
import SearchStore from '../stores/SearchStore';
|
|
import PopoutStore from '../stores/PopoutStore';
|
|
import ChannelStore from '../stores/ChannelStore';
|
|
import VideoThemeStore from '../stores/VideoThemeStore';
|
|
import Popout from './common/Popout';
|
|
import {SearchBarIcon} from './common/SearchBar';
|
|
import SearchPopout from './SearchPopout';
|
|
import {Editor} from 'draft-js';
|
|
import type {EditorState} from 'draft-js';
|
|
import * as SearchActionCreators from '../actions/SearchActionCreators';
|
|
import PopoutActionCreators from '../actions/PopoutActionCreators';
|
|
import {ComponentActions, SearchTokenTypes, ThemeTypes, SEARCH_POPOUT_ID} from '../Constants';
|
|
import * as DraftJSUtils from '../utils/DraftJSUtils';
|
|
import * as SearchUtils from '../utils/SearchUtils';
|
|
import * as DraftJSSearchUtils from '../utils/DraftJSSearchUtils';
|
|
import {ComponentDispatch} from '../utils/ComponentDispatchUtils';
|
|
import AppAnalyticsUtils from '../utils/AppAnalyticsUtils';
|
|
import QueryTokenizer from '../lib/QueryTokenizer';
|
|
import SearchTokens from '../lib/SearchTokens';
|
|
import lodash from 'lodash';
|
|
|
|
import 'draft-js/dist/Draft.css';
|
|
import '../styles/search.styl';
|
|
import '../styles/common/search_tokens.styl';
|
|
|
|
// Used to better position the autocomplete popout for search Certainly not
|
|
// perfect, but a start - some changes will need to happen in the Popout or
|
|
// Popouts components to better handle positioning in relation to animations,
|
|
// etc
|
|
const POPOUT_OFFSET = -12;
|
|
const MAX_LENGTH = 512;
|
|
|
|
const throttledSearch = lodash.throttle(SearchActionCreators.search, 500);
|
|
|
|
class Search extends React.PureComponent {
|
|
state = {
|
|
focused: false,
|
|
};
|
|
|
|
props: {
|
|
searchId: ?string,
|
|
isSearching: boolean,
|
|
editorState: ?EditorState,
|
|
hasResults: boolean,
|
|
theme: string,
|
|
};
|
|
|
|
_editorRef: ?Editor;
|
|
_popoutRef: ?Popout;
|
|
_searchPopoutRef: ?SearchPopout;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
lodash.bindAll(this, [
|
|
'search',
|
|
'handleSetSearchQuery',
|
|
'handleFocusSearch',
|
|
'handleClearSearch',
|
|
|
|
'focusEditor',
|
|
'blurEditor',
|
|
|
|
'setEditorRef',
|
|
'setPopoutRef',
|
|
'setSearchPopoutRef',
|
|
|
|
'renderPopout',
|
|
|
|
'onDownArrow',
|
|
'onUpArrow',
|
|
'onTab',
|
|
'onEscape',
|
|
'onBlur',
|
|
'onFocus',
|
|
'handleReturn',
|
|
'handleBeforeInput',
|
|
'handleKeyCommand',
|
|
'handlePastedText',
|
|
'handlePastedFiles',
|
|
'handleDroppedFiles',
|
|
'handleDrop',
|
|
'handleKeyBind',
|
|
'setEditorState',
|
|
]);
|
|
}
|
|
|
|
componentWillMount() {
|
|
SearchUtils.clearTokenCache();
|
|
}
|
|
|
|
componentDidMount() {
|
|
ComponentDispatch.subscribe(ComponentActions.PERFORM_SEARCH, this.search);
|
|
ComponentDispatch.subscribe(ComponentActions.SET_SEARCH_QUERY, this.handleSetSearchQuery);
|
|
ComponentDispatch.subscribe(ComponentActions.FOCUS_SEARCH, this.handleFocusSearch);
|
|
}
|
|
|
|
componentWillUpdate(nextProps) {
|
|
if (nextProps.searchId !== this.props.searchId) {
|
|
SearchUtils.clearTokenCache();
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const {editorState, searchId} = this.props;
|
|
const {focused} = this.state;
|
|
if (focused) {
|
|
this.ensurePopoutIsOpen();
|
|
}
|
|
if (editorState !== prevProps.editorState) {
|
|
const tokens = SearchUtils.tokenizeQuery(DraftJSUtils.getFirstTextBlock(editorState));
|
|
const cursorScope = DraftJSSearchUtils.getSelectionScope(tokens, editorState);
|
|
SearchActionCreators.updateAutocompleteQuery(searchId, tokens, cursorScope);
|
|
if (this._editorRef) {
|
|
DraftJSUtils.scrollCursorIntoView(this._editorRef.refs.editor);
|
|
}
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
ComponentDispatch.unsubscribe(ComponentActions.PERFORM_SEARCH, this.search);
|
|
ComponentDispatch.unsubscribe(ComponentActions.SET_SEARCH_QUERY, this.handleSetSearchQuery);
|
|
ComponentDispatch.unsubscribe(ComponentActions.FOCUS_SEARCH, this.handleFocusSearch);
|
|
}
|
|
|
|
handleSetSearchQuery({
|
|
query,
|
|
anchor,
|
|
focus,
|
|
performSearch,
|
|
replace,
|
|
}: {
|
|
query: string,
|
|
anchor?: number,
|
|
focus?: number,
|
|
performSearch?: boolean,
|
|
replace?: boolean,
|
|
}) {
|
|
let {editorState} = this.props;
|
|
const currentText = DraftJSUtils.getFirstTextBlock(editorState);
|
|
// Always append a space to an injected query if it doesn't already have one
|
|
if (query.charAt(query.length - 1) !== ' ') {
|
|
query += ' ';
|
|
}
|
|
// Always prepend a space to a query if it's not at anchor 0 and there
|
|
// isn't one beforehand already
|
|
if (anchor && currentText.charAt(anchor - 1) !== ' ' && query.charAt(0) !== ' ') {
|
|
query = ' ' + query;
|
|
}
|
|
if (replace) {
|
|
editorState = DraftJSUtils.replaceAllContent(query, editorState);
|
|
anchor = 0;
|
|
} else {
|
|
editorState = DraftJSUtils.updateContent(query, editorState, anchor, focus);
|
|
}
|
|
editorState = DraftJSUtils.truncateContent(editorState, MAX_LENGTH);
|
|
editorState = this.tokenize(editorState);
|
|
const offset = anchor + query.length;
|
|
editorState = DraftJSUtils.setCollapsedSelection(offset, editorState);
|
|
this.setEditorState(editorState);
|
|
if (performSearch) {
|
|
this.search(DraftJSUtils.getFirstTextBlock(editorState));
|
|
}
|
|
}
|
|
|
|
renderPopout() {
|
|
return <SearchPopout ref={this.setSearchPopoutRef} />;
|
|
}
|
|
|
|
tokenize(editorState) {
|
|
const tokens = SearchUtils.tokenizeQuery(DraftJSUtils.getFirstTextBlock(editorState)).filter(
|
|
token => token.type !== QueryTokenizer.NON_TOKEN_TYPE
|
|
);
|
|
return DraftJSUtils.applyTokensAsEntities(tokens, editorState, SearchTokens);
|
|
}
|
|
|
|
search(queryString: ?string) {
|
|
const {searchId, isSearching} = this.props;
|
|
if (!queryString) {
|
|
const {editorState} = this.props;
|
|
queryString = DraftJSUtils.getFirstTextBlock(editorState);
|
|
}
|
|
|
|
if (searchId && !isSearching) {
|
|
const tokens = SearchUtils.tokenizeQuery(queryString);
|
|
const query = SearchUtils.getSearchQueryFromTokens(tokens);
|
|
|
|
// Remove any filters from the history that do not have answers
|
|
for (let i = 0; i < tokens.length; i++) {
|
|
if (!SearchUtils.filterHasAnswer(tokens[i], tokens[i + 1])) {
|
|
queryString = queryString.substring(0, tokens[i].start) + queryString.substring(tokens[i].end);
|
|
}
|
|
}
|
|
|
|
// If we have an empty query, abort the search
|
|
if (!tokens.length || Object.keys(query).length == 0) {
|
|
return false;
|
|
}
|
|
|
|
throttledSearch(searchId, query, queryString);
|
|
this.onBlur();
|
|
}
|
|
return true;
|
|
}
|
|
|
|
clearSearch() {
|
|
const {searchId} = this.props;
|
|
if (searchId) {
|
|
SearchActionCreators.clearSearchState(searchId);
|
|
}
|
|
}
|
|
|
|
handleClearSearch(event: MouseEvent) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.clearSearch();
|
|
}
|
|
|
|
ensurePopoutIsOpen() {
|
|
if (this._popoutRef && !PopoutStore.isOpen(SEARCH_POPOUT_ID)) {
|
|
this._popoutRef.open();
|
|
}
|
|
}
|
|
|
|
handleFocusSearch({prefillCurrentChannel}: {prefillCurrentChannel?: boolean}) {
|
|
if (!prefillCurrentChannel || !DraftJSUtils.isEmpty(this.props.editorState)) {
|
|
this.focusEditor();
|
|
return;
|
|
}
|
|
|
|
const selectedChannelId = SelectedChannelStore.getChannelId();
|
|
const channel = ChannelStore.getChannel(selectedChannelId);
|
|
|
|
if (channel == null || channel.isPrivate()) {
|
|
this.focusEditor();
|
|
return;
|
|
}
|
|
|
|
this.handleSetSearchQuery({
|
|
query: SearchTokens[SearchTokenTypes.FILTER_IN].key + channel.toString(true) + ' ',
|
|
replace: true,
|
|
});
|
|
}
|
|
|
|
focusEditor() {
|
|
if (this._editorRef) {
|
|
// FIXME: Leaving for reference, probably don't need
|
|
// process.nextTick(this._editorRef.focus);
|
|
this._editorRef.focus();
|
|
}
|
|
}
|
|
|
|
blurEditor() {
|
|
if (this._editorRef) {
|
|
this._editorRef.blur();
|
|
}
|
|
}
|
|
|
|
setEditorRef(ref: Editor) {
|
|
this._editorRef = ref;
|
|
}
|
|
|
|
setPopoutRef(ref: Popout) {
|
|
this._popoutRef = ref;
|
|
}
|
|
|
|
setSearchPopoutRef(ref: SearchPopout) {
|
|
this._searchPopoutRef = ref;
|
|
}
|
|
|
|
onFocus() {
|
|
AppAnalyticsUtils.trackWithMetadata('search_opened');
|
|
this.setState({focused: true});
|
|
}
|
|
|
|
onBlur() {
|
|
this.setState({focused: false}, () => {
|
|
PopoutActionCreators.close(SEARCH_POPOUT_ID);
|
|
|
|
if (DraftJSUtils.isEmpty(this.props.editorState)) {
|
|
this.clearSearch();
|
|
}
|
|
});
|
|
}
|
|
|
|
onDownArrow(event: KeyboardEvent) {
|
|
event.preventDefault();
|
|
if (this._searchPopoutRef) {
|
|
this._searchPopoutRef.focusNextOption();
|
|
}
|
|
return true;
|
|
}
|
|
|
|
onUpArrow(event: KeyboardEvent) {
|
|
event.preventDefault();
|
|
if (this._searchPopoutRef) {
|
|
this._searchPopoutRef.focusPreviousOption();
|
|
}
|
|
return true;
|
|
}
|
|
|
|
onTab(event: KeyboardEvent) {
|
|
event.preventDefault();
|
|
if (this._searchPopoutRef) {
|
|
this._searchPopoutRef.selectOption();
|
|
}
|
|
return true;
|
|
}
|
|
|
|
handleReturn(event: KeyboardEvent) {
|
|
event.preventDefault();
|
|
let handled = false;
|
|
if (this._searchPopoutRef) {
|
|
handled = this._searchPopoutRef.selectOption();
|
|
}
|
|
if (!handled) {
|
|
this.search();
|
|
}
|
|
return true;
|
|
}
|
|
|
|
onEscape(event: KeyboardEvent) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.blurEditor();
|
|
return true;
|
|
}
|
|
|
|
handleBeforeInput(character: string) {
|
|
let {editorState} = this.props;
|
|
const {focused} = this.state;
|
|
const query = DraftJSUtils.getFirstTextBlock(editorState);
|
|
if (query.length >= MAX_LENGTH) {
|
|
return true;
|
|
}
|
|
editorState = DraftJSUtils.updateContent(character, editorState);
|
|
// Probs never needed, but here as a safety (i.e. if character ever
|
|
// happened to be more than 1 char)
|
|
editorState = DraftJSUtils.truncateContent(editorState, MAX_LENGTH);
|
|
editorState = this.tokenize(editorState);
|
|
this.setEditorState(editorState);
|
|
if (!focused) {
|
|
this.setState({focused: true});
|
|
}
|
|
return true;
|
|
}
|
|
|
|
handleKeyCommand(command: string) {
|
|
let {editorState} = this.props;
|
|
const {focused} = this.state;
|
|
switch (command) {
|
|
case 'backspace':
|
|
case 'backspace-word':
|
|
case 'backspace-to-start-of-line':
|
|
case 'delete':
|
|
case 'delete-word':
|
|
editorState = DraftJSUtils.deleteContent(command, editorState);
|
|
editorState = this.tokenize(editorState);
|
|
this.setEditorState(editorState);
|
|
if (!focused) {
|
|
this.setState({focused: true});
|
|
}
|
|
return true;
|
|
case 'transpose-characters':
|
|
case 'move-selection-to-start-of-block':
|
|
case 'move-selection-to-end-of-block':
|
|
editorState = DraftJSUtils.miscCommand(command, editorState);
|
|
editorState = this.tokenize(editorState);
|
|
this.setEditorState(editorState);
|
|
return true;
|
|
// Misc commands that should never execute
|
|
case 'split-block':
|
|
case 'underline':
|
|
case 'bold':
|
|
case 'italic':
|
|
return true;
|
|
}
|
|
}
|
|
|
|
handlePastedText(text: string) {
|
|
let {editorState} = this.props;
|
|
const {focused} = this.state;
|
|
text = text.replace(/\n/g, '');
|
|
editorState = DraftJSUtils.updateContent(text, editorState);
|
|
editorState = DraftJSUtils.truncateContent(editorState, MAX_LENGTH);
|
|
editorState = this.tokenize(editorState);
|
|
if (!focused) {
|
|
this.setState({focused: true});
|
|
}
|
|
this.setEditorState(editorState);
|
|
return true;
|
|
}
|
|
|
|
handlePastedFiles() {
|
|
return true;
|
|
}
|
|
|
|
handleDroppedFiles() {
|
|
return true;
|
|
}
|
|
|
|
handleDrop() {
|
|
return true;
|
|
}
|
|
|
|
setEditorState(editorState) {
|
|
const {searchId} = this.props;
|
|
SearchActionCreators.setSearchState(searchId, editorState);
|
|
}
|
|
|
|
// Due to how `contenteditable` handles cmd-left/right and home/end, we have
|
|
// to manually set the cursor position to the beginning or end, otherwise the
|
|
// cursor will only jump by html block elements which is not useful
|
|
handleKeyBind(event: KeyboardEvent) {
|
|
const {key, metaKey, shiftKey} = event;
|
|
let {editorState} = this.props;
|
|
// // Appears to be a bug in DraftJS when certain commands propogate
|
|
event.stopPropagation();
|
|
if (key === 'Home' || (key === 'ArrowLeft' && metaKey)) {
|
|
event.preventDefault();
|
|
if (shiftKey) {
|
|
editorState = DraftJSUtils.setToStartSelection(editorState);
|
|
} else {
|
|
editorState = DraftJSUtils.setCollapsedStartSelection(editorState);
|
|
}
|
|
this.setEditorState(editorState);
|
|
return true;
|
|
}
|
|
if (key === 'End' || (key === 'ArrowRight' && metaKey)) {
|
|
event.preventDefault();
|
|
if (shiftKey) {
|
|
editorState = DraftJSUtils.setToEndSelection(editorState);
|
|
} else {
|
|
editorState = DraftJSUtils.setCollapsedEndSelection(editorState);
|
|
}
|
|
this.setEditorState(editorState);
|
|
return true;
|
|
}
|
|
// Ensure we properly handle all the rest of the inputs
|
|
return DraftJSUtils.getDefaultKeyBinding(event);
|
|
}
|
|
|
|
renderInput() {
|
|
const {editorState} = this.props;
|
|
return (
|
|
<Editor
|
|
ref={this.setEditorRef}
|
|
onDownArrow={this.onDownArrow}
|
|
onUpArrow={this.onUpArrow}
|
|
onTab={this.onTab}
|
|
onEscape={this.onEscape}
|
|
onBlur={this.onBlur}
|
|
onFocus={this.onFocus}
|
|
handleReturn={this.handleReturn}
|
|
handleBeforeInput={this.handleBeforeInput}
|
|
handleKeyCommand={this.handleKeyCommand}
|
|
handlePastedText={this.handlePastedText}
|
|
handlePastedFiles={this.handlePastedFiles}
|
|
handleDroppedFiles={this.handleDroppedFiles}
|
|
handleDrop={this.handleDrop}
|
|
keyBindingFn={this.handleKeyBind}
|
|
placeholder={i18n.Messages.SEARCH}
|
|
editorState={editorState}
|
|
onChange={this.setEditorState}
|
|
/>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {searchId, editorState, hasResults, theme} = this.props;
|
|
const {focused} = this.state;
|
|
const hasContent = !!DraftJSUtils.getFirstTextBlock(editorState).length;
|
|
if (!searchId) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Popout
|
|
offsetX={POPOUT_OFFSET}
|
|
ref={this.setPopoutRef}
|
|
uniqueId={SEARCH_POPOUT_ID}
|
|
render={this.renderPopout}
|
|
position="bottom"
|
|
toggleClose={false}
|
|
animationType="none"
|
|
preventInvert>
|
|
<div className={classNames({'theme-dark': theme === ThemeTypes.DARK})}>
|
|
<div className={classNames('search', {open: hasContent, focused})} onClick={this.focusEditor}>
|
|
<div key={searchId} className={classNames('search-bar', {'search-bar-light': theme === ThemeTypes.LIGHT})}>
|
|
{this.renderInput()}
|
|
<SearchBarIcon handleClear={this.handleClearSearch} hasContent={hasContent || hasResults} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Popout>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Flux.connectStores([SearchStore, ChannelSectionStore, VideoThemeStore], () => {
|
|
const searchId = SearchStore.getCurrentSearchId();
|
|
const isSearching = searchId ? SearchStore.isSearching(searchId) : false;
|
|
const editorState =
|
|
(searchId && SearchStore.getEditorState(searchId)) ||
|
|
DraftJSUtils.createEmptyEditorState(DraftJSSearchUtils.generateDecorators(SearchTokens));
|
|
return {
|
|
searchId,
|
|
isSearching,
|
|
editorState,
|
|
hasResults: SearchStore.hasResults(searchId),
|
|
theme: VideoThemeStore.theme,
|
|
};
|
|
})(Search);
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/Search.js
|