Support Enter shortcut in findBy helpers
This commit is contained in:
parent
e158bd1a95
commit
89525d3e16
4 changed files with 92 additions and 54 deletions
|
@ -714,6 +714,10 @@ export function LeftPane({
|
|||
updateSearchTerm,
|
||||
onChangeComposeSelectedRegion: setComposeSelectedRegion,
|
||||
showConversation,
|
||||
lookupConversationWithoutServiceId,
|
||||
showUserNotFoundModal,
|
||||
setIsFetchingUUID,
|
||||
showInbox,
|
||||
})}
|
||||
</NavSidebarSearchHeader>
|
||||
)}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue