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

BINGO

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