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";
|
import useTypes from "../../hooks/useTypes";
|
||||||
|
|
||||||
export default function Table(props) {
|
export default function Table(props) {
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
|
||||||
const [hoveredField, setHoveredField] = useState(-1);
|
const [hoveredField, setHoveredField] = useState(-1);
|
||||||
const [editField, setEditField] = useState({});
|
const [editField, setEditField] = useState({});
|
||||||
const { layout } = useLayout();
|
const { layout } = useLayout();
|
||||||
@ -61,23 +60,20 @@ export default function Table(props) {
|
|||||||
y={props.tableData.y}
|
y={props.tableData.y}
|
||||||
width={200}
|
width={200}
|
||||||
height={height}
|
height={height}
|
||||||
className="drop-shadow-lg rounded-md cursor-move"
|
className="group drop-shadow-lg rounded-md cursor-move"
|
||||||
onMouseDown={props.onMouseDown}
|
onMouseDown={props.onMouseDown}
|
||||||
onMouseEnter={() => setIsHovered(true)}
|
|
||||||
onMouseLeave={() => setIsHovered(false)}
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`border-2 ${
|
className={`border-2 hover:border-dashed hover:border-blue-500
|
||||||
isHovered
|
select-none rounded-lg w-full ${
|
||||||
? "border-dashed border-blue-500"
|
settings.mode === "light"
|
||||||
: selectedElement.element === ObjectType.TABLE &&
|
? "bg-zinc-100 text-zinc-800"
|
||||||
selectedElement.id === props.tableData.id
|
: "bg-zinc-800 text-zinc-200"
|
||||||
? "border-blue-500"
|
} ${
|
||||||
: "border-slate-400"
|
selectedElement.id === props.tableData.id &&
|
||||||
} select-none rounded-lg w-full ${
|
selectedElement.element === ObjectType.TABLE
|
||||||
settings.mode === "light"
|
? "border-solid border-blue-500"
|
||||||
? "bg-zinc-100 text-zinc-800"
|
: "border-zinc-500"
|
||||||
: "bg-zinc-800 text-zinc-200"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@ -92,117 +88,115 @@ export default function Table(props) {
|
|||||||
<div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
|
<div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
{props.tableData.name}
|
{props.tableData.name}
|
||||||
</div>
|
</div>
|
||||||
{isHovered && (
|
<div className="invisible group-hover:visible flex justify-end items-center mx-2">
|
||||||
<div className="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
|
<Button
|
||||||
icon={<IconEdit />}
|
icon={<IconMore />}
|
||||||
|
type="tertiary"
|
||||||
size="small"
|
size="small"
|
||||||
theme="solid"
|
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#2f68ad",
|
|
||||||
opacity: "0.7",
|
opacity: "0.7",
|
||||||
marginRight: "6px",
|
backgroundColor: "grey",
|
||||||
}}
|
color: "white",
|
||||||
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
|
</Popover>
|
||||||
content={
|
</div>
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{props.tableData.fields.map((e, i) => {
|
{props.tableData.fields.map((e, i) => {
|
||||||
return settings.showFieldSummary ? (
|
return settings.showFieldSummary ? (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user