do not show search input if we only got a single conversation
parent
714024fb1f
commit
985a5d92bc
@ -1,65 +1,32 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { animation, contextMenu, Item, Menu } from 'react-contexify';
|
import { useSelector } from 'react-redux';
|
||||||
|
import { getConversationsCount } from '../../state/selectors/conversations';
|
||||||
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
|
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
searchString: string;
|
searchString: string;
|
||||||
onChange: any;
|
onChange: any;
|
||||||
handleNavigation?: any;
|
|
||||||
placeholder: string;
|
placeholder: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class SessionSearchInput extends React.Component<Props> {
|
export const SessionSearchInput = (props: Props) => {
|
||||||
public constructor(props: Props) {
|
const { searchString, onChange, placeholder } = props;
|
||||||
super(props);
|
|
||||||
this.handleKeyDown = this.handleKeyDown.bind(this);
|
const convoCount = useSelector(getConversationsCount);
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
// just after onboard we only have a conversation with ourself
|
||||||
const { searchString } = this.props;
|
if (convoCount <= 1) {
|
||||||
const triggerId = 'session-search-input-context';
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="session-search-input">
|
||||||
<div
|
|
||||||
className="session-search-input"
|
|
||||||
onContextMenu={(e: any) => {
|
|
||||||
contextMenu.show({
|
|
||||||
id: triggerId,
|
|
||||||
event: e,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SessionIconButton iconSize={SessionIconSize.Medium} iconType={SessionIconType.Search} />
|
<SessionIconButton iconSize={SessionIconSize.Medium} iconType={SessionIconType.Search} />
|
||||||
<input
|
<input
|
||||||
value={searchString}
|
value={searchString}
|
||||||
onChange={e => this.props.onChange(e.target.value)}
|
onChange={e => onChange(e.target.value)}
|
||||||
onKeyDown={this.handleKeyDown}
|
placeholder={placeholder}
|
||||||
placeholder={this.props.placeholder}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Menu id={triggerId} animation={animation.fade}>
|
|
||||||
<Item onClick={() => document.execCommand('undo')}>{window.i18n('editMenuUndo')}</Item>
|
|
||||||
<Item onClick={() => document.execCommand('redo')}>{window.i18n('editMenuRedo')}</Item>
|
|
||||||
<hr />
|
|
||||||
<Item onClick={() => document.execCommand('cut')}>{window.i18n('editMenuCut')}</Item>
|
|
||||||
<Item onClick={() => document.execCommand('copy')}>{window.i18n('editMenuCopy')}</Item>
|
|
||||||
<Item onClick={() => document.execCommand('paste')}>{window.i18n('editMenuPaste')}</Item>
|
|
||||||
<Item onClick={() => document.execCommand('selectAll')}>
|
|
||||||
{window.i18n('editMenuSelectAll')}
|
|
||||||
</Item>
|
|
||||||
</Menu>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
public handleKeyDown(e: any) {
|
|
||||||
if (e.keyCode === 38 || e.keyCode === 40 || e.key === 'Enter') {
|
|
||||||
// Up or Bottom arrow pressed
|
|
||||||
if (this.props.handleNavigation) {
|
|
||||||
e.stopPropagation();
|
|
||||||
this.props.handleNavigation(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -1,86 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { UserSearchResults } from '../UserSearchResults';
|
|
||||||
import { SessionSearchInput } from './SessionSearchInput';
|
|
||||||
|
|
||||||
import { SearchResultsProps } from '../SearchResults';
|
|
||||||
import autoBind from 'auto-bind';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
searchTerm: string;
|
|
||||||
placeholder: string;
|
|
||||||
searchResults?: SearchResultsProps;
|
|
||||||
updateSearch: (searchTerm: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
selectedContact: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class UserSearchDropdown extends React.Component<Props, State> {
|
|
||||||
public constructor(props: Props) {
|
|
||||||
super(props);
|
|
||||||
autoBind(this);
|
|
||||||
this.state = {
|
|
||||||
selectedContact: -1,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
public handleNavigation(e: any) {
|
|
||||||
const { selectedContact } = this.state;
|
|
||||||
const { searchResults } = this.props;
|
|
||||||
// arrow up/down button should select next/previous list element
|
|
||||||
if (
|
|
||||||
e.keyCode === 38 &&
|
|
||||||
selectedContact > 0 &&
|
|
||||||
searchResults &&
|
|
||||||
searchResults.contacts.length > 0
|
|
||||||
) {
|
|
||||||
this.setState(prevState => ({
|
|
||||||
selectedContact: +prevState.selectedContact - 1,
|
|
||||||
}));
|
|
||||||
} else if (
|
|
||||||
e.keyCode === 40 &&
|
|
||||||
searchResults &&
|
|
||||||
selectedContact < searchResults.contacts.length - 1
|
|
||||||
) {
|
|
||||||
this.setState(prevState => ({
|
|
||||||
selectedContact: +prevState.selectedContact + 1,
|
|
||||||
}));
|
|
||||||
} else if (e.key === 'Enter' && searchResults && searchResults.contacts.length > 0) {
|
|
||||||
this.handleContactSelected(searchResults.contacts[selectedContact].phoneNumber);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
const { searchResults, placeholder } = this.props;
|
|
||||||
const { selectedContact } = this.state;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="user-search-dropdown">
|
|
||||||
<SessionSearchInput
|
|
||||||
searchString={this.props.searchTerm}
|
|
||||||
onChange={this.updateSearch}
|
|
||||||
placeholder={placeholder}
|
|
||||||
handleNavigation={this.handleNavigation}
|
|
||||||
/>
|
|
||||||
{searchResults && (
|
|
||||||
<UserSearchResults
|
|
||||||
{...searchResults}
|
|
||||||
selectedContact={selectedContact}
|
|
||||||
onContactSelected={this.handleContactSelected}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
public updateSearch(data: string) {
|
|
||||||
this.setState({ selectedContact: -1 });
|
|
||||||
this.props.updateSearch(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
public handleContactSelected(key: string) {
|
|
||||||
this.updateSearch(key);
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue