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

respond to class changes

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-18 21:34:10 -04:00
parent e83b628787
commit 4ed9239212
1 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
example/tree-menu.tsx
View File

@ -18,16 +18,18 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null ); const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null );
const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null ); const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
const classOpen = "h-auto -top-10"; const classDefault = "relative transition-all duration-700";
const classShut = "h-0 top-0"; const classOpen = "h-auto top-10 px-4";
const classShut = "h-0 top-0 px-0";
window.TwindInst(classDefault);
window.TwindInst(classOpen); window.TwindInst(classOpen);
window.TwindInst(classShut); window.TwindInst(classShut);
React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, true), []); React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, true), []);
React.useEffect(()=> {refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}))}, [stateGet.open]) React.useEffect(()=> {refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}))}, [stateGet.open])
return <div class="relative transition-all duration-700" data-class-open={classOpen} data-class-shut={classShut} ref={refElement as React.Ref<HTMLDivElement>}>{props.children}</div>; return <div class={classDefault} data-class={classDefault} data-class-open={classOpen} data-class-shut={classShut} ref={refElement as React.Ref<HTMLDivElement>}>{props.children}</div>;
}; };
export const Button =()=> export const Button =()=>
@ -72,33 +74,38 @@ export function Collapser(inElement:HTMLElement, initialState = false)
userDone = inDone|| ((m)=>{}) as DoneCallback; userDone = inDone|| ((m)=>{}) as DoneCallback;
userMode = inOpen === true; userMode = inOpen === true;
inElement.style.height = inElement.clientHeight + "px"; // 1) capture current height and possible classes
inElement.style.overflow = "hidden";
inElement.style.transition = "none";
const h1 = inElement.clientHeight; const h1 = inElement.clientHeight;
const classesStart = inElement.className; const classesInitial = inElement.getAttribute("class");
const classesStart = inElement.getAttribute("data-class");
const classesEnd = inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
// 2) disable transitions to get immediate results
inElement.style.transition = "none";
inElement.style.height = ""; inElement.style.height = "";
inElement.className = classesStart + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
const h2 = inElement.clientHeight;
console.log("when classes are (", inElement.className , ") height is", h2);
// 3) add new classes and capture new height
inElement.className = classesStart + " " + classesEnd;
const h2 = inElement.clientHeight;
// 4) put everything back (and turn on overflow hidden)
inElement.style.height = h1+"px"; inElement.style.height = h1+"px";
inElement.className = classesStart; inElement.style.overflow = "hidden";
inElement.className = classesInitial;
console.log(`before: classes are "${inElement.className}"`);
console.log("LOOK", h1, h2); console.log("LOOK", h1, h2);
frameRequest = requestAnimationFrame(()=> frameRequest = requestAnimationFrame(()=>
{ {
inElement.style.transition = ""; inElement.style.transition = "";
frameRequest = requestAnimationFrame(()=> frameRequest = requestAnimationFrame(()=>
{ {
inElement.style.height = `${h2}px`; inElement.style.height = `${h2}px`;
}); inElement.className = classesStart + " " + classesEnd;
console.log(`after: classes are "${inElement.className}"`);
});
}); });
} }