diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx
index 41a43b4..8cb3701 100644
--- a/example/tree-menu.tsx
+++ b/example/tree-menu.tsx
@@ -34,14 +34,12 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
Classes[stateName as keyof MenuClassStates] = Window.TwindInst(Classes[stateName as keyof MenuClassStates]);
}
}
-
- const initialKey = stateGet.open ? "Open" : "Shut";
-
+
React.useEffect(()=> {
refElement.current?.setAttribute("style", "");
- refControl.current = refElement.current && Collapser(refElement.current, initialKey, Classes);
+ refControl.current = refElement.current && Collapser(refElement.current, stateGet.open ? "Open" : "Shut", Classes);
}, []);
- React.useEffect(()=> {refControl.current && refControl.current(initialKey, ()=>stateSet({done:true}))}, [stateGet.open])
+ React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
return
} class={Classes.Shut} style="transition:none;">
{ (!stateGet.open && stateGet.done) ? null : props.children}
@@ -74,7 +72,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
output[key] = [value, inElement.offsetWidth, inElement.offsetHeight];
});
inElement.setAttribute("class", initialClass);
- inElement.offsetHeight;
+ inElement.offsetHeight; // this has be be exactly here
inElement.setAttribute("style", initialStyle);
return output;
@@ -92,27 +90,18 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
let measurements:StyleCalc;
const transitions:Set = new Set();
- const run = (inEvent:TransitionEvent)=>
- {
- //console.log("+", inEvent.propertyName);
- (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
- };
+ const run = (inEvent:TransitionEvent)=> (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
@@ -127,18 +116,6 @@ 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);
@@ -153,7 +130,6 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
if(!inTransition)
{
measurements = StyleCalc(inElement, library);
- //console.log("measurements taken", measurements)
}
if(measurements)
@@ -161,19 +137,15 @@ 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}}`)
});
}
}
@@ -184,5 +156,8 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
}
} as CollapseControls;
+ inElement.addEventListener("transitionend", end);
+ inElement.addEventListener("transitionrun", run);
+
return anim;
}
\ No newline at end of file