Add dispatch function to useAsync to allow synchronous editing of async data after first retrieval.
This commit is contained in:
parent
23d0ab147b
commit
e2fc741fee
3 changed files with 10 additions and 7 deletions
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"version": "1.3.3",
|
"version": "1.4.0",
|
||||||
"name": "@kernelui/core",
|
"name": "@kernelui/core",
|
||||||
"description": "Kernel UI Core.",
|
"description": "Kernel UI Core.",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
@ -35,10 +35,10 @@ export type PromiseFn<T> = () => Promise<T>;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* React hook for promise result retrieval.
|
* React hook for promise result retrieval.
|
||||||
* @param promise The promise or a function that produces a promise.
|
* @param promise The promise or a function which produces a promise.
|
||||||
* @param deps When one of the `deps` change, it will wait for the promise again.
|
* @param deps When one of the `deps` change, it will wait for the promise again.
|
||||||
*/
|
*/
|
||||||
export function useAsync<T>(promise: Promisable<T>|PromiseFn<T>, deps: any[] = []): AsyncState<T>
|
export function useAsync<T>(promise: Promisable<T>|PromiseFn<T>, deps: any[] = []): [AsyncState<T>, React.Dispatch<T>]
|
||||||
{
|
{
|
||||||
// Get the actual promise from the function if there is one.
|
// Get the actual promise from the function if there is one.
|
||||||
if ((promise as PromiseFn<T>)?.call)
|
if ((promise as PromiseFn<T>)?.call)
|
||||||
|
@ -94,7 +94,10 @@ export function useAsync<T>(promise: Promisable<T>|PromiseFn<T>, deps: any[] = [
|
||||||
});
|
});
|
||||||
}, deps);
|
}, deps);
|
||||||
|
|
||||||
return state; // Return the current async state.
|
// Return the current async state and a dispatch data function.
|
||||||
|
return [state, (data: T) => {
|
||||||
|
updateState({data: data});
|
||||||
|
}];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -133,7 +136,7 @@ export function Async<T>({promise, fallback, children}: {
|
||||||
})
|
})
|
||||||
{
|
{
|
||||||
// Get async data from given promise.
|
// Get async data from given promise.
|
||||||
const async = useAsync(promise, [promise]);
|
const [async] = useAsync(promise, [promise]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// Wait for promised data.
|
// Wait for promised data.
|
||||||
|
|
|
@ -83,7 +83,7 @@ export function AsyncPaginate<T>({ count, getData, children }: {
|
||||||
})
|
})
|
||||||
{
|
{
|
||||||
// Getting pages count.
|
// Getting pages count.
|
||||||
const asyncCount = useAsync(count, []);
|
const [asyncCount] = useAsync(count, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Await async={asyncCount} fallback={<SpinningLoader />}>
|
<Await async={asyncCount} fallback={<SpinningLoader />}>
|
||||||
|
@ -127,7 +127,7 @@ export function AsyncPage<T>({page, getData, render}: {
|
||||||
}, [page]);
|
}, [page]);
|
||||||
|
|
||||||
// Getting page data.
|
// Getting page data.
|
||||||
const asyncPageData = useAsync(getPageData, [getPageData]);
|
const [asyncPageData] = useAsync(getPageData, [getPageData]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Await async={asyncPageData} fallback={<SpinningLoader />}>
|
<Await async={asyncPageData} fallback={<SpinningLoader />}>
|
||||||
|
|
Loading…
Reference in a new issue