@mantine/schedule 9.0.0-alpha.3 → 9.0.0-alpha.5

package/esm/components/WeekView/WeekView.mjs

@@ -1,10 +1,13 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, createElement, useRef, useCallback, useMemo } from 'react';
+import { useState, useRef, useCallback, createElement, useMemo } from 'react';
 import dayjs from 'dayjs';
-import { createVarsResolver, rem, getRadius, factory, useProps, useStyles, useResolvedStylesApi, Box, UnstyledButton, ScrollArea } from '@mantine/core';
+import { createVarsResolver, rem, getRadius, factory, useProps, useStyles, useResolvedStylesApi, useMantineTheme, Box, UnstyledButton, ScrollArea } from '@mantine/core';
 import { useDatesContext } from '@mantine/dates';
+import { useMergedRef, useIsomorphicEffect } from '@mantine/hooks';
+import { useAutoScrollOnDrag } from '../../hooks/use-auto-scroll-on-drag.mjs';
 import { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers.mjs';
+import { useEventResize } from '../../hooks/use-event-resize.mjs';
 import { useSlotDragSelect } from '../../hooks/use-slot-drag-select.mjs';
 import { getLabel } from '../../labels.mjs';
 import { formatDate } from '../../utils/format-date/format-date.mjs';
@@ -17,6 +20,7 @@ import { previousWeek } from '../../utils/previous-week/previous-week.mjs';
 import { isAllDayEvent } from '../../utils/is-all-day-event/is-all-day-event.mjs';
 import { calculateDropTime } from '../../utils/calculate-drop-time/calculate-drop-time.mjs';
 import { getBusinessHoursMod } from '../../utils/get-business-hours-mod/get-business-hours-mod.mjs';
+import { expandRecurringEvents } from '../../utils/expand-recurring-events/expand-recurring-events.mjs';
 import { CurrentTimeIndicator } from '../CurrentTimeIndicator/CurrentTimeIndicator.mjs';
 import { DragContext } from '../DragContext/DragContext.mjs';
 import { ScheduleEvent } from '../ScheduleEvent/ScheduleEvent.mjs';
@@ -24,8 +28,8 @@ import { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase.mjs';
 import { getWeekLabel } from './get-week-label/get-week-label.mjs';
 import { getWeekViewEvents } from './get-week-view-events/get-week-view-events.mjs';
 import { handleWeekViewKeyDown } from './handle-week-view-key-down.mjs';
-import classes from './WeekView.module.css.mjs';
 import { WeekViewDay } from './WeekViewDay.mjs';
+import classes from './WeekView.module.css.mjs';
 
 const defaultProps = {
   __staticSelector: "WeekView",
@@ -45,6 +49,7 @@ const defaultProps = {
   businessHours: ["09:00:00", "17:00:00"],
   withEventsDragAndDrop: false,
   withDragSlotSelect: false,
+  withEventResize: false,
   mode: "default"
 };
 const varsResolver = createVarsResolver(
@@ -111,7 +116,13 @@ const WeekView = factory((_props) => {
     withDragSlotSelect,
     onSlotDragEnd,
     mode,
+    startScrollTime,
     renderWeekLabel,
+    onExternalEventDrop,
+    withEventResize,
+    onEventResize,
+    canResizeEvent,
+    recurrenceExpansionLimit,
     ...others
   } = props;
   const getStyles = useStyles({
@@ -140,9 +151,34 @@ const WeekView = factory((_props) => {
     __staticSelector,
     radius
   };
+  const theme = useMantineTheme();
   const [scrolled, setScrolled] = useState(false);
   const ctx = useDatesContext();
   const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });
+  const viewportRef = useRef(null);
+  useAutoScrollOnDrag({
+    viewportRef,
+    enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
+  });
+  const handleExternalDrop = useCallback(
+    (e, target) => {
+      if (!onExternalEventDrop) {
+        return;
+      }
+      const slotDate = dayjs(target.day).format("YYYY-MM-DD");
+      onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[target.slotIndex].startTime}`);
+    },
+    [onExternalEventDrop, slots]
+  );
+  const handleExternalAllDayDrop = useCallback(
+    (e, day) => {
+      if (!onExternalEventDrop) {
+        return;
+      }
+      onExternalEventDrop(e.dataTransfer, `${dayjs(day).format("YYYY-MM-DD")} 00:00:00`);
+    },
+    [onExternalEventDrop]
+  );
   const dragDrop = useDragDropHandlers({
     enabled: withEventsDragAndDrop,
     mode,
@@ -158,7 +194,8 @@ const WeekView = factory((_props) => {
         targetSlotTime: slotTime,
         intervalMinutes
       });
-    }
+    },
+    onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
   });
   const allDayDragDrop = useDragDropHandlers({
     enabled: withEventsDragAndDrop,
@@ -171,7 +208,8 @@ const WeekView = factory((_props) => {
       const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), "millisecond");
       const newStart = dayjs(targetDay).startOf("day");
       return { start: newStart.toDate(), end: newStart.add(eventDuration, "millisecond").toDate() };
-    }
+    },
+    onExternalDrop: onExternalEventDrop ? handleExternalAllDayDrop : void 0
   });
   const slotDragSelect = useSlotDragSelect({
     enabled: withDragSlotSelect && mode !== "static",
@@ -186,6 +224,16 @@ const WeekView = factory((_props) => {
       );
     }
   });
+  const eventResize = useEventResize({
+    enabled: withEventResize,
+    mode,
+    startTime,
+    endTime,
+    intervalMinutes,
+    onEventResize,
+    canResizeEvent
+  });
+  const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
   const handleTimeSlotClick = (day, slotTime, e) => {
     if (!onTimeSlotClick) {
       return;
@@ -198,9 +246,21 @@ const WeekView = factory((_props) => {
     const slot = slots[slotIndex];
     onTimeSlotClick(`${slotDate} ${slot.startTime}`, `${slotDate} ${slot.endTime}`, e);
   };
+  const weekdays = getWeekDays({
+    week: date,
+    withWeekendDays,
+    weekendDays: ctx.getWeekendDays(weekendDays),
+    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+  });
+  const expandedEvents = expandRecurringEvents({
+    events,
+    rangeStart: dayjs(weekdays[0]).startOf("day").toDate(),
+    rangeEnd: dayjs(weekdays[weekdays.length - 1]).endOf("day").toDate(),
+    expansionLimit: recurrenceExpansionLimit
+  });
   const weekEvents = getWeekViewEvents({
     date,
-    events,
+    events: expandedEvents,
     startTime,
     endTime,
     firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
@@ -231,16 +291,32 @@ const WeekView = factory((_props) => {
       label
     );
   });
-  const weekdays = getWeekDays({
-    week: date,
-    withWeekendDays,
-    weekendDays: ctx.getWeekendDays(weekendDays),
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  });
   const slotsRef = useRef([]);
   const allDaySlotsRef = useRef([]);
   const weekdaysRef = useRef([]);
+  const daySlotsContainersRef = useRef([]);
+  const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
   const firstSlotIndex = { dayIndex: 0, slotIndex: 0 };
+  useIsomorphicEffect(() => {
+    if (!startScrollTime || !viewportRef.current) {
+      return;
+    }
+    const firstDaySlots = slotsRef.current[0];
+    if (!firstDaySlots || firstDaySlots.length === 0) {
+      return;
+    }
+    const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);
+    if (targetIndex < 0) {
+      return;
+    }
+    const targetSlot = firstDaySlots[targetIndex];
+    if (!targetSlot) {
+      return;
+    }
+    const slotRect = targetSlot.getBoundingClientRect();
+    const viewportRect = viewportRef.current.getBoundingClientRect();
+    viewportRef.current.scrollTo({ left: 0, top: slotRect.top - viewportRect.top });
+  }, []);
   const getSlotIndexFromDragPoint = useCallback((event, dayIndex) => {
     const daySlots = slotsRef.current[dayIndex] ?? [];
     const slotIndex = daySlots.findIndex((slotNode) => {
@@ -325,9 +401,42 @@ const WeekView = factory((_props) => {
     /* @__PURE__ */ createElement("div", { ...getStyles("weekViewDayNumber"), key: "date" }, dayjs(day).date())
   ));
   const days = weekdays.map((day, dayIndex) => {
+    const allBgEvents = weekEvents.backgroundEvents[day] || [];
+    const backgroundEventNodes = allBgEvents.filter((event) => !event.position.allDay).map((event) => {
+      const colors = theme.variantColorResolver({
+        color: event.color || theme.primaryColor,
+        theme,
+        variant: "light",
+        autoContrast: true
+      });
+      const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
+      const bgEventProps = {
+        key: `bg-${event.id}`,
+        ...getStyles("weekViewBackgroundEvent", {
+          style: {
+            top: `${event.position.top}%`,
+            height: `${event.position.height}%`,
+            width: "100%"
+          }
+        }),
+        __vars: {
+          "--bg-event-bg": colors.background,
+          "--bg-event-color": colors.color
+        },
+        children: bgEventBody
+      };
+      if (typeof renderEvent === "function") {
+        return renderEvent(event, bgEventProps);
+      }
+      return /* @__PURE__ */ jsx(Box, { ...bgEventProps });
+    });
     const dayEvents = (weekEvents.regularEvents[day] || []).map((event) => {
       const eventIsAllDay = isAllDayEvent({ event, date: day });
       const isDraggable = !eventIsAllDay && dragDrop.isDraggableEvent(event);
+      const isResizable = !eventIsAllDay && eventResize.isResizableEvent(event);
+      const resizePosition = eventResize.getResizePosition(event.id);
+      const eventTop = resizePosition ? resizePosition.top : event.position.top;
+      const eventHeight = resizePosition ? resizePosition.height : event.position.height;
       return /* @__PURE__ */ jsx(
         ScheduleEvent,
         {
@@ -335,6 +444,22 @@ const WeekView = factory((_props) => {
           autoSize: true,
           hanging: event.position.hanging,
           draggable: isDraggable,
+          withResize: isResizable,
+          isResizing: resizePosition !== null,
+          onResizeStart: isResizable ? (edge, e) => {
+            const container = daySlotsContainersRef.current[dayIndex];
+            if (container) {
+              eventResize.handleResizeStart(
+                event,
+                edge,
+                container,
+                event.position.top,
+                event.position.height,
+                dayjs(day).format("YYYY-MM-DD"),
+                e
+              );
+            }
+          } : void 0,
           renderEventBody,
           renderEvent,
           radius,
@@ -342,16 +467,16 @@ const WeekView = factory((_props) => {
           onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
           style: {
             position: "absolute",
-            top: `calc(${event.position.top}% + 1px)`,
+            top: `calc(${eventTop}% + 1px)`,
             left: `${event.position.offset}%`,
             width: `${event.position.width}%`,
-            height: `calc(${event.position.height}% - 1px)`
+            height: `calc(${eventHeight}% - 1px)`
           }
         },
         event.id
       );
     });
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       WeekViewDay,
       {
         day,
@@ -362,7 +487,7 @@ const WeekView = factory((_props) => {
         highlightBusinessHours,
         businessHours,
         labels,
-        withEventsDragAndDrop,
+        withEventsDragAndDrop: withDragHandlers,
         mode,
         slotsRef,
         firstSlotIndex,
@@ -388,7 +513,13 @@ const WeekView = factory((_props) => {
         withDragSlotSelect,
         onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
         isSlotDragSelected: slotDragSelect.isSlotSelected,
-        children: dayEvents
+        daySlotsContainerRef: (node) => {
+          daySlotsContainersRef.current[dayIndex] = node;
+        },
+        children: [
+          backgroundEventNodes,
+          dayEvents
+        ]
       },
       day
     );
@@ -403,9 +534,9 @@ const WeekView = factory((_props) => {
       tabIndex: dayIndex === 0 ? 0 : -1,
       onKeyDown: (event) => handleAllDaySlotKeyDown(event, dayIndex),
       onClick: mode === "static" || !onAllDaySlotClick ? void 0 : (e) => onAllDaySlotClick(dayjs(day).format("YYYY-MM-DD"), e),
-      onDragOver: withEventsDragAndDrop && mode !== "static" ? (e) => allDayDragDrop.handleDragOver(e, day) : void 0,
-      onDragLeave: withEventsDragAndDrop && mode !== "static" ? allDayDragDrop.handleDragLeave : void 0,
-      onDrop: withEventsDragAndDrop && mode !== "static" ? (e) => allDayDragDrop.handleDrop(e, day) : void 0,
+      onDragOver: withDragHandlers ? (e) => allDayDragDrop.handleDragOver(e, day) : void 0,
+      onDragLeave: withDragHandlers ? allDayDragDrop.handleDragLeave : void 0,
+      onDrop: withDragHandlers ? (e) => allDayDragDrop.handleDrop(e, day) : void 0,
       ...getStyles("weekViewDaySlot"),
       mod: { "drop-target": allDayDragDrop.isDropTarget(day) }
     },
@@ -438,6 +569,42 @@ const WeekView = factory((_props) => {
     },
     event.id
   ));
+  const allDayBackgroundEventNodes = weekdays.flatMap((day, dayIndex) => {
+    const allDayBgEvents = (weekEvents.backgroundEvents[day] || []).filter(
+      (event) => event.position.allDay
+    );
+    const dayWidth = 100 / weekdays.length;
+    const dayOffset = dayIndex * dayWidth;
+    return allDayBgEvents.map((event) => {
+      const colors = theme.variantColorResolver({
+        color: event.color || theme.primaryColor,
+        theme,
+        variant: "light",
+        autoContrast: true
+      });
+      const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
+      const bgEventProps = {
+        key: `bg-allday-${event.id}-${day}`,
+        ...getStyles("weekViewBackgroundEvent", {
+          style: {
+            top: 0,
+            height: "100%",
+            left: `${dayOffset}%`,
+            width: `${dayWidth}%`
+          }
+        }),
+        __vars: {
+          "--bg-event-bg": colors.background,
+          "--bg-event-color": colors.color
+        },
+        children: bgEventBody
+      };
+      if (typeof renderEvent === "function") {
+        return renderEvent(event, bgEventProps);
+      }
+      return /* @__PURE__ */ jsx(Box, { ...bgEventProps });
+    });
+  });
   const extraRows = Math.max(...weekEvents.allDayEvents.map((event) => event.position.row), 1) - 1;
   const content = /* @__PURE__ */ jsxs(
     Box,
@@ -496,6 +663,7 @@ const WeekView = factory((_props) => {
                   scrollAreaProps?.onScrollPositionChange?.(position);
                   setScrolled(position.y !== 0);
                 },
+                viewportRef: mergedViewportRef,
                 children: [
                   /* @__PURE__ */ jsxs(Box, { ...getStyles("weekViewHeader"), mod: { scrolled }, children: [
                     /* @__PURE__ */ createElement("div", { ...getStyles("weekViewCorner"), key: "corner" }, withWeekNumber && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -507,6 +675,7 @@ const WeekView = factory((_props) => {
                   withAllDaySlots && /* @__PURE__ */ jsxs("div", { ...getStyles("weekViewAllDaySlots"), children: [
                     /* @__PURE__ */ jsx("div", { ...getStyles("weekViewAllDaySlotsLabel"), children: getLabel("allDay", labels) }),
                     /* @__PURE__ */ jsxs("div", { ...getStyles("weekViewAllDaySlotsList"), children: [
+                      allDayBackgroundEventNodes,
                       /* @__PURE__ */ jsx(
                         Box,
                         {