mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 15:40:51 +01:00
Update TransitionAnimation.tsx
Refactor TransitionAnimation component to use refs and avoid deprecated findDOMNode - Added useRef hook to reference the DOM node directly - Passed nodeRef to the Transition component - Simplified state management and useEffect hook - Cleaned up props destructuring for clarity - Set default empty string for className to simplify handling This update ensures compatibility with future React releases and adheres to modern React best practices.
This commit is contained in:
parent
eb865730bb
commit
48e74c81f1
@ -1,9 +1,8 @@
|
|||||||
import { FC, ReactNode, useEffect, useState } from 'react';
|
import { FC, ReactNode, useEffect, useRef, useState } from "react";
|
||||||
import { Transition } from 'react-transition-group';
|
import { Transition } from "react-transition-group";
|
||||||
import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
|
import { getTransitionAnimationStyle } from "./TransitionAnimationStyles";
|
||||||
|
|
||||||
interface TransitionAnimationProps
|
interface TransitionAnimationProps {
|
||||||
{
|
|
||||||
type: string;
|
type: string;
|
||||||
inProp: boolean;
|
inProp: boolean;
|
||||||
timeout?: number;
|
timeout?: number;
|
||||||
@ -11,42 +10,43 @@ interface TransitionAnimationProps
|
|||||||
children?: ReactNode;
|
children?: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
|
export const TransitionAnimation: FC<TransitionAnimationProps> = ({
|
||||||
{
|
type,
|
||||||
const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
|
inProp,
|
||||||
|
timeout = 300,
|
||||||
|
className = "",
|
||||||
|
children,
|
||||||
|
}) => {
|
||||||
|
const nodeRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [isChildrenVisible, setChildrenVisible] = useState(false);
|
||||||
|
|
||||||
const [ isChildrenVisible, setChildrenVisible ] = useState(false);
|
useEffect(() => {
|
||||||
|
let timeoutId: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
useEffect(() =>
|
if (inProp) {
|
||||||
{
|
|
||||||
let timeoutData: ReturnType<typeof setTimeout> = null;
|
|
||||||
|
|
||||||
if(inProp)
|
|
||||||
{
|
|
||||||
setChildrenVisible(true);
|
setChildrenVisible(true);
|
||||||
}
|
} else {
|
||||||
else
|
timeoutId = setTimeout(() => {
|
||||||
{
|
|
||||||
timeoutData = setTimeout(() =>
|
|
||||||
{
|
|
||||||
setChildrenVisible(false);
|
setChildrenVisible(false);
|
||||||
clearTimeout(timeout);
|
|
||||||
}, timeout);
|
}, timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () =>
|
return () => {
|
||||||
{
|
if (timeoutId) clearTimeout(timeoutId);
|
||||||
if(timeoutData) clearTimeout(timeoutData);
|
|
||||||
};
|
};
|
||||||
}, [ inProp, timeout ]);
|
}, [inProp, timeout]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Transition in={ inProp } timeout={ timeout }>
|
<Transition nodeRef={nodeRef} in={inProp} timeout={timeout}>
|
||||||
{ state => (
|
{(state) => (
|
||||||
<div className={ (className ?? '') + ' animate__animated' } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
|
<div
|
||||||
{ isChildrenVisible && children }
|
ref={nodeRef}
|
||||||
|
className={`${className} animate__animated`}
|
||||||
|
style={getTransitionAnimationStyle(type, state, timeout)}
|
||||||
|
>
|
||||||
|
{isChildrenVisible && children}
|
||||||
</div>
|
</div>
|
||||||
) }
|
)}
|
||||||
</Transition>
|
</Transition>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user