From 4ed923921230dc8e4df84bc29a51f44d2b788710 Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Thu, 18 May 2023 21:34:10 -0400
Subject: [PATCH] respond to class changes

---
 example/tree-menu.tsx | 47 +++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx
index 055a6a0..dba09e3 100644
--- a/example/tree-menu.tsx
+++ b/example/tree-menu.tsx
@@ -18,16 +18,18 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null );
     const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
 
-    const classOpen = "h-auto -top-10";
-    const classShut = "h-0 top-0";
+    const classDefault = "relative transition-all duration-700";
+    const classOpen = "h-auto top-10 px-4";
+    const classShut = "h-0 top-0 px-0";
 
+    window.TwindInst(classDefault);
     window.TwindInst(classOpen);
     window.TwindInst(classShut);
 
     React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, true), []);
     React.useEffect(()=> {refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}))}, [stateGet.open])
 
-    return <div class="relative transition-all duration-700" data-class-open={classOpen} data-class-shut={classShut} ref={refElement as React.Ref<HTMLDivElement>}>{props.children}</div>;
+    return <div class={classDefault} data-class={classDefault} data-class-open={classOpen} data-class-shut={classShut} ref={refElement as React.Ref<HTMLDivElement>}>{props.children}</div>;
 };
 
 export const Button =()=>
@@ -72,33 +74,38 @@ export function Collapser(inElement:HTMLElement, initialState = false)
         userDone = inDone|| ((m)=>{}) as DoneCallback;
         userMode = inOpen === true;
 
-        inElement.style.height = inElement.clientHeight + "px";
-        inElement.style.overflow = "hidden";
-        inElement.style.transition = "none";
-
+        // 1) capture current height and possible classes
         const h1 = inElement.clientHeight;
-        const classesStart = inElement.className;
-
+        const classesInitial = inElement.getAttribute("class");
+        const classesStart = inElement.getAttribute("data-class");
+        const classesEnd = inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
+      
+        // 2) disable transitions to get immediate results
+        inElement.style.transition = "none";
         inElement.style.height = "";
-        inElement.className = classesStart + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
-        const h2 = inElement.clientHeight;
-        console.log("when classes are (", inElement.className , ") height is", h2);
 
+        // 3) add new classes and capture new height
+        inElement.className = classesStart + " " + classesEnd;
+        const h2 = inElement.clientHeight;
+
+        // 4) put everything back (and turn on overflow hidden)
         inElement.style.height = h1+"px";
-        inElement.className = classesStart;
+        inElement.style.overflow = "hidden";
+        inElement.className = classesInitial;
+
+        console.log(`before: classes are "${inElement.className}"`);
 
         console.log("LOOK", h1, h2);
 
-
-
-
         frameRequest = requestAnimationFrame(()=>
         {
           inElement.style.transition = "";
-            frameRequest = requestAnimationFrame(()=>
-            {
-                inElement.style.height = `${h2}px`;
-            });
+          frameRequest = requestAnimationFrame(()=>
+          {
+              inElement.style.height = `${h2}px`;
+              inElement.className = classesStart + " " + classesEnd;
+              console.log(`after: classes are "${inElement.className}"`);
+          });
           
         });
       }