Add async components demo and improve async state update when given argument is not a promise.
This commit is contained in:
parent
1963b6208a
commit
dd91d8dcfc
3 changed files with 40 additions and 8 deletions
|
@ -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,6 +98,7 @@ export function DemoApp()
|
||||||
|
|
||||||
<h2>Headings</h2>
|
<h2>Headings</h2>
|
||||||
|
|
||||||
|
<Box>
|
||||||
<h1>Demo app</h1>
|
<h1>Demo app</h1>
|
||||||
|
|
||||||
<h2>Second title</h2>
|
<h2>Second title</h2>
|
||||||
|
@ -99,6 +110,7 @@ export function DemoApp()
|
||||||
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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": {
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Reference in a new issue