Fix abstraction leak in Switchers

This commit is contained in:
Filip Sodić 2025-02-21 15:42:17 +01:00
parent c4c46fc39d
commit 3adfacc5ed
4 changed files with 14 additions and 21 deletions

View File

@ -8,7 +8,9 @@ import { updateIsUserAdminById } from 'wasp/client/operations';
import { type User } from 'wasp/entities';
const AdminSwitch = ({ id, isAdmin }: Pick<User, 'id' | 'isAdmin'>) => {
return <SwitcherOne isOn={isAdmin} onChange={() => updateIsUserAdminById({ id: id, isAdmin: !isAdmin })} />;
return (
<SwitcherOne isOn={isAdmin} onChange={(value) => updateIsUserAdminById({ id: id, isAdmin: value })} />
);
};
const UsersTable = () => {

View File

@ -309,8 +309,8 @@ function SwitchExamples() {
const [isSecondOn, setIsSecondOn] = useState<boolean>(false);
return (
<div className='flex flex-col gap-5.5 p-6.5'>
<SwitcherOne isOn={isFirstOn} onChange={() => setIsFirstOn(!isFirstOn)} />
<SwitcherTwo isOn={isSecondOn} onChange={() => setIsSecondOn(!isSecondOn)} />
<SwitcherOne isOn={isFirstOn} onChange={setIsFirstOn} />
<SwitcherTwo isOn={isSecondOn} onChange={setIsSecondOn} />
</div>
);
}

View File

@ -1,18 +1,11 @@
import { cn } from '../../../client/cn';
import { ChangeEventHandler } from 'react';
const SwitcherOne = ({
isOn,
onChange,
}: {
isOn: boolean;
onChange: ChangeEventHandler<HTMLInputElement>;
}) => {
const SwitcherOne = ({ isOn, onChange }: { isOn: boolean; onChange: (value: boolean) => void }) => {
return (
<div className='relative'>
<label className='flex cursor-pointer select-none items-center'>
<div className='relative'>
<input type='checkbox' className='sr-only' onChange={onChange} />
<input type='checkbox' className='sr-only' onChange={(e) => onChange(e.target.checked)} />
<div className='reblock h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]'></div>
<div
className={cn('absolute left-1 top-1 h-6 w-6 rounded-full bg-white dark:bg-gray-400 transition', {

View File

@ -1,18 +1,16 @@
import { ChangeEventHandler } from 'react';
import { cn } from '../../../client/cn';
const SwitcherTwo = ({
isOn,
onChange,
}: {
isOn: boolean;
onChange: ChangeEventHandler<HTMLInputElement>;
}) => {
const SwitcherTwo = ({ isOn, onChange }: { isOn: boolean; onChange: (value: boolean) => void }) => {
return (
<div>
<label className='flex cursor-pointer select-none items-center'>
<div className='relative'>
<input type='checkbox' id='toggle3' className='sr-only' onChange={onChange} />
<input
type='checkbox'
id='toggle3'
className='sr-only'
onChange={(e) => onChange(e.target.checked)}
/>
<div className='block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]'></div>
<div
className={cn(