cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-10 00:29:41 +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 { 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 Color from 'color';
import { import {
isOntimeBlock, isOntimeBlock,
@@ -165,7 +165,8 @@ export default function CuesheetTable(props: CuesheetTableProps) {
return ( return (
<EventRow <EventRow
key={key} key={row.id}
rowId={row.id}
eventId={entry.id} eventId={entry.id}
eventIndex={eventIndex} eventIndex={eventIndex}
rowIndex={index} rowIndex={index}
@@ -173,15 +174,10 @@ export default function CuesheetTable(props: CuesheetTableProps) {
selectedRef={isSelected ? selectedRef : undefined} selectedRef={isSelected ? selectedRef : undefined}
skip={entry.skip} skip={entry.skip}
colour={entry.colour} colour={entry.colour}
> rowBgColour={rowBgColour}
{row.getVisibleCells().map((cell) => { table={table}
return ( columnSizing={columnSizing}
<td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}> />
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
);
})}
</EventRow>
); );
} }
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 { IconButton } from '@chakra-ui/react';
import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal'; import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
import { flexRender, Table } from '@tanstack/react-table';
import Color from 'color'; import Color from 'color';
import { OntimeRundownEntry } from 'ontime-types';
import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils'; import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
import { useCuesheetOptions } from '../../cuesheet.options'; import { useCuesheetOptions } from '../../cuesheet.options';
@@ -10,6 +12,7 @@ import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMen
import style from '../CuesheetTable.module.scss'; import style from '../CuesheetTable.module.scss';
interface EventRowProps { interface EventRowProps {
rowId: string;
eventId: string; eventId: string;
eventIndex: number; eventIndex: number;
rowIndex: number; rowIndex: number;
@@ -17,10 +20,16 @@ interface EventRowProps {
selectedRef?: MutableRefObject<HTMLTableRowElement | null>; selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
skip?: boolean; skip?: boolean;
colour?: string; 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>) { export default memo(EventRow);
const { children, eventId, eventIndex, rowIndex, isPast, selectedRef, skip, colour } = props;
function EventRow(props: EventRowProps) {
const { rowId, eventId, eventIndex, rowIndex, isPast, selectedRef, skip, colour, rowBgColour, table } = props;
const { hideIndexColumn, showActionMenu } = useCuesheetOptions(); const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
const ownRef = useRef<HTMLTableRowElement>(null); const ownRef = useRef<HTMLTableRowElement>(null);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
@@ -83,9 +92,18 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
{eventIndex} {eventIndex}
</td> </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> </tr>
); );
} }
export default memo(EventRow);