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

11
context.tsx
View File

@ -20,12 +20,12 @@ export default ()=>
const Inner =()=>
{
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 );
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);
refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}));
}, [stateGet.open])
React.useEffect(()=>{
@ -42,8 +42,9 @@ const Inner =()=>
return <div class="p-4">
<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>
<div ref={refElement}>
<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>
<div ref={refElement as React.Ref<HTMLDivElement>}>
<p>hello</p>
<p>hello</p>
<p>hello</p>