components

app.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import * as Iso from "@eno/iso";
-import Collapse from "$/collapse.tsx";
+import Collapse, {CollapseButton, CollapseGroup} from "$/collapse.tsx";
+import * as C from "./context.tsx";
 
 const Comp = React.lazy(()=>import("./deep/component.tsx"));
 
@@ -21,6 +22,31 @@ export default ()=>
             </Collapse>
         </header>
         
+        <C.Group>
+            <C.Button></C.Button>
+            <C.Menu>
+                <p>hello!</p>
+                <p>hello!</p>
+                <p>hello!</p>
+                <p>hello!</p>
+                <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>
+            </C.Menu>
+        </C.Group>
+
         <main class="layout-middle">
         <Iso.Switch>
             <Iso.Case value="/">

components/collapse.tsx

@@ -37,9 +37,44 @@ export default (props:{open:boolean, children:React.JSX.Element|React.JSX.Elemen
   </div>
 };
 
-type DoneCallback =(openState:boolean)=>void;
-type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
+export function useAway(inRef:React.Ref<HTMLElement>, inHandler:(inAway:boolean)=>void)
+{
+  const handlerRef = React.useRef(inHandler);
+  handlerRef.current = inHandler;
+  React.useEffect(()=>
+  {
+    const iterate = (element:EventTarget)=>element === inRef.current;
+    const handler = (event:MouseEvent)=> handlerRef.current( event.composedPath().find(iterate) ? false : true );
+    document.body.addEventListener("click", handler);
+    return ()=> document.body.removeEventListener("click", handler);
+  }
+  , []);
+}
 
+type CollapseStateGet = {Done:boolean, Open:boolean, Away:boolean};
+type CollapseStateSet = (args:{Done?:boolean, Open?:boolean, Away?:boolean})=>void;
+type CollapseStateBinding = [state:CollapseStateGet, update:CollapseStateSet];
+const CollapseContext = React.createContext([{Done:true, Open:true, Away:false}, (args)=>{}] as CollapseStateBinding);
+export const CollapseGroup =({children}:{children:React.JSX.Element|React.JSX.Element[]})=>
+{
+  const [stateGet, stateSet] = React.useState({Done:true, Open:false, Away:false} as CollapseStateGet);
+  const setAny:CollapseStateSet =(params)=> stateSet((old)=> ({...old, ...params}));
+  React.useEffect(()=>{stateGet.Away && setAny({Open:false})}, [stateGet.Away]);
+  return <CollapseContext.Provider value={[stateGet, setAny]}>{children}</CollapseContext.Provider>;
+};
+
+export const CollapseButton =()=>
+{
+  const [stateGet, stateSet] = React.useContext(CollapseContext);
+  const buttonRef:React.Ref<HTMLElement> = React.useRef(null);
+  useAway(buttonRef, (Away)=>stateSet({Away}));
+  return <button onClick={e=>stateSet({Open:!stateGet.Open})} ref={buttonRef as React.Ref<HTMLButtonElement>}>
+    click it! {JSON.stringify(stateGet)}
+  </button>
+}
+
+type DoneCallback =(openState:boolean)=>void;
+export type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
 export function Collapser(inElement:HTMLElement, initialState = false)
 {
     let userDone:DoneCallback = (openState) => {};
@@ -61,22 +96,26 @@ export function Collapser(inElement:HTMLElement, initialState = false)
     };
     inElement.addEventListener("transitionend", done);
 
-    /** @type Toggler */
-    return function(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)
+    return function(inOpen, inMs, inDone)
     {
       cancelAnimationFrame(frameRequest);
 
       if(arguments.length)
       {
         userDone = inDone|| ((m)=>{}) as DoneCallback;
-        userMode = inOpen||!userMode;
+        userMode = inOpen === true;
+
         inElement.style.height = inElement.clientHeight + "px";
         inElement.style.overflow = "hidden";
         inElement.style.transition = "none";
         frameRequest = requestAnimationFrame(()=>
         {
-          inElement.style.height = `${inOpen ? inElement.scrollHeight : 0}px`;
           inElement.style.transition = `height ${(inMs||1000) / 1000}s`;
+          frameRequest = requestAnimationFrame(()=>
+          {
+            inElement.style.height = `${inOpen ? inElement.scrollHeight : 0}px`;
+          });
+          
         });
       }
       else

context.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+
+type StateArgs = {done?:boolean, open?:boolean};
+type StateObj = {done:boolean, open:boolean};
+type StateBinding = [state:StateObj, update:(args:StateArgs)=>void];
+
+const CTX = React.createContext([{done:true, open:false}, (args)=>{}] as StateBinding);
+
+export const Group =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
+{
+    const [stateGet, stateSet] = React.useState({done:true, open:false} as StateObj);
+    return <CTX.Provider value={[stateGet, (args:StateArgs)=> stateSet({...stateGet, ...args})]}>{props.children}</CTX.Provider>;
+};
+
+export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
+{
+    const [stateGet, stateSet] = React.useContext(CTX);
+    const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null );
+    const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
+
+    React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, true), []);
+    React.useEffect(()=> {refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}))}, [stateGet.open])
+
+    return <div ref={refElement as React.Ref<HTMLDivElement>}>{props.children}</div>;
+};
+
+export const Button =()=>
+{
+    const [stateGet, stateSet] = React.useContext(CTX);
+    return <>
+        <p>{JSON.stringify(stateGet)}</p>
+        <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:true,  done:false})}>Open</button>
+        <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:false, done:false})}>Close</button>
+    </>;
+};
+
+type DoneCallback =(openState:boolean)=>void;
+export type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
+export function Collapser(inElement:HTMLElement, initialState = false)
+{
+    let userDone:DoneCallback = (openState) => {};
+    let userMode = initialState;
+    let frameRequest = 0;
+
+    const done = (inEvent:TransitionEvent)=>
+    {
+      if (inEvent.propertyName == "height" && inEvent.target == inElement)
+      {
+        inEvent.stopPropagation();
+        if (userMode)
+        {
+          inElement.style.height = "auto";
+          inElement.style.overflow = "visible";
+        }
+        userDone(userMode);
+      }
+    };
+    inElement.addEventListener("transitionend", done);
+
+    return function(inOpen, inMs, inDone)
+    {
+      cancelAnimationFrame(frameRequest);
+
+      if(arguments.length)
+      {
+        userDone = inDone|| ((m)=>{}) as DoneCallback;
+        userMode = inOpen === true;
+
+        inElement.style.height = inElement.clientHeight + "px";
+        inElement.style.overflow = "hidden";
+        inElement.style.transition = "none";
+        frameRequest = requestAnimationFrame(()=>
+        {
+          inElement.style.transition = `height ${(inMs||1000) / 1000}s`;
+          frameRequest = requestAnimationFrame(()=>
+          {
+            inElement.style.height = `${inOpen ? inElement.scrollHeight : 0}px`;
+          });
+          
+        });
+      }
+      else
+      {
+        inElement.removeEventListener("transitionend", done);
+      }
+    } as CollapseControls;
+}