ywana-core8 0.0.824 → 0.0.825

package/package.json

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

package/src/widgets/planner/Planner.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useRef } from "react";
+import React, { useEffect, useMemo, useState, useRef, useCallback } from "react";
 import { DropDown, Header, Icon, Text, TextField, Button } from "../../html";
 import moment from "moment";
 import { extendMoment } from "moment-range";
@@ -20,11 +20,18 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
     const [dateRange, setDateRange] = useState(config.range);
     const [from, setFrom] = useState(config.from);
     const [to, setTo] = useState(config.to);
-    const thisMondayElement = useRef(null)
     
-    useEffect(() => {
-        if (thisMondayElement.current) { showThisWeek() }
-    }, [thisMondayElement])
+    const thisMondayElement = useRef(null)
+
+    const gotoMonday = useCallback(node => {
+        const element = node
+        console.log("goto monday", element)
+        if (element) element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'start',
+        })
+    }, [])
 
     useEffect(() => {
         const element = document.getElementById(focusEvent)
@@ -68,6 +75,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
     function showThisWeek() {
         const element = thisMondayElement.current
         //const element = document.querySelector(".thisMonday")
+        console.log("Show this week", element)
         if (element) element.scrollIntoView({
             behavior: 'smooth',
             block: 'start',
@@ -135,16 +143,15 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                             const today = moment()
                             var weekStart = today.clone().startOf('week')
                             const isThisMonday = (date.moment.isSame(weekStart))
-
                             return (
-                                <div key={`column-${date.moment.dayOfYear()}`} className="column-header" ref={isThisMonday ? thisMondayElement : null}>
-                                    <div className={`date-header ${weekend} ${thisWeek}`}>
+                                <div key={`column-${date.moment.dayOfYear()}`} id={isThisMonday ? "thisMonday" : ""} className="column-header" ref={isThisMonday ? thisMondayElement : null}>
+                                    <div className={`date-header ${weekend} ${thisWeek}`} ref={isThisMonday ? gotoMonday : null}>
                                         <Text use="headline6">{date.moment.format("DD")}</Text>
                                         &nbsp;
                                         <Text use="caption">{date.moment.format("ddd")}</Text>
                                     </div>
                                 </div>
-                            );
+                            )
                         })}
                     </div>