From 610e2fa5c575bd444a5418d5eacaef69dfe4a13a Mon Sep 17 00:00:00 2001 From: 1ilit Date: Sat, 9 Mar 2024 19:42:09 +0200 Subject: [PATCH] Abstract LayoutContext --- src/App.jsx | 10 +++++++++- src/components/Area.jsx | 6 ++++-- src/components/AreaOverview.jsx | 4 ++-- src/components/ControlPanel.jsx | 6 ++++-- src/components/Note.jsx | 6 ++++-- src/components/SidePanel.jsx | 5 +++-- src/components/Table.jsx | 4 ++-- src/components/Todo.jsx | 4 ++-- src/context/LayoutContext.jsx | 19 +++++++++++++++++++ src/hooks/useLayout.js | 13 +++++++++++++ src/pages/BugReport.jsx | 2 +- src/pages/Editor.jsx | 25 ++++++++++++++----------- 12 files changed, 77 insertions(+), 27 deletions(-) create mode 100644 src/context/LayoutContext.jsx create mode 100644 src/hooks/useLayout.js diff --git a/src/App.jsx b/src/App.jsx index 56e1f8b..4a054b7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,6 +6,7 @@ import Shortcuts from "./pages/Shortcuts"; import Templates from "./pages/Templates"; import { useEffect } from "react"; import LandingPage from "./pages/LandingPage"; +import LayoutContextProvider from "./context/LayoutContext"; const Wrapper = ({ children }) => { const location = useLocation(); @@ -21,7 +22,14 @@ function App() { } /> - } /> + + + + } + /> } /> } /> } /> diff --git a/src/components/Area.jsx b/src/components/Area.jsx index d4d7258..ac07e51 100644 --- a/src/components/Area.jsx +++ b/src/components/Area.jsx @@ -15,17 +15,19 @@ import { } from "../data/data"; import { AreaContext, - LayoutContext, SelectContext, SettingsContext, + StateContext, TabContext, UndoRedoContext, } from "../pages/Editor"; +import useLayout from "../hooks/useLayout"; export default function Area(props) { const [hovered, setHovered] = useState(false); const [editField, setEditField] = useState({}); - const { layout, setState } = useContext(LayoutContext); + const { setState } = useContext(StateContext); + const {layout} = useLayout(); const { settings } = useContext(SettingsContext); const { tab, setTab } = useContext(TabContext); const { updateArea, deleteArea } = useContext(AreaContext); diff --git a/src/components/AreaOverview.jsx b/src/components/AreaOverview.jsx index af713bb..4dc37c5 100644 --- a/src/components/AreaOverview.jsx +++ b/src/components/AreaOverview.jsx @@ -26,10 +26,10 @@ import { ObjectType, State, } from "../data/data"; -import { AreaContext, LayoutContext, UndoRedoContext } from "../pages/Editor"; +import { AreaContext, StateContext, UndoRedoContext } from "../pages/Editor"; export default function AreaOverview() { - const { setState } = useContext(LayoutContext); + const { setState } = useContext(StateContext); const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const [editField, setEditField] = useState({}); diff --git a/src/components/ControlPanel.jsx b/src/components/ControlPanel.jsx index aef9f06..5db1939 100644 --- a/src/components/ControlPanel.jsx +++ b/src/components/ControlPanel.jsx @@ -50,10 +50,10 @@ import { } from "../utils"; import { AreaContext, - LayoutContext, NoteContext, SelectContext, SettingsContext, + StateContext, TabContext, TableContext, TypeContext, @@ -71,6 +71,7 @@ import { useLiveQuery } from "dexie-react-hooks"; import { Parser } from "node-sql-parser"; import Todo from "./Todo"; import { Thumbnail } from "./Thumbnail"; +import useLayout from "../hooks/useLayout"; export default function ControlPanel({ diagramId, @@ -120,7 +121,8 @@ export default function ControlPanel({ message: "", }); const [data, setData] = useState(null); - const { layout, setLayout, state, setState } = useContext(LayoutContext); + const { state, setState } = useContext(StateContext); + const {layout, setLayout} = useLayout(); const { settings, setSettings } = useContext(SettingsContext); const { relationships, diff --git a/src/components/Note.jsx b/src/components/Note.jsx index 4ea1f5b..dc6b100 100644 --- a/src/components/Note.jsx +++ b/src/components/Note.jsx @@ -1,10 +1,10 @@ import { useContext, useState } from "react"; import { - LayoutContext, NoteContext, UndoRedoContext, TabContext, SelectContext, + StateContext, } from "../pages/Editor"; import { Action, ObjectType, noteThemes, Tab, State } from "../data/data"; import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui"; @@ -13,6 +13,7 @@ import { IconDeleteStroked, IconCheckboxTick, } from "@douyinfe/semi-icons"; +import useLayout from "../hooks/useLayout"; export default function Note(props) { const [editField, setEditField] = useState({}); @@ -22,7 +23,8 @@ export default function Note(props) { const fold = 24; const { updateNote, deleteNote } = useContext(NoteContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); - const { layout, setState } = useContext(LayoutContext); + const { setState } = useContext(StateContext); + const { layout } = useLayout(); const { tab, setTab } = useContext(TabContext); const { selectedElement, setSelectedElement } = useContext(SelectContext); diff --git a/src/components/SidePanel.jsx b/src/components/SidePanel.jsx index 9f5be0c..a59e5c5 100644 --- a/src/components/SidePanel.jsx +++ b/src/components/SidePanel.jsx @@ -4,14 +4,15 @@ import TableOverview from "./TableOverview"; import ReferenceOverview from "./ReferenceOverview"; import AreaOverview from "./AreaOverview"; import { Tab } from "../data/data"; -import { LayoutContext, TabContext } from "../pages/Editor"; +import { TabContext } from "../pages/Editor"; import NotesOverview from "./NotesOverview"; import Issues from "./Issues"; import TypesOverview from "./TypesOverview"; +import useLayout from "../hooks/useLayout"; const SidePanel = (props) => { const { tab, setTab } = useContext(TabContext); - const { layout } = useContext(LayoutContext); + const { layout } = useLayout(); const tabList = [ { tab: "Tables", itemKey: Tab.tables }, diff --git a/src/components/Table.jsx b/src/components/Table.jsx index ab3d433..e58e73c 100644 --- a/src/components/Table.jsx +++ b/src/components/Table.jsx @@ -32,7 +32,6 @@ import { Toast, } from "@douyinfe/semi-ui"; import { - LayoutContext, SelectContext, SettingsContext, TabContext, @@ -41,12 +40,13 @@ import { UndoRedoContext, } from "../pages/Editor"; import { getSize, hasCheck, hasPrecision, isSized } from "../utils"; +import useLayout from "../hooks/useLayout"; export default function Table(props) { const [isHovered, setIsHovered] = useState(false); const [hoveredField, setHoveredField] = useState(-1); const [editField, setEditField] = useState({}); - const { layout } = useContext(LayoutContext); + const { layout } = useLayout(); const { deleteTable, updateTable, updateField, setRelationships } = useContext(TableContext); const { tab, setTab } = useContext(TabContext); diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx index 7f56232..cf37f40 100644 --- a/src/components/Todo.jsx +++ b/src/components/Todo.jsx @@ -19,7 +19,7 @@ import { IconDeleteStroked, IconCaretdown, } from "@douyinfe/semi-icons"; -import { LayoutContext, TaskContext } from "../pages/Editor"; +import { StateContext, TaskContext } from "../pages/Editor"; import { State } from "../data/data"; export default function Todo() { const Priority = { @@ -37,7 +37,7 @@ export default function Todo() { const [activeTask, setActiveTask] = useState(-1); const [, setSortOrder] = useState(SortOrder.ORIGINAL); const { tasks, setTasks, updateTask } = useContext(TaskContext); - const { setState } = useContext(LayoutContext); + const { setState } = useContext(StateContext); const priorityLabel = (p) => { switch (p) { diff --git a/src/context/LayoutContext.jsx b/src/context/LayoutContext.jsx new file mode 100644 index 0000000..d0898f8 --- /dev/null +++ b/src/context/LayoutContext.jsx @@ -0,0 +1,19 @@ +import { createContext, useState } from "react"; + +export const LayoutContext = createContext(); + +export default function LayoutContextProvider({ children }) { + const [layout, setLayout] = useState({ + header: true, + sidebar: true, + issues: true, + toolbar: true, + fullscreen: false, + }); + + return ( + + {children} + + ); +} diff --git a/src/hooks/useLayout.js b/src/hooks/useLayout.js new file mode 100644 index 0000000..c910d62 --- /dev/null +++ b/src/hooks/useLayout.js @@ -0,0 +1,13 @@ +import { useContext } from "react"; +import { LayoutContext } from "../context/LayoutContext"; + +/** + * Access layout state + * + * Layout includes: header, sidebar, toolbar, issues, fullscreen + * + * @returns `{ layout, setLayout }` + */ +export default function useLayout() { + return useContext(LayoutContext); +} diff --git a/src/pages/BugReport.jsx b/src/pages/BugReport.jsx index d2b0647..7f35787 100644 --- a/src/pages/BugReport.jsx +++ b/src/pages/BugReport.jsx @@ -72,7 +72,7 @@ function Form({ theme }) { }) .then(() => { Toast.success("Bug reported!"); - editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + editor.dispatchCommand(CLEAR_EDITOR_COMMAND, null); resetForm(); }) .catch(() => { diff --git a/src/pages/Editor.jsx b/src/pages/Editor.jsx index 00309ab..80d1825 100644 --- a/src/pages/Editor.jsx +++ b/src/pages/Editor.jsx @@ -13,8 +13,10 @@ import { import { db } from "../data/db"; import { Divider, Tooltip } from "@douyinfe/semi-ui"; import { exitFullscreen } from "../utils"; +import useLayout from "../hooks/useLayout"; +import LayoutContextProvider from "../context/LayoutContext"; -export const LayoutContext = createContext(); +export const StateContext = createContext(); export const TableContext = createContext(); export const AreaContext = createContext(); export const TabContext = createContext(); @@ -28,6 +30,14 @@ export const BotMessageContext = createContext(); export const TypeContext = createContext(); export default function Editor() { + return ( + + + + ); +} + +function WorkSpace() { const [id, setId] = useState(0); const [title, setTitle] = useState("Untitled Diagram"); const [state, setState] = useState(State.NONE); @@ -40,14 +50,7 @@ export default function Editor() { const [resize, setResize] = useState(false); const [width, setWidth] = useState(340); const [tab, setTab] = useState(Tab.tables); - const [layout, setLayout] = useState({ - header: true, - sidebar: true, - services: true, - issues: true, - toolbar: true, - fullscreen: false, - }); + const { layout, setLayout } = useLayout(); const [settings, setSettings] = useState({ strictMode: false, showFieldSummary: true, @@ -704,7 +707,7 @@ export default function Editor() { }, []); return ( - + - + ); }