makula-schedule 2.2.6 → 2.3.0

package/dist/components/DnDContext.js

@@ -62,9 +62,6 @@ var DnDContext = exports["default"] = /*#__PURE__*/_createClass(function DnDCont
         if (cellUnit !== _default.CellUnit.Hour) {
           endTime = localeDayjs(new Date(resourceEvents.headerItems[leftIndex].start)).hour(23).minute(59).second(59).format(_default.DATETIME_FORMAT);
         }
-        if (component && component.clearShadowState) {
-          component.clearShadowState();
-        }
         return {
           slotId: resourceEvents.slotId,
           slotName: resourceEvents.slotName,
@@ -130,30 +127,43 @@ var DnDContext = exports["default"] = /*#__PURE__*/_createClass(function DnDCont
           movingEvent(schedulerData, slotId, slotName, newStart, newEnd, action, type, item);
         }
 
-        // Compute and set drop shadow position
-        if (config.snapToGrid && component && component.setShadowState) {
-          var shadowStartDayjs = localeDayjs(newStart);
-          var shadowEndDayjs = localeDayjs(newEnd);
-          var shadowLeftIndex = -1;
-          var shadowSpan = 0;
-          resourceEvents.headerItems.forEach(function (header, idx) {
-            var headerStart = new Date(header.start);
-            var headerEnd = new Date(header.end);
-            if (headerEnd > shadowStartDayjs.toDate() && headerStart < shadowEndDayjs.toDate()) {
-              if (shadowLeftIndex === -1) shadowLeftIndex = idx;
-              shadowSpan += 1;
+        // Store preview data for drop indicator on the dragged item
+        if (config.dropPreviewEnabled !== false) {
+          // Find the header index that matches the adjusted newStart
+          var newStartDayjs = localeDayjs(newStart);
+          var previewLeftIndex = -1;
+          for (var i = 0; i < resourceEvents.headerItems.length; i++) {
+            var hStart = localeDayjs(resourceEvents.headerItems[i].start);
+            var hEnd = localeDayjs(resourceEvents.headerItems[i].end);
+            if (newStartDayjs >= hStart && newStartDayjs < hEnd) {
+              previewLeftIndex = i;
+              break;
             }
-          });
-          if (shadowLeftIndex >= 0 && shadowSpan > 0) {
-            var shadowLeft = shadowLeftIndex * cellWidth + (shadowLeftIndex > 0 ? 2 : 3);
-            var shadowWidth = shadowSpan * cellWidth - (shadowLeftIndex > 0 ? 5 : 6) > 0 ? shadowSpan * cellWidth - (shadowLeftIndex > 0 ? 5 : 6) : 0;
-            component.setShadowState({
-              left: shadowLeft,
-              width: shadowWidth,
-              top: 1,
-              bgColor: isEvent ? item.bgColor : config.defaultEventBgColor
-            });
           }
+          // Fallback: if newStart is before all headers, use first cell
+          if (previewLeftIndex < 0) previewLeftIndex = 0;
+          var durationMs = localeDayjs(newEnd).diff(newStartDayjs, 'ms');
+          var cellDurationMs;
+          if (cellUnit === _default.CellUnit.Hour) {
+            cellDurationMs = config.minuteStep * 60 * 1000;
+          } else {
+            cellDurationMs = 24 * 60 * 60 * 1000;
+          }
+          var cellSpan = Math.max(1, Math.ceil(durationMs / cellDurationMs));
+          var bgColor = isEvent ? item.bgColor || config.defaultEventBgColor : config.defaultEventBgColor;
+          var title = isEvent ? schedulerData.behaviors.getEventTextFunc(schedulerData, item) : '';
+
+          // Store on dragged item so collect can read it reliably
+          item._dropPreview = {
+            slotId: resourceEvents.slotId,
+            leftIndex: previewLeftIndex,
+            cellSpan: cellSpan,
+            bgColor: bgColor,
+            title: title,
+            eventItemHeight: config.eventItemHeight,
+            newStart: newStart,
+            newEnd: newEnd
+          };
         }
       },
       canDrop: function canDrop(props, monitor) {
@@ -182,9 +192,21 @@ var DnDContext = exports["default"] = /*#__PURE__*/_createClass(function DnDCont
         return spec.canDrop(props, monitor);
       },
       collect: function collect(monitor) {
+        var isOver = monitor.isOver();
+        var canDrop = monitor.canDrop();
+        var dropPreview = null;
+        if (isOver && canDrop) {
+          // Reading getClientOffset subscribes collect to offset changes during drag
+          monitor.getClientOffset();
+          var item = monitor.getItem();
+          if (item && item._dropPreview && item._dropPreview.slotId === props.resourceEvents.slotId) {
+            dropPreview = item._dropPreview;
+          }
+        }
         return {
-          isOver: monitor.isOver(),
-          canDrop: monitor.canDrop()
+          isOver: isOver,
+          canDrop: canDrop,
+          dropPreview: dropPreview
         };
       }
     };

package/dist/components/ResourceEvents.js

@@ -252,16 +252,6 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    _defineProperty(_this, "setShadowState", function (shadow) {
-      _this.setState({
-        shadowState: shadow
-      });
-    });
-    _defineProperty(_this, "clearShadowState", function () {
-      _this.setState({
-        shadowState: null
-      });
-    });
     _defineProperty(_this, "eventContainerRef", function (element) {
       _this.eventContainer = element;
       // Also set the drop ref if it exists
@@ -273,8 +263,7 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
     _this.state = {
       isSelecting: false,
       left: 0,
-      width: 0,
-      shadowState: null
+      width: 0
     };
     _this.supportTouch = false; // 'ontouchstart' in window;
     return _this;
@@ -317,8 +306,7 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
       var _this$state2 = this.state,
         isSelecting = _this$state2.isSelecting,
         left = _this$state2.left,
-        width = _this$state2.width,
-        shadowState = _this$state2.shadowState;
+        width = _this$state2.width;
       var cellWidth = schedulerData.getContentCellWidth();
       var cellMaxEvents = schedulerData.getCellMaxEvents();
       var rowWidth = schedulerData.getContentTableWidth();
@@ -441,23 +429,65 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
           }
         }
       });
-      var dropShadow = shadowState && config.snapToGrid ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "event-drop-shadow",
-        style: {
-          left: shadowState.left,
-          width: shadowState.width,
-          top: shadowState.top,
-          height: config.eventItemHeight,
-          backgroundColor: shadowState.bgColor || config.defaultEventBgColor
+      var dropPreview = this.props.dropPreview;
+      var dropPreviewElement = null;
+      if (dropPreview && config.dropPreviewEnabled !== false) {
+        var idx = dropPreview.leftIndex;
+        var previewLeft = idx * cellWidth + (idx > 0 ? 2 : 3);
+        var previewWidth = dropPreview.cellSpan * cellWidth - (idx > 0 ? 5 : 6);
+        if (cellUnit === _default2.CellUnit.Day) {
+          var previewStart = localeDayjs(dropPreview.newStart);
+          var previewEnd = localeDayjs(dropPreview.newEnd);
+          var dayStart = localeDayjs(resourceEvents.headerItems[idx].start).startOf('day');
+          var dayDurationMinutes = 1440;
+          var baseCellWidth = cellWidth - (idx > 0 ? 5 : 6);
+          if (dropPreview.cellSpan === 1) {
+            var startOffsetMinutes = previewStart.diff(dayStart, 'minute');
+            var eventDurationMinutes = previewEnd.diff(previewStart, 'minute');
+            var startPercentage = startOffsetMinutes / dayDurationMinutes;
+            var durationPercentage = eventDurationMinutes / dayDurationMinutes;
+            previewLeft = idx * cellWidth + (idx > 0 ? 2 : 3) + baseCellWidth * startPercentage;
+            previewWidth = Math.max(1, baseCellWidth * durationPercentage);
+          } else {
+            var eventStartDayStart = previewStart.startOf('day');
+            var eventEndDayEnd = previewEnd.endOf('day');
+            var totalSpanMinutes = eventEndDayEnd.diff(eventStartDayStart, 'minute');
+            var _startOffsetMinutes = previewStart.diff(eventStartDayStart, 'minute');
+            var _eventDurationMinutes2 = previewEnd.diff(previewStart, 'minute');
+            var _startPercentage2 = _startOffsetMinutes / dayDurationMinutes;
+            var _durationPercentage2 = totalSpanMinutes > 0 ? _eventDurationMinutes2 / totalSpanMinutes : 1;
+            var totalWidth = dropPreview.cellSpan * cellWidth - (idx > 0 ? 5 : 6);
+            previewLeft = idx * cellWidth + (idx > 0 ? 2 : 3) + cellWidth * _startPercentage2;
+            previewWidth = Math.max(1, totalWidth * _durationPercentage2);
+          }
         }
-      }) : null;
+        dropPreviewElement = /*#__PURE__*/_react["default"].createElement("a", {
+          className: "timeline-event drop-preview",
+          style: {
+            left: previewLeft,
+            width: Math.max(0, previewWidth),
+            top: 1
+          }
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "round-all event-item",
+          style: {
+            height: dropPreview.eventItemHeight,
+            backgroundColor: dropPreview.bgColor
+          }
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          style: {
+            marginLeft: '10px',
+            lineHeight: "".concat(dropPreview.eventItemHeight, "px")
+          }
+        }, dropPreview.title)));
+      }
       var eventContainer = /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.eventContainerRef,
         className: "event-container",
         style: {
           height: resourceEvents.rowHeight
         }
