cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-20 06:29:07 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

react 19 type migration

Browse Source
This commit is contained in:
Carlos Valente
2025-07-12 19:33:26 +02:00
committed by Carlos Valente
parent 0eaec1f88f
commit a69c5f354c
2 changed files with 12 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/hooks/useFollowComponent.ts
+10 -14
View File
@@ -1,10 +1,10 @@
import { MutableRefObject, useCallback, useEffect, useRef } from 'react'; import { RefObject, useCallback, useEffect, useRef } from 'react';
import { useSelectedEventId } from './useSocket'; import { useSelectedEventId } from './useSocket';
function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>( function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
componentRef: MutableRefObject<ComponentRef>, componentRef: RefObject<ComponentRef>,
scrollRef: MutableRefObject<ScrollRef>, scrollRef: RefObject<ScrollRef>,
topOffset: number, topOffset: number,
) { ) {
if (!componentRef.current || !scrollRef.current) { if (!componentRef.current || !scrollRef.current) {
@@ -19,8 +19,8 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
} }
function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>( function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
componentRef: MutableRefObject<ComponentRef>, componentRef: RefObject<ComponentRef>,
scrollRef: MutableRefObject<ScrollRef>, scrollRef: RefObject<ScrollRef>,
topOffset: number, topOffset: number,
) { ) {
if (!componentRef.current || !scrollRef.current) { if (!componentRef.current || !scrollRef.current) {
@@ -36,8 +36,8 @@ function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTM
} }
interface UseFollowComponentProps { interface UseFollowComponentProps {
followRef: MutableRefObject<HTMLElement | null>; followRef: RefObject<HTMLElement | null>;
scrollRef: MutableRefObject<HTMLElement | null>; scrollRef: RefObject<HTMLElement | null>;
doFollow: boolean; doFollow: boolean;
topOffset?: number; topOffset?: number;
setScrollFlag?: (newValue: boolean) => void; setScrollFlag?: (newValue: boolean) => void;
@@ -56,11 +56,7 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
setScrollFlag?.(true); setScrollFlag?.(true);
// Use requestAnimationFrame to ensure the component is fully loaded // Use requestAnimationFrame to ensure the component is fully loaded
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
scrollToComponent( scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
followRef as MutableRefObject<HTMLElement>,
scrollRef as MutableRefObject<HTMLElement>,
topOffset,
);
setScrollFlag?.(false); setScrollFlag?.(false);
}); });
} }
@@ -97,8 +93,8 @@ export function useFollowSelected(doFollow: boolean, topOffset = 100) {
// Use requestAnimationFrame to ensure the component is fully loaded // Use requestAnimationFrame to ensure the component is fully loaded
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
snapToComponent( snapToComponent(
{ current: selectedRef.current } as MutableRefObject<HTMLElement>, { current: selectedRef.current } as RefObject<HTMLElement>,
{ current: scrollRef.current } as MutableRefObject<HTMLElement>, { current: scrollRef.current } as RefObject<HTMLElement>,
topOffset, topOffset,
); );
}); });
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { MutableRefObject, useEffect, useRef } from 'react'; import { RefObject, useEffect, useRef } from 'react';
import { IoEllipsisHorizontal } from 'react-icons/io5'; import { IoEllipsisHorizontal } from 'react-icons/io5';
import { useSessionStorage } from '@mantine/hooks'; import { useSessionStorage } from '@mantine/hooks';
import { flexRender, Table } from '@tanstack/react-table'; import { flexRender, Table } from '@tanstack/react-table';
@@ -22,7 +22,7 @@ interface EventRowProps {
eventIndex: number; eventIndex: number;
rowIndex: number; rowIndex: number;
isPast?: boolean; isPast?: boolean;
selectedRef?: MutableRefObject<HTMLTableRowElement | null>; selectedRef?: RefObject<HTMLTableRowElement | null>;
skip?: boolean; skip?: boolean;
colour?: string; colour?: string;
rowBgColour?: string; rowBgColour?: string;