101 lines
2.7 KiB
React
101 lines
2.7 KiB
React
import PropTypes from "prop-types";
|
|
import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
|
|
import { useTheme } from "@emotion/react";
|
|
import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react";
|
|
import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react";
|
|
|
|
import "./index.css";
|
|
|
|
/**
|
|
* @param {Object} props
|
|
* @param {string} props.id - The id attribute for the checkbox input.
|
|
* @param {string} props.label - The label to display next to the checkbox.
|
|
* @param {('small' | 'medium' | 'large')} - The size of the checkbox.
|
|
* @param {boolean} props.isChecked - Whether the checkbox is checked or not.
|
|
* @param {string} [props.value] - The value of the checkbox input.
|
|
* @param {function} [props.onChange] - The function to call when the checkbox value changes.
|
|
* @param {boolean} [props.isDisabled] - Whether the checkbox is disabled or not.
|
|
*
|
|
* @returns {JSX.Element}
|
|
*
|
|
* @example
|
|
* <Checkbox
|
|
* id="checkbox-id"
|
|
* label="Ping monitoring"
|
|
* isChecked={checks.type === "ping"}
|
|
* value="ping"
|
|
* onChange={handleChange}
|
|
* />
|
|
*/
|
|
|
|
const Checkbox = ({
|
|
id,
|
|
label,
|
|
size = "medium",
|
|
isChecked,
|
|
value,
|
|
onChange,
|
|
isDisabled,
|
|
}) => {
|
|
/* TODO move sizes to theme */
|
|
const sizes = { small: "14px", medium: "16px", large: "18px" };
|
|
const theme = useTheme();
|
|
return (
|
|
<FormControlLabel
|
|
className="checkbox-wrapper"
|
|
control={
|
|
<MuiCheckbox
|
|
checked={isDisabled ? false : isChecked}
|
|
value={value}
|
|
onChange={onChange}
|
|
icon={<CheckboxOutline />}
|
|
checkedIcon={<CheckboxFilled />}
|
|
inputProps={{
|
|
"aria-label": "controlled checkbox",
|
|
id: id,
|
|
}}
|
|
sx={{
|
|
"&:hover": { backgroundColor: "transparent" },
|
|
"& svg": { width: sizes[size], height: sizes[size] },
|
|
alignSelf: "flex-start",
|
|
}}
|
|
/>
|
|
}
|
|
label={label}
|
|
disabled={isDisabled}
|
|
sx={{
|
|
borderRadius: theme.shape.borderRadius,
|
|
p: theme.spacing(2.5),
|
|
"& .MuiButtonBase-root": {
|
|
width: theme.spacing(10),
|
|
p: 0,
|
|
mr: theme.spacing(6),
|
|
},
|
|
"&:not(:has(.Mui-disabled)):hover": {
|
|
backgroundColor: theme.palette.background.accent,
|
|
},
|
|
"& span.MuiTypography-root": {
|
|
fontSize: 13,
|
|
color: theme.palette.text.tertiary,
|
|
},
|
|
".MuiFormControlLabel-label.Mui-disabled": {
|
|
color: theme.palette.text.tertiary,
|
|
opacity: 0.25,
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
Checkbox.propTypes = {
|
|
id: PropTypes.string.isRequired,
|
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
|
|
size: PropTypes.oneOf(["small", "medium", "large"]),
|
|
isChecked: PropTypes.bool.isRequired,
|
|
value: PropTypes.string,
|
|
onChange: PropTypes.func,
|
|
isDisabled: PropTypes.bool,
|
|
};
|
|
|
|
export default Checkbox;
|