71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
|
|
import type { MobileTimePickerProps } from "@mui/x-date-pickers/MobileTimePicker";
|
|
import type { Dayjs } from "dayjs";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import { FieldLabel } from "./FieldLabel";
|
|
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
|
import { LocalizationProvider } from "@mui/x-date-pickers";
|
|
|
|
interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
|
|
fieldLabel?: string;
|
|
required?: boolean;
|
|
error?: boolean;
|
|
helperText?: string;
|
|
}
|
|
|
|
export const TimePickerComponent = ({
|
|
fieldLabel,
|
|
required,
|
|
error,
|
|
helperText,
|
|
...props
|
|
}: TimePickerComponentProps) => {
|
|
const theme = useTheme();
|
|
|
|
const picker = (
|
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
<MobileTimePicker
|
|
{...props}
|
|
slotProps={{
|
|
field: {
|
|
sx: {
|
|
width: "fit-content",
|
|
"& input": {
|
|
minHeight: 34,
|
|
p: 0,
|
|
px: theme.spacing(5),
|
|
},
|
|
"& fieldset": {
|
|
borderColor: error ? theme.palette.error.main : theme.palette.divider,
|
|
borderRadius: theme.shape.borderRadius,
|
|
},
|
|
"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
|
|
{
|
|
borderColor: error ? theme.palette.error.main : theme.palette.divider,
|
|
},
|
|
},
|
|
},
|
|
...props.slotProps,
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
);
|
|
|
|
return (
|
|
<Stack spacing={theme.spacing(2)}>
|
|
{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
|
|
{picker}
|
|
{helperText && (
|
|
<Typography
|
|
variant="caption"
|
|
color={error ? "error" : "text.secondary"}
|
|
>
|
|
{helperText}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|