Removed isHovered from Table
This commit is contained in:
1ilit
parent
cf71859f5c
commit
4d7f18c26e
@ -40,7 +40,6 @@ import useSelect from "../../hooks/useSelect";
|
||||
import useTypes from "../../hooks/useTypes";
|
||||
|
||||
export default function Table(props) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [hoveredField, setHoveredField] = useState(-1);
|
||||
const [editField, setEditField] = useState({});
|
||||
const { layout } = useLayout();
|
||||
@ -61,23 +60,20 @@ export default function Table(props) {
|
||||
y={props.tableData.y}
|
||||
width={200}
|
||||
height={height}
|
||||
className="drop-shadow-lg rounded-md cursor-move"
|
||||
className="group drop-shadow-lg rounded-md cursor-move"
|
||||
onMouseDown={props.onMouseDown}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<div
|
||||
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"
|
||||
? "bg-zinc-100 text-zinc-800"
|
||||
: "bg-zinc-800 text-zinc-200"
|
||||
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 === props.tableData.id &&
|
||||
selectedElement.element === ObjectType.TABLE
|
||||
? "border-solid border-blue-500"
|
||||
: "border-zinc-500"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
@ -92,117 +88,115 @@ export default function Table(props) {
|
||||
<div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{props.tableData.name}
|
||||
</div>
|
||||
{isHovered && (
|
||||
<div className="flex justify-end items-center mx-2">
|
||||
<div className="invisible group-hover:visible flex justify-end items-center mx-2">
|
||||
<Button
|
||||
icon={<IconEdit />}
|
||||
size="small"
|
||||
theme="solid"
|
||||
style={{
|
||||
backgroundColor: "#2f68ad",
|
||||
opacity: "0.7",
|
||||
marginRight: "6px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!layout.sidebar) {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
element: ObjectType.TABLE,
|
||||
id: props.tableData.id,
|
||||
open: true,
|
||||
}));
|
||||
} else {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
currentTab: Tab.TABLES,
|
||||
element: ObjectType.TABLE,
|
||||
id: props.tableData.id,
|
||||
open: true,
|
||||
}));
|
||||
if (selectedElement.currentTab !== Tab.TABLES) return;
|
||||
document
|
||||
.getElementById(`scroll_table_${props.tableData.id}`)
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div className="mb-2">
|
||||
<strong>Comment :</strong>{" "}
|
||||
{props.tableData.comment === "" ? (
|
||||
"No comment"
|
||||
) : (
|
||||
<div>{props.tableData.comment}</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<strong
|
||||
className={`${
|
||||
props.tableData.indices.length === 0 ? "" : "block"
|
||||
}`}
|
||||
>
|
||||
Indices :
|
||||
</strong>{" "}
|
||||
{props.tableData.indices.length === 0 ? (
|
||||
"No indices"
|
||||
) : (
|
||||
<div>
|
||||
{props.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={() => {
|
||||
Toast.success(`Table deleted!`);
|
||||
deleteTable(props.tableData.id);
|
||||
}}
|
||||
>
|
||||
Delete table
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
position="rightTop"
|
||||
showArrow
|
||||
trigger="click"
|
||||
style={{ width: "200px" }}
|
||||
>
|
||||
<Button
|
||||
icon={<IconEdit />}
|
||||
icon={<IconMore />}
|
||||
type="tertiary"
|
||||
size="small"
|
||||
theme="solid"
|
||||
style={{
|
||||
backgroundColor: "#2f68ad",
|
||||
opacity: "0.7",
|
||||
marginRight: "6px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!layout.sidebar) {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
element: ObjectType.TABLE,
|
||||
id: props.tableData.id,
|
||||
open: true,
|
||||
}));
|
||||
} else {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
currentTab: Tab.TABLES,
|
||||
element: ObjectType.TABLE,
|
||||
id: props.tableData.id,
|
||||
open: true,
|
||||
}));
|
||||
if (selectedElement.currentTab !== Tab.TABLES) return;
|
||||
document
|
||||
.getElementById(`scroll_table_${props.tableData.id}`)
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
backgroundColor: "grey",
|
||||
color: "white",
|
||||
}}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div className="mb-2">
|
||||
<strong>Comment :</strong>{" "}
|
||||
{props.tableData.comment === "" ? (
|
||||
"No comment"
|
||||
) : (
|
||||
<div>{props.tableData.comment}</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<strong
|
||||
className={`${
|
||||
props.tableData.indices.length === 0 ? "" : "block"
|
||||
}`}
|
||||
>
|
||||
Indices :
|
||||
</strong>{" "}
|
||||
{props.tableData.indices.length === 0 ? (
|
||||
"No indices"
|
||||
) : (
|
||||
<div>
|
||||
{props.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={() => {
|
||||
Toast.success(`Table deleted!`);
|
||||
deleteTable(props.tableData.id);
|
||||
}}
|
||||
>
|
||||
Delete table
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
position="rightTop"
|
||||
showArrow
|
||||
trigger="click"
|
||||
style={{ width: "200px" }}
|
||||
>
|
||||
<Button
|
||||
icon={<IconMore />}
|
||||
type="tertiary"
|
||||
size="small"
|
||||
style={{
|
||||
opacity: "0.7",
|
||||
backgroundColor: "grey",
|
||||
color: "white",
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
{props.tableData.fields.map((e, i) => {
|
||||
return settings.showFieldSummary ? (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user