64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { Avatar, AvatarSize } from '../Avatar';
|
|
import { SessionIcon } from './icon';
|
|
import { Constants } from '../../session';
|
|
import { PubKey } from '../../session/types';
|
|
|
|
export interface ContactType {
|
|
id: string;
|
|
selected: boolean;
|
|
authorProfileName: string;
|
|
authorPhoneNumber: string;
|
|
authorName: string;
|
|
authorAvatarPath: string;
|
|
checkmarked: boolean;
|
|
existingMember: boolean;
|
|
}
|
|
|
|
type Props = {
|
|
member: ContactType;
|
|
index: number; // index in the list
|
|
isSelected: boolean;
|
|
// this bool is used to make a zombie appear with less opacity than a normal member
|
|
isZombie?: boolean;
|
|
onSelect?: (selectedMember: ContactType) => void;
|
|
onUnselect?: (selectedMember: ContactType) => void;
|
|
};
|
|
|
|
const AvatarItem = (props: { memberPubkey: string }) => {
|
|
return <Avatar size={AvatarSize.XS} pubkey={props.memberPubkey} />;
|
|
};
|
|
|
|
export const SessionMemberListItem = (props: Props) => {
|
|
const { isSelected, member, isZombie, onSelect, onUnselect } = props;
|
|
|
|
const name = member.authorProfileName || PubKey.shorten(member.authorPhoneNumber);
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
`session-member-item-${props.index}`,
|
|
'session-member-item',
|
|
isSelected && 'selected',
|
|
isZombie && 'zombie'
|
|
)}
|
|
onClick={() => {
|
|
isSelected ? onUnselect?.(member) : onSelect?.(member);
|
|
}}
|
|
role="button"
|
|
>
|
|
<div className="session-member-item__info">
|
|
<span className="session-member-item__avatar">
|
|
<AvatarItem memberPubkey={member.id} />
|
|
</span>
|
|
<span className="session-member-item__name">{name}</span>
|
|
</div>
|
|
<span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
|
|
<SessionIcon iconType="check" iconSize="medium" iconColor={Constants.UI.COLORS.GREEN} />
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|