All files / src/components/editors NoteEditor.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, useCallback } from "react";
import { noteSelectors } from "store/features/entities/entitiesState";
import { DropdownButton } from "ui/buttons/DropdownButton";
import { EditableText, EditableTextOverlay } from "ui/form/EditableText";
import { FormContainer, FormHeader, FormRow } from "ui/form/layout/FormLayout";
import { MenuDivider, MenuItem } from "ui/menu/Menu";
import entitiesActions from "store/features/entities/entitiesActions";
import editorActions from "store/features/editor/editorActions";
import { Sidebar, SidebarColumn } from "ui/sidebars/Sidebar";
import l10n from "shared/lib/lang/l10n";
import { useAppDispatch, useAppSelector } from "store/hooks";
import { defaultLocalisedNoteName } from "shared/lib/entities/entitiesHelpers";
import { WorldEditor } from "./WorldEditor";
import { FlexGrow } from "ui/spacing/Spacing";
import { labelColorValues, Note } from "shared/lib/resources/types";
import { NoteField } from "ui/form/NoteField";
import { LabelButton, LabelColor } from "ui/buttons/LabelButton";
 
interface NoteEditorProps {
  id: string;
}
 
export const NoteEditor: FC<NoteEditorProps> = ({ id }) => {
  const note = useAppSelector((state) => noteSelectors.selectById(state, id));
  const noteIndex = useAppSelector((state) =>
    noteSelectors.selectIds(state).indexOf(id),
  );
  const dispatch = useAppDispatch();
 
  const onChangeNoteProp = useCallback(
    <K extends keyof Note>(key: K, value: Note[K]) => {
      dispatch(
        entitiesActions.editNote({
          noteId: id,
          changes: {
            [key]: value,
          },
        }),
      );
    },
    [dispatch, id],
  );
 
  const onChangeName = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) =>
      onChangeNoteProp("name", e.currentTarget.value),
    [onChangeNoteProp],
  );
 
  const onChangeContent = useCallback(
    (e: React.ChangeEvent<HTMLTextAreaElement>) =>
      onChangeNoteProp("content", e.currentTarget.value),
    [onChangeNoteProp],
  );
 
  const selectSidebar = () => {
    dispatch(editorActions.selectSidebar());
  };
 
  const onRemove = useCallback(() => {
    Iif (!note) {
      return;
    }
    dispatch(entitiesActions.removeNote({ noteId: note.id }));
  }, [dispatch, note]);
 
  Iif (!note) {
    return <WorldEditor />;
  }
 
  return (
    <Sidebar onClick={selectSidebar}>
      <FormHeader>
        <FlexGrow style={{ minWidth: 0 }}>
          <EditableText
            name="name"
            placeholder={defaultLocalisedNoteName(noteIndex)}
            value={note.name || ""}
            onChange={onChangeName}
          />
          <EditableTextOverlay>
            {(note.name || defaultLocalisedNoteName(noteIndex)).replace(
              /.*[/\\]/,
              "",
            )}
          </EditableTextOverlay>
        </FlexGrow>
        {note.labelColor && <LabelColor color={note.labelColor} />}
        <DropdownButton
          size="small"
          variant="transparent"
          menuDirection="right"
        >
          <MenuItem style={{ paddingRight: 10, marginBottom: 5 }}>
            <div style={{ marginRight: 5 }}>
              <LabelButton
                onClick={() => onChangeNoteProp("labelColor", undefined)}
              />
            </div>
            {labelColorValues.map((color) => (
              <div
                key={color}
                style={{ marginRight: color === "gray" ? 0 : 5 }}
              >
                <LabelButton
                  color={color}
                  onClick={() => onChangeNoteProp("labelColor", color)}
                />
              </div>
            ))}
          </MenuItem>
          <MenuDivider />
          <MenuItem onClick={onRemove}>{l10n("MENU_DELETE_NOTE")}</MenuItem>
        </DropdownButton>
      </FormHeader>
 
      <SidebarColumn>
        <FormContainer>
          <FormRow>
            <NoteField
              name="noteValue"
              value={note.content}
              color={note.labelColor}
              onChange={onChangeContent}
            />
          </FormRow>
        </FormContainer>
      </SidebarColumn>
    </Sidebar>
  );
};