Commit 5b44f9ae authored by Ermolaev Timur's avatar Ermolaev Timur

#131 Добавил ховер эффекты

parent 26d9e4ab
......@@ -87,8 +87,5 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
</>
};
export default memo(CalendarRowDay, (prevProps, nextProps) => {
if (!prevProps.modal) return false
if (nextProps.modal) return true
});
export default memo(CalendarRowDay);
import { Grid } from "@mui/material";
import React, { memo, useEffect, useState } from "react";
import DefaultTask from "../../../../UI/DefaultTask/DefaultTask";
const EmptyBox = ({ hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler, copyTask, createCopyTask }) => {
const [isThisCell, setIsThisCell] = useState(false)
useEffect(() => {
if (!modal) {
setIsThisCell(false);
}
}, [modal])
const onClickHandler = (e, dayNumber, hour) => {
if (copyTask) {
createCopyTask(dayNumber, hour)
} else {
createTaskInCellHandler(dayNumber, hour);
setIsThisCell(true);
handleOpen(e)
}
}
const dragOverHandler = (e) => {
e.preventDefault();
}
const dropHandler = (e) => {
e.stopPropagation()
e.preventDefault();
dragTaskHandler(dayNumber, hourNumber)
}
return (<Grid
onDragOver={(e) => { dragOverHandler(e) }}
onDrop={(e) => { dropHandler(e) }}
onClick={(e) => { onClickHandler(e, dayNumber, hourNumber) }}
className='test_empty_box'
item xs={xs} sx={{
height: '40px',
backgroundColor: 'rgb(0,0,0,0)',
zIndex: '6',
cursor: copyTask ? 'pointer' : 'default'
}}>
{isThisCell ?
<DefaultTask /> : ' '}
</Grid>)
};
export default memo(EmptyBox, (prevProps, nextProps) => {
if (!prevProps.modal) return false
if (nextProps.modal) return true
});
\ No newline at end of file
......@@ -63,6 +63,11 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCopyTask, wid
e.target.style.boxShadow = 'none'
}
const onClickCopyIconHandler = (e) => {
e.stopPropagation();
setCopyTask(task)
}
return (<>
<Grid
......@@ -76,7 +81,7 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCopyTask, wid
<span style={{ maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{task.title}
</span>
<ContentCopyIcon sx={{ width: '20px', cursor: 'pointer', marginLeft: 'auto' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
<ContentCopyIcon sx={{ width: '20px', cursor: 'pointer', marginLeft: 'auto' }} onClick={(e) => { onClickCopyIconHandler(e) }}>
</ContentCopyIcon>
......
......@@ -14,7 +14,7 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
borderRight: '1px solid black',
borderBottom: week ? '1px solid black' : null,
'&:hover': {
cursor: 'pointer',
cursor: children ? null :'#d6d2d2',
background: children ? null :'#d6d2d2'
},
}
......@@ -27,12 +27,17 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
const dragOverHandler = (e) => {
e.preventDefault();
e.target.style.background = children ? null :'#d6d2d2'
}
const dragLeaveHandler = (e) => {
e.preventDefault();
e.target.style.background = null
}
const dropHandler = (e) => {
e.stopPropagation()
e.preventDefault();
console.log(dayNumber, parseInt(hours.split(':')[0]))
e.target.style.background = null
dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]), month, year)
}
......@@ -52,6 +57,7 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
sx={cellClass}
onClick={(e) => { onClickHandler(e) }}
onDragOver={(e) => { dragOverHandler(e) }}
onDragLeave={(e)=>{dragLeaveHandler(e)}}
onDrop={(e) => { dropHandler(e) }}
>
{children}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment