mirror of
https://github.com/zadam/trilium.git
synced 2025-10-29 18:49:00 +01:00
refactor(react/collections/table): move events to dedicated prop
This commit is contained in:
parent
e761cd7c27
commit
e25c5cc6c7
@ -56,7 +56,7 @@ export default function TableView({ note, viewConfig, saveConfig }: ViewModeProp
|
|||||||
data={rowData}
|
data={rowData}
|
||||||
modules={[ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ]}
|
modules={[ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ]}
|
||||||
footerElement={<TableFooter note={note} />}
|
footerElement={<TableFooter note={note} />}
|
||||||
{...contextMenuEvents}
|
events={contextMenuEvents}
|
||||||
persistence {...persistenceProps}
|
persistence {...persistenceProps}
|
||||||
/>
|
/>
|
||||||
<TableFooter note={note} />
|
<TableFooter note={note} />
|
||||||
|
|||||||
@ -5,16 +5,17 @@ import "../../../../src/stylesheets/table.css";
|
|||||||
import { ComponentChildren, RefObject } from "preact";
|
import { ComponentChildren, RefObject } from "preact";
|
||||||
import { ParentComponent, renderReactWidget } from "../../react/react_utils";
|
import { ParentComponent, renderReactWidget } from "../../react/react_utils";
|
||||||
|
|
||||||
interface TableProps<T> extends Partial<EventCallBackMethods>, Pick<Options, "persistence" | "persistenceReaderFunc" | "persistenceWriterFunc"> {
|
interface TableProps<T> extends Pick<Options, "persistence" | "persistenceReaderFunc" | "persistenceWriterFunc"> {
|
||||||
tabulatorRef: RefObject<VanillaTabulator>;
|
tabulatorRef: RefObject<VanillaTabulator>;
|
||||||
className?: string;
|
className?: string;
|
||||||
columns: ColumnDefinition[];
|
columns: ColumnDefinition[];
|
||||||
data?: T[];
|
data?: T[];
|
||||||
modules?: (new (table: VanillaTabulator) => Module)[];
|
modules?: (new (table: VanillaTabulator) => Module)[];
|
||||||
footerElement?: ComponentChildren;
|
footerElement?: ComponentChildren;
|
||||||
|
events?: Partial<EventCallBackMethods>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Tabulator<T>({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, persistence, persistenceReaderFunc, persistenceWriterFunc, ...events }: TableProps<T>) {
|
export default function Tabulator<T>({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, events, ...restProps }: TableProps<T>) {
|
||||||
const parentComponent = useContext(ParentComponent);
|
const parentComponent = useContext(ParentComponent);
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const tabulatorRef = useRef<VanillaTabulator>(null);
|
const tabulatorRef = useRef<VanillaTabulator>(null);
|
||||||
@ -33,7 +34,7 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
|
|||||||
columns,
|
columns,
|
||||||
data,
|
data,
|
||||||
footerElement: (parentComponent && footerElement ? renderReactWidget(parentComponent, footerElement)[0] : undefined),
|
footerElement: (parentComponent && footerElement ? renderReactWidget(parentComponent, footerElement)[0] : undefined),
|
||||||
persistence, persistenceReaderFunc, persistenceWriterFunc
|
...restProps
|
||||||
});
|
});
|
||||||
|
|
||||||
tabulatorRef.current = tabulator;
|
tabulatorRef.current = tabulator;
|
||||||
@ -44,7 +45,7 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tabulator = tabulatorRef.current;
|
const tabulator = tabulatorRef.current;
|
||||||
if (!tabulator) return;
|
if (!tabulator || !events) return;
|
||||||
|
|
||||||
for (const [ eventName, handler ] of Object.entries(events)) {
|
for (const [ eventName, handler ] of Object.entries(events)) {
|
||||||
tabulator.on(eventName as keyof EventCallBackMethods, handler);
|
tabulator.on(eventName as keyof EventCallBackMethods, handler);
|
||||||
@ -55,7 +56,7 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
|
|||||||
tabulator.off(eventName as keyof EventCallBackMethods, handler);
|
tabulator.off(eventName as keyof EventCallBackMethods, handler);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, Object.values(events));
|
}, Object.values(events ?? {}));
|
||||||
|
|
||||||
// Change in data.
|
// Change in data.
|
||||||
useEffect(() => { tabulatorRef.current?.setData(data) }, [ data ]);
|
useEffect(() => { tabulatorRef.current?.setData(data) }, [ data ]);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user