drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-25 02:59:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add button to toggle showDataType

Browse Source
This commit is contained in:
KRATIK_BOHRA 2025-02-25 13:48:09 +05:30
parent 1e6aeca05e
commit 66213bf346
1 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/EditorCanvas/Table.jsx
View File

@ -22,6 +22,8 @@ import { isRtl } from "../../i18n/utils/rtl";
import i18n from "../../i18n/i18n";
export default function Table(props) {
// show data type state
const [showDataType, setShowDataType] = useState(true);
const [hoveredField, setHoveredField] = useState(-1);
const { database } = useDiagram();
const {
@ -76,12 +78,10 @@ export default function Table(props) {
<div
onDoubleClick={openEditor}
className={`border-2 hover:border-dashed hover:border-blue-500
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-800 text-zinc-200"
} ${
selectedElement.id === tableData.id &&
} ${selectedElement.id === tableData.id &&
selectedElement.element === ObjectType.TABLE
? "border-solid border-blue-500"
: "border-zinc-500"
@ -93,8 +93,7 @@ export default function Table(props) {
style={{ backgroundColor: tableData.color }}
/>
<div
className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
className={`overflow-hidden 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 overflow-hidden text-ellipsis whitespace-nowrap">
@ -102,6 +101,16 @@ export default function Table(props) {
</div>
<div className="hidden group-hover:block">
<div className="flex justify-end items-center mx-2">
<Button
type="tertiary"
size="small"
style={{
backgroundColor: "#808080b5",
color: "black",
marginRight: "6px",
}}
onClick={() => setShowDataType(!showDataType)}
/>
<Button
icon={<IconEdit />}
size="small"
@ -126,8 +135,7 @@ export default function Table(props) {
</div>
<div>
<strong
className={`${
tableData.indices.length === 0 ? "" : "block"
className={`${tableData.indices.length === 0 ? "" : "block"
}`}
>
{t("indices")}:
@ -139,8 +147,7 @@ export default function Table(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"
}`}
@ -282,8 +289,7 @@ export default function Table(props) {
function field(fieldData, index) {
return (
<div
className={`${
index === tableData.fields.length - 1
className={`${index === tableData.fields.length - 1
? ""
: "border-b border-gray-400"
} group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
@ -308,8 +314,7 @@ export default function Table(props) {
}}
>
<div
className={`${
hoveredField === index ? "text-zinc-400" : ""
className={`${hoveredField === index ? "text-zinc-400" : ""
} flex items-center gap-2 overflow-hidden`}
>
<button