cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-14 11:53:49 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: improve composition performance

Browse Source
This commit is contained in:
Carlos Valente
2025-02-21 17:00:58 +01:00
committed by Carlos Valente
parent 8e8d3a7824
commit f76c0d1a6d
2 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+7 -11
View File
@@ -1,5 +1,5 @@
import { useCallback, useRef } from 'react';
import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import Color from 'color';
import {
isOntimeBlock,
@@ -165,7 +165,8 @@ export default function CuesheetTable(props: CuesheetTableProps) {
return (
<EventRow
key={key}
key={row.id}
rowId={row.id}
eventId={entry.id}
eventIndex={eventIndex}
rowIndex={index}
@@ -173,15 +174,10 @@ export default function CuesheetTable(props: CuesheetTableProps) {
selectedRef={isSelected ? selectedRef : undefined}
skip={entry.skip}
colour={entry.colour}
>
{row.getVisibleCells().map((cell) => {
return (
<td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
);
})}
</EventRow>
rowBgColour={rowBgColour}
table={table}
columnSizing={columnSizing}
/>
);
}
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+24 -6
View File
@@ -1,7 +1,9 @@
import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
import { memo, MutableRefObject, useLayoutEffect, useRef, useState } from 'react';
import { IconButton } from '@chakra-ui/react';
import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
import { flexRender, Table } from '@tanstack/react-table';
import Color from 'color';
import { OntimeRundownEntry } from 'ontime-types';
import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
import { useCuesheetOptions } from '../../cuesheet.options';
@@ -10,6 +12,7 @@ import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMen
import style from '../CuesheetTable.module.scss';
interface EventRowProps {
rowId: string;
eventId: string;
eventIndex: number;
rowIndex: number;
@@ -17,10 +20,16 @@ interface EventRowProps {
selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
skip?: boolean;
colour?: string;
rowBgColour?: string;
table: Table<OntimeRundownEntry>;
/** hack to force re-rendering of the row when the column sizes change */
columnSizing: Record<string, number>;
}
function EventRow(props: PropsWithChildren<EventRowProps>) {
const { children, eventId, eventIndex, rowIndex, isPast, selectedRef, skip, colour } = props;
export default memo(EventRow);
function EventRow(props: EventRowProps) {
const { rowId, eventId, eventIndex, rowIndex, isPast, selectedRef, skip, colour, rowBgColour, table } = props;
const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
const ownRef = useRef<HTMLTableRowElement>(null);
const [isVisible, setIsVisible] = useState(false);
@@ -83,9 +92,18 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
{eventIndex}
</td>
)}
{isVisible ? children : null}
{isVisible
? table
.getRow(rowId)
?.getVisibleCells()
.map((cell) => {
return (
<td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
);
})
: null}
</tr>
);
}
export default memo(EventRow);