|
|
|
|
@ -3,104 +3,149 @@
|
|
|
|
|
* @Author: tangjiang
|
|
|
|
|
* @Github:
|
|
|
|
|
* @Date: 2019-12-17 17:35:17
|
|
|
|
|
* @LastEditors: tangjiang
|
|
|
|
|
* @LastEditTime: 2019-12-19 18:02:28
|
|
|
|
|
* @LastEditors : tangjiang
|
|
|
|
|
* @LastEditTime : 2019-12-26 11:30:32
|
|
|
|
|
*/
|
|
|
|
|
import './index.scss';
|
|
|
|
|
import 'quill/dist/quill.core.css'; // 核心样式
|
|
|
|
|
import 'quill/dist/quill.snow.css'; // 有工具栏
|
|
|
|
|
import 'quill/dist/quill.bubble.css'; // 无工具栏
|
|
|
|
|
import 'katex/dist/katex.min.css'; // katex 表达式样式
|
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import CommentIcon from './CommentIcon';
|
|
|
|
|
import { getImageUrl, CNotificationHOC } from 'educoder'
|
|
|
|
|
import { Icon } from 'antd';
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
// import QuillForEditor from '../../quillForEditor';
|
|
|
|
|
import CommentForm from './CommentForm';
|
|
|
|
|
import QuillForEditor from '../../quillForEditor';
|
|
|
|
|
|
|
|
|
|
// import {ModalConfirm} from '../ModalConfirm';
|
|
|
|
|
function CommentItem ({
|
|
|
|
|
isAdmin,
|
|
|
|
|
options,
|
|
|
|
|
confirm
|
|
|
|
|
confirm,
|
|
|
|
|
comment,
|
|
|
|
|
submitDeleteComment,
|
|
|
|
|
submitChildComment,
|
|
|
|
|
likeComment,
|
|
|
|
|
showOrHideComment
|
|
|
|
|
}) {
|
|
|
|
|
// 显示评论输入框
|
|
|
|
|
const [showQuill, setShowQuill] = useState(false);
|
|
|
|
|
// 加载更多评论内容
|
|
|
|
|
const [showMore, setShowMore] = useState(false);
|
|
|
|
|
// const [showMore, setShowMore] = useState(false);
|
|
|
|
|
// 显示子列数
|
|
|
|
|
const [showItemCount, setShowItemCount] = useState(5);
|
|
|
|
|
// 箭头方向
|
|
|
|
|
const [arrow, setArrow] = useState(false);
|
|
|
|
|
// 删除评论
|
|
|
|
|
const deleteComment = () => {
|
|
|
|
|
console.log('删除评论...');
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
author = {}, // 作者
|
|
|
|
|
id, // 评论id
|
|
|
|
|
content, // 回复内容
|
|
|
|
|
time, // 回复时间
|
|
|
|
|
hidden, // 是否隐藏
|
|
|
|
|
// hack_id, // OJ的ID
|
|
|
|
|
praise_count, // 点赞数
|
|
|
|
|
user_praise, // 当前用户是否点赞
|
|
|
|
|
can_delete,
|
|
|
|
|
children = [] // 子回复
|
|
|
|
|
} = comment;
|
|
|
|
|
|
|
|
|
|
// 删除评论 type: parent | child, id
|
|
|
|
|
const deleteComment = (id) => {
|
|
|
|
|
confirm({
|
|
|
|
|
title: '提示',
|
|
|
|
|
content: (<p>确定要删除该条回复吗?</p>),
|
|
|
|
|
content: ('确定要删除该条回复吗?'),
|
|
|
|
|
onOk () {
|
|
|
|
|
console.log('点击了删除');
|
|
|
|
|
console.log('点击了删除', id);
|
|
|
|
|
submitDeleteComment && submitDeleteComment(id);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// ModalConfirm('提示', (<p>确定要删除该条回复吗?</p>), () => {
|
|
|
|
|
// console.log('点击了删除');
|
|
|
|
|
// });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 评论头像
|
|
|
|
|
const commentAvatar = (url) => (
|
|
|
|
|
<img className="item-flex flex-image" src='https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg' alt=""/>
|
|
|
|
|
const commentAvatar = (author) => (
|
|
|
|
|
<img
|
|
|
|
|
className="item-flex flex-image"
|
|
|
|
|
src={author.image_url ? getImageUrl(`images/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'}
|
|
|
|
|
alt=""
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// 评论信息
|
|
|
|
|
const commentInfo = () => (
|
|
|
|
|
<p className="item-header">
|
|
|
|
|
<span className="item-name">用户名</span>
|
|
|
|
|
<span className="item-time">{moment(new Date(), 'YYYYMMDD HHmmss').fromNow()}</span>
|
|
|
|
|
<span className="item-close"><Icon type="close" onClick={deleteComment}/></span>
|
|
|
|
|
</p>
|
|
|
|
|
);
|
|
|
|
|
const commentInfo = (id, author, time, can_delete) => {
|
|
|
|
|
const _classNames = can_delete ? 'item-close' : 'item-close hide';
|
|
|
|
|
return (
|
|
|
|
|
<div className="item-header">
|
|
|
|
|
<span className="item-name">{author.name || ''}</span>
|
|
|
|
|
<span className="item-time">{time || ''}</span>
|
|
|
|
|
<span className={_classNames}>
|
|
|
|
|
<span className="iconfont icon-shanchu icon_font_size_14" onClick={() => deleteComment(id)}></span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 评论内容
|
|
|
|
|
const commentCtx = (ctx) => (
|
|
|
|
|
<p className="item-ctx">
|
|
|
|
|
这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容
|
|
|
|
|
</p>
|
|
|
|
|
);
|
|
|
|
|
const commentCtx = (ctx) => {
|
|
|
|
|
let _ctx = null;
|
|
|
|
|
try {
|
|
|
|
|
_ctx = JSON.parse(ctx);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
_ctx = ctx;
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<QuillForEditor
|
|
|
|
|
readOnly={true}
|
|
|
|
|
value={_ctx}
|
|
|
|
|
/>
|
|
|
|
|
)};
|
|
|
|
|
|
|
|
|
|
// 加载更多
|
|
|
|
|
const handleOnLoadMore = () => {
|
|
|
|
|
if (!arrow) {
|
|
|
|
|
// 展开所有
|
|
|
|
|
} else {
|
|
|
|
|
// 收起
|
|
|
|
|
}
|
|
|
|
|
const handleOnLoadMore = (len) => {
|
|
|
|
|
setShowItemCount(!arrow ? len : 1);
|
|
|
|
|
setArrow(!arrow);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 评论追加内容
|
|
|
|
|
const commentAppend = () => {
|
|
|
|
|
const commentAppend = (children = []) => {
|
|
|
|
|
|
|
|
|
|
const len = children.length;
|
|
|
|
|
const _moreClass = len > showItemCount ? 'comment_item_loadmore show' : 'comment_item_loadmore'
|
|
|
|
|
const lastTxt = len - showItemCount;
|
|
|
|
|
const renderChild = (children) => {
|
|
|
|
|
return children.map((child, i) => {
|
|
|
|
|
const {
|
|
|
|
|
id, // 评论id
|
|
|
|
|
author = {},
|
|
|
|
|
time,
|
|
|
|
|
content,
|
|
|
|
|
can_delete
|
|
|
|
|
} = child;
|
|
|
|
|
const showOrHide = i < showItemCount ? 'comment_item_show' : 'comment_item_hide';
|
|
|
|
|
return (
|
|
|
|
|
<li
|
|
|
|
|
key={`child_${i}`}
|
|
|
|
|
className={showOrHide}
|
|
|
|
|
>
|
|
|
|
|
<div className="comment_item_area comment_child_item_area">
|
|
|
|
|
{commentAvatar(author)}
|
|
|
|
|
<div className="item-flex item-desc">
|
|
|
|
|
{commentInfo(id, author, time, can_delete)}
|
|
|
|
|
{commentCtx(content)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const _clazz = len > 0 ? 'comment_item_append_list active' : 'comment_item_append_list';
|
|
|
|
|
return (
|
|
|
|
|
<ul className="comment_item_append_list">
|
|
|
|
|
<li className="comment_item_area">
|
|
|
|
|
{commentAvatar()}
|
|
|
|
|
<div className="item-flex item-desc">
|
|
|
|
|
{commentInfo()}
|
|
|
|
|
{commentCtx()}
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li className="comment_item_area">
|
|
|
|
|
{commentAvatar()}
|
|
|
|
|
<div className="item-flex item-desc">
|
|
|
|
|
{commentInfo()}
|
|
|
|
|
{commentCtx()}
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li className="comment_item_area">
|
|
|
|
|
{commentAvatar()}
|
|
|
|
|
<div className="item-flex item-desc">
|
|
|
|
|
{commentInfo()}
|
|
|
|
|
{commentCtx()}
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<ul className={_clazz}>
|
|
|
|
|
{renderChild(children)}
|
|
|
|
|
|
|
|
|
|
<li className="comment_item_loadmore" onClick={handleOnLoadMore}>
|
|
|
|
|
<p className="loadmore-txt">展开其余23条评论</p>
|
|
|
|
|
<li className={_moreClass} onClick={() => handleOnLoadMore(len)}>
|
|
|
|
|
<p className="loadmore-txt">展开其余{lastTxt}条评论</p>
|
|
|
|
|
<p className="loadmore-icon">
|
|
|
|
|
<Icon type={!arrow ? 'down' : 'up'}/>
|
|
|
|
|
</p>
|
|
|
|
|
@ -109,7 +154,14 @@ function CommentItem ({
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
// 点击图标
|
|
|
|
|
const handleIconClick = () => {}
|
|
|
|
|
const handleShowOrHide = (id, hidden) => {
|
|
|
|
|
showOrHideComment && showOrHideComment(id, hidden);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点赞
|
|
|
|
|
const handleClickLick = (id) => {
|
|
|
|
|
likeComment && likeComment(id);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击评论icon
|
|
|
|
|
const handleClickMessage = () => {
|
|
|
|
|
@ -122,31 +174,52 @@ function CommentItem ({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击保存
|
|
|
|
|
const handleClickSubmit = (content) => {
|
|
|
|
|
// 保存并关闭
|
|
|
|
|
setShowQuill(false);
|
|
|
|
|
console.log('获取保存内容', content);
|
|
|
|
|
const handleClickSubmit = (id) => {
|
|
|
|
|
return (ctx) => {
|
|
|
|
|
setShowQuill(false);
|
|
|
|
|
submitChildComment && submitChildComment(id, ctx);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<li className="comment_item_area">
|
|
|
|
|
{commentAvatar()}
|
|
|
|
|
{commentAvatar(author)}
|
|
|
|
|
<div className="item-flex item-desc">
|
|
|
|
|
{commentInfo()}
|
|
|
|
|
{commentCtx()}
|
|
|
|
|
{commentInfo(id, author, time, can_delete)}
|
|
|
|
|
{commentCtx(content)}
|
|
|
|
|
|
|
|
|
|
{commentAppend()}
|
|
|
|
|
{commentAppend(children)}
|
|
|
|
|
|
|
|
|
|
<div className="comment_icon_area">
|
|
|
|
|
<CommentIcon className='comment-icon-margin' type="eye" count="100" iconClick={handleIconClick}/>
|
|
|
|
|
<CommentIcon
|
|
|
|
|
style={{ display: isAdmin ? 'inline-block' : 'none'}}
|
|
|
|
|
className='comment-icon-margin'
|
|
|
|
|
type={!hidden ? "xianshi" : 'yincang1'}
|
|
|
|
|
iconClick={() => handleShowOrHide(id, !hidden ? 1 : 0)}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<CommentIcon
|
|
|
|
|
style={{ display: can_delete ? 'inline-block' : 'none'}}
|
|
|
|
|
className='comment-icon-margin'
|
|
|
|
|
type={'shanchu'}
|
|
|
|
|
iconClick={() => deleteComment(id)}
|
|
|
|
|
/>
|
|
|
|
|
{/* 回复 */}
|
|
|
|
|
<CommentIcon
|
|
|
|
|
className='comment-icon-margin'
|
|
|
|
|
type="message" count="100"
|
|
|
|
|
type="huifu1"
|
|
|
|
|
count={children.length}
|
|
|
|
|
iconClick={handleClickMessage}
|
|
|
|
|
/>
|
|
|
|
|
{/* 点赞 */}
|
|
|
|
|
<CommentIcon/>
|
|
|
|
|
<CommentIcon
|
|
|
|
|
iconColor={ user_praise ? '#5091FF' : '' }
|
|
|
|
|
className='comment-icon-margin'
|
|
|
|
|
theme={user_praise ? 'filled' : ''}
|
|
|
|
|
type="dianzan"
|
|
|
|
|
count={praise_count}
|
|
|
|
|
iconClick={() => handleClickLick(id)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
@ -154,7 +227,7 @@ function CommentItem ({
|
|
|
|
|
className="comment_item_quill">
|
|
|
|
|
<CommentForm
|
|
|
|
|
onCancel={handleClickCancel}
|
|
|
|
|
onSubmit={handleClickSubmit}
|
|
|
|
|
onSubmit={handleClickSubmit(id)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
