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 {useNotify} from "../src/Components/Notifications/Notifications";
|
||||
import {Notification, NotificationType} from "../src/Components/Notifications/Notification";
|
||||
import {Box} from "../src/Components/Box";
|
||||
import {Await, useAsync} from "../src/Async";
|
||||
|
||||
export function DemoApp()
|
||||
{
|
||||
|
@ -57,6 +59,14 @@ export function DemoApp()
|
|||
|
||||
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 (
|
||||
<Application>
|
||||
<MainMenu>
|
||||
|
@ -88,6 +98,7 @@ export function DemoApp()
|
|||
|
||||
<h2>Headings</h2>
|
||||
|
||||
<Box>
|
||||
<h1>Demo app</h1>
|
||||
|
||||
<h2>Second title</h2>
|
||||
|
@ -99,6 +110,7 @@ export function DemoApp()
|
|||
<h5>Fifth title</h5>
|
||||
|
||||
<h6>Sixth title</h6>
|
||||
</Box>
|
||||
|
||||
<h2>Buttons</h2>
|
||||
|
||||
|
@ -550,6 +562,19 @@ export function DemoApp()
|
|||
<button className={"flat"} onClick={() => { notify(<Notification>Test notification</Notification>); }}>Generic notification</button>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.4.1",
|
||||
"version": "1.4.2",
|
||||
"name": "@kernelui/core",
|
||||
"description": "Kernel UI Core.",
|
||||
"scripts": {
|
||||
|
|
|
@ -70,8 +70,15 @@ export function useAsync<T>(promise: Promisable<T>|PromiseFn<T>, deps: any[] = [
|
|||
// Reconfigure the promise when any deps have changed.
|
||||
useEffect(() => {
|
||||
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;
|
||||
}
|
||||
|
||||
promise.then((result) => {
|
||||
// When there is a result, disable pending state and set retrieved data, without error.
|
||||
|
|
Loading…
Reference in a new issue