use separate state for switch

This commit is contained in:
Josh Hawkins 2024-04-02 16:43:21 -05:00
parent ec4ab763a6
commit 115b63cecd

View File

@ -2,7 +2,7 @@ import { Button } from "../ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import useSWR from "swr"; import useSWR from "swr";
import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig"; import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -631,16 +631,21 @@ function ShowMotionOnlyButton({
motionOnly, motionOnly,
setMotionOnly, setMotionOnly,
}: ShowMotionOnlyButtonProps) { }: ShowMotionOnlyButtonProps) {
const [motionOnlyButton, setMotionOnlyButton] = useState(motionOnly);
useEffect(
() => setMotionOnly(motionOnlyButton),
[motionOnlyButton, setMotionOnly],
);
return ( return (
<> <>
<div className="hidden md:inline-flex items-center justify-center whitespace-nowrap text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground h-9 rounded-md px-3 mx-1 cursor-pointer"> <div className="hidden md:inline-flex items-center justify-center whitespace-nowrap text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground h-9 rounded-md px-3 mx-1 cursor-pointer">
<Switch <Switch
className="ml-1" className="ml-1"
id="collapse-motion" id="collapse-motion"
checked={motionOnly} checked={motionOnlyButton}
onCheckedChange={() => { onCheckedChange={setMotionOnlyButton}
setMotionOnly(!motionOnly);
}}
/> />
<Label <Label
className="mx-2 text-secondary-foreground cursor-pointer" className="mx-2 text-secondary-foreground cursor-pointer"