mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-05-24 10:29:11 +00:00
refactor: modularize and organize table component
This commit is contained in:
ademarsj
parent
ce85bb6680
commit
44b3d3429c
@ -1,376 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Tab,
|
||||
ObjectType,
|
||||
tableFieldHeight,
|
||||
tableHeaderHeight,
|
||||
tableColorStripHeight,
|
||||
} from "../../data/constants";
|
||||
import {
|
||||
IconEdit,
|
||||
IconMore,
|
||||
IconMinus,
|
||||
IconDeleteStroked,
|
||||
IconKeyStroked,
|
||||
} from "@douyinfe/semi-icons";
|
||||
import { Popover, Tag, Button, SideSheet } from "@douyinfe/semi-ui";
|
||||
import { useLayout, useSettings, useDiagram, useSelect } from "../../hooks";
|
||||
import TableInfo from "../EditorSidePanel/TablesTab/TableInfo";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { dbToTypes } from "../../data/datatypes";
|
||||
import { isRtl } from "../../i18n/utils/rtl";
|
||||
import i18n from "../../i18n/i18n";
|
||||
|
||||
export default function Table(props) {
|
||||
const [hoveredField, setHoveredField] = useState(-1);
|
||||
const { database } = useDiagram();
|
||||
const {
|
||||
tableData,
|
||||
onPointerDown,
|
||||
setHoveredTable,
|
||||
handleGripField,
|
||||
setLinkingLine,
|
||||
} = props;
|
||||
const { layout } = useLayout();
|
||||
const { deleteTable, deleteField } = useDiagram();
|
||||
const { settings } = useSettings();
|
||||
const { t } = useTranslation();
|
||||
const { selectedElement, setSelectedElement } = useSelect();
|
||||
|
||||
const height =
|
||||
tableData.fields.length * tableFieldHeight + tableHeaderHeight + 7;
|
||||
const openEditor = () => {
|
||||
if (!layout.sidebar) {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
element: ObjectType.TABLE,
|
||||
id: tableData.id,
|
||||
open: true,
|
||||
}));
|
||||
} else {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
currentTab: Tab.TABLES,
|
||||
element: ObjectType.TABLE,
|
||||
id: tableData.id,
|
||||
open: true,
|
||||
}));
|
||||
if (selectedElement.currentTab !== Tab.TABLES) return;
|
||||
document
|
||||
.getElementById(`scroll_table_${tableData.id}`)
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<foreignObject
|
||||
key={tableData.id}
|
||||
x={tableData.x}
|
||||
y={tableData.y}
|
||||
width={settings.tableWidth}
|
||||
height={height}
|
||||
className="group drop-shadow-lg rounded-md cursor-move"
|
||||
onPointerDown={onPointerDown}
|
||||
>
|
||||
<div
|
||||
onDoubleClick={openEditor}
|
||||
className={`border-2 hover:border-dashed hover:border-blue-500
|
||||
select-none rounded-lg w-full ${
|
||||
settings.mode === "light"
|
||||
? "bg-zinc-100 text-zinc-800"
|
||||
: "bg-zinc-800 text-zinc-200"
|
||||
} ${
|
||||
selectedElement.id === tableData.id &&
|
||||
selectedElement.element === ObjectType.TABLE
|
||||
? "border-solid border-blue-500"
|
||||
: "border-zinc-500"
|
||||
}`}
|
||||
style={{ direction: "ltr" }}
|
||||
>
|
||||
<div
|
||||
className="h-[10px] w-full rounded-t-md"
|
||||
style={{ backgroundColor: tableData.color }}
|
||||
/>
|
||||
<div
|
||||
className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
|
||||
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
|
||||
}`}
|
||||
>
|
||||
<div className=" px-3 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{tableData.name}
|
||||
</div>
|
||||
<div className="hidden group-hover:block">
|
||||
<div className="flex justify-end items-center mx-2">
|
||||
<Button
|
||||
icon={<IconEdit />}
|
||||
size="small"
|
||||
theme="solid"
|
||||
style={{
|
||||
backgroundColor: "#2f68adb3",
|
||||
marginRight: "6px",
|
||||
}}
|
||||
onClick={openEditor}
|
||||
/>
|
||||
<Popover
|
||||
key={tableData.key}
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div className="mb-2">
|
||||
<strong>{t("comment")}:</strong>{" "}
|
||||
{tableData.comment === "" ? (
|
||||
t("not_set")
|
||||
) : (
|
||||
<div>{tableData.comment}</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<strong
|
||||
className={`${
|
||||
tableData.indices.length === 0 ? "" : "block"
|
||||
}`}
|
||||
>
|
||||
{t("indices")}:
|
||||
</strong>{" "}
|
||||
{tableData.indices.length === 0 ? (
|
||||
t("not_set")
|
||||
) : (
|
||||
<div>
|
||||
{tableData.indices.map((index, k) => (
|
||||
<div
|
||||
key={k}
|
||||
className={`flex items-center my-1 px-2 py-1 rounded ${
|
||||
settings.mode === "light"
|
||||
? "bg-gray-100"
|
||||
: "bg-zinc-800"
|
||||
}`}
|
||||
>
|
||||
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
|
||||
<div>
|
||||
{index.fields.map((f) => (
|
||||
<Tag color="blue" key={f} className="me-1">
|
||||
{f}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
block
|
||||
style={{ marginTop: "8px" }}
|
||||
onClick={() => deleteTable(tableData.id)}
|
||||
>
|
||||
{t("delete")}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
position="rightTop"
|
||||
showArrow
|
||||
trigger="click"
|
||||
style={{ width: "200px", wordBreak: "break-word" }}
|
||||
>
|
||||
<Button
|
||||
icon={<IconMore />}
|
||||
type="tertiary"
|
||||
size="small"
|
||||
style={{
|
||||
backgroundColor: "#808080b3",
|
||||
color: "white",
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{tableData.fields.map((e, i) => {
|
||||
return settings.showFieldSummary ? (
|
||||
<Popover
|
||||
key={i}
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div
|
||||
className="flex justify-between items-center pb-2"
|
||||
style={{ direction: "ltr" }}
|
||||
>
|
||||
<p className="me-4 font-bold">{e.name}</p>
|
||||
<p className="ms-4">
|
||||
{e.type +
|
||||
((dbToTypes[database][e.type].isSized ||
|
||||
dbToTypes[database][e.type].hasPrecision) &&
|
||||
e.size &&
|
||||
e.size !== ""
|
||||
? "(" + e.size + ")"
|
||||
: "")}
|
||||
</p>
|
||||
</div>
|
||||
<hr />
|
||||
{e.primary && (
|
||||
<Tag color="blue" className="me-2 my-2">
|
||||
{t("primary")}
|
||||
</Tag>
|
||||
)}
|
||||
{e.unique && (
|
||||
<Tag color="amber" className="me-2 my-2">
|
||||
{t("unique")}
|
||||
</Tag>
|
||||
)}
|
||||
{e.notNull && (
|
||||
<Tag color="purple" className="me-2 my-2">
|
||||
{t("not_null")}
|
||||
</Tag>
|
||||
)}
|
||||
{e.increment && (
|
||||
<Tag color="green" className="me-2 my-2">
|
||||
{t("autoincrement")}
|
||||
</Tag>
|
||||
)}
|
||||
<p>
|
||||
<strong>{t("default_value")}: </strong>
|
||||
{e.default === "" ? t("not_set") : e.default}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t("comment")}: </strong>
|
||||
{e.comment === "" ? t("not_set") : e.comment}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
position="right"
|
||||
showArrow
|
||||
style={
|
||||
isRtl(i18n.language)
|
||||
? { direction: "rtl" }
|
||||
: { direction: "ltr" }
|
||||
}
|
||||
>
|
||||
{field(e, i)}
|
||||
</Popover>
|
||||
) : (
|
||||
field(e, i)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</foreignObject>
|
||||
<SideSheet
|
||||
title={t("edit")}
|
||||
size="small"
|
||||
visible={
|
||||
selectedElement.element === ObjectType.TABLE &&
|
||||
selectedElement.id === tableData.id &&
|
||||
selectedElement.open &&
|
||||
!layout.sidebar
|
||||
}
|
||||
onCancel={() =>
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
open: !prev.open,
|
||||
}))
|
||||
}
|
||||
style={{ paddingBottom: "16px" }}
|
||||
>
|
||||
<div className="sidesheet-theme">
|
||||
<TableInfo data={tableData} />
|
||||
</div>
|
||||
</SideSheet>
|
||||
</>
|
||||
);
|
||||
|
||||
function field(fieldData, index) {
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
index === tableData.fields.length - 1
|
||||
? ""
|
||||
: "border-b border-gray-400"
|
||||
} group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
|
||||
onPointerEnter={(e) => {
|
||||
if (!e.isPrimary) return;
|
||||
|
||||
setHoveredField(index);
|
||||
setHoveredTable({
|
||||
tableId: tableData.id,
|
||||
field: index,
|
||||
});
|
||||
}}
|
||||
onPointerLeave={(e) => {
|
||||
if (!e.isPrimary) return;
|
||||
|
||||
setHoveredField(-1);
|
||||
}}
|
||||
onPointerDown={(e) => {
|
||||
// Required for onPointerLeave to trigger when a touch pointer leaves
|
||||
// https://stackoverflow.com/a/70976017/1137077
|
||||
e.target.releasePointerCapture(e.pointerId);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
hoveredField === index ? "text-zinc-400" : ""
|
||||
} flex items-center gap-2 overflow-hidden`}
|
||||
>
|
||||
<button
|
||||
className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
|
||||
onPointerDown={(e) => {
|
||||
if (!e.isPrimary) return;
|
||||
|
||||
handleGripField(index);
|
||||
setLinkingLine((prev) => ({
|
||||
...prev,
|
||||
startFieldId: index,
|
||||
startTableId: tableData.id,
|
||||
startX: tableData.x + 15,
|
||||
startY:
|
||||
tableData.y +
|
||||
index * tableFieldHeight +
|
||||
tableHeaderHeight +
|
||||
tableColorStripHeight +
|
||||
12,
|
||||
endX: tableData.x + 15,
|
||||
endY:
|
||||
tableData.y +
|
||||
index * tableFieldHeight +
|
||||
tableHeaderHeight +
|
||||
tableColorStripHeight +
|
||||
12,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{fieldData.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-zinc-400">
|
||||
{hoveredField === index ? (
|
||||
<Button
|
||||
theme="solid"
|
||||
size="small"
|
||||
style={{
|
||||
backgroundColor: "#d42020b3",
|
||||
}}
|
||||
icon={<IconMinus />}
|
||||
onClick={() => deleteField(fieldData, tableData.id)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex gap-1 items-center">
|
||||
{fieldData.primary && <IconKeyStroked />}
|
||||
{!fieldData.notNull && <span>?</span>}
|
||||
<span>
|
||||
{fieldData.type +
|
||||
((dbToTypes[database][fieldData.type].isSized ||
|
||||
dbToTypes[database][fieldData.type].hasPrecision) &&
|
||||
fieldData.size &&
|
||||
fieldData.size !== ""
|
||||
? "(" + fieldData.size + ")"
|
||||
: "")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
133
src/components/EditorCanvas/Table/components/TableField.jsx
Normal file
133
src/components/EditorCanvas/Table/components/TableField.jsx
Normal file
@ -0,0 +1,133 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { dbToTypes } from "../../../../data/datatypes";
|
||||
import { useDiagram } from "../../../../hooks";
|
||||
import { Button } from "@douyinfe/semi-ui";
|
||||
import { IconMinus, IconKeyStroked } from "@douyinfe/semi-icons";
|
||||
|
||||
const TableField = forwardRef((props, ref) => {
|
||||
const {
|
||||
tableData,
|
||||
fieldData,
|
||||
index,
|
||||
setHoveredTable,
|
||||
handleGripField,
|
||||
setLinkingLine,
|
||||
setHoveredField,
|
||||
hoveredField,
|
||||
tableFieldHeight,
|
||||
tableHeaderHeight,
|
||||
tableColorStripHeight,
|
||||
} = props;
|
||||
const { database, deleteField } = useDiagram();
|
||||
|
||||
const FieldSize = React.memo(({ field }) => {
|
||||
let hasSize =
|
||||
dbToTypes[database][field.type].isSized ||
|
||||
dbToTypes[database][field.type].hasPrecision;
|
||||
let sizeValid = field.size && field.size !== "";
|
||||
|
||||
if (hasSize && sizeValid) {
|
||||
return field.type + `(${field.size})`;
|
||||
} else {
|
||||
return field.type;
|
||||
}
|
||||
});
|
||||
|
||||
FieldSize.displayName = "FieldSize";
|
||||
|
||||
return (
|
||||
<div
|
||||
// Popover children needs forwardRef and props destructuring to work with
|
||||
// Functiona Components (https://semi.design/en-US/show/popover#Cautions)
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={`${
|
||||
index === tableData.fields.length - 1 ? "" : "border-b border-gray-400"
|
||||
} group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
|
||||
onPointerEnter={(e) => {
|
||||
if (!e.isPrimary) return;
|
||||
|
||||
setHoveredField(index);
|
||||
setHoveredTable({
|
||||
tableId: tableData.id,
|
||||
field: index,
|
||||
});
|
||||
}}
|
||||
onPointerLeave={(e) => {
|
||||
if (!e.isPrimary) return;
|
||||
|
||||
setHoveredField(-1);
|
||||
}}
|
||||
onPointerDown={(e) => {
|
||||
// Required for onPointerLeave to trigger when a touch pointer leaves
|
||||
// https://stackoverflow.com/a/70976017/1137077
|
||||
e.target.releasePointerCapture(e.pointerId);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
hoveredField === index ? "text-zinc-400" : ""
|
||||
} flex items-center gap-2 overflow-hidden`}
|
||||
>
|
||||
<button
|
||||
className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
|
||||
onPointerDown={(e) => {
|
||||
if (!e.isPrimary) return;
|
||||
|
||||
handleGripField(index);
|
||||
setLinkingLine((prev) => ({
|
||||
...prev,
|
||||
startFieldId: index,
|
||||
startTableId: tableData.id,
|
||||
startX: tableData.x + 15,
|
||||
startY:
|
||||
tableData.y +
|
||||
index * tableFieldHeight +
|
||||
tableHeaderHeight +
|
||||
tableColorStripHeight +
|
||||
12,
|
||||
endX: tableData.x + 15,
|
||||
endY:
|
||||
tableData.y +
|
||||
index * tableFieldHeight +
|
||||
tableHeaderHeight +
|
||||
tableColorStripHeight +
|
||||
12,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{fieldData.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-zinc-400">
|
||||
{hoveredField === index ? (
|
||||
<Button
|
||||
theme="solid"
|
||||
size="small"
|
||||
style={{
|
||||
backgroundColor: "#d42020b3",
|
||||
}}
|
||||
icon={<IconMinus />}
|
||||
onClick={() => {
|
||||
deleteField(fieldData, tableData.id);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex gap-1 items-center">
|
||||
{fieldData.primary && <IconKeyStroked />}
|
||||
{!fieldData.notNull && <span>?</span>}
|
||||
<span>
|
||||
<FieldSize field={fieldData} />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
TableField.displayName = "TableField";
|
||||
|
||||
export default TableField;
|
||||
@ -0,0 +1,83 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import i18n from "../../../../i18n/i18n";
|
||||
import { isRtl } from "../../../../i18n/utils/rtl";
|
||||
import { Popover, Tag } from "@douyinfe/semi-ui";
|
||||
import { dbToTypes } from "../../../../data/datatypes";
|
||||
import { useDiagram } from "../../../../hooks";
|
||||
|
||||
export default function TableFieldPopover({ fieldData, children, visible }) {
|
||||
const { database } = useDiagram();
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!visible) {
|
||||
return <React.Fragment>{children}</React.Fragment>;
|
||||
}
|
||||
|
||||
const FieldSize = React.memo(({ field }) => {
|
||||
let hasSize =
|
||||
dbToTypes[database][field.type].isSized ||
|
||||
dbToTypes[database][field.type].hasPrecision;
|
||||
let sizeValid = field.size && field.size !== "";
|
||||
|
||||
if (hasSize && sizeValid) {
|
||||
return `(${field.size})`;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
});
|
||||
|
||||
FieldSize.displayName = "FieldSize";
|
||||
|
||||
return (
|
||||
<Popover
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div
|
||||
className="flex justify-between items-center pb-2"
|
||||
style={{ direction: "ltr" }}
|
||||
>
|
||||
<p className="me-4 font-bold">{fieldData.name}</p>
|
||||
<p className="ms-4">{<FieldSize field={fieldData} />}</p>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
{fieldData.primary && (
|
||||
<Tag color="blue" className="me-2 my-2">
|
||||
{t("primary")}
|
||||
</Tag>
|
||||
)}
|
||||
{fieldData.unique && (
|
||||
<Tag color="amber" className="me-2 my-2">
|
||||
{t("unique")}
|
||||
</Tag>
|
||||
)}
|
||||
{fieldData.notNull && (
|
||||
<Tag color="purple" className="me-2 my-2">
|
||||
{t("not_null")}
|
||||
</Tag>
|
||||
)}
|
||||
{fieldData.increment && (
|
||||
<Tag color="green" className="me-2 my-2">
|
||||
{t("autoincrement")}
|
||||
</Tag>
|
||||
)}
|
||||
<p>
|
||||
<strong>{t("default_value")}: </strong>
|
||||
{fieldData.default === "" ? t("not_set") : fieldData.default}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t("comment")}: </strong>
|
||||
{fieldData.comment === "" ? t("not_set") : fieldData.comment}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
position="right"
|
||||
showArrow
|
||||
style={isRtl(i18n.language) ? { direction: "rtl" } : { direction: "ltr" }}
|
||||
>
|
||||
{children}
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
105
src/components/EditorCanvas/Table/components/TableHeader.jsx
Normal file
105
src/components/EditorCanvas/Table/components/TableHeader.jsx
Normal file
@ -0,0 +1,105 @@
|
||||
import { IconEdit, IconMore, IconDeleteStroked } from "@douyinfe/semi-icons";
|
||||
import { Popover, Tag, Button } from "@douyinfe/semi-ui";
|
||||
import { useDiagram } from "../../../../hooks";
|
||||
|
||||
export default function TableHeader({ tableData, settings, openEditor, t }) {
|
||||
const { deleteTable } = useDiagram();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
|
||||
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
|
||||
}`}
|
||||
>
|
||||
<div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{tableData.name}
|
||||
</div>
|
||||
<div className="hidden group-hover:block">
|
||||
<div className="flex justify-end items-center mx-2">
|
||||
<Button
|
||||
icon={<IconEdit />}
|
||||
size="small"
|
||||
theme="solid"
|
||||
style={{
|
||||
backgroundColor: "#2f68adb3",
|
||||
marginRight: "6px",
|
||||
}}
|
||||
onClick={openEditor}
|
||||
/>
|
||||
<Popover
|
||||
key={tableData.key}
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div className="mb-2">
|
||||
<strong>{t("comment")}:</strong>{" "}
|
||||
{tableData.comment === "" ? (
|
||||
t("not_set")
|
||||
) : (
|
||||
<div>{tableData.comment}</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<strong
|
||||
className={`${
|
||||
tableData.indices.length === 0 ? "" : "block"
|
||||
}`}
|
||||
>
|
||||
{t("indices")}:
|
||||
</strong>{" "}
|
||||
{tableData.indices.length === 0 ? (
|
||||
t("not_set")
|
||||
) : (
|
||||
<div>
|
||||
{tableData.indices.map((index, k) => (
|
||||
<div
|
||||
key={k}
|
||||
className={`flex items-center my-1 px-2 py-1 rounded ${
|
||||
settings.mode === "light"
|
||||
? "bg-gray-100"
|
||||
: "bg-zinc-800"
|
||||
}`}
|
||||
>
|
||||
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
|
||||
<div>
|
||||
{index.fields.map((f) => (
|
||||
<Tag color="blue" key={f} className="me-1">
|
||||
{f}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
block
|
||||
style={{ marginTop: "8px" }}
|
||||
onClick={() => deleteTable(tableData.id)}
|
||||
>
|
||||
{t("delete")}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
position="rightTop"
|
||||
showArrow
|
||||
trigger="click"
|
||||
style={{ width: "200px", wordBreak: "break-word" }}
|
||||
>
|
||||
<Button
|
||||
icon={<IconMore />}
|
||||
type="tertiary"
|
||||
size="small"
|
||||
style={{
|
||||
backgroundColor: "#808080b3",
|
||||
color: "white",
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
156
src/components/EditorCanvas/Table/index.jsx
Normal file
156
src/components/EditorCanvas/Table/index.jsx
Normal file
@ -0,0 +1,156 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { SideSheet } from "@douyinfe/semi-ui";
|
||||
import { useLayout, useSettings, useSelect } from "../../../hooks";
|
||||
|
||||
import {
|
||||
Tab,
|
||||
ObjectType,
|
||||
tableFieldHeight,
|
||||
tableHeaderHeight,
|
||||
tableColorStripHeight,
|
||||
} from "../../../data/constants";
|
||||
|
||||
import TableFieldPopover from "./components/TableFieldPopover";
|
||||
import TableField from "./components/TableField";
|
||||
import TableHeader from "./components/TableHeader";
|
||||
|
||||
import TableInfo from "../../EditorSidePanel/TablesTab/TableInfo";
|
||||
|
||||
export default function Table(props) {
|
||||
const [hoveredField, setHoveredField] = useState(-1);
|
||||
const {
|
||||
tableData,
|
||||
onPointerDown,
|
||||
setHoveredTable,
|
||||
handleGripField,
|
||||
setLinkingLine,
|
||||
} = props;
|
||||
const { layout } = useLayout();
|
||||
const { settings } = useSettings();
|
||||
const { t } = useTranslation();
|
||||
const { selectedElement, setSelectedElement } = useSelect();
|
||||
|
||||
const height =
|
||||
tableData.fields.length * tableFieldHeight + tableHeaderHeight + 7;
|
||||
|
||||
const openEditor = () => {
|
||||
if (!layout.sidebar) {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
element: ObjectType.TABLE,
|
||||
id: tableData.id,
|
||||
open: true,
|
||||
}));
|
||||
} else {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
currentTab: Tab.TABLES,
|
||||
element: ObjectType.TABLE,
|
||||
id: tableData.id,
|
||||
open: true,
|
||||
}));
|
||||
if (selectedElement.currentTab !== Tab.TABLES) return;
|
||||
document
|
||||
.getElementById(`scroll_table_${tableData.id}`)
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
const TableHeaderBand = React.memo(({ color }) => {
|
||||
return (
|
||||
<div
|
||||
className="h-[10px] w-full rounded-t-md"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
TableHeaderBand.displayName = "TableHeaderBand";
|
||||
|
||||
return (
|
||||
<>
|
||||
<foreignObject
|
||||
key={tableData.id}
|
||||
x={tableData.x}
|
||||
y={tableData.y}
|
||||
width={settings.tableWidth}
|
||||
height={height}
|
||||
className="group drop-shadow-lg rounded-md cursor-move"
|
||||
onPointerDown={onPointerDown}
|
||||
>
|
||||
<div
|
||||
onDoubleClick={openEditor}
|
||||
className={`border-2 hover:border-dashed hover:border-blue-500
|
||||
select-none rounded-lg w-full ${
|
||||
settings.mode === "light"
|
||||
? "bg-zinc-100 text-zinc-800"
|
||||
: "bg-zinc-800 text-zinc-200"
|
||||
} ${
|
||||
selectedElement.id === tableData.id &&
|
||||
selectedElement.element === ObjectType.TABLE
|
||||
? "border-solid border-blue-500"
|
||||
: "border-zinc-500"
|
||||
}`}
|
||||
style={{ direction: "ltr" }}
|
||||
>
|
||||
<TableHeaderBand color={tableData.color} />
|
||||
|
||||
<TableHeader
|
||||
tableData={tableData}
|
||||
settings={settings}
|
||||
openEditor={openEditor}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
{tableData.fields.map((fieldData, index) => {
|
||||
return (
|
||||
<TableFieldPopover
|
||||
key={index}
|
||||
visible={settings.showFieldSummary}
|
||||
fieldData={fieldData}
|
||||
>
|
||||
<TableField
|
||||
key={index}
|
||||
tableData={tableData}
|
||||
fieldData={fieldData}
|
||||
index={index}
|
||||
setHoveredTable={setHoveredTable}
|
||||
handleGripField={handleGripField}
|
||||
setLinkingLine={setLinkingLine}
|
||||
setHoveredField={setHoveredField}
|
||||
hoveredField={hoveredField}
|
||||
tableFieldHeight={tableFieldHeight}
|
||||
tableHeaderHeight={tableHeaderHeight}
|
||||
tableColorStripHeight={tableColorStripHeight}
|
||||
/>
|
||||
</TableFieldPopover>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
||||
<SideSheet
|
||||
title={t("edit")}
|
||||
size="small"
|
||||
visible={
|
||||
selectedElement.element === ObjectType.TABLE &&
|
||||
selectedElement.id === tableData.id &&
|
||||
selectedElement.open &&
|
||||
!layout.sidebar
|
||||
}
|
||||
onCancel={() =>
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
open: !prev.open,
|
||||
}))
|
||||
}
|
||||
style={{ paddingBottom: "16px" }}
|
||||
>
|
||||
<div className="sidesheet-theme">
|
||||
<TableInfo data={tableData} />
|
||||
</div>
|
||||
</SideSheet>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user