ywana-core8 0.1.11 → 0.1.12

package/dist/index.umd.js

@@ -5938,6 +5938,7 @@
         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([]),
@@ -5945,6 +5946,9 @@
         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 = [];
@@ -5980,11 +5984,28 @@
       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) {
@@ -6031,15 +6052,15 @@
           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' : '';
@@ -6063,10 +6084,10 @@
           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;
@@ -6077,6 +6098,7 @@
           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"
@@ -6087,21 +6109,23 @@
             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
@@ -6112,7 +6136,14 @@
                 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,