114 lines
4.1 KiB
JavaScript
114 lines
4.1 KiB
JavaScript
|
|
import React, { Component } from 'react';
|
|
import { observer, inject } from 'mobx-react';
|
|
import clazz from 'classname';
|
|
import randomColor from 'randomcolor';
|
|
|
|
import classes from './style.css';
|
|
|
|
@inject(stores => ({
|
|
filter: stores.contacts.filter,
|
|
filtered: stores.contacts.filtered,
|
|
getContats: stores.contacts.getContats,
|
|
showUserinfo: stores.userinfo.toggle,
|
|
}))
|
|
@observer
|
|
export default class Contacts extends Component {
|
|
renderColumns(data, index) {
|
|
var list = data.filter((e, i) => i % 3 === index);
|
|
|
|
return list.map((e, index) => {
|
|
return (
|
|
<div
|
|
className={classes.group}
|
|
key={index}>
|
|
<div className={classes.header}>
|
|
<label>{e.prefix}</label>
|
|
|
|
<span>{e.list.length} people</span>
|
|
<span style={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
bottom: 0,
|
|
height: 4,
|
|
width: '100%',
|
|
background: randomColor(),
|
|
}} />
|
|
</div>
|
|
|
|
<div className={classes.list}>
|
|
{
|
|
e.list.map((e, index) => {
|
|
return (
|
|
<div
|
|
className={classes.item}
|
|
key={index}
|
|
onClick={() => this.props.showUserinfo(true, e)}>
|
|
<div className={classes.avatar}>
|
|
<img
|
|
src={e.HeadImgUrl}
|
|
style={{
|
|
height: 32,
|
|
width: 32,
|
|
}} />
|
|
</div>
|
|
<div className={classes.info}>
|
|
<p
|
|
className={classes.username}
|
|
dangerouslySetInnerHTML={{__html: e.RemarkName || e.NickName}} />
|
|
<p
|
|
className={classes.signature}
|
|
dangerouslySetInnerHTML={{__html: e.Signature || '无签名'}} />
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
}
|
|
|
|
componentWillMount() {
|
|
this.props.filter();
|
|
}
|
|
|
|
render() {
|
|
var { query, result } = this.props.filtered;
|
|
|
|
if (query && result.length === 0) {
|
|
return (
|
|
<div className={clazz(classes.container, classes.notfound)}>
|
|
<div className={classes.inner}>
|
|
<img src="assets/images/crash.png" />
|
|
<h1>找不到 '{query}'</h1>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={classes.container}>
|
|
<div className={classes.columns}>
|
|
<div className={classes.column}>
|
|
{
|
|
this.renderColumns(result, 0)
|
|
}
|
|
</div>
|
|
<div className={classes.column}>
|
|
{
|
|
this.renderColumns(result, 1)
|
|
}
|
|
</div>
|
|
<div className={classes.column}>
|
|
{
|
|
this.renderColumns(result, 2)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|