mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 21:27:20 +00:00
fix(core): add null checks for timeout refs and event listeners for React 19 compatibility (#9116)
## Description - Add null checks before clearTimeout calls in colorful-fallback.tsx, edgeless.dialog.tsx, and local.dialog.tsx - Fix event listener cleanup in unfolding.tsx - Update tsconfig.jsx to use react-jsx transform ## Testing - [x] Verified type safety improvements for React 19 compatibility - [x] Ensured proper cleanup of event listeners and timeouts - [x] Confirmed no unintended side effects from the changes Link to Devin run: https://app.devin.ai/sessions/2e790f3ea0d84402837ec6c3c6f83e4c
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import clsx from 'clsx';
|
||||
import { useMemo, useRef, useState } from 'react';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
DefaultAvatarBottomItemStyle,
|
||||
@@ -27,11 +27,15 @@ export const ColorfulFallback = ({ char }: { char: string }) => {
|
||||
return colorsSchema[index % colorsSchema.length];
|
||||
}, [char]);
|
||||
|
||||
const timer = useRef<ReturnType<typeof setTimeout>>();
|
||||
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const [topColor, middleColor, bottomColor] = colors;
|
||||
const [isHover, setIsHover] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => void (timer.current && clearTimeout(timer.current));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={DefaultAvatarContainerStyle}
|
||||
@@ -41,7 +45,9 @@ export const ColorfulFallback = ({ char }: { char: string }) => {
|
||||
}, 300);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
clearTimeout(timer.current);
|
||||
if (timer.current) {
|
||||
clearTimeout(timer.current);
|
||||
}
|
||||
setIsHover(false);
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user