Use ListTile in username/e164 compose
This commit is contained in:
parent
d2322de4a3
commit
37a2a1c943
3 changed files with 60 additions and 26 deletions
|
@ -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}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
{
|
{
|
||||||
|
|
Loading…
Add table
Reference in a new issue