This commit is contained in:
commit
13ff8fd32e
13 changed files with 158 additions and 17 deletions
|
@ -62,6 +62,7 @@ const defaultConversations: Array<ConversationType> = [
|
|||
];
|
||||
|
||||
const defaultSearchProps = {
|
||||
isSearchingGlobally: true,
|
||||
searchConversation: undefined,
|
||||
searchDisabled: false,
|
||||
searchTerm: 'hello',
|
||||
|
@ -145,6 +146,8 @@ const useProps = (overrideProps: OverridePropsType = {}): PropsType => {
|
|||
composeReplaceAvatar: action('composeReplaceAvatar'),
|
||||
composeSaveAvatarToDisk: action('composeSaveAvatarToDisk'),
|
||||
createGroup: action('createGroup'),
|
||||
endConversationSearch: action('endConversationSearch'),
|
||||
endSearch: action('endSearch'),
|
||||
getPreferredBadge: () => undefined,
|
||||
hasFailedStorySends: false,
|
||||
hasPendingUpdate: false,
|
||||
|
@ -609,6 +612,7 @@ export function ArchiveNoArchivedConversations(): JSX.Element {
|
|||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Archive,
|
||||
archivedConversations: [],
|
||||
isSearchingGlobally: false,
|
||||
searchConversation: undefined,
|
||||
searchTerm: '',
|
||||
startSearchCounter: 0,
|
||||
|
@ -625,6 +629,7 @@ export function ArchiveArchivedConversations(): JSX.Element {
|
|||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Archive,
|
||||
archivedConversations: defaultConversations,
|
||||
isSearchingGlobally: false,
|
||||
searchConversation: undefined,
|
||||
searchTerm: '',
|
||||
startSearchCounter: 0,
|
||||
|
@ -641,6 +646,7 @@ export function ArchiveSearchingAConversation(): JSX.Element {
|
|||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Archive,
|
||||
archivedConversations: defaultConversations,
|
||||
isSearchingGlobally: false,
|
||||
searchConversation: undefined,
|
||||
searchTerm: '',
|
||||
startSearchCounter: 0,
|
||||
|
|
|
@ -120,6 +120,8 @@ export type PropsType = {
|
|||
composeReplaceAvatar: ReplaceAvatarActionType;
|
||||
composeSaveAvatarToDisk: SaveAvatarToDiskActionType;
|
||||
createGroup: () => void;
|
||||
endConversationSearch: () => void;
|
||||
endSearch: () => void;
|
||||
navTabsCollapsed: boolean;
|
||||
openUsernameReservationModal: () => void;
|
||||
onOutgoingAudioCallInConversation: (conversationId: string) => void;
|
||||
|
@ -183,6 +185,8 @@ export function LeftPane({
|
|||
composeSaveAvatarToDisk,
|
||||
crashReportCount,
|
||||
createGroup,
|
||||
endConversationSearch,
|
||||
endSearch,
|
||||
getPreferredBadge,
|
||||
hasExpiredDialog,
|
||||
hasFailedStorySends,
|
||||
|
@ -704,6 +708,8 @@ export function LeftPane({
|
|||
{helper.getSearchInput({
|
||||
clearConversationSearch,
|
||||
clearSearch,
|
||||
endConversationSearch,
|
||||
endSearch,
|
||||
i18n,
|
||||
onChangeComposeSearchTerm: event => {
|
||||
setComposeSearchTerm(event.target.value);
|
||||
|
|
|
@ -15,7 +15,10 @@ type PropsType = {
|
|||
clearConversationSearch: () => void;
|
||||
clearSearch: () => void;
|
||||
disabled?: boolean;
|
||||
endConversationSearch: () => void;
|
||||
endSearch: () => void;
|
||||
i18n: LocalizerType;
|
||||
isSearchingGlobally: boolean;
|
||||
onEnterKeyDown?: (
|
||||
clearSearch: () => void,
|
||||
showConversation: ShowConversationType
|
||||
|
@ -31,7 +34,10 @@ export function LeftPaneSearchInput({
|
|||
clearConversationSearch,
|
||||
clearSearch,
|
||||
disabled,
|
||||
endConversationSearch,
|
||||
endSearch,
|
||||
i18n,
|
||||
isSearchingGlobally,
|
||||
onEnterKeyDown,
|
||||
searchConversation,
|
||||
searchTerm,
|
||||
|
@ -46,6 +52,7 @@ export function LeftPaneSearchInput({
|
|||
searchConversation?.id
|
||||
);
|
||||
const prevSearchCounter = usePrevious(startSearchCounter, startSearchCounter);
|
||||
const wasSearchingGlobally = usePrevious(false, isSearchingGlobally);
|
||||
|
||||
useEffect(() => {
|
||||
// When user chooses to search in a given conversation we focus the field for them
|
||||
|
@ -56,7 +63,10 @@ export function LeftPaneSearchInput({
|
|||
inputRef.current?.focus();
|
||||
}
|
||||
// When user chooses to start a new search, we focus the field
|
||||
if (startSearchCounter !== prevSearchCounter) {
|
||||
if (
|
||||
(isSearchingGlobally && !wasSearchingGlobally) ||
|
||||
startSearchCounter !== prevSearchCounter
|
||||
) {
|
||||
inputRef.current?.select();
|
||||
}
|
||||
}, [
|
||||
|
@ -64,6 +74,8 @@ export function LeftPaneSearchInput({
|
|||
prevSearchCounter,
|
||||
searchConversation,
|
||||
startSearchCounter,
|
||||
isSearchingGlobally,
|
||||
wasSearchingGlobally,
|
||||
]);
|
||||
|
||||
const changeValue = (nextSearchTerm: string) => {
|
||||
|
@ -82,11 +94,6 @@ export function LeftPaneSearchInput({
|
|||
}
|
||||
};
|
||||
|
||||
const clearAndFocus = () => {
|
||||
clearSearch();
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
const label = searchConversation ? i18n('icu:searchIn') : i18n('icu:search');
|
||||
|
||||
return (
|
||||
|
@ -98,7 +105,7 @@ export function LeftPaneSearchInput({
|
|||
moduleClassName="LeftPaneSearchInput"
|
||||
onBlur={() => {
|
||||
if (!searchConversation && !searchTerm) {
|
||||
clearSearch();
|
||||
endSearch();
|
||||
}
|
||||
}}
|
||||
onKeyDown={event => {
|
||||
|
@ -112,10 +119,14 @@ export function LeftPaneSearchInput({
|
|||
changeValue(event.currentTarget.value);
|
||||
}}
|
||||
onClear={() => {
|
||||
if (searchConversation && searchTerm) {
|
||||
changeValue('');
|
||||
if (searchTerm) {
|
||||
clearSearch();
|
||||
inputRef.current?.focus();
|
||||
} else if (searchConversation) {
|
||||
endConversationSearch();
|
||||
inputRef.current?.focus();
|
||||
} else {
|
||||
clearAndFocus();
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
}}
|
||||
ref={inputRef}
|
||||
|
@ -151,7 +162,7 @@ export function LeftPaneSearchInput({
|
|||
<button
|
||||
aria-label={i18n('icu:clearSearch')}
|
||||
className="LeftPaneSearchInput__in-conversation-pill__x-button"
|
||||
onClick={clearAndFocus}
|
||||
onClick={endConversationSearch}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -23,6 +23,7 @@ import * as KeyboardLayout from '../../services/keyboardLayout';
|
|||
|
||||
type LeftPaneArchiveBasePropsType = {
|
||||
archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
|
||||
isSearchingGlobally: boolean;
|
||||
searchConversation: undefined | ConversationType;
|
||||
searchTerm: string;
|
||||
startSearchCounter: number;
|
||||
|
@ -35,6 +36,8 @@ export type LeftPaneArchivePropsType =
|
|||
export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsType> {
|
||||
private readonly archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
|
||||
|
||||
private readonly isSearchingGlobally: boolean;
|
||||
|
||||
private readonly searchConversation: undefined | ConversationType;
|
||||
|
||||
private readonly searchTerm: string;
|
||||
|
@ -47,6 +50,7 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
|
|||
super();
|
||||
|
||||
this.archivedConversations = props.archivedConversations;
|
||||
this.isSearchingGlobally = props.isSearchingGlobally;
|
||||
this.searchConversation = props.searchConversation;
|
||||
this.searchTerm = props.searchTerm;
|
||||
this.startSearchCounter = props.startSearchCounter;
|
||||
|
@ -82,12 +86,16 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
|
|||
override getSearchInput({
|
||||
clearConversationSearch,
|
||||
clearSearch,
|
||||
endConversationSearch,
|
||||
endSearch,
|
||||
i18n,
|
||||
updateSearchTerm,
|
||||
showConversation,
|
||||
}: Readonly<{
|
||||
clearConversationSearch: () => unknown;
|
||||
clearSearch: () => unknown;
|
||||
endConversationSearch: () => unknown;
|
||||
endSearch: () => unknown;
|
||||
i18n: LocalizerType;
|
||||
updateSearchTerm: (searchTerm: string) => unknown;
|
||||
showConversation: ShowConversationType;
|
||||
|
@ -100,7 +108,10 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
|
|||
<LeftPaneSearchInput
|
||||
clearConversationSearch={clearConversationSearch}
|
||||
clearSearch={clearSearch}
|
||||
endConversationSearch={endConversationSearch}
|
||||
endSearch={endSearch}
|
||||
i18n={i18n}
|
||||
isSearchingGlobally={this.isSearchingGlobally}
|
||||
searchConversation={this.searchConversation}
|
||||
searchTerm={this.searchTerm}
|
||||
showConversation={showConversation}
|
||||
|
|
|
@ -40,6 +40,8 @@ export abstract class LeftPaneHelper<T> {
|
|||
_: Readonly<{
|
||||
clearConversationSearch: () => unknown;
|
||||
clearSearch: () => unknown;
|
||||
endConversationSearch: () => unknown;
|
||||
endSearch: () => unknown;
|
||||
i18n: LocalizerType;
|
||||
onChangeComposeSearchTerm: (
|
||||
event: ChangeEvent<HTMLInputElement>
|
||||
|
|
|
@ -25,6 +25,7 @@ export type LeftPaneInboxPropsType = {
|
|||
archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
|
||||
pinnedConversations: ReadonlyArray<ConversationListItemPropsType>;
|
||||
isAboutToSearch: boolean;
|
||||
isSearchingGlobally: boolean;
|
||||
startSearchCounter: number;
|
||||
searchDisabled: boolean;
|
||||
searchTerm: string;
|
||||
|
@ -40,6 +41,8 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
|
|||
|
||||
private readonly isAboutToSearch: boolean;
|
||||
|
||||
private readonly isSearchingGlobally: boolean;
|
||||
|
||||
private readonly startSearchCounter: number;
|
||||
|
||||
private readonly searchDisabled: boolean;
|
||||
|
@ -53,6 +56,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
|
|||
archivedConversations,
|
||||
pinnedConversations,
|
||||
isAboutToSearch,
|
||||
isSearchingGlobally,
|
||||
startSearchCounter,
|
||||
searchDisabled,
|
||||
searchTerm,
|
||||
|
@ -64,6 +68,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
|
|||
this.archivedConversations = archivedConversations;
|
||||
this.pinnedConversations = pinnedConversations;
|
||||
this.isAboutToSearch = isAboutToSearch;
|
||||
this.isSearchingGlobally = isSearchingGlobally;
|
||||
this.startSearchCounter = startSearchCounter;
|
||||
this.searchDisabled = searchDisabled;
|
||||
this.searchTerm = searchTerm;
|
||||
|
@ -84,12 +89,16 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
|
|||
override getSearchInput({
|
||||
clearConversationSearch,
|
||||
clearSearch,
|
||||
endConversationSearch,
|
||||
endSearch,
|
||||
i18n,
|
||||
showConversation,
|
||||
updateSearchTerm,
|
||||
}: Readonly<{
|
||||
clearConversationSearch: () => unknown;
|
||||
clearSearch: () => unknown;
|
||||
endConversationSearch: () => unknown;
|
||||
endSearch: () => unknown;
|
||||
i18n: LocalizerType;
|
||||
showConversation: ShowConversationType;
|
||||
updateSearchTerm: (searchTerm: string) => unknown;
|
||||
|
@ -98,8 +107,11 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
|
|||
<LeftPaneSearchInput
|
||||
clearConversationSearch={clearConversationSearch}
|
||||
clearSearch={clearSearch}
|
||||
endConversationSearch={endConversationSearch}
|
||||
endSearch={endSearch}
|
||||
disabled={this.searchDisabled}
|
||||
i18n={i18n}
|
||||
isSearchingGlobally={this.isSearchingGlobally}
|
||||
searchConversation={this.searchConversation}
|
||||
searchTerm={this.searchTerm}
|
||||
showConversation={showConversation}
|
||||
|
|
|
@ -44,6 +44,7 @@ export type LeftPaneSearchPropsType = {
|
|||
primarySendsSms: boolean;
|
||||
searchTerm: string;
|
||||
startSearchCounter: number;
|
||||
isSearchingGlobally: boolean;
|
||||
searchDisabled: boolean;
|
||||
searchConversation: undefined | ConversationType;
|
||||
};
|
||||
|
@ -57,6 +58,8 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
|
|||
|
||||
private readonly contactResults: MaybeLoadedSearchResultsType<ConversationListItemPropsType>;
|
||||
|
||||
private readonly isSearchingGlobally: boolean;
|
||||
|
||||
private readonly messageResults: MaybeLoadedSearchResultsType<{
|
||||
id: string;
|
||||
conversationId: string;
|
||||
|
@ -78,6 +81,7 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
|
|||
constructor({
|
||||
contactResults,
|
||||
conversationResults,
|
||||
isSearchingGlobally,
|
||||
messageResults,
|
||||
primarySendsSms,
|
||||
searchConversation,
|
||||
|
@ -90,6 +94,7 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
|
|||
|
||||
this.contactResults = contactResults;
|
||||
this.conversationResults = conversationResults;
|
||||
this.isSearchingGlobally = isSearchingGlobally;
|
||||
this.messageResults = messageResults;
|
||||
this.primarySendsSms = primarySendsSms;
|
||||
this.searchConversation = searchConversation;
|
||||
|
@ -103,12 +108,16 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
|
|||
override getSearchInput({
|
||||
clearConversationSearch,
|
||||
clearSearch,
|
||||
endConversationSearch,
|
||||
endSearch,
|
||||
i18n,
|
||||
showConversation,
|
||||
updateSearchTerm,
|
||||
}: Readonly<{
|
||||
clearConversationSearch: () => unknown;
|
||||
clearSearch: () => unknown;
|
||||
endConversationSearch: () => unknown;
|
||||
endSearch: () => unknown;
|
||||
i18n: LocalizerType;
|
||||
showConversation: ShowConversationType;
|
||||
updateSearchTerm: (searchTerm: string) => unknown;
|
||||
|
@ -117,8 +126,11 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
|
|||
<LeftPaneSearchInput
|
||||
clearConversationSearch={clearConversationSearch}
|
||||
clearSearch={clearSearch}
|
||||
endConversationSearch={endConversationSearch}
|
||||
endSearch={endSearch}
|
||||
disabled={this.searchDisabled}
|
||||
i18n={i18n}
|
||||
isSearchingGlobally={this.isSearchingGlobally}
|
||||
onEnterKeyDown={this.onEnterKeyDown}
|
||||
searchConversation={this.searchConversation}
|
||||
searchTerm={this.searchTerm}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue