ywana-core8 0.0.504 → 0.0.507

package/package.json

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

package/src/widgets/planner/Planner.js

@@ -15,17 +15,17 @@ const DATE_RANGE = [
 /**
  * Planner
  */
-export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent, onChange }) => {
+export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent, config = { range: "year", from: "2022-01-01", to: "2022-12-30"}, onChange }) => {
 
-    const [dateRange, setDateRange] = useState("year");
-    const [from, setFrom] = useState("2022-01-01");
-    const [to, setTo] = useState("2022-12-30");
+    const [dateRange, setDateRange] = useState(config.range);
+    const [from, setFrom] = useState(config.from);
+    const [to, setTo] = useState(config.to);
 
     useEffect(() => {
         const element = document.getElementById(focusEvent)
         if (element) element.scrollIntoView({
             behavior: 'smooth',
-            block: 'start',
+            block: 'center',
             inline: 'center'
         })
     }, [focusEvent])
@@ -129,7 +129,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                         })}
                     </div>
 
-                    {lanes.map((lane) => <PlannerRow lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange}/>)}
+                    {lanes.map((lane) => <PlannerRow key={lane.id} lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange}/>)}
 
                 </div>
             </main>
@@ -161,7 +161,7 @@ const PlannerRow = (props) => {
                     return eventDate.getTime() === slotDate.getTime();
                 })
                 return (
-                    <PlannerCell lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change}/>
+                    <PlannerCell key={`${lane.id}-${slotDate.toString()}`} lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change}/>
                 );
             })}
         </div>
@@ -211,7 +211,7 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
         <div className={`cell ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
             {events.map(event => {
                 const { Renderer = EventCard } = event
-                return <Renderer event={event} />
+                return <Renderer key={event.id} event={event} />
             })}
         </div>
     );