CardView: Fix the load panel overlapping the whole page (DevExpress#31005)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (fluent-blue-light).png

@@ -0,0 +1,70 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { testScreenshot } from '../../helpers/themeUtils';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { safeSizeTest } from '../../helpers/safeSizeTest';
+
+fixture.disablePageReloads`CardView - LoadPanel`
+  .page(url(__dirname, '../container.html'));
+
+const CARD_VIEW_SELECTOR = '#container';
+
+safeSizeTest('Default render', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'load-panel.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [800, 800]).before(async () => createWidget('dxCardView', {
+  width: 500,
+  height: 300,
+  dataSource: {
+    key: 'id',
+    load: () => new Promise(() => {}),
+  },
+  columns: ['A', 'B', 'C', 'D'],
+}));
+
+safeSizeTest('Default render when CardView has a large height', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'load-panel-with-large-height.png');
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [800, 800]).before(async () => createWidget('dxCardView', {
+  width: 500,
+  height: 3000,
+  dataSource: {
+    key: 'id',
+    load: () => new Promise(() => {}),
+  },
+  columns: ['A', 'B', 'C', 'D'],
+}));
+
+safeSizeTest('The load panel should match the size of the component’s root container', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const loadPanel = cardView.getLoadPanel();
+  const cardViewOffset = await cardView.getElementOffset();
+
+  await t
+    .expect(loadPanel.getShadowWidth())
+    .eql(500)
+    .expect(loadPanel.getShadowHeight())
+    .eql(300)
+    .expect(loadPanel.getShadowOffset())
+    .eql(cardViewOffset);
+}, [800, 800]).before(async () => createWidget('dxCardView', {
+  width: 500,
+  height: 300,
+  dataSource: {
+    key: 'id',
+    load: () => new Promise(() => {}),
+  },
+  columns: ['A', 'B', 'C', 'D'],
+}));

e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (generic-light).png

@@ -10,6 +10,7 @@ import { ToolbarView } from '@ts/grids/new/grid_core/toolbar/view';
 import type { ComponentType, RefObject } from 'inferno';
 
 import { A11yStatusContainer, AccessibilityController } from '../grid_core/accessibility/index';
+import { CommonPropsContext } from '../grid_core/core/common_props_context';
 import type { Config } from '../grid_core/core/config_context';
 import { ConfigContext } from '../grid_core/core/config_context';
 import { EditPopupView } from '../grid_core/editing/popup/view';
@@ -34,7 +35,9 @@ interface MainViewProps {
   EditPopup: ComponentType;
   ContextMenu: ComponentType;
   config: Config;
-  rootElementRef: RefObject<HTMLDivElement>;
+  commonProps: {
+    rootElementRef: RefObject<HTMLDivElement>;
+  };
   accessibilityDescription: string;
   accessibilityStatus: string;
   onKeyDown: (event: KeyboardEvent) => void;
@@ -51,15 +54,16 @@ function MainViewComponent({
   ContextMenu,
   EditPopup,
   config,
-  rootElementRef,
+  commonProps,
   accessibilityDescription,
   accessibilityStatus,
   onKeyDown,
 }: MainViewProps): JSX.Element {
   return (<>
     <ConfigContext.Provider value={config}>
+      <CommonPropsContext.Provider value={commonProps}>
         <RootElementUpdater
-          rootElementRef={rootElementRef}
+          rootElementRef={commonProps.rootElementRef}
           className={CLASSES.cardView}
         >
           <div
@@ -91,6 +95,7 @@ function MainViewComponent({
             <ContextMenu/>
           </div>
         </RootElementUpdater>
+      </CommonPropsContext.Provider>
     </ConfigContext.Provider>
   </>);
 }
@@ -104,6 +109,10 @@ export class MainView extends View<MainViewProps> {
     templatesRenderAsynchronously: this.options.oneWay('templatesRenderAsynchronously').value,
   }));
 
+  private readonly commonProps = {
+    rootElementRef: { current: this.root! },
+  };
+
   public static dependencies = [
     ContentView,
     PagerView,
@@ -139,6 +148,8 @@ export class MainView extends View<MainViewProps> {
   // eslint-disable-next-line @stylistic/max-len
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
   protected override getProps() {
+    this.commonProps.rootElementRef.current = this.root!;
+
     return computed(() => ({
       Toolbar: this.toolbar.asInferno(),
       Content: this.content.asInferno(),
@@ -150,7 +161,7 @@ export class MainView extends View<MainViewProps> {
       EditPopup: this.editPopup.asInferno(),
       ContextMenu: this.contextMenu.asInferno(),
       config: this.config.value,
-      rootElementRef: { current: this.root! },
+      commonProps: this.commonProps,
       onKeyDown: (event: KeyboardEvent): void => {
         this.keyboardNavigation.onKeyDown(event);
       },

e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (material-blue-light).png

@@ -5,12 +5,13 @@ import type { ErrorRowProperties } from '@ts/grids/new/grid_core/content_view/er
 import { ErrorRow } from '@ts/grids/new/grid_core/content_view/error_row';
 import type { NoDataTextProperties } from '@ts/grids/new/grid_core/content_view/no_data_text';
 import { NoDataText } from '@ts/grids/new/grid_core/content_view/no_data_text';
-import { LoadPanel, type LoadPanelProperties } from '@ts/grids/new/grid_core/inferno_wrappers/load_panel';
 import type { Props as ScrollableProps } from '@ts/grids/new/grid_core/inferno_wrappers/scrollable';
 import { Scrollable } from '@ts/grids/new/grid_core/inferno_wrappers/scrollable';
 import type { RefObject } from 'inferno';
 import { Component, createRef } from 'inferno';
 
+import { LoadPanel, type LoadPanelProperties } from './load_panel';
+
 export const CLASSES = {
   contentView: 'dx-gridcore-contentview',
 };

e2e/testcafe-devextreme/tests/cardView/etalons/load-panel-with-large-height (fluent-blue-light).png

@@ -1 +1,36 @@
-export { LoadPanel } from '../inferno_wrappers/load_panel';
+import type { PositionConfig } from '@js/common/core/animation';
+import { getWindow } from '@js/core/utils/window';
+import { BaseInfernoComponent } from '@ts/core/r1/runtime/inferno/index';
+
+import { CommonPropsContext } from '../core/common_props_context';
+import type { LoadPanelProperties } from '../inferno_wrappers/load_panel';
+import { LoadPanel as LoadPanelBase } from '../inferno_wrappers/load_panel';
+
+export { LoadPanelProperties };
+
+export class LoadPanel extends BaseInfernoComponent<LoadPanelProperties> {
+  private calculatePosition(rootElement: HTMLElement): PositionConfig {
+    const window = getWindow();
+
+    if (rootElement.offsetHeight > window.innerHeight) {
+      return {
+        of: window,
+        boundary: rootElement,
+        collision: 'fit',
+      };
+    }
+    return { of: rootElement };
+  }
+
+  public render(): JSX.Element {
+    const { rootElementRef } = this.context[CommonPropsContext.id];
+
+    const loadPanelProperties: LoadPanelProperties = {
+      container: rootElementRef.current,
+      position: this.calculatePosition(rootElementRef.current),
+      ...this.props,
+    };
+
+    return <LoadPanelBase {...loadPanelProperties} />;
+  }
+}