Use ListTile in username/e164 compose

This commit is contained in:
Fedor Indutny 2023-03-08 15:41:32 -08:00 committed by GitHub
parent d2322de4a3
commit 37a2a1c943
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 26 deletions

View file

@ -6,7 +6,10 @@ import React, { useCallback, useState } from 'react';
import { ButtonVariant } from '../Button'; import { ButtonVariant } from '../Button';
import { ConfirmationDialog } from '../ConfirmationDialog'; import { ConfirmationDialog } from '../ConfirmationDialog';
import { BaseConversationListItem } from './BaseConversationListItem'; import { SPINNER_CLASS_NAME } from './BaseConversationListItem';
import { ListTile } from '../ListTile';
import { Avatar, AvatarSize } from '../Avatar';
import { Spinner } from '../Spinner';
import type { ParsedE164Type } from '../../util/libphonenumberInstance'; import type { ParsedE164Type } from '../../util/libphonenumberInstance';
import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid'; import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
@ -87,19 +90,33 @@ export const StartNewConversation: FunctionComponent<Props> = React.memo(
return ( return (
<> <>
<BaseConversationListItem <ListTile
acceptedMessageRequest={false} leading={
color={AvatarColors[0]} <Avatar
conversationType="direct" acceptedMessageRequest={false}
headerName={phoneNumber.userInput} color={AvatarColors[0]}
i18n={i18n} conversationType="direct"
isMe={false} searchResult
isSelected={false} i18n={i18n}
onClick={boundOnClick} isMe={false}
phoneNumber={phoneNumber.userInput} title={phoneNumber.userInput}
shouldShowSpinner={isFetching} size={AvatarSize.THIRTY_TWO}
sharedGroupNames={[]} badge={undefined}
sharedGroupNames={[]}
/>
}
title={phoneNumber.userInput} title={phoneNumber.userInput}
onClick={boundOnClick}
trailing={
isFetching ? (
<Spinner
size="20px"
svgSize="small"
moduleClassName={SPINNER_CLASS_NAME}
direction="on-progress-dialog"
/>
) : undefined
}
/> />
{modal} {modal}
</> </>

View file

@ -3,7 +3,10 @@
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { BaseConversationListItem } from './BaseConversationListItem'; import { SPINNER_CLASS_NAME } from './BaseConversationListItem';
import { ListTile } from '../ListTile';
import { Avatar, AvatarSize } from '../Avatar';
import { Spinner } from '../Spinner';
import type { LocalizerType } from '../../types/Util'; import type { LocalizerType } from '../../types/Util';
import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid'; import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
@ -55,18 +58,32 @@ export function UsernameSearchResultListItem({
]); ]);
return ( return (
<BaseConversationListItem <ListTile
acceptedMessageRequest={false} leading={
conversationType="direct" <Avatar
headerName={username} acceptedMessageRequest={false}
i18n={i18n} conversationType="direct"
isMe={false} searchResult
isSelected={false} i18n={i18n}
isUsernameSearchResult isMe={false}
shouldShowSpinner={isFetchingUsername} title={username}
onClick={boundOnClick} size={AvatarSize.THIRTY_TWO}
sharedGroupNames={[]} badge={undefined}
sharedGroupNames={[]}
/>
}
title={username} title={username}
onClick={boundOnClick}
trailing={
isFetchingUsername ? (
<Spinner
size="20px"
svgSize="small"
moduleClassName={SPINNER_CLASS_NAME}
direction="on-progress-dialog"
/>
) : undefined
}
/> />
); );
} }

View file

@ -261,7 +261,7 @@ describe('pnp/username', function needsName() {
await searchInput.type(`@${CARL_USERNAME}`); await searchInput.type(`@${CARL_USERNAME}`);
debug('starting lookup'); debug('starting lookup');
await window.locator(`button >> "${CARL_USERNAME}"`).click(); await window.locator(`div.ListTile >> "${CARL_USERNAME}"`).click();
debug('sending a message'); debug('sending a message');
{ {