import { createContext, useState } from "react"; import { Action, ObjectType, defaultBlue } from "../data/constants"; import useTransform from "../hooks/useTransform"; import useUndoRedo from "../hooks/useUndoRedo"; import useSelect from "../hooks/useSelect"; import { Toast } from "@douyinfe/semi-ui"; import { useTranslation } from "react-i18next"; export const TablesContext = createContext(null); export default function TablesContextProvider({ children }) { const { t } = useTranslation(); const [tables, setTables] = useState([]); const [relationships, setRelationships] = useState([]); const { transform } = useTransform(); const { setUndoStack, setRedoStack } = useUndoRedo(); const { selectedElement, setSelectedElement } = useSelect(); const addTable = (data, addToHistory = true) => { if (data) { setTables((prev) => { const temp = prev.slice(); temp.splice(data.id, 0, data); return temp.map((t, i) => ({ ...t, id: i })); }); } else { setTables((prev) => [ ...prev, { id: prev.length, name: `table_${prev.length}`, x: -transform.pan.x, y: -transform.pan.y, fields: [ { name: "id", type: "INT", default: "", check: "", primary: true, unique: true, notNull: true, increment: true, comment: "", id: 0, }, ], comment: "", indices: [], color: defaultBlue, key: Date.now(), }, ]); } if (addToHistory) { setUndoStack((prev) => [ ...prev, { action: Action.ADD, element: ObjectType.TABLE, message: t("add_table"), }, ]); setRedoStack([]); } }; const deleteTable = (id, addToHistory = true) => { if (addToHistory) { Toast.success(t("table_deleted")); setUndoStack((prev) => [ ...prev, { action: Action.DELETE, element: ObjectType.TABLE, data: tables[id], message: t("delete_table", { tableName: tables[id] }), }, ]); setRedoStack([]); } setRelationships((prevR) => { return prevR .filter((e) => !(e.startTableId === id || e.endTableId === id)) .map((e, i) => { const newR = { ...e }; if (e.startTableId > id) { newR.startTableId = e.startTableId - 1; } if (e.endTableId > id) { newR.endTableId = e.endTableId - 1; } return { ...newR, id: i }; }); }); setTables((prev) => { return prev.filter((e) => e.id !== id).map((e, i) => ({ ...e, id: i })); }); if (id === selectedElement.id) { setSelectedElement((prev) => ({ ...prev, element: ObjectType.NONE, id: -1, open: false, })); } }; const updateTable = (id, updatedValues) => { setTables((prev) => prev.map((t) => (t.id === id ? { ...t, ...updatedValues } : t)), ); }; const updateField = (tid, fid, updatedValues) => { setTables((prev) => prev.map((table, i) => { if (tid === i) { return { ...table, fields: table.fields.map((field, j) => fid === j ? { ...field, ...updatedValues } : field, ), }; } return table; }), ); }; const deleteField = (field, tid) => { setUndoStack((prev) => [ ...prev, { action: Action.EDIT, element: ObjectType.TABLE, component: "field_delete", tid: tid, data: field, message: t("edit_table", { tableName: tables[tid].name, extra: "[delete field]", }), }, ]); setRedoStack([]); setRelationships((prev) => prev .filter( (e) => !( (e.startTableId === tid && e.startFieldId === field.id) || (e.endTableId === tid && e.endFieldId === field.id) ), ) .map((e, i) => ({ ...e, id: i })), ); setRelationships((prev) => { return prev.map((e) => { if (e.startTableId === tid && e.startFieldId > field.id) { return { ...e, startFieldId: e.startFieldId - 1, }; } if (e.endTableId === tid && e.endFieldId > field.id) { return { ...e, endFieldId: e.endFieldId - 1, }; } return e; }); }); updateTable(tid, { fields: tables[tid].fields .filter((e) => e.id !== field.id) .map((t, i) => { return { ...t, id: i }; }), }); }; const addRelationship = (data, addToHistory = true) => { if (addToHistory) { setRelationships((prev) => { setUndoStack((prevUndo) => [ ...prevUndo, { action: Action.ADD, element: ObjectType.RELATIONSHIP, data: data, message: t("add_relationship"), }, ]); setRedoStack([]); return [...prev, data]; }); } else { setRelationships((prev) => { const temp = prev.slice(); temp.splice(data.id, 0, data); return temp.map((t, i) => ({ ...t, id: i })); }); } }; const deleteRelationship = (id, addToHistory = true) => { if (addToHistory) { setUndoStack((prev) => [ ...prev, { action: Action.DELETE, element: ObjectType.RELATIONSHIP, data: relationships[id], message: t("delete_relationship", { refName: relationships[id].name, }), }, ]); setRedoStack([]); } setRelationships((prev) => prev.filter((e) => e.id !== id).map((e, i) => ({ ...e, id: i })), ); }; return ( {children} ); }