1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| import { useMemo } from "react";
| import { Menu } from "../Menu/Menu";
|
| export const TabsMenu = ({ onClick, editable = true, closable = true, clonable = true, virtual = false }) => {
| const items = useMemo(
| () => [
| {
| key: "edit",
| title: "Rename",
| enabled: editable && !virtual,
| action: () => onClick("edit"),
| },
| {
| key: "duplicate",
| title: "Duplicate",
| enabled: !virtual && clonable,
| action: () => onClick("duplicate"),
| willLeave: true,
| },
| {
| key: "save",
| title: "Save",
| enabled: virtual,
| action: () => onClick("save"),
| willLeave: true,
| },
| ],
| [editable, closable, clonable, virtual],
| );
|
| const showDivider = useMemo(() => closable && items.some(({ enabled }) => enabled), [items]);
|
| return (
| <Menu size="medium" onClick={(e) => e.domEvent.stopPropagation()}>
| {items.map((item) =>
| item.enabled ? (
| <Menu.Item key={item.key} onClick={item.action} data-leave={item.willLeave}>
| {item.title}
| </Menu.Item>
| ) : null,
| )}
|
| {closable ? (
| <>
| {showDivider && <Menu.Divider />}
| <Menu.Item onClick={() => onClick("close")} data-leave>
| Close
| </Menu.Item>
| </>
| ) : null}
| </Menu>
| );
| };
|
|
