refactor: rewrite grid style to atom

Author: iobuhov

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

@@ -1,18 +1,18 @@
-import classNames from "classnames";
-import { ComponentPropsWithoutRef, ReactElement } from "react";
-
-type P = Omit<ComponentPropsWithoutRef<"div">, "role">;
-
-export interface GridProps extends P {
-    className?: string;
-}
-
-export function Grid(props: GridProps): ReactElement {
-    const { className, style, children, ...rest } = props;
+import { observer } from "mobx-react-lite";
+import { PropsWithChildren, ReactElement } from "react";
+import { useDatagridConfig, useGridStyle } from "../model/hooks/injection-hooks";
 
+export const Grid = observer(function Grid(props: PropsWithChildren): ReactElement {
+    const config = useDatagridConfig();
+    const style = useGridStyle().get();
     return (
-        <div className={classNames("widget-datagrid-grid table", className)} role="grid" style={style} {...rest}>
-            {children}
+        <div
+            aria-multiselectable={config.multiselectable}
+            className={"widget-datagrid-grid table"}
+            role="grid"
+            style={style}
+        >
+            {props.children}
         </div>
     );
-}
+});

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

@@ -111,22 +111,12 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     const basicData = useBasicData();
 
-    const cssGridStyles = gridStyle(visibleColumns, {
-        selectItemColumn: selectActionHelper.showCheckboxColumn,
-        visibilitySelectorColumn: columnsHidable
-    });
-
-    const selectionEnabled = selectActionHelper.selectionType !== "None";
-
     return (
         <Fragment>
             <WidgetTopBar />
             <WidgetHeader headerTitle={headerTitle} headerContent={headerContent} />
             <WidgetContent>
-                <Grid
-                    aria-multiselectable={selectionEnabled ? selectActionHelper.selectionType === "Multi" : undefined}
-                    style={cssGridStyles}
-                >
+                <Grid>
                     <GridHeader
                         availableColumns={props.availableColumns}
                         columns={visibleColumns}
@@ -174,28 +164,3 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         </Fragment>
     );
 });
-
-function gridStyle(columns: GridColumn[], optional: OptionalColumns): CSSProperties {
-    const columnSizes = columns.map(c => c.getCssWidth());
-
-    const sizes: string[] = [];
-
-    if (optional.selectItemColumn) {
-        sizes.push("48px");
-    }
-
-    sizes.push(...columnSizes);
-
-    if (optional.visibilitySelectorColumn) {
-        sizes.push("54px");
-    }
-
-    return {
-        gridTemplateColumns: sizes.join(" ")
-    };
-}
-
-type OptionalColumns = {
-    selectItemColumn?: boolean;
-    visibilitySelectorColumn?: boolean;
-};

packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts

@@ -15,6 +15,7 @@ export interface DatagridConfig {
     enableSelectAll: boolean;
     keepSelection: boolean;
     pagingPosition: PagingPositionEnum;
+    multiselectable: true | undefined;
 }
 
 export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
@@ -32,12 +33,18 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         settingsStorageEnabled: isSettingsStorageEnabled(props),
         enableSelectAll: props.enableSelectAll,
         keepSelection: props.keepSelection,
-        pagingPosition: props.pagingPosition
+        pagingPosition: props.pagingPosition,
+        multiselectable: isMultiselectable(props)
     };
 
     return Object.freeze(config);
 }
 
+function isMultiselectable(props: DatagridContainerProps): true | undefined {
+    const type = props.itemSelection?.type;
+    return type === "Multi" ? true : undefined;
+}
+
 function isSelectionEnabled(props: DatagridContainerProps): boolean {
     return props.itemSelection !== undefined;
 }

packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts

@@ -14,6 +14,7 @@ import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
+import { gridStyleAtom } from "../models/grid.model";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { PaginationController } from "../services/PaginationController";
@@ -33,6 +34,7 @@ injected(WidgetFilterAPI, DG.parentChannelName, DG.filterHost);
 injected(emptyStateWidgetsAtom, CORE.mainGate, CORE.atoms.itemCount);
 injected(SelectionGate, CORE.mainGate);
 injected(createSelectionHelper, CORE.setupService, DG.selectionGate, CORE.config.optional);
+injected(gridStyleAtom, CORE.columnsStore, CORE.config);
 
 injected(
     SelectionCounterViewModel,
@@ -72,6 +74,8 @@ export class DatagridContainer extends Container {
         // Empty placeholder
         this.bind(DG.emptyPlaceholderVM).toInstance(EmptyPlaceholderViewModel).inSingletonScope();
         this.bind(DG.emptyPlaceholderWidgets).toInstance(emptyStateWidgetsAtom).inTransientScope();
+        // Grid columns style
+        this.bind(DG.gridColumnsStyle).toInstance(gridStyleAtom).inTransientScope();
 
         // Selection gate
         this.bind(DG.selectionGate).toInstance(SelectionGate).inTransientScope();

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

@@ -10,3 +10,4 @@ export const [useLoaderViewModel] = createInjectionHooks(DG.loaderVM);
 export const [useMainGate] = createInjectionHooks(CORE.mainGate);
 export const [usePaginationService] = createInjectionHooks(DG.paginationService);
 export const [useSelectionHelper] = createInjectionHooks(DG.selectionHelper);
+export const [useGridStyle] = createInjectionHooks(DG.gridColumnsStyle);

packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts

@@ -0,0 +1,40 @@
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
+import { CSSProperties } from "react";
+import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
+import { DatagridConfig } from "../configs/Datagrid.config";
+
+export function gridStyleAtom(columns: ColumnGroupStore, config: DatagridConfig): ComputedAtom<CSSProperties> {
+    return computed(() => {
+        return gridStyle(columns.visibleColumns, {
+            checkboxColumn: config.checkboxColumnEnabled,
+            selectorColumn: config.selectorColumnEnabled
+        });
+    });
+}
+
+function gridStyle(
+    columns: Array<{ getCssWidth(): string }>,
+    optional: {
+        checkboxColumn?: boolean;
+        selectorColumn?: boolean;
+    }
+): CSSProperties {
+    const columnSizes = columns.map(c => c.getCssWidth());
+
+    const sizes: string[] = [];
+
+    if (optional.checkboxColumn) {
+        sizes.push("48px");
+    }
+
+    sizes.push(...columnSizes);
+
+    if (optional.selectorColumn) {
+        sizes.push("54px");
+    }
+
+    return {
+        gridTemplateColumns: sizes.join(" ")
+    };
+}

packages/pluggableWidgets/datagrid-web/src/model/tokens.ts

@@ -18,7 +18,7 @@ import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-
 import { ComputedAtom, DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
 import { token } from "brandi";
 import { ListValue } from "mendix";
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { MainGateProps } from "../../typings/MainGateProps";
 import { EmptyPlaceholderViewModel } from "../features/empty-message/EmptyPlaceholder.viewModel";
 import { SelectAllBarViewModel } from "../features/select-all/SelectAllBar.viewModel";
@@ -98,7 +98,9 @@ export const DG_TOKENS = {
     selectionCounterVM: token<SelectionCounterViewModel>("SelectionCounterViewModel"),
 
     selectionGate: token<DerivedPropsGate<SelectionDynamicProps>>("@gate:GateForSelectionHelper"),
-    selectionHelper: token<SelectionHelperService | undefined>("SelectionHelperService")
+    selectionHelper: token<SelectionHelperService | undefined>("SelectionHelperService"),
+
+    gridColumnsStyle: token<ComputedAtom<CSSProperties>>("@computed:GridColumnsStyle")
 };
 
 /** "Select all" module tokens. */