Function TypeInfo

src/components/EditorSidePanel/TypesTab/TypeInfo.jsx:18–189

({ index, data })

import { nanoid } from "nanoid";

export default function TypeInfo({ index, data }) {
  const { layout } = useLayout();
  const { deleteType, updateType } = useTypes();
  const { tables, updateField } = useDiagram();
  const { setUndoStack, setRedoStack } = useUndoRedo();
  const [editField, setEditField] = useState({});
  const { t } = useTranslation();

  // TODO: remove indexes, not a valid case after adding id to types
  const typeId = data.id ?? index;

  return (
    <div id={`scroll_type_${typeId}`}>
      <Collapse.Panel
        header={
          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
            {data.name}
          </div>
        }
        itemKey={`${index}`}
      >
        <div className="flex items-center mb-2.5">
          <div className="text-md font-semibold break-keep">{t("name")}: </div>
          <Input
            value={data.name}
            readonly={layout.readOnly}
            validateStatus={data.name === "" ? "error" : "default"}
            placeholder={t("name")}
            className="ms-2"
            onChange={(value) => {
              updateType(typeId, { name: value });
              tables.forEach((table) => {
                table.fields.forEach((field) => {
                  if (field.type.toLowerCase() === data.name.toLowerCase()) {
                    updateField(table.id, field.id, {
                      type: value.toUpperCase(),
                    });
                  }
                });
              });
            }}
            onFocus={(e) => setEditField({ name: e.target.value })}
            onBlur={(e) => {
              if (e.target.value === editField.name) return;

              const updatedFields = tables.reduce((acc, table) => {
                table.fields.forEach((field, i) => {
                  if (field.type.toLowerCase() === data.name.toLowerCase()) {
                    acc.push({ tid: table.id, fid: i });
                  }
                });
                return acc;
              }, []);

              setUndoStack((prev) => [
                ...prev,
                {
                  action: Action.EDIT,