refactor(react/collections/table): move events to dedicated prop

This commit is contained in:
Elian Doran 2025-09-07 19:19:09 +03:00
parent e761cd7c27
commit e25c5cc6c7
No known key found for this signature in database
2 changed files with 7 additions and 6 deletions

View File

@ -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} />

View File

@ -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 ]);