fix: make selection helper observable

Author: iobuhov

packages/pluggableWidgets/selection-helper-web/package.json

@@ -36,6 +36,9 @@
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },
+    "dependencies": {
+        "mobx-react-lite": "4.0.7"
+    },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
         "@mendix/eslint-config-web-widgets": "workspace:*",

packages/pluggableWidgets/selection-helper-web/src/SelectionHelper.tsx

@@ -1,10 +1,11 @@
+import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
+import { useSelectionContextValue } from "@mendix/widget-plugin-grid/selection";
+import { observer } from "mobx-react-lite";
 import { createElement, ReactElement } from "react";
 import { SelectionHelperContainerProps } from "../typings/SelectionHelperProps";
-import { useSelectionContextValue } from "@mendix/widget-plugin-grid/selection";
 import { SelectionHelperComponent } from "./components/SelectionHelperComponent";
-import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
 
-export function SelectionHelper(props: SelectionHelperContainerProps): ReactElement {
+const SelectionHelper = observer(function SelectionHelper(props: SelectionHelperContainerProps): ReactElement {
     const contextValue = useSelectionContextValue();
 
     if (contextValue.hasError) {
@@ -21,15 +22,17 @@ export function SelectionHelper(props: SelectionHelperContainerProps): ReactElem
     return (
         <SelectionHelperComponent
             type={props.renderStyle}
-            status={selection.status}
-            onClick={selection.toggle}
+            status={selection.selectionStatus}
+            onClick={() => selection.togglePageSelection()}
             className={props.class}
             cssStyles={props.style}
         >
-            {selection.status === "all" && props.customAllSelected}
-            {selection.status === "some" && props.customSomeSelected}
-            {selection.status === "none" && props.customNoneSelected}
+            {selection.selectionStatus === "all" && props.customAllSelected}
+            {selection.selectionStatus === "some" && props.customSomeSelected}
+            {selection.selectionStatus === "none" && props.customNoneSelected}
             {props.checkboxCaption?.value ?? ""}
         </SelectionHelperComponent>
     );
-}
+});
+
+export { SelectionHelper };

packages/pluggableWidgets/selection-helper-web/src/components/SelectionHelperComponent.tsx

@@ -1,5 +1,5 @@
-import { createElement, CSSProperties, ReactElement, ReactNode, useMemo } from "react";
 import { ThreeStateCheckBox } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
+import { createElement, CSSProperties, ReactElement, ReactNode, useMemo } from "react";
 
 interface Props {
     type: "checkbox" | "custom";
@@ -11,6 +11,7 @@ interface Props {
 }
 
 export function SelectionHelperComponent(props: Props): ReactElement {
+    // TODO: replace with useId
     const id = useMemo(() => {
         return Date.now().toString();
     }, []);

packages/shared/widget-plugin-grid/src/selection/context.ts

@@ -1,60 +1,43 @@
-import { Context, createContext, useCallback, useContext, useMemo } from "react";
-import { error, Result, value } from "./result-meta.js";
+import { Context, createContext, useContext, useMemo } from "react";
 import { SelectionHelper } from "./helpers.js";
+import { error, Result, value } from "./result-meta.js";
 import { MultiSelectionStatus } from "./types.js";
 
 const CONTEXT_OBJECT_PATH = "com.mendix.widgets.web.selectable.selectionContext" as const;
 
-type SelectionContextValue = { status: "all" | "some" | "none"; toggle: () => void };
-type SelectionContextObject = Context<SelectionContextValue | undefined>;
+interface SelectionStore {
+    /** @observable */
+    selectionStatus: MultiSelectionStatus;
+    togglePageSelection(): void;
+}
+
+type SelectionContextObject = Context<SelectionStore | undefined>;
+
 declare global {
     interface Window {
         [CONTEXT_OBJECT_PATH]?: SelectionContextObject;
     }
 }
 
 export function getGlobalSelectionContext(): SelectionContextObject {
-    if (window[CONTEXT_OBJECT_PATH] === undefined) {
-        window[CONTEXT_OBJECT_PATH] = createContext<SelectionContextValue | undefined>(undefined);
-    }
-
-    return window[CONTEXT_OBJECT_PATH]!;
+    return (window[CONTEXT_OBJECT_PATH] ??= createContext<SelectionStore | undefined>(undefined));
 }
 
-type UseCreateSelectionContextValueReturn =
-    | {
-          status: MultiSelectionStatus;
-          toggle: () => void;
-      }
-    | undefined;
+type UseCreateSelectionContextValueReturn = SelectionStore | undefined;
 
 export function useCreateSelectionContextValue(
     selection: SelectionHelper | undefined
 ): UseCreateSelectionContextValueReturn {
-    const toggleSelection = useCallback(() => {
-        if (selection?.type === "Multi") {
-            if (selection.selectionStatus === "all") {
-                selection.selectNone();
-            } else {
-                selection.selectAll();
-            }
-        }
-    }, [selection]);
-    const multiSelectionStatus = selection?.type === "Multi" ? selection.selectionStatus : undefined;
-
     return useMemo(() => {
-        if (multiSelectionStatus !== undefined) {
-            return {
-                status: multiSelectionStatus,
-                toggle: toggleSelection
-            };
+        if (selection?.type === "Multi") {
+            return selection;
         }
 
         return undefined;
-    }, [multiSelectionStatus, toggleSelection]);
+    }, [selection]);
 }
 
-export function useSelectionContextValue(): Result<SelectionContextValue, OutOfContextError> {
+export function useSelectionContextValue(): Result<SelectionStore, OutOfContextError> {
     const context = getGlobalSelectionContext();
     const contextValue = useContext(context);
 

packages/shared/widget-plugin-grid/src/selection/helpers.ts

@@ -1,5 +1,6 @@
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import type { ActionValue, ListValue, ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
+import { action, computed, makeObservable, observable } from "mobx";
 import { useEffect, useRef, useState } from "react";
 import { Direction, MoveEvent1D, MoveEvent2D, MultiSelectionStatus, ScrollKeyCode, SelectionMode, Size } from "./types";
 
@@ -32,6 +33,13 @@ export class MultiSelectionHelper {
         private selectableItems: ObjectItem[]
     ) {
         this.rangeStart = undefined;
+        type PrivateMembers = "selectionValue" | "selectableItems";
+        makeObservable<this, PrivateMembers>(this, {
+            selectionStatus: computed,
+            selectionValue: observable.ref,
+            selectableItems: observable.ref,
+            updateProps: action
+        });
     }
 
     isSelected(value: ObjectItem): boolean {
@@ -252,7 +260,7 @@ export class MultiSelectionHelper {
         }
     }
 
-    _findIndexInList(index: number, direction: Direction, size: Size): number {
+    private _findIndexInList(index: number, direction: Direction, size: Size): number {
         const first = 0;
         const last = this.selectableItems.length - 1;
         const isForward = direction === "forward";
@@ -266,7 +274,7 @@ export class MultiSelectionHelper {
         return clamp(result, first, last);
     }
 
-    _findIndexInGrid(index: number, keycode: ScrollKeyCode, numberOfColumns: number): number {
+    private _findIndexInGrid(index: number, keycode: ScrollKeyCode, numberOfColumns: number): number {
         const { columnIndex } = getColumnAndRowBasedOnIndex(numberOfColumns, this.selectableItems.length, index);
 
         if (keycode === "PageDown") {
@@ -319,6 +327,14 @@ export class MultiSelectionHelper {
 
         this._setRangeEnd(endItem, mode);
     }
+
+    togglePageSelection(): void {
+        if (this.selectionStatus === "all") {
+            this.selectNone();
+        } else {
+            this.selectAll();
+        }
+    }
 }
 
 const clamp = (num: number, min: number, max: number): number => Math.min(Math.max(num, min), max);