49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React from "react"
|
|
import { Item, ItemParams, Menu, Separator } from "react-contexify"
|
|
|
|
|
|
export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
|
|
export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"
|
|
|
|
export enum Action {
|
|
FileDelete,
|
|
FileCopy,
|
|
FilePaste,
|
|
FileMove,
|
|
DirDelete
|
|
}
|
|
|
|
interface Props {
|
|
onSelect?: (action: Action, id: string)=>void
|
|
pasteActive?: boolean
|
|
}
|
|
|
|
const FileBrowserContextMenu: React.FC<Props> = (props) => {
|
|
|
|
function onClick({ props: itemProps, data }: ItemParams<{id:string}, Action>) {
|
|
if (itemProps?.id && data != null){
|
|
props.onSelect?.(data,itemProps.id)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Menu id={CONTEXT_MENU_FILE} animation={false}>
|
|
<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
|
|
<Item onClick={onClick} data={Action.FileCopy} >Copy</Item>
|
|
<Item onClick={onClick} data={Action.FileMove} >Move</Item>
|
|
<Separator />
|
|
<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
|
|
</Menu>
|
|
<Menu id={CONTEXT_MENU_DIR} animation={false}>
|
|
<Item onClick={onClick} data={Action.DirDelete} >Delete</Item>
|
|
<Item onClick={onClick} >Item 2</Item>
|
|
<Separator />
|
|
<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
|
|
</Menu>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default FileBrowserContextMenu
|