From 80bcb1f05e5b15ae28d6dd8bcbeb78587114fa5f Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Tue, 16 May 2023 13:44:37 -0400
Subject: [PATCH] remove collapse inner condition

---
 components/collapse.tsx | 10 ++--------
 context.tsx             | 11 ++++++-----
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/components/collapse.tsx b/components/collapse.tsx
index e8276c9..eab61db 100644
--- a/components/collapse.tsx
+++ b/components/collapse.tsx
@@ -80,7 +80,7 @@ export function Collapser(inElement:HTMLElement, initialState = false)
     let userDone:DoneCallback = (openState) => {};
     let userMode = initialState;
     let frameRequest = 0;
-  
+
     const done = (inEvent:TransitionEvent)=>
     {
       if (inEvent.propertyName == "height" && inEvent.target == inElement)
@@ -91,27 +91,21 @@ export function Collapser(inElement:HTMLElement, initialState = false)
           inElement.style.height = "auto";
           inElement.style.overflow = "visible";
         }
-        console.log(" -- anim stop --")
         userDone(userMode);
       }
     };
     inElement.addEventListener("transitionend", done);
 
-    return function(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)
+    return function(inOpen, inMs, inDone)
     {
       cancelAnimationFrame(frameRequest);
 
       if(arguments.length)
       {
-        console.log(" -- anim start --", inOpen);
         userDone = inDone|| ((m)=>{}) as DoneCallback;
         userMode = inOpen === true;
 
         inElement.style.height = inElement.clientHeight + "px";
-        if(inOpen === false)
-        {
-          console.log(" --height check", inElement.style.height)
-        }
         inElement.style.overflow = "hidden";
         inElement.style.transition = "none";
         frameRequest = requestAnimationFrame(()=>
diff --git a/context.tsx b/context.tsx
index 5626d49..a8e848e 100644
--- a/context.tsx
+++ b/context.tsx
@@ -20,12 +20,12 @@ export default ()=>
 const Inner =()=>
 {
     const [stateGet, stateSet] = React.useContext(CTX);
-    const refElement = React.useRef( null );
+    const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null );
     const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
 
     React.useEffect(()=>
     {
-        refControl.current = Collapser(refElement.current, true);
+        refControl.current = Collapser(refElement.current as HTMLElement, true);
     }
     , []);
 
@@ -33,7 +33,7 @@ const Inner =()=>
     {
         console.log("open changed to:", stateGet.open);
         refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}));
-        
+
     }, [stateGet.open])
 
     React.useEffect(()=>{
@@ -42,8 +42,9 @@ const Inner =()=>
 
     return <div class="p-4">
         <p>{JSON.stringify(stateGet)}</p>
-        <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:!stateGet.open, done:false})}>click</button>
-        <div ref={refElement}>
+        <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:true,  done:false})}>Open</button>
+        <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:false, done:false})}>Close</button>
+        <div ref={refElement as React.Ref<HTMLDivElement>}>
             <p>hello</p>
             <p>hello</p>
             <p>hello</p>