gamja/components/member-list.js

90 lines
1.9 KiB
JavaScript
Raw Normal View History

import { html, Component } from "../lib/index.js";
import { getNickURL } from "../state.js";
2020-06-26 08:32:56 -04:00
class MemberItem extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
shouldComponentUpdate(nextProps) {
return this.props.nick !== nextProps.nick
|| this.props.membership != nextProps.membership;
}
handleClick(event) {
2020-06-26 08:32:56 -04:00
event.preventDefault();
this.props.onClick();
2020-06-26 08:32:56 -04:00
}
render() {
// XXX: If we were feeling creative we could generate unique colors for
// each item in ISUPPORT CHANMODES. But I am not feeling creative.
const membmap = {
"~": "owner",
"&": "admin",
"@": "op",
"%": "halfop",
"+": "voice",
};
const membclass = membmap[this.props.membership[0]] || "";
let membership = "";
if (this.props.membership) {
membership = html`
<span class="membership ${membclass}" title=${membclass}>
${this.props.membership}
</span>
`;
};
return html`
<li>
<a
href=${getNickURL(this.props.nick)}
class="nick"
onClick=${this.handleClick}
>${membership}${this.props.nick}</a>
</li>
`;
}
2020-06-26 08:32:56 -04:00
}
function sortMembers(a, b) {
2021-06-10 12:11:11 -04:00
let [nickA, membA] = a, [nickB, membB] = b;
const prefixPrivs = ["~", "&", "@", "%", "+"]; // TODO: grab it from ISUPPORT PREFIX
2021-06-10 12:11:11 -04:00
let i = prefixPrivs.indexOf(membA[0]), j = prefixPrivs.indexOf(membB[0]);
if (i < 0) {
i = prefixPrivs.length;
}
if (j < 0) {
j = prefixPrivs.length;
}
if (i !== j) {
return i - j;
}
return nickA < nickB ? -1 : 1;
}
export default class MemberList extends Component {
shouldComponentUpdate(nextProps) {
return this.props.members !== nextProps.members;
}
render() {
return html`
<ul>
${Array.from(this.props.members).sort(sortMembers).map(([nick, membership]) => html`
<${MemberItem}
key=${nick}
nick=${nick}
membership=${membership}
onClick=${() => this.props.onNickClick(nick)}
/>
`)}
</ul>
`;
}
2020-06-26 08:32:56 -04:00
}