From 0ca3201949e20b1dbfb087fdac78e9f4f62d3c4d Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Sun, 28 May 2023 22:06:09 -0400 Subject: [PATCH] only collapse outer --- example/app.tsx | 26 +++++++++++++++++++++ example/tree-menu.tsx | 53 +++++++++++++++++++++++++++++++++++++++---- 2 files changed, 74 insertions(+), 5 deletions(-) diff --git a/example/app.tsx b/example/app.tsx index 53ab8de..b9cd990 100644 --- a/example/app.tsx +++ b/example/app.tsx @@ -61,6 +61,32 @@ export default ()=> + + + + + + +

hello!

+

hello!

+

hello!

+

hello!

+

hello!

+

hello!

+

hello!

+
+
+

hello!

+

hello!

+

hello!

+

hello!

+ +

hello!

+

hello!

+

hello!

+
+
+

Title!!

suspended:

Loading!}> diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx index 37fdf41..275ea72 100644 --- a/example/tree-menu.tsx +++ b/example/tree-menu.tsx @@ -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
} 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> = 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, handleAway:Handler)=> @@ -73,7 +112,11 @@ const useAway =(inRef:React.Ref, 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); } , []);