SethTrowbridge/eno
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

cleanup

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-28 13:21:38 -04:00
parent 505545ff55
commit f78e7c8107
1 changed files with 8 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
example/tree-menu.tsx
View File

@ -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 <div ref={refElement as React.Ref<HTMLDivElement>} 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<string> = 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;
}