44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import { Avatar, AvatarSize } from './avatar/Avatar';
|
|
import { Constants } from '../session';
|
|
import { SessionIcon } from './icon';
|
|
import { useConversationUsernameOrShorten } from '../hooks/useParamSelector';
|
|
|
|
const AvatarItem = (props: { memberPubkey: string }) => {
|
|
return <Avatar size={AvatarSize.XS} pubkey={props.memberPubkey} />;
|
|
};
|
|
|
|
export const MemberListItem = (props: {
|
|
pubkey: string;
|
|
isSelected: boolean;
|
|
// this bool is used to make a zombie appear with less opacity than a normal member
|
|
isZombie?: boolean;
|
|
onSelect?: (pubkey: string) => void;
|
|
onUnselect?: (pubkey: string) => void;
|
|
}) => {
|
|
const { isSelected, pubkey, isZombie, onSelect, onUnselect } = props;
|
|
|
|
const memberName = useConversationUsernameOrShorten(pubkey);
|
|
|
|
return (
|
|
<div
|
|
className={classNames('session-member-item', isSelected && 'selected', isZombie && 'zombie')}
|
|
onClick={() => {
|
|
isSelected ? onUnselect?.(pubkey) : onSelect?.(pubkey);
|
|
}}
|
|
role="button"
|
|
>
|
|
<div className="session-member-item__info">
|
|
<span className="session-member-item__avatar">
|
|
<AvatarItem memberPubkey={pubkey} />
|
|
</span>
|
|
<span className="session-member-item__name">{memberName}</span>
|
|
</div>
|
|
<span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
|
|
<SessionIcon iconType="check" iconSize="medium" iconColor={Constants.UI.COLORS.GREEN} />
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|