Showing
5 changed files
with
33 additions
and
14 deletions
project/src/context/ImageLoad.ts
0 → 100644
1 | +import { Context, createContext } from "react"; | ||
2 | + | ||
3 | +export interface ImageLoadContextType { | ||
4 | + imageLoad: boolean, | ||
5 | + setImageLoad: Function | ||
6 | +} | ||
7 | + | ||
8 | +export const ImageLoadContext: Context<ImageLoadContextType> = createContext<ImageLoadContextType>({ | ||
9 | + imageLoad: false, | ||
10 | + setImageLoad: () => {} | ||
11 | +}); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
project/src/context/Submenu.ts
0 → 100644
1 | +import { Context, createContext } from "react"; | ||
2 | + | ||
3 | +export interface SubmenuContextType { | ||
4 | + visible: boolean, | ||
5 | + onChange: Function | ||
6 | +} | ||
7 | + | ||
8 | +export const SubmenuContext: Context<SubmenuContextType> = createContext<SubmenuContextType>({ | ||
9 | + visible: true, | ||
10 | + onChange: () => {} | ||
11 | +}); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | import React, { ChangeEvent } from "react"; | 1 | import React, { ChangeEvent } from "react"; |
2 | import ToastEditor from "tui-image-editor"; | 2 | import ToastEditor from "tui-image-editor"; |
3 | -import { SubmenuContext } from "../EditorPage"; | 3 | + |
4 | +import { SubmenuContext } from "context/Submenu"; | ||
4 | 5 | ||
5 | import "./EditorHeader.scss"; | 6 | import "./EditorHeader.scss"; |
6 | 7 | ... | ... |
1 | -import React, { useRef, useEffect, useState, Context } from "react"; | 1 | +import React, { useRef, useEffect, useState } from "react"; |
2 | import ToastEditor from "tui-image-editor"; | 2 | import ToastEditor from "tui-image-editor"; |
3 | 3 | ||
4 | import EditorHeader from "./EditorHeader"; | 4 | import EditorHeader from "./EditorHeader"; |
5 | 5 | ||
6 | import { editorOptions } from "utils/editorOptions"; | 6 | import { editorOptions } from "utils/editorOptions"; |
7 | +import { ImageLoadContext } from "context/ImageLoad"; | ||
8 | +import { SubmenuContext } from "context/Submenu"; | ||
7 | 9 | ||
8 | import "tui-image-editor/dist/tui-image-editor.css"; | 10 | import "tui-image-editor/dist/tui-image-editor.css"; |
9 | import "./Editor.scss"; | 11 | import "./Editor.scss"; |
... | @@ -12,19 +14,10 @@ import "./EditorPage.scss"; | ... | @@ -12,19 +14,10 @@ import "./EditorPage.scss"; |
12 | // @ts-ignore | 14 | // @ts-ignore |
13 | const initialEditor:ToastEditor = new ToastEditor(document.querySelector("#hidden-editor"), editorOptions); | 15 | const initialEditor:ToastEditor = new ToastEditor(document.querySelector("#hidden-editor"), editorOptions); |
14 | 16 | ||
15 | -interface SubmenuContextType { | ||
16 | - visible: boolean, | ||
17 | - onChange: Function | ||
18 | -} | ||
19 | - | ||
20 | -export const SubmenuContext: Context<SubmenuContextType> = React.createContext<SubmenuContextType>({ | ||
21 | - visible: true, | ||
22 | - onChange: () => {} | ||
23 | -}); | ||
24 | - | ||
25 | function EditorPage() { | 17 | function EditorPage() { |
26 | const imageEditorRef = useRef<HTMLDivElement>(null); | 18 | const imageEditorRef = useRef<HTMLDivElement>(null); |
27 | const [editor, setEditor] = useState(initialEditor); | 19 | const [editor, setEditor] = useState(initialEditor); |
20 | + const [imageLoad, setImageLoad]: [boolean, Function] = useState(false); | ||
28 | const [submenuVisible, setSubmenuVisible] = useState(true); | 21 | const [submenuVisible, setSubmenuVisible] = useState(true); |
29 | 22 | ||
30 | useEffect(() => { | 23 | useEffect(() => { |
... | @@ -43,8 +36,10 @@ function EditorPage() { | ... | @@ -43,8 +36,10 @@ function EditorPage() { |
43 | return ( | 36 | return ( |
44 | <> | 37 | <> |
45 | <SubmenuContext.Provider value={{ visible: submenuVisible, onChange: onChangeSubmenuVisible }}> | 38 | <SubmenuContext.Provider value={{ visible: submenuVisible, onChange: onChangeSubmenuVisible }}> |
46 | - <EditorHeader editor={editor} imageLoad={false} /> | 39 | + <ImageLoadContext.Provider value={{ imageLoad, setImageLoad }}> |
47 | - <div className={`my-editor tui-image-editor-container left ${!submenuVisible && "submenu-hidden"}`} ref={imageEditorRef} /> | 40 | + <EditorHeader editor={editor} imageLoad={false} /> |
41 | + <div className={`my-editor tui-image-editor-container left ${!submenuVisible && "submenu-hidden"}`} ref={imageEditorRef} /> | ||
42 | + </ImageLoadContext.Provider> | ||
48 | </SubmenuContext.Provider> | 43 | </SubmenuContext.Provider> |
49 | </> | 44 | </> |
50 | ); | 45 | ); | ... | ... |
-
Please register or login to post a comment