46 lines
1.2 KiB
React
46 lines
1.2 KiB
React
|
import { Collapse, Row, Col, Button } from "@douyinfe/semi-ui";
|
||
|
|
import { IconPlus } from "@douyinfe/semi-icons";
|
||
|
|
import { useSelect, useTables } from "../../../hooks";
|
||
|
|
import SearchBar from "./SearchBar";
|
||
|
|
import Empty from "../Empty";
|
||
|
|
import TableInfo from "./TableInfo";
|
||
|
|
|
||
|
|
export default function TablesTab() {
|
||
|
|
const { tables, addTable } = useTables();
|
||
|
|
const { selectedElement, setSelectedElement } = useSelect();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Row gutter={6}>
|
||
|
|
<Col span={16}>
|
||
|
|
<SearchBar />
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<Button icon={<IconPlus />} block onClick={() => addTable(true)}>
|
||
|
|
Add table
|
||
|
|
</Button>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
{tables.length === 0 ? (
|
||
|
|
<Empty title="No tables" text="Start building your diagram!" />
|
||
|
|
) : (
|
||
|
|
<Collapse
|
||
|
|
activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
|
||
|
|
onChange={(k) =>
|
||
|
|
setSelectedElement((prev) => ({
|
||
|
|
...prev,
|
||
|
|
id: parseInt(k),
|
||
|
|
open: true,
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
accordion
|
||
|
|
>
|
||
|
|
{tables.map((t) => (
|
||
|
|
<TableInfo data={t} key={t.id} />
|
||
|
|
))}
|
||
|
|
</Collapse>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|