-      }, selectedArea, dropShadow, eventList);
+      }, selectedArea, dropPreviewElement, eventList);
       return /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
         style: {
           width: rowWidth
@@ -489,7 +519,7 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
   var schedulerData = props.schedulerData,
     dndContext = props.dndContext;
   var config = schedulerData.config;
-  var componentRef = (0, _react.useRef)(null);
+  var componentRef = _react["default"].useRef(null);
 
   // Always call useDrop unconditionally (Rules of Hooks)
   // Disable functionality when drag and drop is not enabled
@@ -501,7 +531,8 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
           collect: function collect() {
             return {
               isOver: false,
-              canDrop: false
+              canDrop: false,
+              dropPreview: null
             };
           }
         };
@@ -519,9 +550,21 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
           return spec.canDrop(props, monitor);
         },
         collect: function collect(monitor) {
+          var over = monitor.isOver();
+          var drop = monitor.canDrop();
+          var preview = null;
+          if (over && drop) {
+            // Reading getClientOffset subscribes collect to offset changes during drag
+            monitor.getClientOffset();
+            var item = monitor.getItem();
+            if (item && item._dropPreview && item._dropPreview.slotId === props.resourceEvents.slotId) {
+              preview = item._dropPreview;
+            }
+          }
           return {
-            isOver: monitor.isOver(),
-            canDrop: monitor.canDrop()
+            isOver: over,
+            canDrop: drop,
+            dropPreview: preview
           };
         }
       };
