first implementation renaming

src/components/FileBrowser.tsx

@@ -33,6 +33,8 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 
 	const [srcID,setSrcID] = useState("")
 	const [pasteAction,setPasteAction] = useState<Action>()
+	const [editID,setEditID] = useState("")
+	const [editEnable,setEditEnable] = useState(false)
 
 	const [deleteMutation] = useDeleteFileMutation()
 	const [copyMutation] = useCopyMutation()
@@ -94,6 +96,10 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 		case Action.FileDownload:
 			downloadFile(genDownloadLink(id))
 			break
+		case Action.FileRename:
+			setEditID(id)
+			setEditEnable(true)
+			break
 		default:
 			break
 		}
@@ -153,6 +159,18 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 							e.preventDefault()
 							showFileContext(e,{props:{id}})
 						}}
+
+						editId={editID}
+						editEnable={editEnable}
+
+						onRenameDone={(id,changed,newName)=>{
+							setEditEnable(false)
+							if (changed){
+								console.debug("Changed: ",newName)
+							}else{
+								console.debug("Not changed")
+							}
+						}}
 					/>
 					{loading && 
 						<div className="flex justify-center mt-4">

src/components/FileBrowserContextMenu.tsx

@@ -11,6 +11,7 @@ export enum Action {
 	FilePaste,
 	FileMove,
 	FileDownload,
+	FileRename,
 	DirDelete
 }
 
@@ -32,6 +33,7 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
 				<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
 				<Item onClick={onClick} data={Action.FileCopy} >Copy</Item>
 				<Item onClick={onClick} data={Action.FileMove} >Move</Item>
+				<Item onClick={onClick} data={Action.FileRename} >Rename</Item>
 				<Item onClick={onClick} data={Action.FileDownload} >Download</Item>
 				<Separator />
 				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>

src/components/FileBrowserElement.tsx

@@ -8,6 +8,9 @@ interface Props {
     dir?: Directory
     onClick?: (event: React.MouseEvent ,data: File | Directory) => void
 	onContextMenu?: (e:React.MouseEvent) => void
+	edit: boolean
+	onRename?: (newName: string)=>void
+	onCancleRename?: ()=>void
 }
 
 const FileBrowserElement: React.FC<Props> = (props) => {
@@ -25,7 +28,14 @@ const FileBrowserElement: React.FC<Props> = (props) => {
 			onContextMenu={(e)=>props.onContextMenu?.(e)}
 			
 		>
-			{(props.file) ? <FileElement file={props.file}/>:(props.dir)?<DirectoryComponent dir={props.dir} />:<></>}
+			{(props.file) ? <FileElement
+				edit={props.edit}
+				file={props.file}
+				onCancleRename={props.onCancleRename}
+				onRename={props.onRename}
+			/>:(props.dir)?<DirectoryComponent
+				dir={props.dir} 
+			/>:<></>}
 		</tr>
 	)
 }

src/components/FileBrowserList.tsx

@@ -5,10 +5,15 @@ import FileBrowserElement from "./FileBrowserElement"
 interface Props{
     directorys: Directory[]
     files: File[]
-    onFileContext?: (event: React.MouseEvent, id: string)=>void
+    
+	onFileContext?: (event: React.MouseEvent, id: string)=>void
     onDirContext?: (event: React.MouseEvent, path: string)=>void
     onFileClick?: (event: React.MouseEvent,id: string)=>void
     onDirClick?: (event: React.MouseEvent,path: string)=>void
+
+	editId:  string
+	editEnable: boolean
+	onRenameDone?: (id: string, changed: boolean, newName: string)=>void
 }
 
 const FileBrowserList: React.FC<Props> = (props) => {
@@ -31,6 +36,18 @@ const FileBrowserList: React.FC<Props> = (props) => {
 					onContextMenu={(e)=>{
 						props.onDirContext?.(e,v.id)
 					}}
+
+					edit={props.editEnable && (v.id === props.editId)}
+
+					onRename={(newName)=>{
+						if (v.name != newName){
+							props.onRenameDone?.(v.id,true,newName)
+						}else{
+							props.onRenameDone?.(v.id,false,newName)
+						}
+					}}
+
+					onCancleRename={()=>props.onRenameDone?.(v.id,false,"")}
 				/>))}
 								
 				{ props.files.map(v => (<FileBrowserElement 
@@ -42,6 +59,18 @@ const FileBrowserList: React.FC<Props> = (props) => {
 					onContextMenu={(e)=>{
 						props.onFileContext?.(e,v.id)
 					}}
+
+					edit={props.editEnable && (v.id === props.editId)}
+
+					onRename={(newName)=>{
+						if (v.name != newName){
+							props.onRenameDone?.(v.id,true,newName)
+						}else{
+							props.onRenameDone?.(v.id,false,newName)
+						}
+					}}
+
+					onCancleRename={()=>props.onRenameDone?.(v.id,false,"")}
 				/>))}
 			</tbody>
 		</table>

src/components/FileElement.tsx

@@ -3,16 +3,26 @@ import { File } from "../generated/graphql"
 import sizeToReadable from "../functions/sizeToReadable"
 import dateFormat from "../functions/dateFomat"
 import { FaRegFileAlt } from "react-icons/fa"
+import Renameable from "./Renameable"
 
 interface Props {
-    file: File
+    file: File,
+	edit: boolean
+	onRename?: (newName: string)=>void
+	onCancleRename?: ()=>void
 }
 
 const FileElement: React.FC<Props> = (props) => {
 	return (
 		<>
 			<td>
-				<FaRegFileAlt className="inline" /> {props.file.name}
+				<FaRegFileAlt className="inline" />
+				<Renameable
+					text={props.file.name || ""}
+					edit={props.edit}
+					onCancleRename={props.onCancleRename}
+					onRename={props.onRename} 
+				/>
 			</td>
 			<td>
 				{dateFormat(props.file.lastModified)}