LaconicNetwork/mars-v2-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: prevent wrapped checkboxes to be double clicked

Browse Source
This commit is contained in:
Linkie Link 2023-11-14 11:04:40 +01:00
parent 8e4197a706
commit 8fe519f4a9
No known key found for this signature in database
GPG Key ID: 5318B0F2564D38EA
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Checkbox.tsx
View File

@ -8,19 +8,27 @@ interface Props {
onChange: (checked: boolean) => void onChange: (checked: boolean) => void
name: string name: string
text?: string text?: string
noMouseEvents?: boolean
} }
export default function Checkbox(props: Props) { export default function Checkbox(props: Props) {
return ( return (
<> <>
<label className='flex items-center gap-2 border-white cursor-pointer'> <input
<input onChange={() => props.onChange(props.checked)}
onChange={() => props.onChange(props.checked)} id={`checkbox-${props.name}`}
name={props.name} name={props.name}
checked={props.checked} checked={props.checked}
type='checkbox' type='checkbox'
className='absolute w-0 h-0 opacity-0' className={classNames('peer hidden')}
/> />
<label
className={classNames(
'flex items-center gap-2 border-white cursor-pointer',
props.noMouseEvents && 'pointer-events-none',
)}
htmlFor={`checkbox-${props.name}`}
>
<div <div
className={classNames( className={classNames(
'h-5 w-5 rounded-sm p-0.5', 'h-5 w-5 rounded-sm p-0.5',

1
src/components/Modals/AssetsSelect/useAssetTableColumns.tsx
View File

@ -38,6 +38,7 @@ export default function useAssetTableColumns(isBorrow: boolean) {
name={`asset-${asset.id.toLowerCase()}`} name={`asset-${asset.id.toLowerCase()}`}
checked={row.getIsSelected()} checked={row.getIsSelected()}
onChange={row.getToggleSelectedHandler()} onChange={row.getToggleSelectedHandler()}
noMouseEvents
/> />
<AssetImage asset={asset} size={24} className='ml-4' /> <AssetImage asset={asset} size={24} className='ml-4' />
<div className='ml-2 text-left'> <div className='ml-2 text-left'>