refactor: improve naming, reduce prop drilling and unify component rendering

Author: yordan-st

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -117,8 +117,7 @@ const Container = observer((props: Props): ReactElement => {
                 pageSize={props.pageSize}
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
-                clearSelectionButtonLabel={props.clearSelectionButtonLabel?.value}
-                selectionCountVisibility={props.selectionCountVisibility}
+                selectionCountPosition={props.selectionCountPosition}
                 paging={paginationCtrl.showPagination}
                 pagingPosition={props.pagingPosition}
                 showPagingButtons={props.showPagingButtons}

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -244,7 +244,7 @@
                         <enumerationValue key="both">Both</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="selectionCountVisibility" type="enumeration" defaultValue="bottom" required="true">
+                <property key="selectionCountPosition" type="enumeration" defaultValue="bottom" required="true">
                     <caption>Show selection count</caption>
                     <description />
                     <enumerationValues>

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

@@ -3,19 +3,25 @@ import { observer } from "mobx-react-lite";
 import { createElement } from "react";
 import { useDatagridRootScope } from "../helpers/root-context";
 
+type SelectionCounterLocation = "top" | "bottom" | undefined;
+
 export const SelectionCounter = observer(function SelectionCounter({
-    clearSelectionButtonLabel
+    location
 }: {
-    clearSelectionButtonLabel?: string;
+    location?: SelectionCounterLocation;
 }) {
     const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
 
+    const containerClass = location === "top" ? "widget-datagrid-tb-start" : "widget-datagrid-pb-start";
+
     return (
         <If condition={selectionCountStore.displayCount !== ""}>
-            <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
-            <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
-                {clearSelectionButtonLabel || "Clear selection"}
-            </button>
+            <div className={containerClass}>
+                <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
+                <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
+                    {selectionCountStore.clearButtonLabel}
+                </button>
+            </div>
         </If>
     );
 });

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

@@ -9,7 +9,7 @@ import {
     LoadingTypeEnum,
     PaginationEnum,
     PagingPositionEnum,
-    SelectionCountVisibilityEnum,
+    SelectionCountPositionEnum,
     ShowPagingButtonsEnum
 } from "../../typings/DatagridProps";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
@@ -26,6 +26,7 @@ import { WidgetFooter } from "./WidgetFooter";
 import { WidgetHeader } from "./WidgetHeader";
 import { WidgetRoot } from "./WidgetRoot";
 import { WidgetTopBar } from "./WidgetTopBar";
+import { SelectionCounter } from "./SelectionCounter";
 
 export interface WidgetProps<C extends GridColumn, T extends ObjectItem = ObjectItem> {
     CellComponent: CellComponent<C>;
@@ -49,8 +50,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     page: number;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
-    clearSelectionButtonLabel?: string;
-    selectionCountVisibility?: SelectionCountVisibilityEnum;
+    selectionCountPosition?: SelectionCountPositionEnum;
     pageSize: number;
     paging: boolean;
     pagingPosition: PagingPositionEnum;
@@ -121,8 +121,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         headerContent,
         headerTitle,
         loadMoreButtonCaption,
-        clearSelectionButtonLabel,
-        selectionCountVisibility,
+        selectionCountPosition,
         numberOfItems,
         page,
         pageSize,
@@ -139,8 +138,8 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
     const { basicData, selectionCountStore } = useDatagridRootScope();
 
     const showHeader = !!headerContent;
-    const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both");
-    const showFooter = paging && (pagingPosition === "bottom" || pagingPosition === "both");
+    const showTopBarPagination = paging && (pagingPosition === "top" || pagingPosition === "both");
+    const showFooterPagination = paging && (pagingPosition === "bottom" || pagingPosition === "both");
 
     const pagination = paging ? (
         <Pagination
@@ -157,6 +156,14 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         />
     ) : null;
 
+    const selectionCount =
+        selectionCountStore.selectedCount > 0 && selectionCountPosition !== "off" && selectionCountPosition ? (
+            <SelectionCounter location={selectionCountPosition} />
+        ) : null;
+
+    const showTopbarSelectionCount = selectionCount && selectionCountPosition === "top";
+    const showFooterSelectionCount = selectionCount && selectionCountPosition === "bottom";
+
     const cssGridStyles = gridStyle(visibleColumns, {
         selectItemColumn: selectActionHelper.showCheckboxColumn,
         visibilitySelectorColumn: columnsHidable
@@ -167,13 +174,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
     return (
         <Fragment>
             <WidgetTopBar
-                selectedCount={selectionCountStore.selectedCount}
-                showTopBar={showTopBar}
-                selectionCountVisibility={selectionCountVisibility}
-                clearSelectionButtonLabel={clearSelectionButtonLabel}
-            >
-                {pagination}
-            </WidgetTopBar>
+                pagination={showTopBarPagination ? pagination : undefined}
+                selectionCount={showTopbarSelectionCount ? selectionCount : undefined}
+            ></WidgetTopBar>
             {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
             <WidgetContent>
                 <Grid
@@ -244,13 +247,10 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 </Grid>
             </WidgetContent>
             <WidgetFooter
-                selectedCount={selectionCountStore.selectedCount}
-                showFooter={showFooter}
-                pagination={pagination}
+                pagination={showFooterPagination ? pagination : undefined}
+                selectionCount={showFooterSelectionCount ? selectionCount : undefined}
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
-                clearSelectionButtonLabel={clearSelectionButtonLabel}
-                selectionCountVisibility={selectionCountVisibility}
                 hasMoreItems={hasMoreItems}
                 setPage={setPage}
             />

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

@@ -1,43 +1,24 @@
 import { createElement, ReactElement, ReactNode } from "react";
-import { PaginationEnum, SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
-import { SelectionCounter } from "./SelectionCounter";
+import { PaginationEnum } from "../../typings/DatagridProps";
 
 type WidgetFooterProps = {
     pagination: ReactNode;
+    selectionCount: ReactNode;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
-    clearSelectionButtonLabel?: string;
-    selectionCountVisibility?: SelectionCountVisibilityEnum;
     hasMoreItems: boolean;
-    showFooter: boolean;
-    selectedCount: number;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
-    const {
-        pagination,
-        paginationType,
-        loadMoreButtonCaption,
-        clearSelectionButtonLabel,
-        selectionCountVisibility,
-        hasMoreItems,
-        setPage,
-        showFooter,
-        selectedCount,
-        ...rest
-    } = props;
+    const { pagination, selectionCount, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
 
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
-                {selectionCountVisibility === "bottom" && selectedCount > 0 && (
-                    <div className="widget-datagrid-pb-start">
-                        <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-                    </div>
-                )}
+                {selectionCount}
                 <div className="widget-datagrid-pb-end">
-                    {showFooter && pagination}
+                    {pagination}
                     {hasMoreItems && paginationType === "loadMore" && (
                         <button
                             className="btn btn-primary widget-datagrid-load-more"

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

@@ -1,25 +1,18 @@
-import { createElement, ReactElement } from "react";
-import { SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
-import { SelectionCounter } from "./SelectionCounter";
+import { createElement, ReactElement, ReactNode } from "react";
 
 type WidgetTopBarProps = {
-    selectionCountVisibility?: SelectionCountVisibilityEnum;
-    clearSelectionButtonLabel?: string;
-    showTopBar: boolean;
-    selectedCount: number;
+    pagination: ReactNode;
+    selectionCount: ReactNode;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
-    const { selectionCountVisibility, clearSelectionButtonLabel, showTopBar, selectedCount, ...restProps } = props;
+    const { pagination, selectionCount, ...rest } = props;
+
     return (
-        <div {...restProps} className="widget-datagrid-top-bar table-header">
+        <div {...rest} className="widget-datagrid-top-bar table-header">
             <div className="widget-datagrid-padding-top">
-                {selectionCountVisibility === "top" && selectedCount > 0 && (
-                    <div className="widget-datagrid-tb-start">
-                        <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-                    </div>
-                )}
-                {showTopBar && <div className="widget-datagrid-tb-end">{props.children}</div>}
+                {selectionCount}
+                {pagination && <div className="widget-datagrid-tb-end">{pagination}</div>}
             </div>
         </div>
     );

packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts

@@ -34,6 +34,7 @@ type RequiredProps = Pick<
     | "pagination"
     | "showPagingButtons"
     | "showNumberOfRows"
+    | "clearSelectionButtonLabel"
 >;
 
 type Gate = DerivedPropsGate<RequiredProps>;

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -53,7 +53,7 @@ export type ShowPagingButtonsEnum = "always" | "auto";
 
 export type PagingPositionEnum = "bottom" | "top" | "both";
 
-export type SelectionCountVisibilityEnum = "top" | "bottom" | "off";
+export type SelectionCountPositionEnum = "top" | "bottom" | "off";
 
 export type ShowEmptyPlaceholderEnum = "none" | "custom";
 
@@ -107,7 +107,7 @@ export interface DatagridContainerProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
-    selectionCountVisibility: SelectionCountVisibilityEnum;
+    selectionCountPosition: SelectionCountPositionEnum;
     clearSelectionButtonLabel?: DynamicValue<string>;
     loadMoreButtonCaption?: DynamicValue<string>;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
@@ -161,7 +161,7 @@ export interface DatagridPreviewProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
-    selectionCountVisibility: SelectionCountVisibilityEnum;
+    selectionCountPosition: SelectionCountPositionEnum;
     clearSelectionButtonLabel: string;
     loadMoreButtonCaption: string;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;

packages/shared/widget-plugin-grid/src/selection/stores/SelectionCountStore.ts

@@ -6,26 +6,34 @@ type Gate = DerivedPropsGate<{
     itemSelection?: SelectionSingleValue | SelectionMultiValue;
     selectedCountTemplateSingular?: DynamicValue<string>;
     selectedCountTemplatePlural?: DynamicValue<string>;
+    clearSelectionButtonLabel?: DynamicValue<string>;
 }>;
 
 export class SelectionCountStore {
     private gate: Gate;
     private singular: string = "%d row selected";
     private plural: string = "%d rows selected";
+    private defaultClearLabel: string = "Clear selection";
 
-    constructor(gate: Gate, spec: { singular?: string; plural?: string } = {}) {
+    constructor(gate: Gate, spec: { singular?: string; plural?: string; clearLabel?: string } = {}) {
         this.singular = spec.singular ?? this.singular;
         this.plural = spec.plural ?? this.plural;
+        this.defaultClearLabel = spec.clearLabel ?? this.defaultClearLabel;
         this.gate = gate;
 
         makeObservable(this, {
             displayCount: computed,
             selectedCount: computed,
             fmtSingular: computed,
-            fmtPlural: computed
+            fmtPlural: computed,
+            clearButtonLabel: computed
         });
     }
 
+    get clearButtonLabel(): string {
+        return this.gate.props.clearSelectionButtonLabel?.value || this.defaultClearLabel;
+    }
+
     get fmtSingular(): string {
         return this.gate.props.selectedCountTemplateSingular?.value || this.singular;
     }