makula-schedule 2.2.3 → 2.2.5

package/dist/components/DnDContext.js

@@ -62,6 +62,9 @@ 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,
@@ -126,6 +129,32 @@ var DnDContext = exports["default"] = /*#__PURE__*/_createClass(function DnDCont
         if (movingEvent) {
           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;
+            }
+          });
+          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
+            });
+          }
+        }
       },
       canDrop: function canDrop(props, monitor) {
         var schedulerData = props.schedulerData,

package/dist/components/EventItem.js

@@ -625,6 +625,20 @@ var EventItem = /*#__PURE__*/function (_Component) {
           return _this2.endResizer = _ref7;
         }
       });
+      var showOverflowArrows = config.overflowArrowsEnabled !== false;
+      var arrowStyle = {
+        lineHeight: "".concat(config.eventItemHeight, "px")
+      };
+      var showLeftArrow = showOverflowArrows && !isStart;
+      var showRightArrow = showOverflowArrows && !isEnd;
+      var leftArrow = showLeftArrow ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "event-overflow-arrow event-overflow-arrow-left",
+        style: arrowStyle
+      }, "\u2039") : null;
+      var rightArrow = showRightArrow ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "event-overflow-arrow event-overflow-arrow-right",
+        style: arrowStyle
+      }, "\u203A") : null;
       var eventItemTemplate = /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(roundCls, " event-item"),
         key: eventItem.id,
@@ -639,7 +653,7 @@ var EventItem = /*#__PURE__*/function (_Component) {
         }
       }, eventTitle));
       if (eventItemTemplateResolver !== undefined) {
-        eventItemTemplate = eventItemTemplateResolver(schedulerData, eventItem, bgColor, isStart, isEnd, 'event-item', config.eventItemHeight, undefined);
+        eventItemTemplate = eventItemTemplateResolver(schedulerData, eventItem, bgColor, isStart, isEnd, 'event-item', config.eventItemHeight, undefined, showLeftArrow, showRightArrow);
       }
       var a = /*#__PURE__*/_react["default"].createElement("a", {
         className: "timeline-event",
@@ -653,7 +667,7 @@ var EventItem = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           if (eventItemClick) eventItemClick(schedulerData, eventItem);
         }
-      }, eventItemTemplate, startResizeDiv, endResizeDiv);
+      }, leftArrow, eventItemTemplate, startResizeDiv, endResizeDiv, rightArrow);
       var getMousePositionOptionsData = function getMousePositionOptionsData() {
         var popoverOffsetX = 0;
         var mousePositionPlacement = '';

package/dist/components/ResourceEvents.js

@@ -252,6 +252,16 @@ 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
@@ -263,7 +273,8 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
     _this.state = {
       isSelecting: false,
       left: 0,
-      width: 0
+      width: 0,
+      shadowState: null
     };
     _this.supportTouch = false; // 'ontouchstart' in window;
     return _this;
@@ -306,7 +317,8 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
       var _this$state2 = this.state,
         isSelecting = _this$state2.isSelecting,
         left = _this$state2.left,
-        width = _this$state2.width;
+        width = _this$state2.width,
+        shadowState = _this$state2.shadowState;
       var cellWidth = schedulerData.getContentCellWidth();
       var cellMaxEvents = schedulerData.getCellMaxEvents();
       var rowWidth = schedulerData.getContentTableWidth();
@@ -369,6 +381,17 @@ var ResourceEvents = /*#__PURE__*/function (_Component) {
               } else {
                 _width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
               }
+              if (config.overflowArrowsEnabled !== false) {
+                if (!isStart) {
+                  var originalLeft = _left;
+                  _left = index * cellWidth;
+                  _width += originalLeft - _left;
+                }
+                if (!isEnd) {
+                  var rightEdge = (index + evt.span) * cellWidth;
+                  _width = rightEdge - _left;
+                }
+              }
               var top = marginTop + idx * config.eventItemLineHeight;
               var eventItem = /*#__PURE__*/_react["default"].createElement(_EventItem["default"], _extends({}, _this2.props, {
                 key: "".concat(evt.eventItem.id, "_").concat(headerItem.time),
@@ -418,13 +441,23 @@ 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
+        }
+      }) : null;
       var eventContainer = /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.eventContainerRef,
         className: "event-container",
         style: {
           height: resourceEvents.rowHeight
         }
-      }, selectedArea, eventList);
+      }, selectedArea, dropShadow, eventList);
       return /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
         style: {
           width: rowWidth
@@ -498,6 +531,11 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
     isOver = _useDrop2$.isOver,
     canDrop = _useDrop2$.canDrop,
     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, {

package/dist/config/scheduler.js

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

package/dist/index.d.ts

@@ -24,7 +24,9 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
     isEnd: boolean,
     mustAddCssClass: string,
     mustBeHeight: number,
-    agendaMaxEventWidth: number
+    agendaMaxEventWidth: number,
+    showLeftArrow?: boolean,
+    showRightArrow?: boolean
   ) => void;
   CustomEventPopover?: (
     schedulerData: SchedulerData<EventType>,
@@ -404,6 +406,7 @@ export interface SchedulerDataConfig {
   relativeMove?: boolean;
   defaultExpanded?: boolean;
   dragAndDropEnabled?: boolean;
+  overflowArrowsEnabled?: boolean;
   snapToGrid?: boolean;
   schedulerHeaderEventsFuncsTimeoutMs?: number;
   resourceName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makula-schedule",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "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",