EditorPage.tsx
1.53 KB
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
import React, { useRef, useEffect, useState } from "react";
import ToastEditor from "tui-image-editor";
import EditorHeader from "./EditorHeader";
import { editorOptions } from "utils/editorOptions";
import { ImageLoadContext } from "context/ImageLoad";
import { SubmenuContext } from "context/Submenu";
import "tui-image-editor/dist/tui-image-editor.css";
import "./Editor.scss";
import "./EditorPage.scss";
// @ts-ignore
const initialEditor:ToastEditor = new ToastEditor(document.querySelector("#hidden-editor"), editorOptions);
function EditorPage() {
const imageEditorRef = useRef<HTMLDivElement>(null);
const [editor, setEditor] = useState(initialEditor);
const [imageLoad, setImageLoad]: [boolean, Function] = useState(false);
const [submenuVisible, setSubmenuVisible] = useState(true);
useEffect(() => {
// @ts-ignore
setEditor(new ToastEditor(imageEditorRef.current, editorOptions));
return () => {
initialEditor.destroy();
};
}, []);
function onChangeSubmenuVisible() {
setSubmenuVisible(!submenuVisible);
}
return (
<>
<SubmenuContext.Provider value={{ visible: submenuVisible, onChange: onChangeSubmenuVisible }}>
<ImageLoadContext.Provider value={{ imageLoad, setImageLoad }}>
<EditorHeader editor={editor} imageLoad={false} />
<div className={`my-editor tui-image-editor-container left ${!submenuVisible && "submenu-hidden"}`} ref={imageEditorRef} />
</ImageLoadContext.Provider>
</SubmenuContext.Provider>
</>
);
}
export default EditorPage;