ywana-core8 0.1.11 → 0.1.12

package/dist/index.cjs

@@ -5945,6 +5945,7 @@ var Planner2 = function Planner2(_ref) {
     rowHeaderTitle = _ref.rowHeaderTitle,
     EventRenderer = _ref.EventRenderer,
     onSelectCell = _ref.onSelectCell,
+    onCellDrop = _ref.onCellDrop,
     _ref$hideEmptyRows = _ref.hideEmptyRows,
     hideEmptyRows = _ref$hideEmptyRows === void 0 ? false : _ref$hideEmptyRows;
   var _useState = React.useState([]),
@@ -5952,6 +5953,9 @@ var Planner2 = function Planner2(_ref) {
     setDays = _useState[1];
   var lastDay = new Date(to);
   var today = new Date();
+  var _useState2 = React.useState(null),
+    dragOverCell = _useState2[0],
+    setDragOverCell = _useState2[1];
   React.useEffect(function () {
     var day = new Date(from);
     var nextDays = [];
@@ -5987,11 +5991,28 @@ var Planner2 = function Planner2(_ref) {
   function selectCell(cell) {
     if (onSelectCell) onSelectCell(cell);
   }
-  function drop() {
-    //TODO
+  function onDragOver(event) {
+    event.preventDefault();
+    setDragOverCell(event.target.id);
+  }
+  function onDragLeave(event) {
+    event.preventDefault();
+    setDragOverCell(null);
+  }
+  function drop(event, _ref2) {
+    var lane = _ref2.lane,
+      date = _ref2.date;
+    event.preventDefault();
+    var data = event.dataTransfer.getData("text");
+    if (onCellDrop) onCellDrop({
+      data: data,
+      lane: lane,
+      date: date
+    });
+    setDragOverCell(null);
   }
-  var uniqueMonths = Array.from(new Set(days.map(function (_ref2) {
-    var month = _ref2.month;
+  var uniqueMonths = Array.from(new Set(days.map(function (_ref3) {
+    var month = _ref3.month;
     return month;
   })));
   var monthWidths = uniqueMonths.map(function (month) {
@@ -6038,15 +6059,15 @@ var Planner2 = function Planner2(_ref) {
       minWidth: rowHeaderWidth + "rem",
       maxWidth: rowHeaderWidth + "rem"
     }
-  }, rowHeaderTitle), days.map(function (_ref3) {
-    var day = _ref3.day,
-      weekday = _ref3.weekday,
-      month = _ref3.month,
-      _ref3$isToday = _ref3.isToday,
-      isToday = _ref3$isToday === void 0 ? false : _ref3$isToday,
-      _ref3$isWeekend = _ref3.isWeekend,
-      isWeekend = _ref3$isWeekend === void 0 ? false : _ref3$isWeekend,
-      isInCurrentWeek = _ref3.isInCurrentWeek;
+  }, rowHeaderTitle), days.map(function (_ref4) {
+    var day = _ref4.day,
+      weekday = _ref4.weekday,
+      month = _ref4.month,
+      _ref4$isToday = _ref4.isToday,
+      isToday = _ref4$isToday === void 0 ? false : _ref4$isToday,
+      _ref4$isWeekend = _ref4.isWeekend,
+      isWeekend = _ref4$isWeekend === void 0 ? false : _ref4$isWeekend,
+      isInCurrentWeek = _ref4.isInCurrentWeek;
     var todayClass = isToday ? 'today' : '';
     var weekendClass = isWeekend ? 'weekend' : '';
     var currentWeekClass = isInCurrentWeek ? 'current-week' : '';
@@ -6070,10 +6091,10 @@ var Planner2 = function Planner2(_ref) {
       if (laneEvents.length === 0) return null;
 
       // find days with event for this lane in the period
-      var daysWithEvents = days.filter(function (_ref4) {
-        var day = _ref4.day,
-          monthNum = _ref4.monthNum,
-          year = _ref4.year;
+      var daysWithEvents = days.filter(function (_ref5) {
+        var day = _ref5.day,
+          monthNum = _ref5.monthNum,
+          year = _ref5.year;
         return laneEvents.find(function (event) {
           var eventDate = new Date(event.date);
           return eventDate.getDate() === day && eventDate.getMonth() === monthNum - 1 && eventDate.getFullYear() === year;
@@ -6084,6 +6105,7 @@ var Planner2 = function Planner2(_ref) {
       if (daysWithEvents.length === 0) return null;
     }
     return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: "content-row-" + index,
       className: "content-row " + lane.className,
       style: {
         width: totalDaysWidth + "rem"
@@ -6094,21 +6116,23 @@ var Planner2 = function Planner2(_ref) {
         minWidth: rowHeaderWidth + "rem",
         maxWidth: rowHeaderWidth + "rem"
       }
-    }, lane.title), days.map(function (_ref5) {
-      var day = _ref5.day,
-        month = _ref5.month,
-        monthNum = _ref5.monthNum,
-        year = _ref5.year,
-        isWeekend = _ref5.isWeekend;
+    }, lane.title), days.map(function (_ref6) {
+      var day = _ref6.day,
+        month = _ref6.month,
+        monthNum = _ref6.monthNum,
+        year = _ref6.year,
+        isWeekend = _ref6.isWeekend;
       var dayDate = new Date(year, monthNum - 1, day);
       var dayEvents = laneEvents.filter(function (event) {
         var eventDate = new Date(event.date);
         return eventDate.getDate() === dayDate.getDate() && eventDate.getMonth() === dayDate.getMonth() && eventDate.getFullYear() === dayDate.getFullYear();
       });
       var weekendClass = isWeekend ? 'weekend' : '';
+      var dragOverStyle = dragOverCell === "cell" + index + "_" + year + "-" + month + "-" + day ? 'drag-over' : '';
       return /*#__PURE__*/React__default["default"].createElement("div", {
+        id: "cell" + index + "_" + year + "-" + month + "-" + day,
         key: "content" + index + "_" + year + "-" + month + "-" + day,
-        className: "content-cell " + weekendClass,
+        className: "content-cell " + weekendClass + " " + dragOverStyle,
         style: {
           minWidth: dayWidth,
           maxWidth: dayWidth
@@ -6119,7 +6143,14 @@ var Planner2 = function Planner2(_ref) {
             date: dayDate
           });
         },
-        onDrop: drop
+        onDragOver: onDragOver,
+        onDragLeave: onDragLeave,
+        onDrop: function onDrop(event) {
+          return drop(event, {
+            lane: lane.id,
+            date: dayDate
+          });
+        }
       }, dayEvents.map(function (event, index) {
         return /*#__PURE__*/React__default["default"].createElement(EventRenderer, {
           key: event.id + "-" + index,