2022-01-09 17:15:09 +01:00
|
|
|
import { FormControlLabel, Switch, Tooltip, Typography } from "@mui/material";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
checked: boolean;
|
|
|
|
onChange: (newValue: boolean, error?: string) => void;
|
|
|
|
text: React.ReactNode;
|
|
|
|
tooltip: React.ReactNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function OptionSwitch({ checked, onChange, text, tooltip }: IProps): React.ReactElement {
|
|
|
|
const [value, setValue] = useState(checked);
|
|
|
|
|
|
|
|
function handleSwitchChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
|
|
|
setValue(event.target.checked);
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => onChange(value), [value]);
|
|
|
|
|
|
|
|
return (
|
2022-08-29 22:36:08 +02:00
|
|
|
<>
|
|
|
|
<FormControlLabel
|
|
|
|
control={<Switch checked={value} onChange={handleSwitchChange} />}
|
|
|
|
label={
|
|
|
|
<Tooltip title={<Typography>{tooltip}</Typography>}>
|
|
|
|
<Typography>{text}</Typography>
|
|
|
|
</Tooltip>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
<br />
|
|
|
|
</>
|
2022-01-09 17:15:09 +01:00
|
|
|
);
|
|
|
|
}
|