administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-18 22:28:23 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

replace react-transition-group with framer-motion in Chip

Browse Source 
Replace CSSTransition with framer-motion AnimatePresence + motion.div
for React 19 compatibility (react-transition-group uses findDOMNode).
framer-motion is already a project dependency.
This commit is contained in:
Josh Hawkins 2026-03-04 19:29:23 -06:00
parent c4e7cf6ef1
commit 638ee3bd0a
1 changed files with 25 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/components/indicators/Chip.tsx
View File

@ -1,8 +1,8 @@
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { LogSeverity } from "@/types/log"; import { LogSeverity } from "@/types/log";
import { ReactNode, useMemo, useRef } from "react"; import { ReactNode, useMemo } from "react";
import { isIOS } from "react-device-detect"; import { isIOS } from "react-device-detect";
import { CSSTransition } from "react-transition-group"; import { AnimatePresence, motion } from "framer-motion";
type ChipProps = { type ChipProps = {
className?: string; className?: string;
@ -17,39 +17,31 @@ export default function Chip({
in: inProp = true, in: inProp = true,
onClick, onClick,
}: ChipProps) { }: ChipProps) {
const nodeRef = useRef(null);
return ( return (
<CSSTransition <AnimatePresence>
in={inProp} {inProp && (
nodeRef={nodeRef} <motion.div
timeout={500} initial={{ opacity: 0 }}
classNames={{ animate={{ opacity: 1 }}
enter: "opacity-0", exit={{ opacity: 0 }}
enterActive: "opacity-100 transition-opacity duration-500 ease-in-out", transition={{ duration: 0.5, ease: "easeInOut" }}
exit: "opacity-100", className={cn(
exitActive: "opacity-0 transition-opacity duration-500 ease-in-out", "flex items-center rounded-2xl px-2 py-1.5",
}} className,
unmountOnExit !isIOS && "z-10",
> )}
<div onClick={(e) => {
ref={nodeRef} e.stopPropagation();
className={cn(
"flex items-center rounded-2xl px-2 py-1.5",
className,
!isIOS && "z-10",
)}
onClick={(e) => {
e.stopPropagation();
if (onClick) { if (onClick) {
onClick(); onClick();
} }
}} }}
> >
{children} {children}
</div> </motion.div>
</CSSTransition> )}
</AnimatePresence>
); );
} }