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

package/cjs/components/WeekView/WeekView.cjs

@@ -6,7 +6,10 @@ var React = require('react');
 var dayjs = require('dayjs');
 var core = require('@mantine/core');
 var dates = require('@mantine/dates');
+var hooks = require('@mantine/hooks');
+var useAutoScrollOnDrag = require('../../hooks/use-auto-scroll-on-drag.cjs');
 var useDragDropHandlers = require('../../hooks/use-drag-drop-handlers.cjs');
+var useEventResize = require('../../hooks/use-event-resize.cjs');
 var useSlotDragSelect = require('../../hooks/use-slot-drag-select.cjs');
 var labels = require('../../labels.cjs');
 var formatDate = require('../../utils/format-date/format-date.cjs');
@@ -19,6 +22,7 @@ var previousWeek = require('../../utils/previous-week/previous-week.cjs');
 var isAllDayEvent = require('../../utils/is-all-day-event/is-all-day-event.cjs');
 var calculateDropTime = require('../../utils/calculate-drop-time/calculate-drop-time.cjs');
 var getBusinessHoursMod = require('../../utils/get-business-hours-mod/get-business-hours-mod.cjs');
+var expandRecurringEvents = require('../../utils/expand-recurring-events/expand-recurring-events.cjs');
 var CurrentTimeIndicator = require('../CurrentTimeIndicator/CurrentTimeIndicator.cjs');
 var DragContext = require('../DragContext/DragContext.cjs');
 var ScheduleEvent = require('../ScheduleEvent/ScheduleEvent.cjs');
@@ -26,8 +30,8 @@ var ScheduleHeaderBase = require('../ScheduleHeader/ScheduleHeaderBase.cjs');
 var getWeekLabel = require('./get-week-label/get-week-label.cjs');
 var getWeekViewEvents = require('./get-week-view-events/get-week-view-events.cjs');
 var handleWeekViewKeyDown = require('./handle-week-view-key-down.cjs');
-var WeekView_module = require('./WeekView.module.css.cjs');
 var WeekViewDay = require('./WeekViewDay.cjs');
+var WeekView_module = require('./WeekView.module.css.cjs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -51,6 +55,7 @@ const defaultProps = {
   businessHours: ["09:00:00", "17:00:00"],
   withEventsDragAndDrop: false,
   withDragSlotSelect: false,
+  withEventResize: false,
   mode: "default"
 };
 const varsResolver = core.createVarsResolver(
@@ -117,7 +122,13 @@ const WeekView = core.factory((_props) => {
     withDragSlotSelect,
     onSlotDragEnd,
     mode,
+    startScrollTime,
     renderWeekLabel,
+    onExternalEventDrop,
+    withEventResize,
+    onEventResize,
+    canResizeEvent,
+    recurrenceExpansionLimit,
     ...others
   } = props;
   const getStyles = core.useStyles({
@@ -146,9 +157,34 @@ const WeekView = core.factory((_props) => {
     __staticSelector,
     radius
   };
+  const theme = core.useMantineTheme();
   const [scrolled, setScrolled] = React.useState(false);
   const ctx = dates.useDatesContext();
   const slots = getDayTimeIntervals.getDayTimeIntervals({ startTime, endTime, intervalMinutes });
+  const viewportRef = React.useRef(null);
+  useAutoScrollOnDrag.useAutoScrollOnDrag({
+    viewportRef,
+    enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
+  });
+  const handleExternalDrop = React.useCallback(
+    (e, target) => {
+      if (!onExternalEventDrop) {
+        return;
+      }
+      const slotDate = dayjs__default.default(target.day).format("YYYY-MM-DD");
+      onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[target.slotIndex].startTime}`);
+    },
+    [onExternalEventDrop, slots]
+  );
+  const handleExternalAllDayDrop = React.useCallback(
+    (e, day) => {
+      if (!onExternalEventDrop) {
+        return;
+      }
+      onExternalEventDrop(e.dataTransfer, `${dayjs__default.default(day).format("YYYY-MM-DD")} 00:00:00`);
+    },
+    [onExternalEventDrop]
+  );
   const dragDrop = useDragDropHandlers.useDragDropHandlers({
     enabled: withEventsDragAndDrop,
     mode,
@@ -164,7 +200,8 @@ const WeekView = core.factory((_props) => {
         targetSlotTime: slotTime,
         intervalMinutes
       });
-    }
+    },
+    onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
   });
   const allDayDragDrop = useDragDropHandlers.useDragDropHandlers({
     enabled: withEventsDragAndDrop,
@@ -177,7 +214,8 @@ const WeekView = core.factory((_props) => {
       const eventDuration = dayjs__default.default(draggedEvent.end).diff(dayjs__default.default(draggedEvent.start), "millisecond");
       const newStart = dayjs__default.default(targetDay).startOf("day");
       return { start: newStart.toDate(), end: newStart.add(eventDuration, "millisecond").toDate() };
-    }
+    },
+    onExternalDrop: onExternalEventDrop ? handleExternalAllDayDrop : void 0
   });
   const slotDragSelect = useSlotDragSelect.useSlotDragSelect({
     enabled: withDragSlotSelect && mode !== "static",
@@ -192,6 +230,16 @@ const WeekView = core.factory((_props) => {
       );
     }
   });
+  const eventResize = useEventResize.useEventResize({
+    enabled: withEventResize,
+    mode,
+    startTime,
+    endTime,
+    intervalMinutes,
+    onEventResize,
+    canResizeEvent
+  });
+  const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
   const handleTimeSlotClick = (day, slotTime, e) => {
     if (!onTimeSlotClick) {
       return;
@@ -204,9 +252,21 @@ const WeekView = core.factory((_props) => {
     const slot = slots[slotIndex];
     onTimeSlotClick(`${slotDate} ${slot.startTime}`, `${slotDate} ${slot.endTime}`, e);
   };
+  const weekdays = getWeekDays.getWeekDays({
+    week: date,
+    withWeekendDays,
+    weekendDays: ctx.getWeekendDays(weekendDays),
+    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+  });
+  const expandedEvents = expandRecurringEvents.expandRecurringEvents({
+    events,
+    rangeStart: dayjs__default.default(weekdays[0]).startOf("day").toDate(),
+    rangeEnd: dayjs__default.default(weekdays[weekdays.length - 1]).endOf("day").toDate(),
+    expansionLimit: recurrenceExpansionLimit
+  });
   const weekEvents = getWeekViewEvents.getWeekViewEvents({
     date,
-    events,
+    events: expandedEvents,
     startTime,
     endTime,
     firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
@@ -237,16 +297,32 @@ const WeekView = core.factory((_props) => {
       label
     );
   });
-  const weekdays = getWeekDays.getWeekDays({
-    week: date,
-    withWeekendDays,
-    weekendDays: ctx.getWeekendDays(weekendDays),
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  });
   const slotsRef = React.useRef([]);
   const allDaySlotsRef = React.useRef([]);
   const weekdaysRef = React.useRef([]);
+  const daySlotsContainersRef = React.useRef([]);
+  const mergedViewportRef = hooks.useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
   const firstSlotIndex = { dayIndex: 0, slotIndex: 0 };
+  hooks.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 = React.useCallback((event, dayIndex) => {
     const daySlots = slotsRef.current[dayIndex] ?? [];
     const slotIndex = daySlots.findIndex((slotNode) => {
@@ -331,9 +407,42 @@ const WeekView = core.factory((_props) => {
     /* @__PURE__ */ React.createElement("div", { ...getStyles("weekViewDayNumber"), key: "date" }, dayjs__default.default(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__ */ jsxRuntime.jsx(core.Box, { ...bgEventProps });
+    });
     const dayEvents = (weekEvents.regularEvents[day] || []).map((event) => {
       const eventIsAllDay = isAllDayEvent.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__ */ jsxRuntime.jsx(
         ScheduleEvent.ScheduleEvent,
         {
@@ -341,6 +450,22 @@ const WeekView = core.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__default.default(day).format("YYYY-MM-DD"),
+                e
+              );
+            }
+          } : void 0,
           renderEventBody,
           renderEvent,
           radius,
@@ -348,16 +473,16 @@ const WeekView = core.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__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       WeekViewDay.WeekViewDay,
       {
         day,
@@ -368,7 +493,7 @@ const WeekView = core.factory((_props) => {
         highlightBusinessHours,
         businessHours,
         labels: labels$1,
-        withEventsDragAndDrop,
+        withEventsDragAndDrop: withDragHandlers,
         mode,
         slotsRef,
         firstSlotIndex,
@@ -394,7 +519,13 @@ const WeekView = core.factory((_props) => {
         withDragSlotSelect,
         onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
         isSlotDragSelected: slotDragSelect.isSlotSelected,
-        children: dayEvents
+        daySlotsContainerRef: (node) => {
+          daySlotsContainersRef.current[dayIndex] = node;
+        },
+        children: [
+          backgroundEventNodes,
+          dayEvents
+        ]
       },
       day
     );
@@ -409,9 +540,9 @@ const WeekView = core.factory((_props) => {
       tabIndex: dayIndex === 0 ? 0 : -1,
       onKeyDown: (event) => handleAllDaySlotKeyDown(event, dayIndex),
       onClick: mode === "static" || !onAllDaySlotClick ? void 0 : (e) => onAllDaySlotClick(dayjs__default.default(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) }
     },
@@ -444,6 +575,42 @@ const WeekView = core.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__ */ jsxRuntime.jsx(core.Box, { ...bgEventProps });
+    });
+  });
   const extraRows = Math.max(...weekEvents.allDayEvents.map((event) => event.position.row), 1) - 1;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(
     core.Box,
@@ -502,6 +669,7 @@ const WeekView = core.factory((_props) => {
                   scrollAreaProps?.onScrollPositionChange?.(position);
                   setScrolled(position.y !== 0);
                 },
+                viewportRef: mergedViewportRef,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { ...getStyles("weekViewHeader"), mod: { scrolled }, children: [
                     /* @__PURE__ */ React.createElement("div", { ...getStyles("weekViewCorner"), key: "corner" }, withWeekNumber && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -513,6 +681,7 @@ const WeekView = core.factory((_props) => {
                   withAllDaySlots && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("weekViewAllDaySlots"), children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("weekViewAllDaySlotsLabel"), children: labels.getLabel("allDay", labels$1) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("weekViewAllDaySlotsList"), children: [
+                      allDayBackgroundEventNodes,
                       /* @__PURE__ */ jsxRuntime.jsx(
                         core.Box,
                         {