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

59
src/components/Table.jsx
View File

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