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