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

Remove popconfirm from canvas field delete

Browse Source
This commit is contained in:
1ilit 2024-01-22 18:16:21 +02:00
parent 3efbb0de2a
commit b8f7ac2812
1 changed files with 44 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/Table.jsx
View File

@ -17,7 +17,6 @@ import {
IconColorPalette,
} from "@douyinfe/semi-icons";
import {
Popconfirm,
Select,
Input,
TextArea,
@ -73,27 +72,24 @@ export default function Table(props) {
onMouseLeave={() => setIsHovered(false)}
>
<div
className={`border-2 ${
isHovered
className={`border-2 ${isHovered
? "border-dashed border-blue-500"
: selectedElement.element === ObjectType.TABLE &&
selectedElement.id === props.tableData.id
? "border-blue-500"
: "border-slate-400"
} select-none rounded-lg w-full ${
settings.mode === "light"
? "border-blue-500"
: "border-slate-400"
} select-none rounded-lg w-full ${settings.mode === "light"
? "bg-zinc-100 text-zinc-800"
: "bg-zinc-800 text-zinc-200"
}`}
}`}
>
<div
className={`h-[10px] w-full rounded-t-md`}
style={{ backgroundColor: props.tableData.color }}
/>
<div
className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
}`}
className={`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">
{isHovered
@ -101,8 +97,8 @@ export default function Table(props) {
? props.tableData.name
: `${props.tableData.name.substring(0, 10)}...`
: props.tableData.name.length < 16
? props.tableData.name
: `${props.tableData.name.substring(0, 16)}...`}
? props.tableData.name
: `${props.tableData.name.substring(0, 16)}...`}
</div>
{isHovered && (
<div className="flex justify-end items-center mx-2">
@ -151,9 +147,8 @@ export default function Table(props) {
</div>
<div>
<strong
className={`${
props.tableData.indices.length === 0 ? "" : "block"
}`}
className={`${props.tableData.indices.length === 0 ? "" : "block"
}`}
>
Indices :
</strong>{" "}
@ -164,11 +159,10 @@ export default function Table(props) {
{props.tableData.indices.map((index, k) => (
<div
key={k}
className={`flex items-center my-1 px-2 py-1 rounded ${
settings.mode === "light"
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>
@ -437,9 +431,8 @@ export default function Table(props) {
fid: j,
undo: { notNull: f.notNull },
redo: { notNull: !f.notNull },
message: `Edit table field to${
f.notNull ? "" : " not"
} null`,
message: `Edit table field to${f.notNull ? "" : " not"
} null`,
},
]);
setRedoStack([]);
@ -465,9 +458,8 @@ export default function Table(props) {
fid: j,
undo: { primary: f.primary },
redo: { primary: !f.primary },
message: `Edit table field to${
f.primary ? " not" : ""
} primary`,
message: `Edit table field to${f.primary ? " not" : ""
} primary`,
},
]);
setRedoStack([]);
@ -699,9 +691,8 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${
f.unique ? " not" : ""
} unique`,
message: `Edit table field to${f.unique ? " not" : ""
} unique`,
},
]);
setRedoStack([]);
@ -741,9 +732,8 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${
f.primary ? " not" : ""
} auto increment`,
message: `Edit table field to${f.primary ? " not" : ""
} auto increment`,
},
]);
setRedoStack([]);
@ -906,10 +896,10 @@ export default function Table(props) {
indices: props.tableData.indices.map((index) =>
index.id === k
? {
...index,
fields: [...value],
name: `${value.join("_")}_index`,
}
...index,
fields: [...value],
name: `${value.join("_")}_index`,
}
: index
),
});
@ -946,9 +936,8 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${
idx.unique ? " not" : ""
} unique`,
message: `Edit table field to${idx.unique ? " not" : ""
} unique`,
},
]);
setRedoStack([]);
@ -956,10 +945,10 @@ export default function Table(props) {
indices: props.tableData.indices.map((index) =>
index.id === k
? {
...index,
[checkedValues.target.value]:
checkedValues.target.checked,
}
...index,
[checkedValues.target.value]:
checkedValues.target.checked,
}
: index
),
});
@ -1242,11 +1231,10 @@ export default function Table(props) {
function field(fieldData, index) {
return (
<div
className={`${
index === props.tableData.fields.length - 1
className={`${index === props.tableData.fields.length - 1
? ""
: "border-b border-gray-400"
} h-[36px] px-2 py-1 flex justify-between`}
} h-[36px] px-2 py-1 flex justify-between`}
onMouseEnter={() => {
setHoveredField(index);
props.setOnRect({
@ -1278,10 +1266,16 @@ export default function Table(props) {
</div>
<div className="text-zinc-400">
{hoveredField === index ? (
<Popconfirm
title="Are you sure you want to delete this field?"
content="This modification will be irreversible"
onConfirm={() => {
<Button
theme="solid"
size="small"
style={{
opacity: "0.7",
backgroundColor: "#d42020",
}}
icon={<IconMinus />}
onClick={() => {
setUndoStack((prev) => [
...prev,
{
@ -1347,18 +1341,7 @@ export default function Table(props) {
}),
});
}}
onCancel={() => {}}
>
<Button
theme="solid"
size="small"
style={{
opacity: "0.7",
backgroundColor: "#d42020",
}}
icon={<IconMinus />}
></Button>
</Popconfirm>
></Button>
) : (
fieldData.type
)}