53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from "react"
|
|
import { Item, ItemParams, Menu, Separator, Submenu } from "react-contexify"
|
|
|
|
|
|
export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
|
|
export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"
|
|
|
|
export enum Action {
|
|
FileDelete
|
|
}
|
|
|
|
interface Props {
|
|
onSelect?: (action: Action, id: string)=>void
|
|
}
|
|
|
|
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="item2" >Item 2</Item>
|
|
<Separator />
|
|
<Item disabled>Disabled</Item>
|
|
<Separator />
|
|
<Submenu label="Foobar">
|
|
<Item onClick={onClick} >Sub Item 1</Item>
|
|
<Item onClick={onClick} >Sub Item 2</Item>
|
|
</Submenu>
|
|
</Menu>
|
|
<Menu id={CONTEXT_MENU_DIR} animation={false}>
|
|
<Item onClick={onClick} >Item 1</Item>
|
|
<Item onClick={onClick} >Item 2</Item>
|
|
<Separator />
|
|
<Item disabled>Disabled</Item>
|
|
<Separator />
|
|
<Submenu label="Foobar">
|
|
<Item onClick={onClick} >Sub Item 1</Item>
|
|
<Item onClick={onClick} >Sub Item 2</Item>
|
|
</Submenu>
|
|
</Menu>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default FileBrowserContextMenu
|