click away

This commit is contained in:
Seth Trowbridge 2023-05-28 14:10:05 -04:00
parent f78e7c8107
commit c78b1fafba

View File

@ -34,13 +34,15 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
Classes[stateName as keyof MenuClassStates] = Window.TwindInst(Classes[stateName as keyof MenuClassStates]);
}
}
React.useEffect(()=> {
refElement.current?.setAttribute("style", "");
refControl.current = refElement.current && Collapser(refElement.current, stateGet.open ? "Open" : "Shut", Classes);
}, []);
React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
useAway(refElement, ()=>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}
</div>;
@ -56,6 +58,28 @@ export const Button =()=>
</>;
};
type Handler = (e:MouseEvent)=>void
const Refs:Map<HTMLElement, React.Ref<Handler>> = new Map();
window.innerWidth && document.addEventListener("click", e=>
{
const path = e.composedPath();
Refs.forEach( (handlerRef, element)=> handlerRef.current && (path.includes(element) ? null : handlerRef.current(e)) );
}
, true);
const useAway =(inRef:React.Ref<HTMLElement>, handleAway:Handler)=>
{
const refHandler:React.MutableRefObject<Handler> = React.useRef(handleAway);
refHandler.current = handleAway;
React.useEffect(()=>
{
inRef.current && Refs.set(inRef.current, refHandler);
return ()=> inRef.current && Refs.delete(inRef.current);
}
, []);
};
type StyleSize = [classes:string, width:number, height:number];
type StylePack = Record<string, string>;
type StyleCalc = Record<string, StyleSize>;