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

only collapse outer

This commit is contained in:
Seth Trowbridge 2023-05-28 22:06:09 -04:00
parent c78b1fafba
commit 0ca3201949
2 changed files with 74 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
example/app.tsx
View File

@ -61,6 +61,32 @@ export default ()=>
</C.Group>
<C.Group>
<C.Button></C.Button>
<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>
</C.Menu>
</C.Group>
<h1 class="my-2 font(bold serif) text(3xl)">Title!!</h1>
<h2>suspended:</h2>
<React.Suspense fallback={<div>Loading!</div>}>

53
example/tree-menu.tsx
View File

@ -22,8 +22,8 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
const base = `relative transition-all border(8 black) overflow-hidden`;
const Classes:MenuClassStates =
{
Shut: `${base} h-0 top-0 w-1/2 duration-300`,
Open: `${base} h-auto top-8 w-full duration-1000`,
Shut: `${base} h-0 top-0 w-1/2 duration-500`,
Open: `${base} h-auto top-8 w-full duration-500`,
lol: `${base} h-auto top-36 bg-yellow-500 w-2/3 duration-700`,
};
const Window = window as {TwindInst?:(c:string)=>string};
@ -41,7 +41,12 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
}, []);
React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
useAway(refElement, ()=>stateSet({open:false, done:false}));
useAway(refElement, (e)=>
{
//e.stopPropagation();
stateSet({open:false, done:false});
}
);
return <div ref={refElement as React.Ref<HTMLDivElement>} class={Classes.Shut} style="transition:none;">
{ (!stateGet.open && stateGet.done) ? null : props.children}
@ -60,10 +65,44 @@ export const Button =()=>
type Handler = (e:MouseEvent)=>void
const Refs:Map<HTMLElement, React.Ref<Handler>> = new Map();
function isHighest(inElement:HTMLElement, inSelection:HTMLElement[])
{
let currentNode = inElement;
let highest:HTMLElement|false = false;
while (currentNode != document.body)
{
currentNode = currentNode.parentNode as HTMLElement;
if(currentNode.hasAttribute("data-use-away") && inSelection.includes(currentNode))
{
return false;
}
}
return true;
}
window.innerWidth && document.addEventListener("click", e=>
{
const path = e.composedPath();
Refs.forEach( (handlerRef, element)=> handlerRef.current && (path.includes(element) ? null : handlerRef.current(e)) );
const away:HTMLElement[] = [];
Refs.forEach( (handlerRef, element)=>
{
if(!path.includes(element) && handlerRef.current)
{
away.push(element);
}
});
away.forEach((element)=>
{
if(isHighest(element, away))
{
const handler = Refs.get(element);
handler?.current && handler.current(e);
}
});
}
, true);
const useAway =(inRef:React.Ref<HTMLElement>, handleAway:Handler)=>
@ -73,7 +112,11 @@ const useAway =(inRef:React.Ref<HTMLElement>, handleAway:Handler)=>
React.useEffect(()=>
{
inRef.current && Refs.set(inRef.current, refHandler);
if(inRef.current)
{
inRef.current.setAttribute("data-use-away", "0");
Refs.set(inRef.current, refHandler);
}
return ()=> inRef.current && Refs.delete(inRef.current);
}
, []);