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

BINGO

This commit is contained in:
Seth Trowbridge 2023-05-27 07:28:50 -04:00
parent 049e4c0f0e
commit 691cccc7f5
1 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
example/tree-menu.tsx
View File

@ -22,8 +22,9 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
const base = `relative transition-all border(8 black) overflow-hidden`;
const Classes:MenuClassStates =
{
Open: `${base} h-auto top-8 duration-700`,
Shut: `${base} h-0 top-0 duration-300`,
Shut: `${base} h-0 top-0 w-1/2 duration-300`,
Open: `${base} h-auto top-8 w-full duration-700`,
lol: `${base} h-auto top-36 bg-yellow-500 w-2/3 duration-700`,
};
const Window = window as {TwindInst?:(c:string)=>string};
if(Window.TwindInst)
@ -37,7 +38,7 @@ 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])
return <div class={Classes.Keep} data-class-keep={Classes.Keep} data-class-open={Classes.Open} data-class-shut={Classes.Shut} ref={refElement as React.Ref<HTMLDivElement>}>
return <div ref={refElement as React.Ref<HTMLDivElement>}>
{ (!stateGet.open && stateGet.done) ? null : props.children}
</div>;
};
@ -61,23 +62,19 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
const initialClass = inElement.getAttribute("class")||"";
const output = {} as StyleCalc;
inElement.setAttribute("style", `transition: none; overflow: hidden;`);
inElement.clientHeight;
Object.entries(inClasses).forEach(([key, value])=>
{
inElement.setAttribute("class", value);
inElement.clientHeight;
output[key] = [value, inElement.offsetWidth, inElement.offsetHeight];
});
inElement.setAttribute("style", initialStyle);
inElement.setAttribute("class", initialClass);
inElement.clientHeight;
inElement.offsetHeight;
inElement.setAttribute("style", initialStyle);
return output;
};
type DoneCallback =(openState:boolean)=>void;
export type CollapseControls =(inOpen?:string, inDone?:DoneCallback)=>void;
export function Collapser(inElement:HTMLElement, initialState:string, library:Record<string, string>)
@ -137,19 +134,20 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
if(measurements)
{
const [classes, width, height] = measurements[inState] as StyleSize;
inElement.style.overflow = "hidden";
inElement.style.width = inElement.offsetWidth + "px";
inElement.style.height = inElement.offsetHeight + "px";
inTransition = true;
console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`)
frameRequest = requestAnimationFrame(()=>
{
inElement.style.width = width + "px";
inElement.style.height = height + "px";
inElement.className = classes;
console.log(` to: {${width} ${height}}`)
});
const [classes, width, height] = measurements[inState] as StyleSize;
//inElement.style.overflow = "hidden";
inElement.style.width = inElement.offsetWidth + "px";
inElement.style.height = inElement.offsetHeight + "px";
inTransition = true;
console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`);
frameRequest = requestAnimationFrame(()=>
{
inElement.style.height = height + "px";
inElement.style.width = width + "px";
inElement.className = classes;
console.log(` to: {${width} ${height}}`)
});
}
}
else