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

This commit is contained in:
Elian Doran 2025-09-09 20:35:57 +03:00
parent 33a37be378
commit 043791fc91
No known key found for this signature in database
3 changed files with 19 additions and 9 deletions

View File

@ -1,7 +1,9 @@
import { MonospaceFormatter, NoteFormatter, NoteTitleFormatter, RowNumberFormatter } from "./formatters.js";
import type { ColumnDefinition } from "tabulator-tables";
import { NoteFormatter, NoteTitleFormatter, RowNumberFormatter } from "./formatters.js";
import type { CellComponent, ColumnDefinition, EmptyCallback } from "tabulator-tables";
import { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
import { RelationEditor } from "./relation_editor.js";
import { JSX } from "preact";
import { renderReactWidget } from "../../react/react_utils.jsx";
type ColumnType = LabelType | "relation";
@ -73,7 +75,7 @@ export function buildColumnDefinitions({ info, movableRows, existingColumnData,
{
field: "noteId",
title: "Note ID",
formatter: MonospaceFormatter,
formatter: wrapFormatter(({ cell }) => <code>{cell.getValue()}</code>),
visible: false
},
{
@ -154,3 +156,15 @@ function calculateIndexColumnWidth(rowNumberHint: number, movableRows: boolean):
}
return columnWidth;
}
interface FormatterOpts {
cell: CellComponent
}
function wrapFormatter(Component: (opts: FormatterOpts) => JSX.Element): ((cell: CellComponent, formatterParams: {}, onRendered: EmptyCallback) => string | HTMLElement) {
return (cell, formatterParams, onRendered) => {
const elWithParams = <Component cell={cell} />;
return renderReactWidget(null, elWithParams)[0];
};
}

View File

@ -71,10 +71,6 @@ export function RowNumberFormatter(draggableRows: boolean) {
};
}
export function MonospaceFormatter(cell: CellComponent) {
return `<code>${cell.getValue()}</code>`;
}
function buildNoteLink(noteId: string, title: string, iconClass: string, colorClass?: string) {
const $noteRef = $("<span>");
const href = `#root/${noteId}`;

View File

@ -24,11 +24,11 @@ export function refToJQuerySelector<T extends HTMLElement>(ref: RefObject<T> | n
* @param el the JSX element to render.
* @returns the rendered wrapped DOM element.
*/
export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
export function renderReactWidget(parentComponent: Component | null, el: JSX.Element) {
return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children();
}
export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) {
export function renderReactWidgetAtElement(parentComponent: Component | null, el: JSX.Element, container: Element | DocumentFragment) {
render((
<ParentComponent.Provider value={parentComponent}>
{el}