From 70e0b3e5f2c4bb6f3fb3ee4c354d99b175f1ab3b Mon Sep 17 00:00:00 2001 From: 1ilit <1ilit@proton.me> Date: Mon, 23 Jun 2025 17:09:14 +0400 Subject: [PATCH] clean up table state and styles --- src/components/EditorCanvas/Table.jsx | 292 +++++++++++--------------- src/context/SettingsContext.jsx | 5 + src/hooks/useThemedPage.js | 5 + src/i18n/locales/en.js | 2 + tailwind.config.js | 22 +- 5 files changed, 143 insertions(+), 183 deletions(-) diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx index 1a3bf5e..9990bbb 100644 --- a/src/components/EditorCanvas/Table.jsx +++ b/src/components/EditorCanvas/Table.jsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from "react"; +import { useMemo } from "react"; import { Tab, ObjectType, @@ -21,19 +21,18 @@ import TableInfo from "../EditorSidePanel/TablesTab/TableInfo"; import { useTranslation } from "react-i18next"; import { dbToTypes } from "../../data/datatypes"; import { isRtl } from "../../i18n/utils/rtl"; -import i18n from "../../i18n/i18n"; import { getTableHeight } from "../../utils/utils"; +import classNames from "classnames"; +import i18n from "../../i18n/i18n"; -export default function Table(props) { - const [hoveredField, setHoveredField] = useState(null); +export default function Table({ + tableData, + onPointerDown, + setHoveredTable, + handleGripField, + setLinkingLine, +}) { const { database } = useDiagram(); - const { - tableData, - onPointerDown, - setHoveredTable, - handleGripField, - setLinkingLine, - } = props; const { layout } = useLayout(); const { deleteTable, deleteField, updateTable } = useDiagram(); const { settings } = useSettings(); @@ -41,21 +40,17 @@ export default function Table(props) { const { selectedElement, setSelectedElement, bulkSelectedElements } = useSelect(); - const borderColor = useMemo( - () => (settings.mode === "light" ? "border-zinc-300" : "border-zinc-600"), - [settings.mode], - ); - const height = getTableHeight(tableData); const isSelected = useMemo(() => { - return ( - (selectedElement.id == tableData.id && - selectedElement.element === ObjectType.TABLE) || - bulkSelectedElements.some( - (e) => e.type === ObjectType.TABLE && e.id === tableData.id, - ) + const isIndividuallySelected = + selectedElement.id == tableData.id && + selectedElement.element === ObjectType.TABLE; + const isBulkSelected = bulkSelectedElements.some( + (e) => e.type === ObjectType.TABLE && e.id === tableData.id, ); + + return isIndividuallySelected || isBulkSelected; }, [selectedElement, tableData, bulkSelectedElements]); const lockUnlockTable = () => @@ -92,85 +87,71 @@ export default function Table(props) { y={tableData.y} width={settings.tableWidth} height={height} - className="group drop-shadow-lg rounded-md cursor-move" + data-selected={isSelected} onPointerDown={onPointerDown} + className="group drop-shadow-lg rounded-md cursor-move" >
-
-
+
+
{tableData.name}
- {tableData.fields.map((e, i) => { - return settings.showFieldSummary ? ( + {tableData.fields.map((fieldData, index) => { + const typeInfo = dbToTypes[database][fieldData.type]; + const showSummary = settings.showFieldSummary; + + const typeDisplay = + (typeInfo?.isSized || typeInfo?.hasPrecision) && fieldData.size + ? `${fieldData.type}(${fieldData.size})` + : fieldData.type; + + const SummaryContent = () => ( +
+
+

{fieldData.name}

+

+ {typeDisplay} +

+
+
+
+ {fieldData.primary && {t("primary")}} + {fieldData.unique && {t("unique")}} + {fieldData.notNull && ( + {t("not_null")} + )} + {fieldData.increment && ( + {t("autoincrement")} + )} +
+
+ {t("default_value")}: + {fieldData.default || t("not_set")} +
+
+ {t("comment")}: + {fieldData.comment || t("not_set")} +
+
+ ); + + return showSummary ? ( -
-

{e.name}

-

- {e.type + - ((dbToTypes[database][e.type].isSized || - dbToTypes[database][e.type].hasPrecision) && - e.size && - e.size !== "" - ? "(" + e.size + ")" - : "")} -

-
-
- {e.primary && ( - - {t("primary")} - - )} - {e.unique && ( - - {t("unique")} - - )} - {e.notNull && ( - - {t("not_null")} - - )} - {e.increment && ( - - {t("autoincrement")} - - )} -

- {t("default_value")}: - {e.default === "" ? t("not_set") : e.default} -

-

- {t("comment")}: - {e.comment === "" ? t("not_set") : e.comment} -

-
- } + key={index} + content={} position="right" showArrow - style={ - isRtl(i18n.language) - ? { direction: "rtl" } - : { direction: "ltr" } - } + style={{ direction: isRtl(i18n.language) ? "rtl" : "ltr" }} > - {field(e, i)} + {field(fieldData, index)} ) : ( - field(e, i) + field(fieldData, index) ); })}
@@ -311,15 +276,10 @@ export default function Table(props) { function field(fieldData, index) { return (
{ if (!e.isPrimary) return; - setHoveredField(index); setHoveredTable({ tableId: tableData.id, fieldId: fieldData.id, @@ -328,7 +288,6 @@ export default function Table(props) { onPointerLeave={(e) => { if (!e.isPrimary) return; - setHoveredField(null); setHoveredTable({ tableId: null, fieldId: null, @@ -340,13 +299,9 @@ export default function Table(props) { e.target.releasePointerCapture(e.pointerId); }} > -
+
-
- {hoveredField === index ? ( -
+ + {settings.showDataTypes && ( +
+ {fieldData.primary && } + {!fieldData.notNull && ?} + + {fieldData.type + + ((dbToTypes[database][fieldData.type].isSized || + dbToTypes[database][fieldData.type].hasPrecision) && + fieldData.size + ? `(${fieldData.size})` + : "")} + +
+ )}
); } diff --git a/src/context/SettingsContext.jsx b/src/context/SettingsContext.jsx index 9c50bf8..2651c10 100644 --- a/src/context/SettingsContext.jsx +++ b/src/context/SettingsContext.jsx @@ -29,6 +29,11 @@ export default function SettingsContextProvider({ children }) { useEffect(() => { document.body.setAttribute("theme-mode", settings.mode); + + const removeClass = settings.mode === "light" ? "dark" : "light"; + + document.documentElement.classList.remove(removeClass); + document.documentElement.classList.add(settings.mode); }, [settings.mode]); useEffect(() => { diff --git a/src/hooks/useThemedPage.js b/src/hooks/useThemedPage.js index e92f8e5..f102e44 100644 --- a/src/hooks/useThemedPage.js +++ b/src/hooks/useThemedPage.js @@ -9,5 +9,10 @@ export default function useThemedPage() { useLayoutEffect(() => { document.body.setAttribute("theme-mode", settings.mode); + + const removeClass = settings.mode === "light" ? "dark" : "light"; + + document.documentElement.classList.remove(removeClass); + document.documentElement.classList.add(settings.mode); }, [settings]); } diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index 47d5b40..aae4164 100644 --- a/src/i18n/locales/en.js +++ b/src/i18n/locales/en.js @@ -254,6 +254,8 @@ const en = { export_saved_data: "Export saved data", dbml_view: "DBML view", tab_view: "Tab view", + lock: "Lock", // the verb + see_more: "See more", }, }; diff --git a/tailwind.config.js b/tailwind.config.js index 619a0f9..00a2eff 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,19 +1,17 @@ /** @type {import('tailwindcss').Config} */ export default { - content: [ - "./src/**/*.{js,jsx,ts,tsx}", - ], + content: ["./src/**/*.{js,jsx,ts,tsx}"], + darkMode: "class", theme: { screens: { - '3xl': {'max': '2047px'}, - '2xl': {'max': '1535px'}, - 'xl': {'min': '1024px'}, - 'lg': {'max': '1023px'}, - 'md': {'max': '820px'}, - 'sm': {'max': '639px'} + "3xl": { max: "2047px" }, + "2xl": { max: "1535px" }, + xl: { min: "1024px" }, + lg: { max: "1023px" }, + md: { max: "820px" }, + sm: { max: "639px" }, }, - extend: {} + extend: {}, }, plugins: [], -} - +};