Support Enter shortcut in findBy helpers

This commit is contained in:
Fedor Indutny 2024-02-14 10:15:26 -08:00 committed by GitHub
parent e158bd1a95
commit 89525d3e16
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 92 additions and 54 deletions

View file

@ -714,6 +714,10 @@ export function LeftPane({
updateSearchTerm,
onChangeComposeSelectedRegion: setComposeSelectedRegion,
showConversation,
lookupConversationWithoutServiceId,
showUserNotFoundModal,
setIsFetchingUUID,
showInbox,
})}
</NavSidebarSearchHeader>
)}

View file

@ -15,6 +15,7 @@ import { parseAndFormatPhoneNumber } from '../../util/libphonenumberInstance';
import type { UUIDFetchStateType } from '../../util/uuidFetchState';
import type { CountryDataType } from '../../util/getCountryData';
import { isFetchingByE164 } from '../../util/uuidFetchState';
import { drop } from '../../util/drop';
import type { LookupConversationWithoutServiceIdActionsType } from '../../util/lookupConversationWithoutServiceId';
import { Spinner } from '../Spinner';
import { Button } from '../Button';
@ -28,6 +29,12 @@ export type LeftPaneFindByPhoneNumberPropsType = {
countries: ReadonlyArray<CountryDataType>;
};
type DoLookupActionsType = Readonly<{
showInbox: () => void;
showConversation: ShowConversationType;
}> &
LookupConversationWithoutServiceIdActionsType;
export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFindByPhoneNumberPropsType> {
private readonly searchTerm: string;
@ -100,13 +107,15 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
i18n,
onChangeComposeSearchTerm,
onChangeComposeSelectedRegion,
...lookupActions
}: Readonly<{
i18n: LocalizerType;
onChangeComposeSearchTerm: (
event: React.ChangeEvent<HTMLInputElement>
) => unknown;
onChangeComposeSelectedRegion: (newRegion: string) => void;
}>): ReactChild {
}> &
DoLookupActionsType): ReactChild {
const placeholder = i18n(
'icu:LeftPaneFindByHelper__placeholder--findByPhoneNumber'
);
@ -129,6 +138,11 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
placeholder={placeholder}
ref={focusRef}
value={this.searchTerm}
onKeyDown={ev => {
if (ev.key === 'Enter') {
drop(this.doLookup(lookupActions));
}
}}
/>
</div>
);
@ -136,38 +150,15 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
override getFooterContents({
i18n,
lookupConversationWithoutServiceId,
showUserNotFoundModal,
setIsFetchingUUID,
showInbox,
showConversation,
...lookupActions
}: Readonly<{
i18n: LocalizerType;
showInbox: () => void;
showConversation: ShowConversationType;
}> &
LookupConversationWithoutServiceIdActionsType): ReactChild {
DoLookupActionsType): ReactChild {
return (
<Button
disabled={this.isLookupDisabled()}
onClick={async () => {
if (!this.phoneNumber) {
return;
}
const conversationId = await lookupConversationWithoutServiceId({
showUserNotFoundModal,
setIsFetchingUUID,
type: 'e164',
e164: this.phoneNumber.e164,
phoneNumber: this.searchTerm,
});
if (conversationId != null) {
showConversation({ conversationId });
showInbox();
}
}}
onClick={() => drop(this.doLookup(lookupActions))}
>
{this.isFetching() ? (
<span aria-label={i18n('icu:loading')} role="status">
@ -207,6 +198,31 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
return false;
}
private async doLookup({
lookupConversationWithoutServiceId,
showUserNotFoundModal,
setIsFetchingUUID,
showInbox,
showConversation,
}: DoLookupActionsType): Promise<void> {
if (!this.phoneNumber || this.isLookupDisabled()) {
return;
}
const conversationId = await lookupConversationWithoutServiceId({
showUserNotFoundModal,
setIsFetchingUUID,
type: 'e164',
e164: this.phoneNumber.e164,
phoneNumber: this.searchTerm,
});
if (conversationId != null) {
showConversation({ conversationId });
showInbox();
}
}
private isFetching(): boolean {
if (this.phoneNumber != null) {
return isFetchingByE164(this.uuidFetchState, this.phoneNumber.e164);

View file

@ -13,6 +13,7 @@ import { getUsernameFromSearch } from '../../types/Username';
import type { ShowConversationType } from '../../state/ducks/conversations';
import type { UUIDFetchStateType } from '../../util/uuidFetchState';
import { isFetchingByUsername } from '../../util/uuidFetchState';
import { drop } from '../../util/drop';
import type { LookupConversationWithoutServiceIdActionsType } from '../../util/lookupConversationWithoutServiceId';
import { Spinner } from '../Spinner';
import { Button } from '../Button';
@ -22,6 +23,12 @@ export type LeftPaneFindByUsernamePropsType = {
uuidFetchState: UUIDFetchStateType;
};
type DoLookupActionsType = Readonly<{
showInbox: () => void;
showConversation: ShowConversationType;
}> &
LookupConversationWithoutServiceIdActionsType;
export class LeftPaneFindByUsernameHelper extends LeftPaneHelper<LeftPaneFindByUsernamePropsType> {
private readonly searchTerm: string;
@ -78,12 +85,14 @@ export class LeftPaneFindByUsernameHelper extends LeftPaneHelper<LeftPaneFindByU
override getSearchInput({
i18n,
onChangeComposeSearchTerm,
...lookupActions
}: Readonly<{
i18n: LocalizerType;
onChangeComposeSearchTerm: (
event: React.ChangeEvent<HTMLInputElement>
) => unknown;
}>): ReactChild {
}> &
DoLookupActionsType): ReactChild {
const placeholder = i18n(
'icu:LeftPaneFindByHelper__placeholder--findByUsername'
);
@ -101,43 +110,26 @@ export class LeftPaneFindByUsernameHelper extends LeftPaneHelper<LeftPaneFindByU
ref={focusRef}
value={this.searchTerm}
description={description}
onKeyDown={ev => {
if (ev.key === 'Enter') {
drop(this.doLookup(lookupActions));
}
}}
/>
);
}
override getFooterContents({
i18n,
lookupConversationWithoutServiceId,
showUserNotFoundModal,
setIsFetchingUUID,
showInbox,
showConversation,
...lookupActions
}: Readonly<{
i18n: LocalizerType;
showInbox: () => void;
showConversation: ShowConversationType;
}> &
LookupConversationWithoutServiceIdActionsType): ReactChild {
DoLookupActionsType): ReactChild {
return (
<Button
disabled={this.isLookupDisabled()}
onClick={async () => {
if (!this.username) {
return;
}
const conversationId = await lookupConversationWithoutServiceId({
showUserNotFoundModal,
setIsFetchingUUID,
type: 'username',
username: this.username,
});
if (conversationId != null) {
showConversation({ conversationId });
showInbox();
}
}}
onClick={() => drop(this.doLookup(lookupActions))}
>
{this.isFetching() ? (
<span aria-label={i18n('icu:loading')} role="status">
@ -177,6 +169,30 @@ export class LeftPaneFindByUsernameHelper extends LeftPaneHelper<LeftPaneFindByU
return false;
}
private async doLookup({
lookupConversationWithoutServiceId,
showUserNotFoundModal,
setIsFetchingUUID,
showInbox,
showConversation,
}: DoLookupActionsType): Promise<void> {
if (!this.username || this.isLookupDisabled()) {
return;
}
const conversationId = await lookupConversationWithoutServiceId({
showUserNotFoundModal,
setIsFetchingUUID,
type: 'username',
username: this.username,
});
if (conversationId != null) {
showConversation({ conversationId });
showInbox();
}
}
private isFetching(): boolean {
if (this.username != null) {
return isFetchingByUsername(this.uuidFetchState, this.username);

View file

@ -47,7 +47,9 @@ export abstract class LeftPaneHelper<T> {
onChangeComposeSelectedRegion: (newRegion: string) => void;
updateSearchTerm: (searchTerm: string) => unknown;
showConversation: ShowConversationType;
}>
showInbox: () => void;
}> &
LookupConversationWithoutServiceIdActionsType
): null | ReactChild {
return null;
}