example/tree-menu.tsx

@@ -35,13 +35,13 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
       }
     }
 
+    const initialKey = stateGet.open ? "Open" : "Shut";
+
     React.useEffect(()=> {
       refElement.current?.setAttribute("style", "");
-      refControl.current = refElement.current && Collapser(refElement.current, stateGet.open ? "Open" : "Shut", Classes);
+      refControl.current = refElement.current && Collapser(refElement.current, initialKey, Classes);
     }, []);
-    React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
-
-    useAway(refElement, ()=>stateSet({open:false, done:false}));
+    React.useEffect(()=> {refControl.current && refControl.current(initialKey, ()=>stateSet({done:true}))}, [stateGet.open])
 
     return <div ref={refElement as React.Ref<HTMLDivElement>} class={Classes.Shut} style="transition:none;">
       { (!stateGet.open && stateGet.done) ? null : props.children}
@@ -58,28 +58,6 @@ export const Button =()=>
     </>;
 };
 
-type Handler = (e:MouseEvent)=>void
-const Refs:Map<HTMLElement, React.Ref<Handler>> = new Map();
-window.innerWidth && document.addEventListener("click", e=>
-{
-  const path = e.composedPath();
-  Refs.forEach( (handlerRef, element)=> handlerRef.current && (path.includes(element) ? null : handlerRef.current(e)) );
-}
-, true);
-const useAway =(inRef:React.Ref<HTMLElement>, handleAway:Handler)=>
-{
-  const refHandler:React.MutableRefObject<Handler> = React.useRef(handleAway);
-  refHandler.current = handleAway;
-
-  React.useEffect(()=>
-  {
-    inRef.current && Refs.set(inRef.current, refHandler);
-    return ()=> inRef.current && Refs.delete(inRef.current);
-  }
-  , []);
-};
-
-
 type StyleSize = [classes:string, width:number, height:number];
 type StylePack = Record<string, string>;
 type StyleCalc = Record<string, StyleSize>;
@@ -96,7 +74,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
     output[key] =  [value, inElement.offsetWidth, inElement.offsetHeight];
   });
   inElement.setAttribute("class", initialClass);
-  inElement.offsetHeight; // this has be be exactly here
+  inElement.offsetHeight;
   inElement.setAttribute("style", initialStyle);
 
   return output;
@@ -114,18 +92,27 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
     let measurements:StyleCalc;
     const transitions:Set<string> = new Set();
 
-    const run = (inEvent:TransitionEvent)=> (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
+    const run = (inEvent:TransitionEvent)=>
+    {
+      //console.log("+", inEvent.propertyName);
+      (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
+    };
     const end = (inEvent:TransitionEvent)=>
     {
+      //console.log("-", inEvent.propertyName);
       if (inEvent.target == inElement)
       {
         transitions.delete(inEvent.propertyName);
         if(transitions.size === 0)
         {
+          console.log("--done--", userMode, "interrupted?", interrupted);
+
           measurements = StyleCalc(inElement, library);
           const [, w, h] = measurements[userMode];
+          
           if(inElement.offsetHeight != h || inElement.offsetWidth != w)
           {
+            console.log(inElement.offsetHeight, "VERSUS", h);
             anim(userMode, userDone);
           }
           else
@@ -140,6 +127,18 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         }
       }
     };
+
+    const child =(e:CustomEvent)=>
+    {
+      if(e.target == inElement || !inTransition){ return; }
+      interrupted = true;
+      //console.log("resize", e.detail);
+    }
+
+    inElement.addEventListener("transitionend", end);
+    inElement.addEventListener("transitionrun", run);
+    inElement.addEventListener("childresize", child);
+
     const anim = function(inState:string, inDone)
     {
       cancelAnimationFrame(frameRequest);
@@ -154,6 +153,7 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         if(!inTransition)
         {
           measurements = StyleCalc(inElement, library);
+         //console.log("measurements taken", measurements)
         }
 
         if(measurements)
@@ -161,15 +161,19 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
             const [classes, width, height] = measurements[inState] as StyleSize;
             const oldWidth = inElement.offsetWidth;
             const oldHeight = inElement.offsetHeight;
+            //inElement.style.overflow = "hidden";
             inElement.style.width  = oldWidth  + "px";
             inElement.style.height = oldHeight + "px";
             inTransition = true;
+            //console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`);
+            //inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]}))
 
             frameRequest = requestAnimationFrame(()=>
             {
               inElement.style.height = height + "px";
               inElement.style.width = width + "px";
               inElement.className = classes;
+              //console.log(`  to: {${width} ${height}}`)
             });
         }
       }
@@ -180,8 +184,5 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
       }
     } as CollapseControls;
 
-    inElement.addEventListener("transitionend", end);
-    inElement.addEventListener("transitionrun", run);
-
     return anim;
 }