김재형

Add actions for folder

1 -import React, { useState } from "react"; 1 +import React, { useState, Fragment } from "react";
2 import { Popconfirm, Popover, Button, message } from "antd"; 2 import { Popconfirm, Popover, Button, message } from "antd";
3 import { FileItem } from "./useFileList"; 3 import { FileItem } from "./useFileList";
4 import styles from "./FileItemActions.module.scss"; 4 import styles from "./FileItemActions.module.scss";
...@@ -52,9 +52,11 @@ export function FileItemActions({ ...@@ -52,9 +52,11 @@ export function FileItemActions({
52 이름 변경 52 이름 변경
53 </Button> 53 </Button>
54 </Popover> 54 </Popover>
55 - <Button type="link" size="small"> 55 + {!item.is_folder && (
56 - 공유 56 + <Button type="link" size="small">
57 - </Button> 57 + 공유
58 + </Button>
59 + )}
58 <Popover 60 <Popover
59 title="이동할 폴더를 선택하세요" 61 title="이동할 폴더를 선택하세요"
60 content={ 62 content={
...@@ -78,36 +80,40 @@ export function FileItemActions({ ...@@ -78,36 +80,40 @@ export function FileItemActions({
78 이동 80 이동
79 </Button> 81 </Button>
80 </Popover> 82 </Popover>
81 - <Popover 83 + {!item.is_folder && (
82 - title="복사할 폴더를 선택하세요" 84 + <Popover
83 - content={ 85 + title="복사할 폴더를 선택하세요"
84 - <FileListPopover 86 + content={
85 - root={item.parent} 87 + <FileListPopover
86 - onSelect={(to: number) => { 88 + root={item.parent}
87 - onCopy(item.id, to); 89 + onSelect={(to: number) => {
88 - setCopy(false); 90 + onCopy(item.id, to);
89 - }} 91 + setCopy(false);
90 - onCancel={() => setCopy(false)} 92 + }}
91 - /> 93 + onCancel={() => setCopy(false)}
92 - } 94 + />
93 - trigger="click" 95 + }
94 - visible={copy} 96 + trigger="click"
95 - onVisibleChange={setCopy} 97 + visible={copy}
96 - > 98 + onVisibleChange={setCopy}
97 - <Button type="link" size="small"> 99 + >
98 - 복사 100 + <Button type="link" size="small">
99 - </Button> 101 + 복사
100 - </Popover> 102 + </Button>
101 - <Popconfirm 103 + </Popover>
102 - title="정말로 삭제하시겠습니까?" 104 + )}
103 - onConfirm={() => onDelete(item.id)} 105 + {!item.is_folder && (
104 - okText="삭제" 106 + <Popconfirm
105 - cancelText="취소" 107 + title="정말로 삭제하시겠습니까?"
106 - > 108 + onConfirm={() => onDelete(item.id)}
107 - <Button type="link" size="small"> 109 + okText="삭제"
108 - 삭제 110 + cancelText="취소"
109 - </Button> 111 + >
110 - </Popconfirm> 112 + <Button type="link" size="small">
113 + 삭제
114 + </Button>
115 + </Popconfirm>
116 + )}
111 </div> 117 </div>
112 ); 118 );
113 } 119 }
......
...@@ -152,23 +152,22 @@ function getColumns({ ...@@ -152,23 +152,22 @@ function getColumns({
152 dataIndex: "size", 152 dataIndex: "size",
153 width: 120, 153 width: 120,
154 render: (bytes: number, item) => 154 render: (bytes: number, item) =>
155 - item.is_folder ? "" : filesize(bytes, { round: 0 }), 155 + item.is_folder ? "-" : filesize(bytes, { round: 0 }),
156 }, 156 },
157 { 157 {
158 title: "", 158 title: "",
159 key: "action", 159 key: "action",
160 dataIndex: "", 160 dataIndex: "",
161 width: 300, 161 width: 300,
162 - render: (__: any, item) => 162 + render: (__: any, item) => (
163 - item.is_folder ? null : ( 163 + <FileItemActions
164 - <FileItemActions 164 + item={item}
165 - item={item} 165 + onRename={handleRename}
166 - onRename={handleRename} 166 + onMove={handleMove}
167 - onMove={handleMove} 167 + onCopy={handleCopy}
168 - onCopy={handleCopy} 168 + onDelete={handleDelete}
169 - onDelete={handleDelete} 169 + />
170 - /> 170 + ),
171 - ),
172 }, 171 },
173 ]; 172 ];
174 } 173 }
......