53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import ToggleButton from "@mui/material/ToggleButton";
|
|
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
|
|
import { ThemeProvider } from "@emotion/react";
|
|
import turnosXpressTheme from "@core/app/theme/turnosXpress";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export interface WeekDaySelectorProps {
|
|
value: number;
|
|
onChange?: (value: number) => void;
|
|
}
|
|
|
|
export default function WeekDaySelector(props: WeekDaySelectorProps): React.ReactElement {
|
|
const [selectedDay, setSelectedDay] = useState<number>(props.value);
|
|
|
|
useEffect(() => {
|
|
setSelectedDay(props.value);
|
|
}, [props.value]);
|
|
|
|
const handleDayChanged = (event: React.MouseEvent<HTMLElement>, newday: number) => {
|
|
if (!newday) {
|
|
return;
|
|
}
|
|
if (selectedDay == newday) {
|
|
return;
|
|
}
|
|
|
|
props.onChange?.(newday);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ThemeProvider theme={turnosXpressTheme}>
|
|
<ToggleButtonGroup
|
|
color="primary"
|
|
exclusive
|
|
aria-label="Platform"
|
|
value={selectedDay}
|
|
onChange={handleDayChanged}
|
|
fullWidth
|
|
>
|
|
<ToggleButton value={1}>Lun</ToggleButton>
|
|
<ToggleButton value={2}>Mar</ToggleButton>
|
|
<ToggleButton value={3}>Mie</ToggleButton>
|
|
<ToggleButton value={4}>Jue</ToggleButton>
|
|
<ToggleButton value={5}>Vie</ToggleButton>
|
|
<ToggleButton value={6}>Sab</ToggleButton>
|
|
<ToggleButton value={7}>Dom</ToggleButton>
|
|
</ToggleButtonGroup>
|
|
</ThemeProvider>
|
|
</>
|
|
);
|
|
}
|