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

Compare commits

base: SethTrowbridge:tree-menu-collapse-fixes
Branches Tags
SethTrowbridge:master
SethTrowbridge:tree-menu-collapse-fixes
SethTrowbridge:tree-menu
..
compare: SethTrowbridge:master
Branches Tags
SethTrowbridge:tree-menu-collapse-fixes
SethTrowbridge:tree-menu
SethTrowbridge:master

No commits in common. "tree-menu-collapse-fixes" and "master" have entirely different histories.
tree-menu- ... master

3 changed files with 8 additions and 160 deletions
Show Stats Expand all files Collapse all files

28
app.tsx
View File

@ -1,7 +1,6 @@
import React from "react";
import * as Iso from "@eno/iso";
import Collapse, {CollapseButton, CollapseGroup} from "$/collapse.tsx";
import * as C from "./context.tsx";
import Collapse from "$/collapse.tsx";
const Comp = React.lazy(()=>import("./deep/component.tsx"));
@ -21,31 +20,6 @@ export default ()=>
<p>Hello!</p>
</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>

53
components/collapse.tsx
View File

@ -37,50 +37,15 @@ export default (props:{open:boolean, children:React.JSX.Element|React.JSX.Elemen
</div>
};
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;
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)
@ -96,26 +61,22 @@ export function Collapser(inElement:HTMLElement, initialState = false)
};
inElement.addEventListener("transitionend", done);
return function(inOpen, inMs, inDone)
/** @type Toggler */
return function(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)
{
cancelAnimationFrame(frameRequest);
if(arguments.length)
{
userDone = inDone|| ((m)=>{}) as DoneCallback;
userMode = inOpen === true;
userMode = inOpen||!userMode;
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

87
context.tsx
View File

@ -1,87 +0,0 @@
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;
}