chore(react/collections/table): port note title formatter

This commit is contained in:
Elian Doran
2025-09-09 21:11:06 +03:00
parent e3d9a120cb
commit 4d57134aa2
2 changed files with 12 additions and 21 deletions

View File

@@ -4,6 +4,8 @@ import { LabelType } from "../../../services/promoted_attribute_definition_parse
import { RelationEditor } from "./relation_editor.js";
import { JSX } from "preact";
import { renderReactWidget } from "../../react/react_utils.jsx";
import NoteTitleWidget from "../../note_title.jsx";
import Icon from "../../react/Icon.jsx";
type ColumnType = LabelType | "relation";
@@ -90,7 +92,16 @@ export function buildColumnDefinitions({ info, movableRows, existingColumnData,
field: "title",
title: "Title",
editor: "input",
formatter: NoteTitleFormatter,
formatter: wrapFormatter(({ cell }) => {
const { noteId, iconClass, colorClass } = cell.getRow().getData();
if (!noteId) {
return "";
}
return <span className={`reference-link ${colorClass}`} data-href={`#root/${noteId}`}>
<Icon icon={iconClass} />{" "}{cell.getValue()}
</span>;
}),
width: 400
}
];

View File

@@ -47,28 +47,8 @@ export function NoteFormatter(cell: CellComponent, _formatterParams, onRendered)
}
}
/**
* Custom formatter for the note title that is quite similar to {@link NoteFormatter}, but where the title and icons are read from separate fields.
*/
export function NoteTitleFormatter(cell: CellComponent) {
const { noteId, iconClass, colorClass } = cell.getRow().getData();
if (!noteId) {
return "";
}
const { $noteRef } = buildNoteLink(noteId, cell.getValue(), iconClass, colorClass);
return $noteRef[0].outerHTML;
}
function buildNoteLink(noteId: string, title: string, iconClass: string, colorClass?: string) {
const $noteRef = $("<span>");
const href = `#root/${noteId}`;
$noteRef.addClass("reference-link");
$noteRef.attr("data-href", href);
$noteRef.text(title);
$noteRef.prepend($("<span>").addClass(iconClass));
if (colorClass) {
$noteRef.addClass(colorClass);
}
return { $noteRef, href };
}