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

Fix popover theme and change color button

Browse Source
This commit is contained in:
1ilit 2024-02-19 23:21:38 +02:00
parent 2355673dde
commit d792791394
1 changed files with 49 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/Table.jsx
View File

@ -14,7 +14,6 @@ import {
IconDeleteStroked, IconDeleteStroked,
IconKeyStroked, IconKeyStroked,
IconCheckboxTick, IconCheckboxTick,
IconColorPalette,
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
import { import {
Select, Select,
@ -72,24 +71,27 @@ export default function Table(props) {
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
> >
<div <div
className={`border-2 ${isHovered className={`border-2 ${
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 ${settings.mode === "light" } select-none rounded-lg w-full ${
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"
}`} }`}
> >
<div <div
className={`h-[10px] w-full rounded-t-md`} className={`h-[10px] w-full rounded-t-md`}
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 ${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"> <div className="px-3">
{isHovered {isHovered
@ -97,8 +99,8 @@ export default function Table(props) {
? props.tableData.name ? props.tableData.name
: `${props.tableData.name.substring(0, 10)}...` : `${props.tableData.name.substring(0, 10)}...`
: props.tableData.name.length < 16 : props.tableData.name.length < 16
? props.tableData.name ? props.tableData.name
: `${props.tableData.name.substring(0, 16)}...`} : `${props.tableData.name.substring(0, 16)}...`}
</div> </div>
{isHovered && ( {isHovered && (
<div className="flex justify-end items-center mx-2"> <div className="flex justify-end items-center mx-2">
@ -147,8 +149,9 @@ export default function Table(props) {
</div> </div>
<div> <div>
<strong <strong
className={`${props.tableData.indices.length === 0 ? "" : "block" className={`${
}`} props.tableData.indices.length === 0 ? "" : "block"
}`}
> >
Indices : Indices :
</strong>{" "} </strong>{" "}
@ -159,10 +162,11 @@ 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 ${settings.mode === "light" className={`flex items-center my-1 px-2 py-1 rounded ${
settings.mode === "light"
? "bg-gray-100" ? "bg-gray-100"
: "bg-zinc-800" : "bg-zinc-800"
}`} }`}
> >
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i> <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
<div> <div>
@ -431,8 +435,9 @@ 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${f.notNull ? "" : " not" message: `Edit table field to${
} null`, f.notNull ? "" : " not"
} null`,
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
@ -458,8 +463,9 @@ 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${f.primary ? " not" : "" message: `Edit table field to${
} primary`, f.primary ? " not" : ""
} primary`,
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
@ -691,8 +697,9 @@ export default function Table(props) {
[checkedValues.target.value]: [checkedValues.target.value]:
checkedValues.target.checked, checkedValues.target.checked,
}, },
message: `Edit table field to${f.unique ? " not" : "" message: `Edit table field to${
} unique`, f.unique ? " not" : ""
} unique`,
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
@ -732,8 +739,9 @@ export default function Table(props) {
[checkedValues.target.value]: [checkedValues.target.value]:
checkedValues.target.checked, checkedValues.target.checked,
}, },
message: `Edit table field to${f.primary ? " not" : "" message: `Edit table field to${
} auto increment`, f.primary ? " not" : ""
} auto increment`,
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
@ -896,10 +904,10 @@ export default function Table(props) {
indices: props.tableData.indices.map((index) => indices: props.tableData.indices.map((index) =>
index.id === k index.id === k
? { ? {
...index, ...index,
fields: [...value], fields: [...value],
name: `${value.join("_")}_index`, name: `${value.join("_")}_index`,
} }
: index : index
), ),
}); });
@ -936,8 +944,9 @@ export default function Table(props) {
[checkedValues.target.value]: [checkedValues.target.value]:
checkedValues.target.checked, checkedValues.target.checked,
}, },
message: `Edit table field to${idx.unique ? " not" : "" message: `Edit table field to${
} unique`, idx.unique ? " not" : ""
} unique`,
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
@ -945,10 +954,10 @@ export default function Table(props) {
indices: props.tableData.indices.map((index) => indices: props.tableData.indices.map((index) =>
index.id === k index.id === k
? { ? {
...index, ...index,
[checkedValues.target.value]: [checkedValues.target.value]:
checkedValues.target.checked, checkedValues.target.checked,
} }
: index : index
), ),
}); });
@ -1038,7 +1047,7 @@ export default function Table(props) {
<Popover <Popover
content={ content={
<div> <div>
<div className="flex justify-between items-center p-2"> <div className="flex justify-between items-center p-2 popover-theme">
<div className="font-medium">Theme</div> <div className="font-medium">Theme</div>
<Button <Button
type="tertiary" type="tertiary"
@ -1141,7 +1150,10 @@ export default function Table(props) {
position="bottomLeft" position="bottomLeft"
showArrow showArrow
> >
<Button type="tertiary" icon={<IconColorPalette />}></Button> <div
className="h-[32px] w-[32px] rounded"
style={{ backgroundColor: props.tableData.color }}
/>
</Popover> </Popover>
</Col> </Col>
<Col span={7}> <Col span={7}>
@ -1231,10 +1243,11 @@ export default function Table(props) {
function field(fieldData, index) { function field(fieldData, index) {
return ( return (
<div <div
className={`${index === props.tableData.fields.length - 1 className={`${
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`}
onMouseEnter={() => { onMouseEnter={() => {
setHoveredField(index); setHoveredField(index);
props.setOnRect({ props.setOnRect({