| 3719 |
stevensc |
1 |
import React from 'react';
|
|
|
2 |
import { Checkbox, FormControl, FormControlLabel, FormHelperText, styled } from '@mui/material';
|
|
|
3 |
import { useController } from 'react-hook-form';
|
|
|
4 |
|
|
|
5 |
const BpIcon = styled('span')(({ theme }) => ({
|
|
|
6 |
borderRadius: '20px',
|
|
|
7 |
width: 16,
|
|
|
8 |
height: 16,
|
|
|
9 |
boxShadow:
|
|
|
10 |
theme.palette.mode === 'dark'
|
|
|
11 |
? '0 0 0 1px rgb(16 22 26 / 40%)'
|
|
|
12 |
: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
|
|
|
13 |
backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa',
|
|
|
14 |
backgroundImage:
|
|
|
15 |
theme.palette.mode === 'dark'
|
|
|
16 |
? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))'
|
|
|
17 |
: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
|
|
|
18 |
'.Mui-focusVisible &': {
|
|
|
19 |
outline: '2px auto rgba(19,124,189,.6)',
|
|
|
20 |
outlineOffset: 2
|
|
|
21 |
},
|
|
|
22 |
'input:hover ~ &': {
|
|
|
23 |
backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5'
|
|
|
24 |
},
|
|
|
25 |
'input:disabled ~ &': {
|
|
|
26 |
boxShadow: 'none',
|
|
|
27 |
background: theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)'
|
|
|
28 |
}
|
|
|
29 |
}));
|
|
|
30 |
|
|
|
31 |
const BpCheckedIcon = styled(BpIcon)({
|
|
|
32 |
backgroundColor: '#137cbd',
|
|
|
33 |
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
|
|
|
34 |
'&::before': {
|
|
|
35 |
display: 'block',
|
|
|
36 |
width: 16,
|
|
|
37 |
height: 16,
|
|
|
38 |
backgroundImage:
|
|
|
39 |
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
|
|
|
40 |
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
|
|
|
41 |
"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\")",
|
|
|
42 |
content: '""'
|
|
|
43 |
},
|
|
|
44 |
'input:hover ~ &': {
|
|
|
45 |
backgroundColor: '#106ba3'
|
|
|
46 |
}
|
|
|
47 |
});
|
|
|
48 |
|
|
|
49 |
const CheckboxInput = ({
|
|
|
50 |
name,
|
|
|
51 |
control,
|
|
|
52 |
label,
|
|
|
53 |
rules,
|
|
|
54 |
defaultValue = false,
|
|
|
55 |
onChange: externalOnChange,
|
|
|
56 |
labelStyles,
|
|
|
57 |
checkBoxStyles,
|
|
|
58 |
...props
|
|
|
59 |
}) => {
|
|
|
60 |
const {
|
|
|
61 |
field: { value, onChange },
|
|
|
62 |
fieldState: { error }
|
|
|
63 |
} = useController({
|
|
|
64 |
name,
|
|
|
65 |
control,
|
|
|
66 |
defaultValue,
|
|
|
67 |
rules
|
|
|
68 |
});
|
|
|
69 |
|
|
|
70 |
const handleChange = (event) => {
|
|
|
71 |
onChange(event.target.checked);
|
|
|
72 |
if (externalOnChange) {
|
|
|
73 |
externalOnChange(event);
|
|
|
74 |
}
|
|
|
75 |
};
|
|
|
76 |
|
|
|
77 |
return (
|
|
|
78 |
<FormControl error={!!error}>
|
|
|
79 |
<FormControlLabel
|
|
|
80 |
control={
|
|
|
81 |
<Checkbox
|
|
|
82 |
checked={value}
|
|
|
83 |
onChange={handleChange}
|
|
|
84 |
icon={<BpIcon />}
|
|
|
85 |
checkedIcon={<BpCheckedIcon />}
|
|
|
86 |
sx={{ padding: 0, ...checkBoxStyles }}
|
|
|
87 |
{...props}
|
|
|
88 |
/>
|
|
|
89 |
}
|
|
|
90 |
label={label}
|
|
|
91 |
sx={{ margin: 0, gap: ({ spacing }) => spacing(0.5), ...labelStyles }}
|
|
|
92 |
/>
|
|
|
93 |
{error && <FormHelperText>{error.message}</FormHelperText>}
|
|
|
94 |
</FormControl>
|
|
|
95 |
);
|
|
|
96 |
};
|
|
|
97 |
|
|
|
98 |
export default CheckboxInput;
|