ywana-core8 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/incubator/planner.css

@@ -92,6 +92,11 @@
     background-color: var(--secondary-color-lighter);
 }
 
+.content-cell.drag-over {
+    background-color: var(--hover-color);
+    border: dashed 2px var(--accent-color);
+}
+
 .row-header {
     position: sticky;
     left: 0px;

package/src/incubator/planner.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import "./planner.css"
 
-export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, rowHeaderTitle, EventRenderer, onSelectCell, hideEmptyRows=false}) => {
+export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, rowHeaderTitle, EventRenderer, onSelectCell, onCellDrop, hideEmptyRows=false}) => {
 
   const [days, setDays] = useState([]);
   const lastDay = new Date(to);
   const today = new Date();
+  const [dragOverCell, setDragOverCell] = useState(null);
 
   useEffect(() => {
     const day = new Date(from);
@@ -41,10 +42,24 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
     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, { lane, date }) {
+    event.preventDefault();
+    const data = event.dataTransfer.getData("text");
+    if (onCellDrop) onCellDrop({ data, lane, date });
+    setDragOverCell(null);
+  }
+
+
   const uniqueMonths = Array.from(
     new Set(days.map(({ month }) => month))
   );
@@ -119,7 +134,9 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
         }
 
         return (
-          <div className={`content-row ${lane.className}`} style={{ width: `${totalDaysWidth}rem` }}>
+          <div 
+            key={`content-row-${index}`}
+            className={`content-row ${lane.className}`} style={{ width: `${totalDaysWidth}rem` }}>
             <div className="row-header" style={{ minWidth: `${rowHeaderWidth}rem`, maxWidth: `${rowHeaderWidth}rem` }} >
               {lane.title}
             </div>
@@ -132,12 +149,15 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
                   eventDate.getFullYear() === dayDate.getFullYear();
               });
               const weekendClass = isWeekend ? 'weekend' : '';
+              const dragOverStyle = dragOverCell === `cell${index}_${year}-${month}-${day}` ? 'drag-over' : '';
               return (
                 <div
+                  id={`cell${index}_${year}-${month}-${day}`}
                   key={`content${index}_${year}-${month}-${day}`}
-                  className={`content-cell ${weekendClass}`} style={{ minWidth: dayWidth, maxWidth: dayWidth }}
+                  className={`content-cell ${weekendClass} ${dragOverStyle}`} style={{ minWidth: dayWidth, maxWidth: dayWidth }}
                   onClick={() => selectCell({ lane: lane.id, date: dayDate })}
-                  onDrop={drop}
+                  onDragOver={onDragOver} onDragLeave={onDragLeave}
+                  onDrop={(event) => drop(event, { lane: lane.id, date: dayDate })}
                 >
                   {dayEvents.map((event, index) => <EventRenderer key={`${event.id}-${index}`} event={event} />)}
                 </div>
@@ -155,7 +175,7 @@ const EventCard = (props) => {
   const { id, title, color } = event
 
   function drag(ev) {
-    ev.dataTransfer.setData("text", id);
+    ev.dataTransfer.setData("text", title);
   }
 
   let style = { backgroundColor: event.color, color: "white" }
@@ -181,23 +201,19 @@ const CalendarTest = (props) => {
 
   const events = [
     { id: "1", lane: "1", date: "2024-01-04", color: "yellow", title: "Event One" },
-    { id: "1", lane: "1", date: "2024-01-04", color: "yellow", title: "Event One" },
-    { id: "1", lane: "1", date: "2024-01-05", color: "yellow", title: "Event One" },
-    { id: "2", lane: "1", date: "2024-01-05", color: "red", title: "Event One" },
-    { id: "3", lane: "1", date: "2024-01-05", color: "blue", title: "Event One" },
-    { id: "4", lane: "1", date: "2024-01-05", color: "red", title: "Event One" },
-    { id: "5", lane: "2", date: "2024-01-04", color: "yellow", title: "Event One" },
-    { id: "6", lane: "2", date: "2024-01-05", color: "red", title: "Event One" },
-    { id: "7", lane: "2", date: "2024-01-06", color: "blue", title: "Event One" },
-    { id: "8", lane: "2", date: "2024-01-07", color: "red", title: "Event One" },
-    { id: "9", lane: "3", date: "2024-01-04", color: "yellow", title: "Event One" },
-    { id: "10", lane: "3", date: "2024-01-05", color: "red", title: "Event One" },
-    { id: "11", lane: "3", date: "2024-01-06", color: "blue", title: "Event One" },
+    { id: "2", lane: "1", date: "2024-01-05", color: "green", title: "Event Two" },
+    { id: "3", lane: "2", date: "2024-01-06", color: "blue", title: "Event Three" },
+    { id: "4", lane: "2", date: "2024-01-07", color: "red", title: "Event Four" },
+    { id: "5", lane: "3", date: "2024-01-08", color: "purple", title: "Event Five" },
   ]
 
+  function onDrop({ data, lane, date }) {
+    console.log(`Dropped ${data} on lane ${lane} date ${date}`);
+  }
+
   return (
     <>
-      <Planner2 from="2024-01-01" to="2024-02-01" lanes={lanes} events={events} EventRenderer={EventCard} hideEmptyRows />
+      <Planner2 from="2024-01-01" to="2024-02-01" lanes={lanes} events={events} EventRenderer={EventCard} hideEmptyRows onCellDrop={onDrop} />
     </>
   )
 }