ref corrections

js/tree.js

@@ -51,13 +51,18 @@ export const Button = (props) => {
 export const Menu = (props) => {
   const [stageGet, stageSet] = React.useContext(BranchContext);
   const refElement = React.useRef(null);
+  const refCollapser = React.useRef(null);
 
   React.useEffect(() => {
-    console.log(`menu should change`, stageGet);
+    refCollapser.current = Collapser(refElement.current);
+  }, []);
 
-    Collapser(refElement.current, () => {
-      stageSet({ ...stageGet, Done: true });
-    })(stageGet.Open, stageGet.Open == false && stageGet.Done ? 0 : 600);
+  React.useEffect(() => {
+    refCollapser.current(
+      stageGet.Open,
+      stageGet.Open == false && stageGet.Done ? 0 : 600,
+      () => stageSet({ ...stageGet, Done: true }),
+    );
   }, [stageGet.Open]);
 
   return html`
@@ -67,17 +72,14 @@ export const Menu = (props) => {
   `;
 };
 
-/** @type BasicElement */
-export const Collapse = (props) => {
-  const ref = React.useRef();
-  const style = { overflow: "visible", height: "auto" };
+/** @typedef {(Open:boolean)=>void} UserDone */
+/** @typedef {(inOpen:boolean, inMilliseconds:number, inUserDone:UserDone)=>void} Toggler */
+/** @type {(inElement:HTMLElement)=>Toggler} */
+const Collapser = (inElement) => {
+  console.log("Collapser initialized");
 
-  return html`<div ref=${ref} style=${style}>${props.children}</div>`;
-};
-
-/** @typedef {(inOpen:boolean, inMilliseconds:number)=>void} Toggler */
-/** @type {(inElement:HTMLElement, inUserDone:(Open:boolean)=>void)=>Toggler} */
-const Collapser = (inElement, inUserDone) => {
+  /** @type UserDone */
+  let userDone = () => {};
   const collapse = inElement;
   /** @type {(inEvent:TransitionEvent)=>void} */
   const done = (inEvent) => {
@@ -86,15 +88,16 @@ const Collapser = (inElement, inUserDone) => {
       if (collapse.clientHeight > 0) {
         collapse.style.height = "auto";
         collapse.style.overflow = "visible";
-        inUserDone(true);
+        userDone(true);
       } else {
-        inUserDone(false);
+        userDone(false);
       }
     }
   };
   /** @type Toggler */
-  const show = (inOpen, inMs) => {
+  const show = (inOpen, inMs, inDone) => {
     collapse.removeEventListener("transitionend", done);
+    userDone = inDone;
     collapse.addEventListener("transitionend", done);
 
     collapse.style.height = collapse.clientHeight + "px";