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

clean up

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:14 +03:00
parent 7f6a2d208f
commit 8bd5e19cee
3 changed files with 77 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/editor_panel.jsx
View File

@ -1,4 +1,4 @@
import { React, useState, useRef, memo } from "react"; import { React, useState, useRef } from "react";
import { ResizableBox } from "react-resizable"; import { ResizableBox } from "react-resizable";
import CodeMirror from "@uiw/react-codemirror"; import CodeMirror from "@uiw/react-codemirror";
import { createTheme } from "@uiw/codemirror-themes"; import { createTheme } from "@uiw/codemirror-themes";
@ -28,7 +28,7 @@ const myTheme = createTheme({
], ],
}); });
const EditorPanel = memo(function EditorPanel(props) { const EditorPanel = (props) => {
const [tab, setTab] = useState("1"); const [tab, setTab] = useState("1");
const map = useRef(new Map()); const map = useRef(new Map());
@ -40,7 +40,7 @@ const EditorPanel = memo(function EditorPanel(props) {
]; ];
const contentList = [ const contentList = [
<div> <div>
<TableOverview tables={props.tables} setTables={props.setTables}/> <TableOverview tables={props.tables} setTables={props.setTables} />
</div>, </div>,
<div> <div>
<ReferenceOverview <ReferenceOverview
@ -176,6 +176,6 @@ const EditorPanel = memo(function EditorPanel(props) {
</div> </div>
</ResizableBox> </ResizableBox>
); );
}); };
export default EditorPanel; export default EditorPanel;

204
src/components/table_overview.jsx
View File

@ -1,4 +1,4 @@
import { React, useState, memo } from "react"; import { React, useState } from "react";
import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data"; import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
import { import {
Collapse, Collapse,
@ -23,16 +23,9 @@ import {
IconSearch, IconSearch,
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
const TableOverview = memo(function TableOverView(props) { export default function TableOverview(props) {
const [indexActiveKey, setIndexActiveKey] = useState(""); const [indexActiveKey, setIndexActiveKey] = useState("");
const [tableActiveKey, setTableActiveKey] = useState(""); const [tableActiveKey, setTableActiveKey] = useState("");
const updateColor = (id, c) => {
const updatedTables = [...props.tables];
updatedTables[id] = { ...updatedTables[id], color: c };
props.setTables(updatedTables);
};
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const [filteredResult, setFilteredResult] = useState( const [filteredResult, setFilteredResult] = useState(
props.tables.map((t) => { props.tables.map((t) => {
@ -50,8 +43,34 @@ const TableOverview = memo(function TableOverView(props) {
); );
}; };
const handleChange = (value) => { const updatedField = (tid, fid, updatedValues) => {
setValue(value); props.setTables((prev) =>
prev.map((table, i) => {
if (tid === i) {
return {
...table,
fields: table.fields.map((field, j) =>
fid === j ? { ...field, ...updatedValues } : field
),
};
}
return table;
})
);
};
const updateTable = (tid, updatedValues) => {
props.setTables((prev) =>
prev.map((table, i) => {
if (tid === i) {
return {
...table,
...updatedValues,
};
}
return table;
})
);
}; };
return ( return (
@ -67,7 +86,7 @@ const TableOverview = memo(function TableOverView(props) {
placeholder="Search..." placeholder="Search..."
emptyContent={<div className="p-3">No tables found</div>} emptyContent={<div className="p-3">No tables found</div>}
onSearch={(v) => handleStringSearch(v)} onSearch={(v) => handleStringSearch(v)}
onChange={(v) => handleChange(v)} onChange={(v) => setValue(v)}
onSelect={(v) => { onSelect={(v) => {
const { id, name } = props.tables.find((t) => t.name === v); const { id, name } = props.tables.find((t) => t.name === v);
setTableActiveKey(`${id}`); setTableActiveKey(`${id}`);
@ -109,10 +128,7 @@ const TableOverview = memo(function TableOverView(props) {
indices: [], indices: [],
color: defaultTableTheme, color: defaultTableTheme,
}; };
props.setTables((prev) => { props.setTables((prev) => [...prev, newTable]);
const updatedTables = [...prev, newTable];
return updatedTables;
});
}} }}
> >
Add table Add table
@ -131,23 +147,7 @@ const TableOverview = memo(function TableOverView(props) {
{t.fields.map((f, j) => ( {t.fields.map((f, j) => (
<Form <Form
key={j} key={j}
onChange={(value) => { onChange={(value) => updatedField(i, j, value.values)}
props.setTables((prev) => {
return prev.map((p, idx) => {
if (idx === i) {
return {
...p,
fields: p.fields.map((field, index) =>
index === j
? { ...field, ...value.values }
: field
),
};
}
return p;
});
});
}}
> >
<Row <Row
type="flex" type="flex"
@ -186,16 +186,9 @@ const TableOverview = memo(function TableOverView(props) {
type={f.notNull ? "primary" : "tertiary"} type={f.notNull ? "primary" : "tertiary"}
title="Nullable" title="Nullable"
theme={f.notNull ? "solid" : "light"} theme={f.notNull ? "solid" : "light"}
onClick={() => { onClick={() =>
const updatedTables = [...props.tables]; updatedField(i, j, { notNull: !f.notNull })
updatedTables[i].fields = updatedTables[i].fields.map( }
(field, index) =>
index === j
? { ...field, notNull: !f.notNull }
: field
);
props.setTables(updatedTables);
}}
> >
? ?
</Button> </Button>
@ -203,18 +196,11 @@ const TableOverview = memo(function TableOverView(props) {
<Col span={3}> <Col span={3}>
<Button <Button
type={f.primary ? "primary" : "tertiary"} type={f.primary ? "primary" : "tertiary"}
title="Nullable" title="Primary"
theme={f.primary ? "solid" : "light"} theme={f.primary ? "solid" : "light"}
onClick={() => { onClick={() =>
const updatedTables = [...props.tables]; updatedField(i, j, { primary: !f.primary })
updatedTables[i].fields = updatedTables[i].fields.map( }
(field, index) =>
index === j
? { ...field, primary: !f.primary }
: field
);
props.setTables(updatedTables);
}}
icon={<IconKeyStroked />} icon={<IconKeyStroked />}
></Button> ></Button>
</Col> </Col>
@ -223,19 +209,9 @@ const TableOverview = memo(function TableOverView(props) {
content={ content={
<div className="px-1"> <div className="px-1">
<Form <Form
onChange={(value) => { onChange={(value) =>
const updatedTables = [...props.tables]; updatedField(i, j, value.values)
updatedTables[i] = { }
...updatedTables[i],
fields: updatedTables[i].fields.map(
(field, index) =>
index === j
? { ...field, ...value.values }
: field
),
};
props.setTables(updatedTables);
}}
> >
<Form.Input <Form.Input
field="default" field="default"
@ -258,21 +234,12 @@ const TableOverview = memo(function TableOverView(props) {
<Checkbox <Checkbox
value="unique" value="unique"
defaultChecked={f.unique} defaultChecked={f.unique}
onChange={(checkedValues) => { onChange={(checkedValues) =>
const updatedTables = [...props.tables]; updatedField(i, j, {
updatedTables[i].fields = updatedTables[ [checkedValues.target.value]:
i checkedValues.target.checked,
].fields.map((field, index) => })
index === j }
? {
...field,
[checkedValues.target.value]:
checkedValues.target.checked,
}
: field
);
props.setTables(updatedTables);
}}
></Checkbox> ></Checkbox>
</div> </div>
<div className="flex justify-between items-center my-3"> <div className="flex justify-between items-center my-3">
@ -285,21 +252,12 @@ const TableOverview = memo(function TableOverView(props) {
<Checkbox <Checkbox
value="increment" value="increment"
defaultChecked={f.increment} defaultChecked={f.increment}
onChange={(checkedValues) => { onChange={(checkedValues) =>
const updatedTables = [...props.tables]; updatedField(i, j, {
updatedTables[i].fields = updatedTables[ [checkedValues.target.value]:
i checkedValues.target.checked,
].fields.map((field, index) => })
index === j }
? {
...field,
[checkedValues.target.value]:
checkedValues.target.checked,
}
: field
);
props.setTables(updatedTables);
}}
></Checkbox> ></Checkbox>
</div> </div>
<Form.TextArea <Form.TextArea
@ -436,28 +394,12 @@ const TableOverview = memo(function TableOverView(props) {
> >
<Collapse> <Collapse>
<Collapse.Panel header="Comment" itemKey="1"> <Collapse.Panel header="Comment" itemKey="1">
<Form <Form onChange={(value) => updateTable(i, value.values)}>
onChange={(value) => {
const updatedTables = [...props.tables];
updatedTables[i] = {
...t,
...value.values,
};
props.setTables(updatedTables);
}}
>
<Form.TextArea <Form.TextArea
field="comment" field="comment"
noLabel={true} noLabel={true}
showClear showClear
onClear={() => { onClear={() => updateTable(i, { comment: "" })}
const updatedTables = [...props.tables];
updatedTables[i] = {
...t,
comment: "",
};
props.setTables(updatedTables);
}}
initValue={t.comment} initValue={t.comment}
autosize autosize
placeholder="Add comment" placeholder="Add comment"
@ -477,7 +419,9 @@ const TableOverview = memo(function TableOverView(props) {
<Button <Button
type="tertiary" type="tertiary"
size="small" size="small"
onClick={() => updateColor(i, defaultTableTheme)} onClick={() =>
updateTable(i, { color: defaultTableTheme })
}
> >
Clear Clear
</Button> </Button>
@ -492,7 +436,7 @@ const TableOverview = memo(function TableOverView(props) {
key={c} key={c}
style={{ backgroundColor: c }} style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1" className="p-3 rounded-full mx-1"
onClick={() => updateColor(i, c)} onClick={() => updateTable(i, { color: c })}
> >
{t.color === c ? ( {t.color === c ? (
<IconCheckboxTick <IconCheckboxTick
@ -512,15 +456,13 @@ const TableOverview = memo(function TableOverView(props) {
key={c} key={c}
style={{ backgroundColor: c }} style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1" className="p-3 rounded-full mx-1"
onClick={() => updateColor(i, c)} onClick={() => updateTable(i, { color: c })}
> >
{t.color === c ? ( <IconCheckboxTick
<IconCheckboxTick style={{
style={{ color: "white" }} color: t.color === c ? "white" : c,
/> }}
) : ( />
<IconCheckboxTick style={{ color: c }} />
)}
</button> </button>
))} ))}
</div> </div>
@ -586,11 +528,11 @@ const TableOverview = memo(function TableOverView(props) {
type="danger" type="danger"
onClick={() => { onClick={() => {
Toast.success(`Table deleted!`); Toast.success(`Table deleted!`);
props.setTables((prev) => { props.setTables((prev) =>
return prev prev
.filter((e) => e.id !== i) .filter((e) => e.id !== i)
.map((e, idx) => ({ ...e, id: idx })); .map((e, idx) => ({ ...e, id: idx }))
}); );
setTableActiveKey(""); setTableActiveKey("");
}} }}
></Button> ></Button>
@ -602,6 +544,4 @@ const TableOverview = memo(function TableOverView(props) {
</Collapse> </Collapse>
</> </>
); );
}); }
export default TableOverview;

11
src/pages/editor.jsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useState } from "react";
import Header from "../components/header"; import Header from "../components/header";
import Sidebar from "../components/sidebar"; import Sidebar from "../components/sidebar";
import ControlPanel from "../components/control_panel"; import ControlPanel from "../components/control_panel";
@ -13,14 +13,6 @@ export default function Editor(props) {
const [relationships, setRelationships] = useState([]); const [relationships, setRelationships] = useState([]);
const [areas, setAreas] = useState([]); const [areas, setAreas] = useState([]);
useEffect(() => {
console.log("changed: ", tables);
}, [tables]);
// const handleDelete = useCallback((id)=>{
// setTables(prev=>prev.filter(e=>e.id!==id).map((e, i)=>({...e, id: i})))
// }, [])
return ( return (
<> <>
<Header name={props.name} /> <Header name={props.name} />
@ -36,7 +28,6 @@ export default function Editor(props) {
setRelationships={setRelationships} setRelationships={setRelationships}
areas={areas} areas={areas}
setAreas={setAreas} setAreas={setAreas}
// handleDelete={handleDelete}
/> />
<Canvas <Canvas
tables={tables} tables={tables}