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

remove initial state transition

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-30 09:54:49 -04:00
parent 0ca3201949
commit 03653601d8
1 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
example/tree-menu.tsx
View File

@ -17,13 +17,14 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
const [stateGet, stateSet] = React.useContext(CTX); const [stateGet, stateSet] = React.useContext(CTX);
const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null ); const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null );
const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null ); const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
const refInitial:React.MutableRefObject<boolean> = React.useRef(true);
type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string}; type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string};
const base = `relative transition-all border(8 black) overflow-hidden`; const base = `relative transition-all border(8 black) overflow-hidden`;
const Classes:MenuClassStates = const Classes:MenuClassStates =
{ {
Shut: `${base} h-0 top-0 w-1/2 duration-500`, Shut: `${base} h-0 top-0 w-1/2 duration-300`,
Open: `${base} h-auto top-8 w-full duration-500`, Open: `${base} h-auto top-8 w-full duration-700`,
lol: `${base} h-auto top-36 bg-yellow-500 w-2/3 duration-700`, lol: `${base} h-auto top-36 bg-yellow-500 w-2/3 duration-700`,
}; };
const Window = window as {TwindInst?:(c:string)=>string}; const Window = window as {TwindInst?:(c:string)=>string};
@ -35,20 +36,21 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
} }
} }
React.useEffect(()=> { 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, (e)=>
{ {
//e.stopPropagation(); refControl.current = refElement.current && Collapser(refElement.current, stateGet.open ? "Open" : "Shut", Classes);
stateSet({open:false, done:false});
} }
); , []);
React.useEffect(()=>
{
(!refInitial.current && refControl.current) && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}));
refInitial.current = false;
}
, [stateGet.open]);
return <div ref={refElement as React.Ref<HTMLDivElement>} class={Classes.Shut} style="transition:none;"> useAway(refElement, (e)=>stateSet({open:false, done:false}) );
return <div ref={refElement as React.Ref<HTMLDivElement>} class={Classes.Shut}>
{ (!stateGet.open && stateGet.done) ? null : props.children} { (!stateGet.open && stateGet.done) ? null : props.children}
</div>; </div>;
}; };
@ -68,8 +70,6 @@ const Refs:Map<HTMLElement, React.Ref<Handler>> = new Map();
function isHighest(inElement:HTMLElement, inSelection:HTMLElement[]) function isHighest(inElement:HTMLElement, inSelection:HTMLElement[])
{ {
let currentNode = inElement; let currentNode = inElement;
let highest:HTMLElement|false = false;
while (currentNode != document.body) while (currentNode != document.body)
{ {
currentNode = currentNode.parentNode as HTMLElement; currentNode = currentNode.parentNode as HTMLElement;
@ -78,7 +78,6 @@ function isHighest(inElement:HTMLElement, inSelection:HTMLElement[])
return false; return false;
} }
} }
return true; return true;
} }
window.innerWidth && document.addEventListener("click", e=> window.innerWidth && document.addEventListener("click", e=>
@ -145,7 +144,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
return output; return output;
}; };
type DoneCallback =(openState:boolean)=>void; type DoneCallback =(inState:string)=>void;
export type CollapseControls =(inOpen?:string, inDone?:DoneCallback)=>void; export type CollapseControls =(inOpen?:string, inDone?:DoneCallback)=>void;
export function Collapser(inElement:HTMLElement, initialState:string, library:Record<string, string>) export function Collapser(inElement:HTMLElement, initialState:string, library:Record<string, string>)
{ {
@ -153,7 +152,6 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
let userMode = initialState; let userMode = initialState;
let frameRequest = 0; let frameRequest = 0;
let inTransition = false; let inTransition = false;
let interrupted = false;
let measurements:StyleCalc; let measurements:StyleCalc;
const transitions:Set<string> = new Set(); const transitions:Set<string> = new Set();