All files / src/components/world renderNoteContextMenu.tsx

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Dispatch } from "react";
import { UnknownAction } from "redux";
import l10n from "shared/lib/lang/l10n";
import { labelColorValues, Note } from "shared/lib/resources/types";
import editorActions from "store/features/editor/editorActions";
import entitiesActions from "store/features/entities/entitiesActions";
import { LabelButton } from "ui/buttons/LabelButton";
import { MenuDivider, MenuItem, MenuSection } from "ui/menu/Menu";
 
interface NoteContextMenuProps {
  dispatch: Dispatch<UnknownAction>;
  noteId: string;
  additionalSceneIds: string[];
  onRename?: () => void;
  onClose?: () => void;
}
 
const renderNoteContextMenu = ({
  noteId,
  additionalSceneIds,
  onRename,
  dispatch,
  onClose,
}: NoteContextMenuProps) => {
  const editNote = (changes: Partial<Note>) => {
    dispatch(
      entitiesActions.editNote({
        noteId,
        changes,
      }),
    );
  };
 
  return [
    <MenuSection key="label" style={{ paddingRight: 10, marginBottom: 5 }}>
      <div style={{ display: "flex" }}>
        <div style={{ marginRight: 5 }}>
          <LabelButton
            onClick={() => {
              editNote({
                labelColor: undefined,
              });
              onClose?.();
            }}
          />
        </div>
        {labelColorValues.map((color) => (
          <div key={color} style={{ marginRight: color === "gray" ? 0 : 5 }}>
            <LabelButton
              color={color}
              onClick={() => {
                editNote({ labelColor: color });
                onClose?.();
              }}
            />
          </div>
        ))}
      </div>
    </MenuSection>,
    ...(onRename ? [<MenuDivider key="div-rename" />] : []),
    ...(onRename
      ? [
          <MenuItem key="rename" onClick={onRename}>
            {l10n("FIELD_RENAME")}
          </MenuItem>,
        ]
      : []),
    <MenuDivider key="div-delete" />,
    <MenuItem
      key="delete"
      onClick={() => {
        if (additionalSceneIds.length > 1) {
          dispatch(
            entitiesActions.removeScenes({ sceneIds: additionalSceneIds }),
          );
          dispatch(
            entitiesActions.removeNotes({ noteIds: additionalSceneIds }),
          );
          dispatch(editorActions.selectWorld());
        } else {
          dispatch(entitiesActions.removeNote({ noteId }));
        }
      }}
    >
      {l10n(
        additionalSceneIds.length > 1
          ? "MENU_DELETE_SELECTION"
          : "MENU_DELETE_NOTE",
      )}
    </MenuItem>,
  ];
};
 
export default renderNoteContextMenu;