Vince
5 years ago
committed by
GitHub
commit
badfb8a203
@ -0,0 +1,128 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Avatar } from '../Avatar';
|
||||
import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
|
||||
|
||||
export interface ContactType {
|
||||
id: string;
|
||||
selected: boolean;
|
||||
authorProfileName: string;
|
||||
authorPhoneNumber: string;
|
||||
authorName: string;
|
||||
authorColor: any;
|
||||
authorAvatarPath: string;
|
||||
checkmarked: boolean;
|
||||
existingMember: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
member: ContactType;
|
||||
isSelected: boolean;
|
||||
onSelect?: any;
|
||||
onUnselect?: any;
|
||||
}
|
||||
|
||||
interface State {
|
||||
isSelected: boolean;
|
||||
}
|
||||
|
||||
export class SessionMemberListItem extends React.Component<Props, State> {
|
||||
public static defaultProps = {
|
||||
isSelected: false,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isSelected: this.props.isSelected,
|
||||
};
|
||||
|
||||
this.handleSelectionAction = this.handleSelectionAction.bind(this);
|
||||
this.selectMember = this.selectMember.bind(this);
|
||||
this.unselectMember = this.unselectMember.bind(this);
|
||||
this.renderAvatar = this.renderAvatar.bind(this);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { isSelected } = this.state;
|
||||
|
||||
const name = this.props.member.authorProfileName;
|
||||
const pubkey = this.props.member.authorPhoneNumber;
|
||||
const shortPubkey = window.shortenPubkey(pubkey);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('session-member-item', isSelected && 'selected')}
|
||||
onClick={this.handleSelectionAction}
|
||||
role="button"
|
||||
>
|
||||
<div className="session-member-item__info">
|
||||
<span className="session-member-item__avatar">
|
||||
{this.renderAvatar()}
|
||||
</span>
|
||||
<span className="session-member-item__name">{name}</span>
|
||||
<span className="session-member-item__pubkey">{shortPubkey}</span>
|
||||
</div>
|
||||
<span
|
||||
className={classNames(
|
||||
'session-member-item__checkmark',
|
||||
isSelected && 'selected'
|
||||
)}
|
||||
>
|
||||
<SessionIcon
|
||||
iconType={SessionIconType.Check}
|
||||
iconSize={SessionIconSize.Medium}
|
||||
iconColor={'#00f782'}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderAvatar() {
|
||||
return (
|
||||
<Avatar
|
||||
avatarPath={this.props.member.authorAvatarPath}
|
||||
color={this.props.member.authorColor}
|
||||
conversationType="direct"
|
||||
i18n={window.i18n}
|
||||
name={this.props.member.authorName}
|
||||
phoneNumber={this.props.member.authorPhoneNumber}
|
||||
profileName={this.props.member.authorProfileName}
|
||||
size={28}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private handleSelectionAction() {
|
||||
if (this.state.isSelected) {
|
||||
this.unselectMember();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectMember();
|
||||
}
|
||||
|
||||
private selectMember() {
|
||||
this.setState({
|
||||
isSelected: true,
|
||||
});
|
||||
|
||||
if (this.props.onSelect) {
|
||||
this.props.onSelect(this.props.member);
|
||||
}
|
||||
}
|
||||
|
||||
private unselectMember() {
|
||||
this.setState({
|
||||
isSelected: false,
|
||||
});
|
||||
|
||||
if (this.props.onUnselect) {
|
||||
this.props.onUnselect(this.props.member);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue