context menu

src/components/FileBrowserContextMenu.tsx

@@ -0,0 +1,48 @@
+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"
+
+interface Props {
+    onSelect?: (action: string, id: string)=>void
+}
+
+const FileBrowserContextMenu: React.FC<Props> = (props) => {
+
+	function onClick({ props: itemProps, data }:  ItemParams<{id:string}, string>) {
+		if (itemProps?.id && data){
+			props.onSelect?.(data,itemProps.id)
+		}
+	}
+
+	return (
+		<>
+			<Menu id={CONTEXT_MENU_FILE} animation={false}>
+				<Item onClick={onClick} data="item1" >Item 1</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