60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Typography } from '../../';
|
|
import { Icons } from '@ohif/ui-next';
|
|
|
|
/**
|
|
* REACT CheckBox component
|
|
* it has two props, checked and onChange
|
|
* checked is a boolean value
|
|
* onChange is a function that will be called when the checkbox is clicked
|
|
*
|
|
* CheckBox is a component that allows you to use as a boolean
|
|
*/
|
|
|
|
const CheckBox: React.FC<{
|
|
checked: boolean;
|
|
onChange: (state) => void;
|
|
className?: string;
|
|
label: string;
|
|
labelClassName?: string;
|
|
labelVariant?: string;
|
|
}> = ({ checked, onChange, label, labelClassName, labelVariant = 'body', className }) => {
|
|
const [isChecked, setIsChecked] = useState(checked);
|
|
|
|
const handleClick = useCallback(() => {
|
|
setIsChecked(!isChecked);
|
|
onChange(!isChecked);
|
|
}, [isChecked, onChange]);
|
|
|
|
return (
|
|
<div
|
|
className={`flex cursor-pointer items-center space-x-1 ${className ? className : ''}`}
|
|
onClick={handleClick}
|
|
>
|
|
{isChecked ? (
|
|
<Icons.ByName name="checkbox-checked" />
|
|
) : (
|
|
<Icons.ByName name="checkbox-unchecked" />
|
|
)}
|
|
<Typography
|
|
variant={labelVariant ?? 'subtitle'}
|
|
component="p"
|
|
className={labelClassName ?? 'text-white'}
|
|
>
|
|
{label}
|
|
</Typography>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
CheckBox.propTypes = {
|
|
checked: PropTypes.bool,
|
|
onChange: PropTypes.func,
|
|
label: PropTypes.string,
|
|
labelClassName: PropTypes.string,
|
|
labelVariant: PropTypes.string,
|
|
};
|
|
|
|
export default CheckBox;
|