Add async components demo and improve async state update when given argument is not a promise.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-09-25 09:56:55 +02:00
parent 1963b6208a
commit dd91d8dcfc
Signed by: Madeorsk
GPG key ID: 677E51CA765BB79F
3 changed files with 40 additions and 8 deletions

View file

@ -34,6 +34,8 @@ import {ModalType} from "../src/Components/Modals/ModalsTypes";
import {Buttons} from "../src/Components/Buttons/Buttons"; import {Buttons} from "../src/Components/Buttons/Buttons";
import {useNotify} from "../src/Components/Notifications/Notifications"; import {useNotify} from "../src/Components/Notifications/Notifications";
import {Notification, NotificationType} from "../src/Components/Notifications/Notification"; import {Notification, NotificationType} from "../src/Components/Notifications/Notification";
import {Box} from "../src/Components/Box";
import {Await, useAsync} from "../src/Async";
export function DemoApp() export function DemoApp()
{ {
@ -57,6 +59,14 @@ export function DemoApp()
const [page, setPage] = useState(11); const [page, setPage] = useState(11);
const [asyncChange, setAsyncChange] = useState(0);
const [anotherChange, setAnotherChange] = useState(0);
const [asyncData] = useAsync<string>(() => new Promise((resolve, reject) => {
setTimeout(() => {
resolve("async data (" + Math.random() + ")");
}, 2000);
}), [asyncChange]);
return ( return (
<Application> <Application>
<MainMenu> <MainMenu>
@ -88,17 +98,19 @@ export function DemoApp()
<h2>Headings</h2> <h2>Headings</h2>
<h1>Demo app</h1> <Box>
<h1>Demo app</h1>
<h2>Second title</h2> <h2>Second title</h2>
<h3>Third title</h3> <h3>Third title</h3>
<h4>Fourth title</h4> <h4>Fourth title</h4>
<h5>Fifth title</h5> <h5>Fifth title</h5>
<h6>Sixth title</h6> <h6>Sixth title</h6>
</Box>
<h2>Buttons</h2> <h2>Buttons</h2>
@ -550,6 +562,19 @@ export function DemoApp()
<button className={"flat"} onClick={() => { notify(<Notification>Test notification</Notification>); }}>Generic notification</button> <button className={"flat"} onClick={() => { notify(<Notification>Test notification</Notification>); }}>Generic notification</button>
</Card> </Card>
<h2>Async</h2>
<Card>
Async data test:
<Await async={asyncData} fallback={<SpinningLoader />}>
{(data) => (
<p>Data: {data}</p>
)}
</Await>
<button type={"button"} onClick={() => setAsyncChange(asyncChange + 1)}>Change</button>
<button type={"button"} onClick={() => setAnotherChange(anotherChange + 1)}>Another change</button>
</Card>
</Application> </Application>
); );
} }

View file

@ -1,5 +1,5 @@
{ {
"version": "1.4.1", "version": "1.4.2",
"name": "@kernelui/core", "name": "@kernelui/core",
"description": "Kernel UI Core.", "description": "Kernel UI Core.",
"scripts": { "scripts": {

View file

@ -70,8 +70,15 @@ export function useAsync<T>(promise: Promisable<T>|PromiseFn<T>, deps: any[] = [
// Reconfigure the promise when any deps have changed. // Reconfigure the promise when any deps have changed.
useEffect(() => { useEffect(() => {
if (!(promise instanceof Promise)) if (!(promise instanceof Promise))
// If it's not a promise, there is nothing to wait for. { // If it's not a promise, there is nothing to wait for.
updateState({
pending: false,
promise: promise as Promisable<T>,
error: undefined,
data: promise as T,
});
return; return;
}
promise.then((result) => { promise.then((result) => {
// When there is a result, disable pending state and set retrieved data, without error. // When there is a result, disable pending state and set retrieved data, without error.