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

remove collapse inner condition

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-16 13:44:37 -04:00
parent 3cbe66446e
commit 80bcb1f05e
2 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/collapse.tsx
View File

@ -80,7 +80,7 @@ export function Collapser(inElement:HTMLElement, initialState = false)
let userDone:DoneCallback = (openState) => {}; let userDone:DoneCallback = (openState) => {};
let userMode = initialState; let userMode = initialState;
let frameRequest = 0; let frameRequest = 0;
const done = (inEvent:TransitionEvent)=> const done = (inEvent:TransitionEvent)=>
{ {
if (inEvent.propertyName == "height" && inEvent.target == inElement) if (inEvent.propertyName == "height" && inEvent.target == inElement)
@ -91,27 +91,21 @@ export function Collapser(inElement:HTMLElement, initialState = false)
inElement.style.height = "auto"; inElement.style.height = "auto";
inElement.style.overflow = "visible"; inElement.style.overflow = "visible";
} }
console.log(" -- anim stop --")
userDone(userMode); userDone(userMode);
} }
}; };
inElement.addEventListener("transitionend", done); inElement.addEventListener("transitionend", done);
return function(inOpen?:boolean, inMs?:number, inDone?:DoneCallback) return function(inOpen, inMs, inDone)
{ {
cancelAnimationFrame(frameRequest); cancelAnimationFrame(frameRequest);
if(arguments.length) if(arguments.length)
{ {
console.log(" -- anim start --", inOpen);
userDone = inDone|| ((m)=>{}) as DoneCallback; userDone = inDone|| ((m)=>{}) as DoneCallback;
userMode = inOpen === true; userMode = inOpen === true;
inElement.style.height = inElement.clientHeight + "px"; inElement.style.height = inElement.clientHeight + "px";
if(inOpen === false)
{
console.log(" --height check", inElement.style.height)
}
inElement.style.overflow = "hidden"; inElement.style.overflow = "hidden";
inElement.style.transition = "none"; inElement.style.transition = "none";
frameRequest = requestAnimationFrame(()=> frameRequest = requestAnimationFrame(()=>

11
context.tsx
View File

@ -20,12 +20,12 @@ export default ()=>
const Inner =()=> const Inner =()=>
{ {
const [stateGet, stateSet] = React.useContext(CTX); const [stateGet, stateSet] = React.useContext(CTX);
const refElement = 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 );
React.useEffect(()=> React.useEffect(()=>
{ {
refControl.current = Collapser(refElement.current, true); refControl.current = Collapser(refElement.current as HTMLElement, true);
} }
, []); , []);
@ -33,7 +33,7 @@ const Inner =()=>
{ {
console.log("open changed to:", stateGet.open); console.log("open changed to:", stateGet.open);
refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true})); refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}));
}, [stateGet.open]) }, [stateGet.open])
React.useEffect(()=>{ React.useEffect(()=>{
@ -42,8 +42,9 @@ const Inner =()=>
return <div class="p-4"> return <div class="p-4">
<p>{JSON.stringify(stateGet)}</p> <p>{JSON.stringify(stateGet)}</p>
<button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:!stateGet.open, done:false})}>click</button> <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:true, done:false})}>Open</button>
<div ref={refElement}> <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:false, done:false})}>Close</button>
<div ref={refElement as React.Ref<HTMLDivElement>}>
<p>hello</p> <p>hello</p>
<p>hello</p> <p>hello</p>
<p>hello</p> <p>hello</p>