Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import { Checkbox as MUICheckbox, FormControlLabel, Theme, useTheme, SxProps } from '@mui/material';
import React, { SyntheticEvent } from 'react';
export const CheckboxStyle = (theme: Theme) => ({
padding: theme.spacing(0, 1, 0, 0),
'& .MuiSvgIcon-root': {
fill: theme.palette.TwClrBrdrSecondary,
},
'&:hover > .MuiSvgIcon-root': {
fill: theme.palette.TwClrBrdrHover,
},
'&.Mui-checked > .MuiSvgIcon-root': {
fill: theme.palette.TwClrBgSelected,
color: theme.palette.TwClrBgSelected,
},
'&.MuiCheckbox-indeterminate > .MuiSvgIcon-root': {
fill: theme.palette.TwClrBgSelected,
color: theme.palette.TwClrBgSelected,
},
'&:focus > .MuiSvgIcon-root': {
border: `2px solid ${theme.palette.TwClrBgSelected}`,
},
'&.Mui-disabled': {
opacity: 0.5,
},
});
export interface Props {
className?: string;
disabled?: boolean;
id: string;
indeterminate?: boolean;
label: React.ReactNode;
name: string;
onChange: (value: boolean) => void;
sx?: SxProps;
value?: boolean | null;
}
export default function Checkbox(props: Props): JSX.Element {
const theme = useTheme();
const onChange = (event: SyntheticEvent<Element, Event>, checked: boolean) => {
if (props.indeterminate) {
props.onChange(true);
return;
}
props.onChange(checked);
};
return (
<FormControlLabel
id={props.id}
onChange={onChange}
label={props.label}
disabled={props.disabled}
control={
<MUICheckbox
disabled={props.disabled}
disableRipple={true}
id={'check-' + props.id}
indeterminate={props.indeterminate}
checked={props.value ?? false}
size='medium'
sx={[CheckboxStyle(theme), ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}
/>
}
className={props.className}
sx={{
alignItems: 'flex-start',
color: theme.palette.TwClrTxt,
fontFamily: 'Inter',
fontSize: '16px',
fontWeight: 500,
lineHeight: '24px',
margin: theme.spacing(1, 0, 0, 0),
}}
/>
);
}
|