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

@ -37,10 +37,23 @@ export default ()=>
<C.Group> <C.Group>
<C.Button></C.Button> <C.Button></C.Button>
<C.Menu> <C.Menu>
<C.Group>
<C.Button></C.Button>
<C.Menu>
<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>
<p>hello!</p> <p>hello!</p>
<p>hello!</p> <p>hello!</p>
<p>hello!</p> <p>hello!</p>
<p>hello!</p> <p>hello!</p>
<p>hello!</p> <p>hello!</p>
<p>hello!</p> <p>hello!</p>
<p>hello!</p> <p>hello!</p>

35
example/tree-menu.tsx
View File

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