bilingo-ui/src/components/comment/common/ItemToolBar.tsx

import React from "react";
import classnames from "classnames";
import PropTypes from "prop-types";
import { Divider, Popconfirm } from "antd";
import IconFont from "./ScheduleIconFont";
import { CollapseBtn } from "./CollapseBtn";
import { getActionAuth, AuthType } from "../utils";

import styles from "./ItemToolBar.less";
import { LoadingOutlined } from "@ant-design/icons";

export enum TOOL_ACTION_TYPE {
  REPLY = "reply",
  FAVOR = "favor",
  EDIT = "edit",
  DELETE = "delete",
}

interface ItemToolBarProps {
  replyCount: number;
  authType: AuthType;
  handleReplyClick(): boolean;
  handlePrivateClick(actionType: string): Promise<boolean> | boolean;
  handleNormalClick(actionType: string): Promise<boolean> | boolean;
  favorCount: number;
  favored: boolean;
}
interface ItemToolBarState {
  favorAjaxLoading: boolean;
}

class ItemToolBar extends React.Component<ItemToolBarProps, ItemToolBarState> {
  constructor(props: ItemToolBarProps) {
    super(props);
    this.state = {
      favorAjaxLoading: false,
    };
  }

  renderPrivateTool = () => {
    const {
      authType,
      replyCount,
      handleReplyClick,
      handlePrivateClick,
    } = this.props;
    const showReplyCollapse = replyCount > 0;
    const showEdit = getActionAuth(authType, TOOL_ACTION_TYPE.EDIT);
    const showDelete = getActionAuth(authType, TOOL_ACTION_TYPE.DELETE);
    const notShowPrivate =
      [showReplyCollapse, showEdit, showDelete].reduce(
        (a, b) => Number(a) + Number(b),
        0
      ) === 0;
    console.log("notShowPrivate: ", notShowPrivate);
    if (notShowPrivate) return null;
    return (
      <>
        {showReplyCollapse && (
          <span
            className={classnames(styles.toolsItem, styles.replyCollapseBtn)}
          >
            <CollapseBtn
              text={`${replyCount} 回复`}
              onChange={handleReplyClick}
            />
          </span>
        )}
        {showEdit && (
          <span
            className={classnames(styles.toolsItem)}
            onClick={() => {
              handlePrivateClick("edit");
            }}
          >
            <IconFont
              type="schedule-icon_answer"
              style={{
                fontSize: "18px",
              }}
            />
          </span>
        )}
        {showDelete && (
          <span className={classnames(styles.toolsItem)}>
            <Popconfirm
              title="是否删除"
              onConfirm={() => {
                handlePrivateClick("delete");
              }}
            >
              <IconFont
                type="schedule-icon_deletecopy"
                style={{
                  fontSize: "18px",
                }}
              />
            </Popconfirm>
          </span>
        )}
        <Divider
          type="vertical"
          style={{ borderLeftColor: "#c6c6c6", fontSize: "24px" }}
        />
      </>
    );
  };

  renderNormalTool = () => {
    const { favorAjaxLoading } = this.state;
    const { favorCount, favored, handleNormalClick } = this.props;
    return (
      <>
        <span
          className={classnames(styles.toolsItem, styles.favorBtnWrapper)}
          onClick={async (e) => {
            e.preventDefault();
            if (!favorAjaxLoading) {
              this.setState({ favorAjaxLoading: true });
              await handleNormalClick(TOOL_ACTION_TYPE.FAVOR);
              this.setState({ favorAjaxLoading: false });
            }
          }}
        >
          <span className={styles.iconWrapper}>
            {favorAjaxLoading ? (
              <LoadingOutlined
                style={{
                  color: "#fc4747",
                  display: "inline-flex",
                  alignItems: "center",
                }}
              />
            ) : (
              <IconFont
                type={
                  favored
                    ? "schedule-icon_like_fill1"
                    : "schedule-icon_like_line"
                }
                style={{
                  fontSize: "18px",
                  transform: "translateY(1px)",
                  color: favored ? "#fc4747" : "inherit",
                }}
              />
            )}
          </span>

          <span className={styles.btnCount}>{favorCount}</span>
        </span>
        <span
          className={styles.toolsItem}
          onClick={(e) => {
            e.preventDefault();
            handleNormalClick(TOOL_ACTION_TYPE.REPLY);
          }}
        >
          <span className={styles.replyBtn}>回复</span>
        </span>
      </>
    );
  };

  render() {
    return (
      <div className={styles.wrapper}>
        {this.renderPrivateTool()}
        {this.renderNormalTool()}
      </div>
    );
  }
}

export default ItemToolBar;