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]); Classes[stateName as keyof MenuClassStates] = Window.TwindInst(Classes[stateName as keyof MenuClassStates]);
} }
} }
const initialKey = stateGet.open ? "Open" : "Shut";
React.useEffect(()=> { React.useEffect(()=> {
refElement.current?.setAttribute("style", ""); 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;"> return <div ref={refElement as React.Ref<HTMLDivElement>} class={Classes.Shut} style="transition:none;">
{ (!stateGet.open && stateGet.done) ? null : props.children} { (!stateGet.open && stateGet.done) ? null : props.children}
@ -74,7 +72,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
output[key] = [value, inElement.offsetWidth, inElement.offsetHeight]; output[key] = [value, inElement.offsetWidth, inElement.offsetHeight];
}); });
inElement.setAttribute("class", initialClass); inElement.setAttribute("class", initialClass);
inElement.offsetHeight; inElement.offsetHeight; // this has be be exactly here
inElement.setAttribute("style", initialStyle); inElement.setAttribute("style", initialStyle);
return output; return output;
@ -92,27 +90,18 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
let measurements:StyleCalc; let measurements:StyleCalc;
const transitions:Set<string> = new Set(); const transitions:Set<string> = new Set();
const run = (inEvent:TransitionEvent)=> const run = (inEvent:TransitionEvent)=> (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
{
//console.log("+", inEvent.propertyName);
(inEvent.target == inElement) && transitions.add(inEvent.propertyName);
};
const end = (inEvent:TransitionEvent)=> const end = (inEvent:TransitionEvent)=>
{ {
//console.log("-", inEvent.propertyName);
if (inEvent.target == inElement) if (inEvent.target == inElement)
{ {
transitions.delete(inEvent.propertyName); transitions.delete(inEvent.propertyName);
if(transitions.size === 0) if(transitions.size === 0)
{ {
console.log("--done--", userMode, "interrupted?", interrupted);
measurements = StyleCalc(inElement, library); measurements = StyleCalc(inElement, library);
const [, w, h] = measurements[userMode]; const [, w, h] = measurements[userMode];
if(inElement.offsetHeight != h || inElement.offsetWidth != w) if(inElement.offsetHeight != h || inElement.offsetWidth != w)
{ {
console.log(inElement.offsetHeight, "VERSUS", h);
anim(userMode, userDone); anim(userMode, userDone);
} }
else 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) const anim = function(inState:string, inDone)
{ {
cancelAnimationFrame(frameRequest); cancelAnimationFrame(frameRequest);
@ -153,7 +130,6 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
if(!inTransition) if(!inTransition)
{ {
measurements = StyleCalc(inElement, library); measurements = StyleCalc(inElement, library);
//console.log("measurements taken", measurements)
} }
if(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 [classes, width, height] = measurements[inState] as StyleSize;
const oldWidth = inElement.offsetWidth; const oldWidth = inElement.offsetWidth;
const oldHeight = inElement.offsetHeight; const oldHeight = inElement.offsetHeight;
//inElement.style.overflow = "hidden";
inElement.style.width = oldWidth + "px"; inElement.style.width = oldWidth + "px";
inElement.style.height = oldHeight + "px"; inElement.style.height = oldHeight + "px";
inTransition = true; inTransition = true;
//console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`);
//inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]}))
frameRequest = requestAnimationFrame(()=> frameRequest = requestAnimationFrame(()=>
{ {
inElement.style.height = height + "px"; inElement.style.height = height + "px";
inElement.style.width = width + "px"; inElement.style.width = width + "px";
inElement.className = classes; inElement.className = classes;
//console.log(` to: {${width} ${height}}`)
}); });
} }
} }
@ -184,5 +156,8 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
} }
} as CollapseControls; } as CollapseControls;
inElement.addEventListener("transitionend", end);
inElement.addEventListener("transitionrun", run);
return anim; return anim;
} }