103 lines
3.7 KiB
JavaScript
103 lines
3.7 KiB
JavaScript
import { useRef, useState } from "react";
|
|
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
|
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
|
|
import { handleTwoLength } from "@/helper";
|
|
import ClockP from "@/components/icons/ClockP";
|
|
|
|
function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
|
|
const input = useRef();
|
|
const [value, setValue] = useState("00:00");
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const openTimePicker = () => setIsOpen(true);
|
|
const closeTimePicker = () => setIsOpen(false);
|
|
|
|
return (
|
|
<div className="w-full relative field-date-picker">
|
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
<TimePicker
|
|
ampm={false}
|
|
open={isOpen}
|
|
onClose={closeTimePicker}
|
|
disabled={isVacation}
|
|
format="hh:mm"
|
|
ref={input}
|
|
className="!w-full"
|
|
shouldDisableTime={(timeValue, clockType) => {
|
|
if (clockType === "hours") {
|
|
const { idx, is_morgen } = dataChange;
|
|
const value =
|
|
data[idx][is_morgen ? "morning_time" : "evening_time"][0];
|
|
const hourSelected = value ? +value.split(":")[0] : false;
|
|
|
|
const disableMinHour =
|
|
timeStart || !value ? false : hourSelected + 1 > timeValue.$H;
|
|
return dataChange.is_morgen
|
|
? !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour)
|
|
: !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour);
|
|
}
|
|
}}
|
|
renderInput={(params) => {
|
|
return <TextField {...params} onClick={(e) => setOpen(true)} />;
|
|
}}
|
|
views={["hours", "minutes"]}
|
|
placeholder="انتخاب کنید..."
|
|
onChange={(e) => {
|
|
const hours = e.$H;
|
|
const minute = e.$m;
|
|
const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
|
|
minute
|
|
)}`;
|
|
|
|
const newData = data;
|
|
const { idx, is_morgen } = dataChange;
|
|
newData[idx][is_morgen ? "morning_time" : "evening_time"][
|
|
timeStart ? 0 : 1
|
|
] = newValue;
|
|
|
|
setValue(newValue);
|
|
}}
|
|
sx={{
|
|
"& .MuiFormLabel-root": {
|
|
top: "-4px !important",
|
|
},
|
|
"& .MuiInputBase-input": { padding: "12.5px 14px" },
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "1px solid #D7D7D7 !important",
|
|
},
|
|
"& .MuiInputBase-root": {
|
|
borderRadius: "8px !important",
|
|
},
|
|
".Mui-focused": {
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "1px solid #5559CE !important",
|
|
transition: "0.5s all",
|
|
},
|
|
},
|
|
"& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after":
|
|
{
|
|
display: "none !important",
|
|
},
|
|
}}
|
|
/>
|
|
<p
|
|
className={`absolute cursor-pointer rounded-[8px] dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_6px)] flex items-center right-[4px] py-[8px] px-[8px]
|
|
w-[calc(100%_-_8px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
|
|
${disable && "!text-[rgba(126,126,126,0.5)]"}`}
|
|
onClick={openTimePicker}
|
|
>
|
|
{value}
|
|
</p>
|
|
</LocalizationProvider>
|
|
<div
|
|
className="absolute left-[12px] top-1/2 -translate-y-1/2 cursor-pointer"
|
|
onClick={openTimePicker}
|
|
>
|
|
<ClockP />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TimePickerField;
|