73 lines
3.4 KiB
JavaScript
73 lines
3.4 KiB
JavaScript
import { useState } from "react";
|
|
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
|
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"
|
|
|
|
function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
|
|
|
|
const [value, setValue] = useState('00:00');
|
|
|
|
return (
|
|
<div className="w-full relative">
|
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
<TimePicker
|
|
ampm={false}
|
|
disabled={disable}
|
|
format="hh:mm"
|
|
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)
|
|
|
|
}
|
|
}}
|
|
views={['hours', 'minutes']}
|
|
placeholder="انتخاب کنید..."
|
|
onChange={e => {
|
|
const hours = e.$H;
|
|
const minute = e.$m;
|
|
const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value
|
|
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 flex items-center right-[4px] h-[44px] py-[8px] px-[8px]
|
|
w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
|
|
${disable && '!text-[rgba(126,126,126,0.5)]'}`}>{value}</p>
|
|
</LocalizationProvider>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TimePickerField |