do not show search input if we only got a single conversation
audric
4 years ago
parent
714024fb1f
commit
985a5d92bc
@ -1,65 +1,32 @@
|
||||
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';
|
||||
|
||||
interface Props {
|
||||
searchString: string;
|
||||
onChange: any;
|
||||
handleNavigation?: any;
|
||||
placeholder: string;
|
||||
}
|
||||
|
||||
export class SessionSearchInput extends React.Component<Props> {
|
||||
public constructor(props: Props) {
|
||||
super(props);
|
||||
this.handleKeyDown = this.handleKeyDown.bind(this);
|
||||
}
|
||||
export const SessionSearchInput = (props: Props) => {
|
||||
const { searchString, onChange, placeholder } = props;
|
||||
|
||||
public render() {
|
||||
const { searchString } = this.props;
|
||||
const triggerId = 'session-search-input-context';
|
||||
const convoCount = useSelector(getConversationsCount);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="session-search-input"
|
||||
onContextMenu={(e: any) => {
|
||||
contextMenu.show({
|
||||
id: triggerId,
|
||||
event: e,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SessionIconButton iconSize={SessionIconSize.Medium} iconType={SessionIconType.Search} />
|
||||
<input
|
||||
value={searchString}
|
||||
onChange={e => this.props.onChange(e.target.value)}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
placeholder={this.props.placeholder}
|
||||
/>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
// just after onboard we only have a conversation with ourself
|
||||
if (convoCount <= 1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="session-search-input">
|
||||
<SessionIconButton iconSize={SessionIconSize.Medium} iconType={SessionIconType.Search} />
|
||||
<input
|
||||
value={searchString}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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