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:
devin-ai-integration
2024-12-12 09:43:42 +00:00
parent dd39d049fe
commit e100d252b2
39 changed files with 496 additions and 368 deletions

View File

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