ywana-core8 0.0.936 → 0.0.938

package/package.json

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

package/src/incubator/planner.css

@@ -69,6 +69,10 @@
     padding: .5rem;
 }
 
+.content-cell:hover {
+    background-color: var(--hover-color);
+}
+
 .row-header {
     position: sticky;
     left: 0px;

package/src/incubator/planner.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import "./planner.css"
 
-export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, EventRenderer }) => {
+export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, EventRenderer, onSelectCell }) => {
 
   const [days, setDays] = useState([]);
   const lastDay = new Date(to);
@@ -22,6 +22,10 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
     setDays(nextDays);
   }, [from, to])
 
+  function selectCell(cell) {
+    if (onSelectCell) onSelectCell(cell)
+  } 
+
   const uniqueMonths = Array.from(
     new Set(days.map(({ month }) => month))
   );
@@ -43,7 +47,7 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
         {uniqueMonths.map((month, index) => (
           <div
             className="month-cell"
-            key={month}
+            key={`${month}-${index}`}
             style={{
               fontWeight: 'bold',
               minWidth: monthWidths[index],
@@ -83,8 +87,8 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
                   eventDate.getFullYear() === dayDate.getFullYear();
               });
               return (
-                <div className="content-cell" style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`content${index}_${month}-${day}`}>
-                    {dayEvents.map((event) => <EventRenderer key={event.id} event={event} />)}
+                <div className="content-cell" style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`content${index}_${year}-${month}-${day}`} onClick={() => selectCell({ lane:lane.id, date: dayDate })}>
+                    {dayEvents.map((event, index) => <EventRenderer key={`${event.id}-${index}`} event={event} />)}
                 </div>
               )
             })}