FileItemActions.tsx 2.24 KB
import React, { useState } from "react";
import { Popconfirm, Popover, Button, message } from "antd";
import { FileItem } from "./useFileList";
import styles from "./FileItemActions.module.scss";
import { FileListPopover } from "./FileListPopover";

export type FileItemActionsProps = {
  item: FileItem;
  onMove: (id: number, to: number) => void;
  onCopy: (id: number, to: number) => void;
  onDelete: (id: number) => void;
};

export function FileItemActions({
  item,
  onMove,
  onCopy,
  onDelete,
}: FileItemActionsProps) {
  const [move, setMove] = useState<boolean>(false);
  const [copy, setCopy] = useState<boolean>(false);

  return (
    <div className={styles.actions}>
      <Button type="link" size="small">
        이름 변경
      </Button>
      <Button type="link" size="small">
        공유
      </Button>
      <Popover
        title="이동할 폴더를 선택하세요"
        content={
          <FileListPopover
            root={item.parent}
            onSelect={(to: number) => {
              if (to === item.parent) {
                return message.error("같은 폴더로는 이동할 수 없습니다");
              }
              onMove(item.id, to);
              setMove(false);
            }}
            onCancel={() => setMove(false)}
          />
        }
        trigger="click"
        visible={move}
        onVisibleChange={setMove}
      >
        <Button type="link" size="small">
          이동
        </Button>
      </Popover>
      <Popover
        title="복사할 폴더를 선택하세요"
        content={
          <FileListPopover
            root={item.parent}
            onSelect={(to: number) => {
              onCopy(item.id, to);
              setCopy(false);
            }}
            onCancel={() => setCopy(false)}
          />
        }
        trigger="click"
        visible={copy}
        onVisibleChange={setCopy}
      >
        <Button type="link" size="small">
          복사
        </Button>
      </Popover>
      <Popconfirm
        title="정말로 삭제하시겠습니까?"
        onConfirm={() => onDelete(item.id)}
        okText="삭제"
        cancelText="취소"
      >
        <Button type="link" size="small">
          삭제
        </Button>
      </Popconfirm>
    </div>
  );
}