50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
// Copyright 2021 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React from 'react';
|
|
|
|
import { getClassNamesFor } from '../util/getClassNamesFor';
|
|
|
|
export type Props = {
|
|
id?: string;
|
|
checked?: boolean;
|
|
disabled?: boolean;
|
|
isRadio?: boolean;
|
|
name?: string;
|
|
onChange?: (value: boolean) => unknown;
|
|
onClick?: () => unknown;
|
|
};
|
|
|
|
/**
|
|
* A fancy checkbox
|
|
*
|
|
* It's only the checkbox, it does NOT produce a label.
|
|
* It is a controlled component, you must provide a value and
|
|
* update it yourself onClick/onChange.
|
|
*/
|
|
export function CircleCheckbox({
|
|
id,
|
|
checked,
|
|
disabled,
|
|
isRadio,
|
|
name,
|
|
onChange,
|
|
onClick,
|
|
}: Props): JSX.Element {
|
|
const getClassName = getClassNamesFor('CircleCheckbox');
|
|
|
|
return (
|
|
<div className={getClassName('__checkbox')}>
|
|
<input
|
|
checked={Boolean(checked)}
|
|
disabled={disabled}
|
|
aria-disabled={disabled}
|
|
id={id}
|
|
name={name}
|
|
onChange={onChange && (ev => onChange(ev.target.checked))}
|
|
onClick={onClick}
|
|
type={isRadio ? 'radio' : 'checkbox'}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|