fix: add sort api for preview

Author: iobuhov

packages/pluggableWidgets/dropdown-sort-web/src/DropdownSort.editorPreview.tsx

@@ -17,6 +17,7 @@ export function preview(props: DropdownSortPreviewProps): ReactElement {
             screenReaderButtonCaption={props.screenReaderButtonCaption}
             screenReaderInputCaption={props.screenReaderInputCaption}
             styles={parseStyle(props.style)}
+            isPreview
         />
     );
 }

packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx

@@ -1,11 +1,13 @@
 import { Pagination as PagingButtons } from "@mendix/widget-plugin-grid/components/Pagination";
+import { getGlobalSortContext, SortAPI } from "@mendix/widget-plugin-sorting/react/context";
 import classNames from "classnames";
-import { createContext, createElement, PropsWithChildren, ReactElement, ReactNode, useContext } from "react";
+import { createContext, createElement, PropsWithChildren, ReactElement, ReactNode, useContext, useState } from "react";
 import { GalleryPreviewProps } from "../typings/GalleryProps";
 import { LoadMoreButton } from "./components/LoadMore";
 import "./ui/GalleryPreview.scss";
 
 const PropsCtx = createContext<GalleryPreviewProps>({} as GalleryPreviewProps);
+const SortAPI = getGlobalSortContext({ isPreview: true });
 
 function useProps(): GalleryPreviewProps {
     return useContext(PropsCtx);
@@ -89,13 +91,16 @@ const TopControls = (): ReactNode => {
 
 const Header = (): ReactNode => {
     const props = useProps();
+    const sortAPI = useProvideSortAPI();
 
     return (
-        <section className="widget-gallery-header widget-gallery-filter">
-            <props.filtersPlaceholder.renderer>
-                <div />
-            </props.filtersPlaceholder.renderer>
-        </section>
+        <SortAPI.Provider value={sortAPI}>
+            <section className="widget-gallery-header widget-gallery-filter">
+                <props.filtersPlaceholder.renderer>
+                    <div />
+                </props.filtersPlaceholder.renderer>
+            </section>
+        </SortAPI.Provider>
     );
 };
 
@@ -190,3 +195,28 @@ function useCustomPagination(location: "top" | "bottom"): boolean {
     const props = useProps();
     return props.useCustomPagination && (props.pagingPosition === location || props.pagingPosition === "both");
 }
+function useProvideSortAPI(): SortAPI {
+    const [sortAPI] = useState({
+        version: 1,
+        host: new SortStoreHost()
+    } as SortAPI);
+
+    return sortAPI;
+}
+
+class SortStoreHost {
+    usedBy: string | null = null;
+
+    get sortOrder(): any[] {
+        return [];
+    }
+
+    observe(_: any): void {}
+
+    unobserve(): void {}
+
+    lock(id: string): () => void {
+        this.usedBy = id;
+        return () => (this.usedBy = null);
+    }
+}

packages/shared/widget-plugin-sorting/src/react/context.ts

@@ -11,16 +11,15 @@ export interface SortAPI {
 
 const SORT_PATH = "com.mendix.widgets.web.sortable.sortContext";
 
-// this is a magical way to check if we are running in design preview
-const isDesignPreview = window.navigator.appVersion?.startsWith("Mendix Modeler");
-
-export function getGlobalSortContext(): Context<SortAPI | null> {
-    const scope = isDesignPreview ? window.top : window;
+export function getGlobalSortContext(
+    { isPreview }: { isPreview: boolean } = { isPreview: false }
+): Context<SortAPI | null> {
+    const scope = isPreview ? window.top : window;
     return ((scope as any)[SORT_PATH] ??= createContext<SortAPI | null>(null));
 }
 
-export function useSortAPI(): Result<SortAPI, Error> {
-    const api = useContext(getGlobalSortContext());
+export function useSortAPI(options: { isPreview: boolean } = { isPreview: false }): Result<SortAPI, Error> {
+    const api = useContext(getGlobalSortContext(options));
     if (api === null) {
         return error(new Error("Error: widget is out of context. Please place the widget inside the Gallery header."));
     }

packages/shared/widget-plugin-sorting/src/react/hocs/withSortAPI.tsx

@@ -4,7 +4,9 @@ import { observer } from "mobx-react-lite";
 import { createElement, FC, ReactElement } from "react";
 import { SortAPI, useLockSortAPI, useSortAPI } from "../context";
 
-export function withSortAPI<P extends object>(Component: FC<P & { sortAPI: SortAPI }>): FC<P> {
+export function withSortAPI<P extends object>(
+    Component: FC<P & { sortAPI: SortAPI }>
+): FC<P & { isPreview?: boolean }> {
     const SortAPIGuard = observer(function SortAPIGuard(props: P & { sortAPI: SortAPI }): ReactElement {
         const sortAPI = useLockSortAPI(props.sortAPI);
 
@@ -15,8 +17,8 @@ export function withSortAPI<P extends object>(Component: FC<P & { sortAPI: SortA
         return <Component {...props} sortAPI={sortAPI.value} />;
     });
 
-    function SortAPIInjector(props: P): ReactElement {
-        const sortAPI = useSortAPI();
+    function SortAPIInjector(props: P & { isPreview?: boolean }): ReactElement {
+        const sortAPI = useSortAPI({ isPreview: props.isPreview ?? false });
 
         if (sortAPI.hasError) {
             return <Alert bootstrapStyle="danger">{sortAPI.error.message}</Alert>;