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

fix initial state

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-28 07:34:45 -04:00
parent 691cccc7f5
commit 31c1455fcb
2 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
example/app.tsx
View File

@ -34,6 +34,9 @@ export default ()=>
<a href="/about">About</a>
</nav>
<C.Group>
<C.Button></C.Button>
<C.Menu>
<C.Group>
<C.Button></C.Button>
<C.Menu>
@ -46,6 +49,16 @@ export default ()=>
<p>hello!</p>
</C.Menu>
</C.Group>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
</C.Menu>
</C.Group>
<h1 class="my-2 font(bold serif) text(3xl)">Title!!</h1>

33
example/tree-menu.tsx
View File

@ -23,7 +23,7 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
const Classes:MenuClassStates =
{
Shut: `${base} h-0 top-0 w-1/2 duration-300`,
Open: `${base} h-auto top-8 w-full duration-700`,
Open: `${base} h-auto top-8 w-full duration-1000`,
lol: `${base} h-auto top-36 bg-yellow-500 w-2/3 duration-700`,
};
const Window = window as {TwindInst?:(c:string)=>string};
@ -35,10 +35,15 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
}
}
React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, "Shut", Classes), []);
React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
const initialKey = stateGet.open ? "Open" : "Shut";
return <div ref={refElement as React.Ref<HTMLDivElement>}>
React.useEffect(()=> {
refElement.current?.setAttribute("style", "");
refControl.current = refElement.current && Collapser(refElement.current, initialKey, Classes);
}, []);
React.useEffect(()=> {refControl.current && refControl.current(initialKey, ()=>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}
</div>;
};
@ -112,8 +117,20 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
}
};
const child =(e:CustomEvent)=>
{
if(e.target == inElement || !inTransition){ return; }
console.log("resize", e.detail);
const oldWidth = inElement.offsetWidth;
const oldHeight = inElement.offsetHeight;
//inElement.style.overflow = "hidden";
inElement.style.width = oldWidth + e.detail[0] + "px";
inElement.style.height = oldHeight + e.detail[1] + "px";
}
inElement.addEventListener("transitionend", end);
inElement.addEventListener("transitionrun", run);
inElement.addEventListener("childresize", child);
return function(inState:string, inDone)
{
@ -135,12 +152,16 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
if(measurements)
{
const [classes, width, height] = measurements[inState] as StyleSize;
const oldWidth = inElement.offsetWidth;
const oldHeight = inElement.offsetHeight;
//inElement.style.overflow = "hidden";
inElement.style.width = inElement.offsetWidth + "px";
inElement.style.height = inElement.offsetHeight + "px";
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";