titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix popovers for editing when sidebar is off

Browse Source
This commit is contained in:
1ilit 2024-02-29 18:51:43 +02:00
parent 420006ca57
commit 9e68b88213
3 changed files with 17 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Area.jsx
View File

@ -11,6 +11,7 @@ import {
ObjectType, ObjectType,
tableThemes, tableThemes,
defaultTableTheme, defaultTableTheme,
State,
} from "../data/data"; } from "../data/data";
import { import {
AreaContext, AreaContext,
@ -23,9 +24,8 @@ import {
export default function Area(props) { export default function Area(props) {
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
const [saved, setSaved] = useState(false);
const [editField, setEditField] = useState({}); const [editField, setEditField] = useState({});
const { layout } = useContext(LayoutContext); const { layout, setState } = useContext(LayoutContext);
const { settings } = useContext(SettingsContext); const { settings } = useContext(SettingsContext);
const { tab, setTab } = useContext(TabContext); const { tab, setTab } = useContext(TabContext);
const { updateArea, deleteArea } = useContext(AreaContext); const { updateArea, deleteArea } = useContext(AreaContext);
@ -49,7 +49,6 @@ export default function Area(props) {
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => { onMouseLeave={() => {
setHovered(false); setHovered(false);
setSaved(false);
}} }}
> >
<foreignObject <foreignObject
@ -96,6 +95,7 @@ export default function Area(props) {
...prev, ...prev,
openDialogue: false, openDialogue: false,
})); }));
setState(State.SAVING);
}} }}
stopPropagation stopPropagation
content={ content={
@ -113,7 +113,6 @@ export default function Area(props) {
} }
onFocus={(e) => setEditField({ name: e.target.value })} onFocus={(e) => setEditField({ name: e.target.value })}
onBlur={(e) => { onBlur={(e) => {
setSaved(true);
if (e.target.value === editField.name) return; if (e.target.value === editField.name) return;
setUndoStack((prev) => [ setUndoStack((prev) => [
...prev, ...prev,
@ -137,11 +136,12 @@ export default function Area(props) {
<Button <Button
type="tertiary" type="tertiary"
size="small" size="small"
onClick={() => onClick={() => {
updateArea(props.areaData.id, { updateArea(props.areaData.id, {
color: defaultTableTheme, color: defaultTableTheme,
}) });
} setState(State.SAVING);
}}
> >
Clear Clear
</Button> </Button>
@ -245,30 +245,6 @@ export default function Area(props) {
> >
Delete Delete
</Button> </Button>
<Button
block
style={{ marginLeft: "8px" }}
onClick={() => {
if (!saved) {
if (props.areaData.name === editField.name) return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: props.areaData.id,
undo: editField,
redo: { name: props.areaData.name },
message: `Edit area name to ${props.areaData.name}`,
},
]);
setRedoStack([]);
setSaved(false);
}
}}
>
Save
</Button>
</div> </div>
</div> </div>
} }

11
src/components/AreaOverview.jsx
View File

@ -24,10 +24,12 @@ import {
tableThemes, tableThemes,
Action, Action,
ObjectType, ObjectType,
State,
} from "../data/data"; } from "../data/data";
import { AreaContext, UndoRedoContext } from "../pages/Editor"; import { AreaContext, LayoutContext, UndoRedoContext } from "../pages/Editor";
export default function AreaOverview() { export default function AreaOverview() {
const { setState } = useContext(LayoutContext);
const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext); const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [editField, setEditField] = useState({}); const [editField, setEditField] = useState({});
@ -135,9 +137,10 @@ export default function AreaOverview() {
<Button <Button
type="tertiary" type="tertiary"
size="small" size="small"
onClick={() => onClick={() => {
updateArea(i, { color: defaultTableTheme }) updateArea(i, { color: defaultTableTheme });
} setState(State.SAVING);
}}
> >
Clear Clear
</Button> </Button>

5
src/components/Note.jsx
View File

@ -6,7 +6,7 @@ import {
TabContext, TabContext,
SelectContext, SelectContext,
} from "../pages/Editor"; } from "../pages/Editor";
import { Action, ObjectType, noteThemes, Tab } from "../data/data"; import { Action, ObjectType, noteThemes, Tab, State } from "../data/data";
import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui"; import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
import { import {
IconEdit, IconEdit,
@ -22,7 +22,7 @@ export default function Note(props) {
const fold = 24; const fold = 24;
const { updateNote, deleteNote } = useContext(NoteContext); const { updateNote, deleteNote } = useContext(NoteContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { layout } = useContext(LayoutContext); const { layout, setState } = useContext(LayoutContext);
const { tab, setTab } = useContext(TabContext); const { tab, setTab } = useContext(TabContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext); const { selectedElement, setSelectedElement } = useContext(SelectContext);
@ -146,6 +146,7 @@ export default function Note(props) {
...prev, ...prev,
openDialogue: false, openDialogue: false,
})); }));
setState(State.SAVING);
}} }}
stopPropagation stopPropagation
content={ content={