m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-18 15:23:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Toggle the checkbox when clicking on the label

Browse Source 
Pretty sure the `user-select: none` could be employed
in other places aswell

Signed-off-by: Kipras Melnikovas <kipras@kipras.org>
This commit is contained in:
Kipras Melnikovas 2021-03-28 20:07:09 +03:00
parent ce35a2d0ab
commit 4e4ae0a7d0
No known key found for this signature in database
GPG Key ID: AA505BC1C6D8AD90
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/common/Checkbox.js
View File

@ -7,12 +7,14 @@ import styles from './Checkbox.module.css';
function Checkbox({ name, value, label, onChange }) { function Checkbox({ name, value, label, onChange }) {
const ref = useRef(); const ref = useRef();
const onClick = () => ref.current.click();
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.checkbox} onClick={() => ref.current.click()}> <div className={styles.checkbox} onClick={onClick}>
{value && <Icon icon={<Check />} size="small" />} {value && <Icon icon={<Check />} size="small" />}
</div> </div>
<label className={styles.label} htmlFor={name}> <label className={styles.label} htmlFor={name} onClick={onClick}>
{label} {label}
</label> </label>
<input <input

1
components/common/Checkbox.module.css
View File

@ -17,6 +17,7 @@
.label { .label {
margin-left: 10px; margin-left: 10px;
user-select: none; /* disable text selection when clicking to toggle the checkbox */
} }
.input { .input {