feat(react): add custom props for data loader components

gravity-ui · Aug 5, 2024 · 21ffe70 · 21ffe70
1 parent f88b0bd
commit 21ffe70
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 25 deletions.
diff --git a/src/react/components/DataInfiniteLoader/DataInfiniteLoader.tsx b/src/react/components/DataInfiniteLoader/DataInfiniteLoader.tsx
@@ -14,6 +14,9 @@ export const DataInfiniteLoader = <TError,>({
     LoadingView,
     ErrorView,
     MoreView,
+    loadingViewProps,
+    errorViewProps,
+    moreViewProps,
     children,
 }: DataInfiniteLoaderProps<TError>): React.ReactNode => {
     const errorAction = React.useMemo<ErrorViewProps<TError>['action']>(
@@ -22,36 +25,32 @@ export const DataInfiniteLoader = <TError,>({
         [errorActionProp],
     );
 
-    const content = React.useMemo(() => {
+    const renderContent = () => {
         if (status === 'loading') {
-            return <LoadingView />;
+            return <LoadingView {...loadingViewProps} />;
         }
 
         if (status === 'error') {
-            return <ErrorView error={error} action={errorAction} />;
+            return <ErrorView error={error} action={errorAction} {...errorViewProps} />;
         }
 
         if (status === 'success' && hasNextPage) {
-            return <MoreView isLoading={isFetchingNextPage} onClick={fetchNextPage} />;
+            return (
+                <MoreView
+                    isLoading={isFetchingNextPage}
+                    onClick={fetchNextPage}
+                    {...moreViewProps}
+                />
+            );
         }
 
         return null;
-    }, [
-        status,
-        hasNextPage,
-        LoadingView,
-        ErrorView,
-        error,
-        errorAction,
-        MoreView,
-        isFetchingNextPage,
-        fetchNextPage,
-    ]);
+    };
 
     return (
         <>
             {status === 'success' ? children : null}
-            {content}
+            {renderContent()}
         </>
     );
 };
diff --git a/src/react/components/DataInfiniteLoader/types.ts b/src/react/components/DataInfiniteLoader/types.ts
@@ -8,15 +8,23 @@ export interface MoreViewProps {
     onClick: () => void;
 }
 
-export interface DataInfiniteLoaderProps<TError> {
+export interface DataInfiniteLoaderProps<
+    TError,
+    TLoadingViewProps extends {} = {},
+    TErrorViewProps extends ErrorViewProps<TError> = ErrorViewProps<TError>,
+    TMoreViewProps extends MoreViewProps = MoreViewProps,
+> {
     status: DataLoaderStatus;
     error: TError | null;
     errorAction?: ErrorAction | ErrorAction['handler'];
     hasNextPage: boolean;
     fetchNextPage: () => unknown;
     isFetchingNextPage: boolean;
-    LoadingView: ComponentType;
-    ErrorView: ComponentType<ErrorViewProps<TError>>;
-    MoreView: ComponentType<MoreViewProps>;
+    LoadingView: ComponentType<TLoadingViewProps>;
+    ErrorView: ComponentType<TErrorViewProps>;
+    MoreView: ComponentType<TMoreViewProps>;
+    loadingViewProps?: TLoadingViewProps;
+    errorViewProps?: Omit<TErrorViewProps, keyof ErrorViewProps<TError>>;
+    moreViewProps?: Omit<TMoreViewProps, keyof MoreViewProps>;
     children: ReactNode;
 }
diff --git a/src/react/components/DataLoader/DataLoader.tsx b/src/react/components/DataLoader/DataLoader.tsx
@@ -10,6 +10,8 @@ export const DataLoader = <TError,>({
     errorAction: errorActionProp,
     LoadingView,
     ErrorView,
+    loadingViewProps,
+    errorViewProps,
     children,
 }: DataLoaderProps<TError>): React.ReactNode => {
     const errorAction = React.useMemo<ErrorViewProps<TError>['action']>(
@@ -19,11 +21,11 @@ export const DataLoader = <TError,>({
     );
 
     if (status === 'loading') {
-        return <LoadingView />;
+        return <LoadingView {...loadingViewProps} />;
     }
 
     if (status === 'error') {
-        return <ErrorView error={error} action={errorAction} />;
+        return <ErrorView error={error} action={errorAction} {...errorViewProps} />;
     }
 
     return <>{children}</>;

diff --git a/src/react/components/DataLoader/types.ts b/src/react/components/DataLoader/types.ts
@@ -3,11 +3,17 @@ import type {ComponentType, ReactNode} from 'react';
 import type {DataLoaderStatus} from '../../../core';
 import type {ErrorAction, ErrorViewProps} from '../types';
 
-export interface DataLoaderProps<TError> {
+export interface DataLoaderProps<
+    TError,
+    TLoadingViewProps extends {} = {},
+    TErrorViewProps extends ErrorViewProps<TError> = ErrorViewProps<TError>,
+> {
     status: DataLoaderStatus;
     error: TError | null;
     errorAction?: ErrorAction | ErrorAction['handler'];
-    LoadingView: ComponentType;
-    ErrorView: ComponentType<ErrorViewProps<TError>>;
+    LoadingView: ComponentType<TLoadingViewProps>;
+    ErrorView: ComponentType<TErrorViewProps>;
+    loadingViewProps?: TLoadingViewProps;
+    errorViewProps?: Omit<TErrorViewProps, keyof ErrorViewProps<TError>>;
     children: ReactNode;
 }