refactor: apply feedback

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx

@@ -1,14 +1,14 @@
-import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
-import { Fragment, PropsWithChildren, ReactElement, ReactNode, RefObject, UIEventHandler, useCallback } from "react";
+import { Fragment, PropsWithChildren, ReactElement, ReactNode } from "react";
 import {
     useDatagridConfig,
     useItemCount,
     useLoaderViewModel,
     usePaginationService,
     useVisibleColumnsCount
 } from "../model/hooks/injection-hooks";
+import { useBodyScroll } from "../model/hooks/useBodyScroll";
 import { RowSkeletonLoader } from "./loader/RowSkeletonLoader";
 import { SpinnerLoader } from "./loader/SpinnerLoader";
 
@@ -76,30 +76,6 @@ const ContentGuard = observer(function ContentGuard(props: PropsWithChildren): R
     );
 });
 
-function useBodyScroll(): {
-    handleScroll: UIEventHandler<HTMLDivElement> | undefined;
-    bodySize: number;
-    containerRef: RefObject<HTMLDivElement | null>;
-    isInfinite: boolean;
-} {
-    const paging = usePaginationService();
-    const setPage = useCallback((cb: (n: number) => number) => paging.setPage(cb), [paging]);
-
-    const isInfinite = paging.pagination === "virtualScrolling";
-    const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
-        hasMoreItems: paging.hasMoreItems,
-        isInfinite,
-        setPage
-    });
-
-    return {
-        handleScroll: isInfinite ? trackScrolling : undefined,
-        bodySize,
-        containerRef,
-        isInfinite
-    };
-}
-
 const Spinner = (): ReactNode => (
     <div className="widget-datagrid-loader-container">
         <SpinnerLoader withMargins size="large" />

packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement } from "react";
 import { ExportProgressDialog } from "../features/data-export/ExportProgressDialog";
 import { EmptyPlaceholder } from "../features/empty-message/EmptyPlaceholder";
 import { SelectAllBar } from "../features/select-all/SelectAllBar";
@@ -14,7 +14,7 @@ import { WidgetHeader } from "./WidgetHeader";
 import { WidgetRoot } from "./WidgetRoot";
 import { WidgetTopBar } from "./WidgetTopBar";
 
-export function Widget(props: { onExportCancel?: () => void }): ReactNode {
+export function Widget(props: { onExportCancel?: () => void }): ReactElement {
     return (
         <WidgetRoot>
             <WidgetTopBar />

packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx

@@ -6,7 +6,7 @@ import { useSelectionCounterViewModel } from "../features/selection-counter/inje
 import { useDatagridConfig, usePaginationService, useTexts } from "../model/hooks/injection-hooks";
 import { Pagination } from "./Pagination";
 
-export const WidgetFooter = observer(function WidgetFooter(): ReactElement | null {
+export const WidgetFooter = observer(function WidgetFooter(): ReactElement {
     const config = useDatagridConfig();
     const paging = usePaginationService();
     const { loadMoreButtonCaption } = useTexts();

packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx

@@ -1,6 +1,6 @@
 import { getGlobalFilterContextObject } from "@mendix/widget-plugin-filtering/context";
 import { getGlobalSelectionContext, useCreateSelectionContextValue } from "@mendix/widget-plugin-grid/selection";
-import { PropsWithChildren, ReactElement, ReactNode } from "react";
+import { PropsWithChildren, ReactElement } from "react";
 import { useDatagridFilterAPI, useMainGate, useSelectionHelper, useTexts } from "../model/hooks/injection-hooks";
 
 const Selection = getGlobalSelectionContext();
@@ -16,7 +16,7 @@ function HeaderContainer(props: PropsWithChildren): ReactElement {
     );
 }
 
-export const WidgetHeader = function WidgetHeader(): ReactNode {
+export const WidgetHeader = function WidgetHeader(): ReactElement | null {
     const { headerAriaLabel } = useTexts();
     const { filtersPlaceholder } = useMainGate().props;
 

packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx

@@ -1,9 +1,11 @@
-import { ReactNode } from "react";
+import { ReactElement } from "react";
 import { ExportAlert } from "../../components/ExportAlert";
 import { PseudoModal } from "../../components/PseudoModal";
 import { useExportProgressService, useTexts } from "../../model/hooks/injection-hooks";
 
-export const ExportProgressDialog = function ExportProgressDialog(props: { onExportCancel?: () => void }): ReactNode {
+export const ExportProgressDialog = function ExportProgressDialog(props: {
+    onExportCancel?: () => void;
+}): ReactElement | null {
     const progressSrv = useExportProgressService();
     const texts = useTexts();
 

packages/pluggableWidgets/datagrid-web/src/model/hooks/useBodyScroll.ts

@@ -0,0 +1,27 @@
+import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
+import { RefObject, UIEventHandler, useCallback } from "react";
+import { usePaginationService } from "./injection-hooks";
+
+export function useBodyScroll(): {
+    handleScroll: UIEventHandler<HTMLDivElement> | undefined;
+    bodySize: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    isInfinite: boolean;
+} {
+    const paging = usePaginationService();
+    const setPage = useCallback((cb: (n: number) => number) => paging.setPage(cb), [paging]);
+
+    const isInfinite = paging.pagination === "virtualScrolling";
+    const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
+        hasMoreItems: paging.hasMoreItems,
+        isInfinite,
+        setPage
+    });
+
+    return {
+        handleScroll: isInfinite ? trackScrolling : undefined,
+        bodySize,
+        containerRef,
+        isInfinite
+    };
+}

packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx

@@ -1,15 +1,14 @@
-import { dynamic, list, listAttr, listExp } from "@mendix/widget-plugin-test-utils";
+import { dynamic, list, listAttribute, listExpression } from "@mendix/widget-plugin-test-utils";
 import { ColumnsType, DatagridContainerProps } from "../../typings/DatagridProps";
 import { ColumnStore } from "../helpers/state/column/ColumnStore";
 import { IColumnParentStore } from "../helpers/state/ColumnGroupStore";
-// import { SelectActionHelper } from "../model/services/GridSelectActionsProvider.service";
 import { ColumnId, GridColumn } from "../typings/GridColumn";
 
 export const column = (header = "Test", patch?: (col: ColumnsType) => void): ColumnsType => {
     const c: ColumnsType = {
         alignment: "left" as const,
-        attribute: listAttr(() => "Attr value"),
-        dynamicText: listExp(() => "Dynamic text"),
+        attribute: listAttribute(() => "Attr value"),
+        dynamicText: listExpression(() => "Dynamic text"),
         draggable: false,
         header: dynamic(header),
         hidable: "no" as const,

packages/shared/widget-plugin-grid/src/interfaces/MultiSelectionService.ts

@@ -4,7 +4,6 @@ import { MoveEvent1D, MoveEvent2D, MultiSelectionStatus, SelectionMode } from ".
 export interface MultiSelectionService {
     type: "Multi";
     selectionStatus: MultiSelectionStatus;
-    togglePageSelection(): void;
     isSelected(item: ObjectItem): boolean;
     add(item: ObjectItem): void;
     remove(item: ObjectItem): void;