first commit
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user