test
This commit is contained in:
parent
848699ba61
commit
0cb8747e09
@ -1,6 +1,5 @@
|
||||
import React, {
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
@ -113,8 +112,6 @@ const CalendarPage = () => {
|
||||
);
|
||||
const [isMobile, setIsMobile] =
|
||||
useState(false);
|
||||
const [availableHeight, setAvailableHeight] =
|
||||
useState(600);
|
||||
const [events, setEvents] =
|
||||
useState([]);
|
||||
const [loadingEvents, setLoadingEvents] =
|
||||
@ -162,7 +159,6 @@ const CalendarPage = () => {
|
||||
end_time: '',
|
||||
color: DEFAULT_EVENT_COLOR,
|
||||
});
|
||||
const calendarRef = useRef(null);
|
||||
/* SÉLECTION D'UNE PÉRIODE */
|
||||
const [selectionStart, setSelectionStart] = useState(null);
|
||||
const [selectionEnd, setSelectionEnd] = useState(null);
|
||||
@ -434,70 +430,6 @@ const CalendarPage = () => {
|
||||
useEffect(() => {
|
||||
if (isMobile) clearSelection();
|
||||
}, [isMobile]);
|
||||
/*
|
||||
* ============================================================
|
||||
* DIMENSIONS CALENDRIER
|
||||
* ============================================================
|
||||
*/
|
||||
useLayoutEffect(() => {
|
||||
if (loadingEvents) return;
|
||||
const updateDimensions = () => {
|
||||
const calendar =
|
||||
calendarRef.current;
|
||||
if (!calendar) return;
|
||||
const cardContent =
|
||||
calendar.closest(
|
||||
'[data-slot="card-content"]',
|
||||
);
|
||||
if (!cardContent) return;
|
||||
const calendarTop =
|
||||
calendar.getBoundingClientRect()
|
||||
.top;
|
||||
const contentRect =
|
||||
cardContent.getBoundingClientRect();
|
||||
const footer =
|
||||
document.querySelector('footer');
|
||||
const footerTop = footer
|
||||
? footer.getBoundingClientRect()
|
||||
.top
|
||||
: window.innerHeight;
|
||||
const bottom = Math.min(
|
||||
contentRect.bottom,
|
||||
footerTop,
|
||||
window.innerHeight,
|
||||
);
|
||||
const height =
|
||||
bottom - calendarTop - 4;
|
||||
setAvailableHeight(
|
||||
Math.max(300, height),
|
||||
);
|
||||
};
|
||||
updateDimensions();
|
||||
window.addEventListener(
|
||||
'resize',
|
||||
updateDimensions,
|
||||
);
|
||||
let observer = null;
|
||||
if (
|
||||
typeof ResizeObserver !==
|
||||
'undefined' &&
|
||||
calendarRef.current
|
||||
) {
|
||||
observer = new ResizeObserver(
|
||||
updateDimensions,
|
||||
);
|
||||
observer.observe(
|
||||
calendarRef.current,
|
||||
);
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener(
|
||||
'resize',
|
||||
updateDimensions,
|
||||
);
|
||||
observer?.disconnect();
|
||||
};
|
||||
}, [year, selectedMonth, isMobile, loadingEvents]);
|
||||
/*
|
||||
* ============================================================
|
||||
* ANNÉE
|
||||
@ -955,16 +887,6 @@ const CalendarPage = () => {
|
||||
? getDaysInMonth(selectedMonth)
|
||||
: 31;
|
||||
|
||||
const availableGridHeight = Math.max(
|
||||
availableHeight - HEADER_HEIGHT,
|
||||
rowCount * MIN_ROW_HEIGHT,
|
||||
);
|
||||
|
||||
const rowHeight = Math.max(
|
||||
MIN_ROW_HEIGHT,
|
||||
availableGridHeight / rowCount,
|
||||
);
|
||||
|
||||
const minimumGridWidth = isMobile
|
||||
? 0
|
||||
: DAY_COLUMN_WIDTH +
|
||||
@ -1464,7 +1386,6 @@ const CalendarPage = () => {
|
||||
)}
|
||||
<Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0">
|
||||
<div
|
||||
ref={calendarRef}
|
||||
className="relative min-h-0 flex-1 overflow-auto md:overflow-hidden p-0"
|
||||
style={{
|
||||
WebkitOverflowScrolling:
|
||||
@ -1474,21 +1395,16 @@ const CalendarPage = () => {
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="grid h-fit w-full min-w-0 border-l border-t border-border"
|
||||
className="grid h-full w-full min-w-0 border-l border-t border-border"
|
||||
style={{
|
||||
minHeight: `${HEADER_HEIGHT + rowCount * MIN_ROW_HEIGHT}px`,
|
||||
minWidth: isMobile
|
||||
? '100%'
|
||||
: `${minimumGridWidth}px`,
|
||||
|
||||
gridTemplateColumns,
|
||||
|
||||
gridTemplateRows: `
|
||||
${HEADER_HEIGHT}px
|
||||
repeat(
|
||||
${rowCount},
|
||||
${rowHeight}px
|
||||
)
|
||||
`,
|
||||
gridTemplateRows: `${HEADER_HEIGHT}px repeat(${rowCount}, minmax(${MIN_ROW_HEIGHT}px, 1fr))`,
|
||||
boxSizing:
|
||||
'border-box',
|
||||
}}
|
||||
@ -1560,9 +1476,6 @@ const CalendarPage = () => {
|
||||
text-xs font-medium
|
||||
text-muted-foreground
|
||||
"
|
||||
style={{
|
||||
height: `${rowHeight}px`,
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
@ -1590,9 +1503,6 @@ const CalendarPage = () => {
|
||||
border-b border-r border-border
|
||||
bg-transparent
|
||||
"
|
||||
style={{
|
||||
height: `${rowHeight}px`,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1656,7 +1566,6 @@ const CalendarPage = () => {
|
||||
`}
|
||||
data-calendar-date={cellDate}
|
||||
style={{
|
||||
height: `${rowHeight}px`,
|
||||
overflow:
|
||||
'visible',
|
||||
}}
|
||||
@ -1812,8 +1721,8 @@ const CalendarPage = () => {
|
||||
rounded-full
|
||||
"
|
||||
style={{
|
||||
width: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
|
||||
height: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
backgroundColor: eventColor,
|
||||
}}
|
||||
onPointerDown={(pointerEvent) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user