mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Toggle: add size prop

environments/review-groups-tog-ycn9lp/deployments/3017
Alex Gleason 2023-03-31 11:15:48 -05:00
rodzic 541d48c5ab
commit e38b5fbfd3
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
1 zmienionych plików z 13 dodań i 4 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

17
app/soapbox/components/ui/toggle/toggle.tsx
Wyświetl plik

@ -2,11 +2,11 @@ import clsx from 'clsx';
import React, { useRef } from 'react';
interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'checked' | 'onChange' | 'required'> {
size?: 'sm' | 'md'
}
/** A glorified checkbox. Wrapper around react-toggle. */
const Toggle: React.FC<IToggle> = ({ id, checked, onChange, required }) => {
const Toggle: React.FC<IToggle> = ({ id, size = 'md', checked, onChange, required }) => {
const input = useRef<HTMLInputElement>(null);
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
@ -17,10 +17,19 @@ const Toggle: React.FC<IToggle> = ({ id, checked, onChange, required }) => {
return (
<button
className='w-9 rounded-full bg-gray-500 p-0.5'
className={clsx('flex-none rounded-full bg-gray-500', {
'w-9 p-0.5': size === 'sm',
'w-11 p-0.5': size === 'md',
})}
onClick={handleClick}
>
<div className={clsx('h-4.5 w-4.5 rounded-full bg-white transition-transform', { 'translate-x-3': checked })} />
<div className={clsx('rounded-full bg-white transition-transform', {
'h-4.5 w-4.5': size === 'sm',
'translate-x-3': size === 'sm' && checked,
'h-6 w-6': size === 'md',
'translate-x-4': size === 'md' && checked,
})}
/>
<input
id={id}