start collapse
This commit is contained in:
parent
b337c72331
commit
608e482469
36
app.tsx
36
app.tsx
|
|
@ -1,22 +1,27 @@
|
|||
import React from "react";
|
||||
import * as Iso from "@eno/iso";
|
||||
import Collapse from "$/collapse.tsx";
|
||||
|
||||
const Comp = React.lazy(()=>import("./deep/component.tsx"));
|
||||
|
||||
export default ()=>
|
||||
{
|
||||
const [countGet, countSet] = React.useState(1);
|
||||
return <div class="p-4 font-sans">
|
||||
return <div class="font-sans flex flex-col items-center min-h-[100vh]">
|
||||
<Iso.Meta.Metas title="Main Page!"/>
|
||||
<header class="max-w-4xl mx-auto">
|
||||
<nav class="p-4 flex gap-8 border-b font-black text-sm">
|
||||
<header class="layout-middle border-b">
|
||||
<nav class="flex gap-8 font-black text-sm">
|
||||
<a class="" href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/details">Details</a>
|
||||
<a href="/data">Data Fetching</a>
|
||||
</nav>
|
||||
<Collapse open={false}>
|
||||
<p>Hello!</p>
|
||||
</Collapse>
|
||||
</header>
|
||||
|
||||
<main class="max-w-4xl mx-auto p-4">
|
||||
<main class="layout-middle">
|
||||
<Iso.Switch>
|
||||
<Iso.Case value="/">
|
||||
<>
|
||||
|
|
@ -38,7 +43,7 @@ export default ()=>
|
|||
</>
|
||||
</Iso.Case>
|
||||
<Iso.Case value="details">
|
||||
<>
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<h1>Details</h1>
|
||||
<p>
|
||||
Iso uses Preact/Compat and Twind in lieu of React and Tailwind so you can keep the API's you know, serve less kilobytes, and gain new ways to simplify your layout code.
|
||||
|
|
@ -59,16 +64,29 @@ export default ()=>
|
|||
<li>Use file extensions in import statements</li>
|
||||
<li>Add new modules to the deno.jsonc config</li>
|
||||
</ol>
|
||||
</>
|
||||
</div>
|
||||
</Iso.Case>
|
||||
<Iso.Case value="data">
|
||||
<React.Suspense fallback={<p>Loading...</p>}>
|
||||
<Comp/>
|
||||
</React.Suspense>
|
||||
</Iso.Case>
|
||||
<Iso.Case value="lol/idk">lol/idk</Iso.Case>
|
||||
<Iso.Case default><p>404!</p></Iso.Case>
|
||||
</Iso.Switch>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
footer
|
||||
<footer class="bg-black grow w-full">
|
||||
<div class="layout-middle mx-auto text-white">
|
||||
© {new Date().getFullYear()} Seth Trowbridge
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>;
|
||||
};
|
||||
|
||||
export const CSS = {
|
||||
rules:
|
||||
[
|
||||
["layout-middle", "w-full max-w-4xl p-4"]
|
||||
]
|
||||
};
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import React from "react";
|
||||
|
||||
export default (props:{open:boolean, children:React.JSX.Element|React.JSX.Element[]})=>
|
||||
{
|
||||
const [openGet, openSet] = React.useState(props.open);
|
||||
const [doneGet, doneSet] = React.useState(true);
|
||||
const refEl:React.RefObject<HTMLElement> = React.useRef(null);
|
||||
const refCollapse:React.RefObject<CollapseControls> = React.useRef(null);
|
||||
|
||||
React.useEffect(()=>
|
||||
{
|
||||
if(refEl.current)
|
||||
{
|
||||
refCollapse.current = Collapser(refEl.current, openGet);
|
||||
}
|
||||
return ()=> refCollapse.current && refCollapse.current();
|
||||
}
|
||||
, []);
|
||||
const Handler =()=>
|
||||
{
|
||||
openSet((old)=>
|
||||
{
|
||||
if(refCollapse.current)
|
||||
{
|
||||
doneSet(false);
|
||||
refCollapse.current(!old, 1000, ()=>doneSet(true));
|
||||
}
|
||||
return !old;
|
||||
});
|
||||
};
|
||||
|
||||
return <div>
|
||||
<button onClick={Handler}>{openGet ? "Close this" : "Open it"}{doneGet ? "." : "..."}</button>
|
||||
<div ref={refEl as React.RefObject<HTMLDivElement>}>
|
||||
{!(!openGet && doneGet) && props.children}
|
||||
</div>
|
||||
</div>
|
||||
};
|
||||
|
||||
type DoneCallback =(openState:boolean)=>void;
|
||||
type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
|
||||
|
||||
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)
|
||||
{
|
||||
inEvent.stopPropagation();
|
||||
if (userMode)
|
||||
{
|
||||
inElement.style.height = "auto";
|
||||
inElement.style.overflow = "visible";
|
||||
}
|
||||
userDone(userMode);
|
||||
}
|
||||
};
|
||||
inElement.addEventListener("transitionend", done);
|
||||
|
||||
/** @type Toggler */
|
||||
return function(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)
|
||||
{
|
||||
cancelAnimationFrame(frameRequest);
|
||||
|
||||
if(arguments.length)
|
||||
{
|
||||
userDone = inDone|| ((m)=>{}) as DoneCallback;
|
||||
userMode = inOpen||!userMode;
|
||||
inElement.style.height = inElement.clientHeight + "px";
|
||||
inElement.style.overflow = "hidden";
|
||||
inElement.style.transition = "none";
|
||||
frameRequest = requestAnimationFrame(()=>
|
||||
{
|
||||
inElement.style.height = `${inOpen ? inElement.scrollHeight : 0}px`;
|
||||
inElement.style.transition = `height ${(inMs||1000) / 1000}s`;
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
inElement.removeEventListener("transitionend", done);
|
||||
}
|
||||
} as CollapseControls;
|
||||
}
|
||||
|
|
@ -9,11 +9,8 @@ export default ()=>
|
|||
type CatFact = {fact:string, length:number}|undefined;
|
||||
const [Data, Updating] = Iso.Fetch.Use(`https://catfact.ninja/fact`);
|
||||
|
||||
|
||||
console.log("component.tsx render!!")
|
||||
|
||||
return <div class="p-4 text-red-500">
|
||||
<Iso.Meta.Metas title="Component!"/>
|
||||
<Iso.Meta.Metas title="Cat Fact!"/>
|
||||
Component Route is: {routeGet.Path.toString()}
|
||||
<button className="p-4 bg-green-500 text-white" onClick={e=>{countSet(countGet+1); routeSet(["lol", "idk"], {count:countGet+1});}}>{countGet}</button>
|
||||
<a href="/page/about-us" className="p-2 text(lg blue-500) font-bold">a link</a>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
{
|
||||
"react": "https://esm.sh/stable/preact@10.13.2/compat",
|
||||
"@eno/app": "./app.tsx",
|
||||
"@eno/iso": "https://gitea.hptrow.me/SethTrowbridge/eno/raw/tag/0.0.2/lib/iso.tsx/"
|
||||
"@eno/iso": "https://gitea.hptrow.me/SethTrowbridge/eno/raw/tag/0.0.2/lib/iso.tsx/",
|
||||
"$/": "./components/"
|
||||
},
|
||||
"tasks": {
|
||||
"dev": "deno run -A --unstable --no-lock app.tsx --port=3000 --dev",
|
||||
|
|
|
|||
Loading…
Reference in New Issue