@@ -530,18 +573,15 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
     _useDrop2$ = _useDrop2[0],
     isOver = _useDrop2$.isOver,
     canDrop = _useDrop2$.canDrop,
+    dropPreview = _useDrop2$.dropPreview,
     dropRef = _useDrop2[1];
-  (0, _react.useEffect)(function () {
-    if (!isOver && componentRef.current) {
-      componentRef.current.clearShadowState();
-    }
-  }, [isOver]);
   return /*#__PURE__*/_react["default"].createElement(ResourceEvents, _extends({
     ref: componentRef
   }, props, {
     dropRef: dropRef,
     isOver: isOver,
-    canDrop: canDrop
+    canDrop: canDrop,
+    dropPreview: dropPreview
   }));
 };
 ResourceEventsWithDnD.displayName = 'ResourceEventsWithDnD';

package/dist/config/scheduler.js

@@ -80,8 +80,7 @@ var _default = exports["default"] = {
   relativeMove: true,
   defaultExpanded: true,
   dragAndDropEnabled: true,
-  overflowArrowsEnabled: true,
-  snapToGrid: false,
+  dropPreviewEnabled: true,
   schedulerHeaderEventsFuncsTimeoutMs: 100,
   resourceName: 'Resource Name',
   taskName: 'Task Name',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makula-schedule",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "description": "React Big Schedule  is a powerful and intuitive scheduler and resource planning solution built with React. Seamlessly integrate this modern browser-compatible component into your applications to effectively manage time, appointments, and resources. With drag-and-drop functionality, interactive UI, and granular views, react-big-schedule empowers users to effortlessly schedule and allocate resources with precision. Enhance productivity and streamline your workflow with this React-based solution, designed to optimize time management and simplify calendar-based operations. Perfect for applications requiring advanced scheduling capabilities, react-big-schedule offers a seamless and intuitive experience for managing appointments, resource allocation, and time slots. Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning. It is the updated version of react-big-scheduler",
   "keywords": [
     "react-big-schedule",