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

8
components/collapse.tsx
View File

@ -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(()=>

9
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);
}
, []);
@ -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>