forgeplus-react/src/forums/Component/ListItem.jsx

90 lines
3.6 KiB
JavaScript

import React, { useState, useEffect } from "react";
import { FlexAJ, AlignCenter, LeftLine } from "../css/layout";
import { Link } from "react-router-dom";
import { getImageUrl } from 'educoder';
import { Type, Tag } from "./ItemType";
import User from "./User";
import Drop from "./ItemDropDown";
import Nodata from '../Nodata';
export default ({ memos , current_user , calbackFunc , confirm }) => {
const [list, setList] = useState(undefined);
useEffect(() => {
if (memos) {
setList(memos);
}
}, [memos]);
return (
<ul className="forumList">
{list && list.length > 0 ? (
list.map((item, key) => {
let permission = {
index:key,
admin:current_user && current_user.admin,
banned_permission:item.banned_permission,
login:current_user && current_user.login,
is_currentUser:current_user && (item.user_login === current_user.login),
is_fine:item.is_fine,
sticky:item.sticky,
memo_watched:item.memo_watched,
user_banned_permission:item.banned_permission,
is_deleted:item.apply_destroy
}
return (
<li>
<FlexAJ>
<AlignCenter style={{ marginLeft: "-8px" }}>
<span>{Type(item.tag_name)}</span>
<Link
className="grey-3 task-hide"
style={{ maxWidth: "700px" }}
to={`/forums/${item.id}/detail`}
>
{item.subject}
</Link>
{ item.sticky === true ? <span className="ml8">{Tag("置顶")}</span> : "" }
{ item.is_original === true ? <span className="ml8">{Tag("原创")}</span> : "" }
{ item.is_fine === true ? <span className="ml8">{Tag("精华")}</span> : "" }
</AlignCenter>
<AlignCenter>
{ item.apply_destroy ? <span className="orange font-12 mr10">已申请删帖</span> : "" }
{
current_user && current_user.login ?
<Drop permission={permission} id={item.id} calbackFunc={calbackFunc} confirm={confirm}/>
:""
}
</AlignCenter>
</FlexAJ>
<FlexAJ className="mt8">
<AlignCenter>
<User login={item.user_login} name={item.username} url={getImageUrl(item.image_url)}></User>
{item.forum_section_title ? <Link to={`/forums/theme/${item.forum_section_id}`}><LeftLine>{item.forum_section_title}</LeftLine></Link> : "" }
{item.published_time ? <LeftLine>{item.published_time}</LeftLine> : "" }
</AlignCenter>
<span>
<span class="icon-wrap">
<i class="iconfont icon-zhengyan font-18"></i>
<span class="span-text">{item.viewed_count}</span>
</span>
<span class="icon-wrap">
<i class="iconfont icon-dianzan2 font-14"></i>
<span class="span-text">{item.praises_count}</span>
</span>
<span class="icon-wrap">
<i class="iconfont icon-pinglun1 font-14"></i>
<span class="span-text">{item.replies_count}</span>
</span>
</span>
</FlexAJ>
</li>
);
})
) :
<AlignCenter style={{height:"400px"}} className="bigNoData"><Nodata _html="暂无数据" /></AlignCenter>
}
</ul>
);
};