Add dispatch function to useAsync to allow synchronous editing of async data after first retrieval.
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-24 22:50:43 +02:00
parent 23d0ab147b
commit e2fc741fee
Signed by: Madeorsk
GPG key ID: 677E51CA765BB79F
3 changed files with 10 additions and 7 deletions

View file

@ -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": {

View file

@ -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.

View file

@ -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 />}>