123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- import React, { useState, useContext } from "react";
- import { Divider } from "antd";
- import ItemToolBar, { TOOL_ACTION_TYPE } from "./ItemToolBar";
- import styles from "./ReplyCard.less";
- import { CommentContext } from "../context";
- import { getUserType } from "../utils";
- import { toggleFavor } from "../utils/commentAjaxLogi";
-
- export const ReplyCard = ({
- replyContent: {
- user_name,
- user_id,
- user_avatar,
- reply_target = null,
- id,
- favored = false,
- favor_count,
- created,
- content,
- },
- commentId,
- locale,
- renderTime = () => null,
- onChangeListItem,
- }: {
- replyContent: {
- user_name: string;
- user_id: number;
- user_avatar: string;
- reply_target: null;
- id: string;
- favored: boolean;
- favor_count: number;
- created: number;
- content: string;
- };
- commentId: string;
- locale: "zh" | "en" | string;
- renderTime: (created: number) => any;
- onChangeListItem?({
- replyId,
- changeProps,
- }: {
- replyId: string;
- changeProps: any;
- }): Promise<boolean> | boolean;
- }) => {
- const [showReplyEditor, setShowReplyEditor] = useState(false);
- const context = useContext(CommentContext);
- const { currentUser }: { currentUser: any } = context;
-
- return (
- <article className={styles.wrapper}>
- <div className={styles.avatar}>
- <div
- className={styles.avatarImg}
- style={{
- backgroundImage: `url(${user_avatar})`,
- }}
- />
- </div>
- <section className={styles.content}>
- <header>
- <h4>{user_name}</h4>
- {renderTime(created)}
- </header>
- <div>{content}</div>
- <ItemToolBar
- authType={getUserType(currentUser, user_id)}
- handleReplyClick={() => {
- return true;
- }}
- handleNormalClick={async (actionType: string) => {
- console.log("actionType: ", actionType);
- if (actionType === TOOL_ACTION_TYPE.REPLY) {
- setShowReplyEditor(!showReplyEditor);
- }
- if (actionType === TOOL_ACTION_TYPE.FAVOR) {
- const res = await toggleFavor({
- favored,
- id: commentId,
- commentId: id,
- userId: currentUser.id,
- });
- if (res && onChangeListItem) {
- onChangeListItem({
- replyId: id,
- changeProps: {
- favor_count: res.favor_count,
- favored: !favored,
- },
- });
- }
- }
- return true;
- }}
- handlePrivateClick={(actionType: string) => {
- return true;
- }}
- replyCount={0}
- favorCount={favor_count}
- favored={favored}
- />
- {showReplyEditor ? (
- <div className={styles.replyEditorWrapper}>Editor</div>
- ) : null}
- </section>
- </article>
- );
- };
|