| 3719 |
stevensc |
1 |
import React, { useState } from 'react';
|
|
|
2 |
import { Checkbox as MuiCheckbox, FormControlLabel, styled } from '@mui/material';
|
|
|
3 |
|
|
|
4 |
const BpIcon = styled('span')(({ theme }) => ({
|
|
|
5 |
borderRadius: '20px',
|
|
|
6 |
width: 16,
|
|
|
7 |
height: 16,
|
|
|
8 |
boxShadow:
|
|
|
9 |
theme.palette.mode === 'dark'
|
|
|
10 |
? '0 0 0 1px rgb(16 22 26 / 40%)'
|
|
|
11 |
: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
|
|
|
12 |
backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa',
|
|
|
13 |
backgroundImage:
|
|
|
14 |
theme.palette.mode === 'dark'
|
|
|
15 |
? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))'
|
|
|
16 |
: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
|
|
|
17 |
'.Mui-focusVisible &': {
|
|
|
18 |
outline: '2px auto rgba(19,124,189,.6)',
|
|
|
19 |
outlineOffset: 2
|
|
|
20 |
},
|
|
|
21 |
'input:hover ~ &': {
|
|
|
22 |
backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5'
|
|
|
23 |
},
|
|
|
24 |
'input:disabled ~ &': {
|
|
|
25 |
boxShadow: 'none',
|
|
|
26 |
background: theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)'
|
|
|
27 |
}
|
|
|
28 |
}));
|
|
|
29 |
|
|
|
30 |
const BpCheckedIcon = styled(BpIcon)({
|
|
|
31 |
backgroundColor: '#137cbd',
|
|
|
32 |
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
|
|
|
33 |
'&::before': {
|
|
|
34 |
display: 'block',
|
|
|
35 |
width: 16,
|
|
|
36 |
height: 16,
|
|
|
37 |
backgroundImage:
|
|
|
38 |
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
|
|
|
39 |
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
|
|
|
40 |
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
|
|
|
41 |
content: '""'
|
|
|
42 |
},
|
|
|
43 |
'input:hover ~ &': {
|
|
|
44 |
backgroundColor: '#106ba3'
|
|
|
45 |
}
|
|
|
46 |
});
|
|
|
47 |
|
|
|
48 |
export function Checkbox({ label, onChange, labelStyles, checkBoxStyles, ...props }) {
|
|
|
49 |
const [value, setValue] = useState(false);
|
|
|
50 |
|
|
|
51 |
const handleChange = (event) => {
|
|
|
52 |
onChange(event.target.checked);
|
|
|
53 |
setValue(event.target.checked);
|
|
|
54 |
};
|
|
|
55 |
|
|
|
56 |
return (
|
|
|
57 |
<FormControlLabel
|
|
|
58 |
control={
|
|
|
59 |
<MuiCheckbox
|
|
|
60 |
checked={value}
|
|
|
61 |
onChange={handleChange}
|
|
|
62 |
icon={<BpIcon />}
|
|
|
63 |
checkedIcon={<BpCheckedIcon />}
|
|
|
64 |
sx={{ padding: 0, ...checkBoxStyles }}
|
|
|
65 |
{...props}
|
|
|
66 |
/>
|
|
|
67 |
}
|
|
|
68 |
label={label}
|
|
|
69 |
sx={{ margin: 0, gap: ({ spacing }) => spacing(0.5), ...labelStyles }}
|
|
|
70 |
/>
|
|
|
71 |
);
|
|
|
72 |
}
|