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 refElement:React.MutableRefObject<HTMLElement|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};
const base = `relative transition-all border(8 black) overflow-hidden`;
const Classes:MenuClassStates =
{
Shut: `${base} h-0 top-0 w-1/2 duration-500`,
Open: `${base} h-auto top-8 w-full duration-500`,
Shut: `${base} h-0 top-0 w-1/2 duration-300`,
Open: `${base} h-auto top-8 w-full duration-700`,
lol: `${base} h-auto top-36 bg-yellow-500 w-2/3 duration-700`,
};
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(()=> {
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)=>
React.useEffect(()=>
{
//e.stopPropagation();
stateSet({open:false, done:false});
refControl.current = refElement.current && Collapser(refElement.current, stateGet.open ? "Open" : "Shut", Classes);
}
);
, []);
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}
</div>;
};
@ -68,8 +70,6 @@ const Refs:Map<HTMLElement, React.Ref<Handler>> = 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;
@ -78,7 +78,6 @@ function isHighest(inElement:HTMLElement, inSelection:HTMLElement[])
return false;
}
}
return true;
}
window.innerWidth && document.addEventListener("click", e=>
@ -145,7 +144,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
return output;
};
type DoneCallback =(openState:boolean)=>void;
type DoneCallback =(inState:string)=>void;
export type CollapseControls =(inOpen?:string, inDone?:DoneCallback)=>void;
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 frameRequest = 0;
let inTransition = false;
let interrupted = false;
let measurements:StyleCalc;
const transitions:Set<string> = new Set();