feat: first implementation of linked dd filter

Author: iobuhov

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx

@@ -1,10 +1,10 @@
 import { enableStaticRendering } from "mobx-react-lite";
-enableStaticRendering(true);
-
 import { createElement, ReactElement } from "react";
 import { DatagridDropdownFilterPreviewProps } from "../typings/DatagridDropdownFilterProps";
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
-import { Select } from "@mendix/widget-plugin-filtering/controls/select/Select";
+import { Select } from "@mendix/widget-plugin-dropdown-filter/controls/select/Select";
+
+enableStaticRendering(true);
 
 function Preview(props: DatagridDropdownFilterPreviewProps): ReactElement {
     return (

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx

@@ -2,38 +2,7 @@ import { createElement, ReactElement } from "react";
 import { withPreloader } from "@mendix/widget-plugin-platform/hoc/withPreloader";
 import { DatagridDropdownFilterContainerProps } from "../typings/DatagridDropdownFilterProps";
 import { AttrFilter } from "./components/AttrFilter";
-
-// function Container(props: DatagridDropdownFilterContainerProps & Select_FilterAPIv2): React.ReactElement {
-//     const commonProps = {
-//         ariaLabel: props.ariaLabel?.value,
-//         className: props.class,
-//         tabIndex: props.tabIndex,
-//         styles: props.style,
-//         onChange: props.onChange,
-//         valueAttribute: props.valueAttribute,
-//         parentChannelName: props.parentChannelName,
-//         name: props.name,
-//         multiselect: props.multiSelect,
-//         emptyCaption: props.emptyOptionCaption?.value,
-//         defaultValue: props.defaultValue?.value,
-//         filterable: props.filterable,
-//         selectionMethod: props.selectionMethod,
-//         selectedItemsStyle: props.selectedItemsStyle,
-//         clearable: props.clearable
-//     };
-
-//     if (props.filterStore.storeType === "refselect") {
-//         return <RefFilterContainer {...commonProps} filterStore={props.filterStore} />;
-//     }
-
-//     return (
-//         <StaticFilterContainer {...commonProps} filterStore={props.filterStore} filterOptions={props.filterOptions} />
-//     );
-// }
-
-const DatagridDropdownFilter = withPreloader(Container, props => props.defaultValue?.status === "loading");
-
-export default DatagridDropdownFilter;
+import { RefFilter } from "./components/RefFilter";
 
 function Container(props: DatagridDropdownFilterContainerProps): ReactElement {
     if (props.baseType === "attr") {
@@ -43,6 +12,6 @@ function Container(props: DatagridDropdownFilterContainerProps): ReactElement {
     return <RefFilter {...props} />;
 }
 
-function RefFilter(props: DatagridDropdownFilterContainerProps): ReactElement {
-    return <div key={props.name} />;
-}
+const DatagridDropdownFilter = withPreloader(Container, props => props.defaultValue?.status === "loading");
+
+export default DatagridDropdownFilter;

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml

@@ -62,7 +62,7 @@
                 <!-- end: Attr type -->
 
                 <!-- start: Ref type -->
-                <property key="ref" type="association" selectableObjects="refOptions" required="false" dataSource="linkedDs" isMetaData="true">
+                <property key="ref" type="association" selectableObjects="refOptions" required="true" dataSource="linkedDs" isMetaData="true">
                     <caption>Entity</caption>
                     <description>Set the entity to enable filtering over association.</description>
                     <associationTypes>

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilter.tsx

@@ -0,0 +1,22 @@
+import { createElement, ReactElement } from "react";
+import { withLinkedRefStore } from "../hocs/withLinkedRefStore";
+import { RefFilterContainer } from "@mendix/widget-plugin-dropdown-filter/containers/RefFilterContainer";
+import { RefFilterAPI } from "./typings";
+import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
+
+function Connector(props: DatagridDropdownFilterContainerProps & RefFilterAPI): ReactElement {
+    return (
+        <RefFilterContainer
+            {...props}
+            multiselect={props.multiSelect}
+            ariaLabel={props.ariaLabel?.value}
+            className={props.class}
+            styles={props.style}
+            emptyCaption={props.emptyOptionCaption?.value}
+            defaultValue={props.defaultValue?.value}
+            parentChannelName={props.parentChannelName}
+        />
+    );
+}
+
+export const RefFilter = withLinkedRefStore(Connector);

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withLinkedRefStore.tsx

@@ -6,25 +6,24 @@ import { BaseStoreProvider } from "@mendix/widget-plugin-filtering/custom-filter
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
-import { ListReferenceValue, ListReferenceSetValue, ListValue, ListAttributeValue } from "mendix";
+import { ListValue, ListAttributeValue, AssociationMetaData } from "mendix";
 import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
+import { RefFilterAPI } from "../components/typings";
 
 type WidgetProps = Pick<DatagridDropdownFilterContainerProps, "name" | "ref" | "refOptions" | "refCaption">;
 
 export interface RequiredProps {
     name: string;
-    ref: ListReferenceValue | ListReferenceSetValue;
+    ref: AssociationMetaData;
     refOptions: ListValue;
     refCaption: ListAttributeValue<string>;
     searchAttrId: ListAttributeValue["id"];
 }
 
 type Component<P extends object> = (props: P) => React.ReactElement;
 
-export function withLinkedRefStore<P extends WidgetProps>(
-    Cmp: Component<P & { filterStore: RefFilterStore; parentChannelName: string }>
-): Component<P> {
+export function withLinkedRefStore<P extends WidgetProps>(Cmp: Component<P & RefFilterAPI>): Component<P> {
     function StoreProvider(props: P & { filterAPI: FilterAPI }): React.ReactElement {
         const gate = useGate(props);
         const provider = useSetup(() => new RefStoreProvider(props.filterAPI, gate));

packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts

@@ -34,7 +34,7 @@ export interface DatagridDropdownFilterContainerProps {
     attr: AttributeMetaData<string | boolean>;
     auto: boolean;
     filterOptions: FilterOptionsType[];
-    ref?: AssociationMetaData;
+    ref: AssociationMetaData;
     refOptions?: ListValue;
     refCaption?: ListAttributeValue<string>;
     fetchOptionsLazy: boolean;

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilterContainer.tsx renamed to packages/shared/widget-plugin-dropdown-filter/src/containers/RefFilterContainer.tsx

@@ -1,18 +1,21 @@
-import { RefSelectController } from "@mendix/widget-plugin-dropdown-filter/controllers/RefSelectController";
-import { RefComboboxController } from "@mendix/widget-plugin-dropdown-filter/controllers/RefComboboxController";
-import { RefTagPickerController } from "@mendix/widget-plugin-dropdown-filter/controllers/RefTagPickerController";
-import { Select } from "@mendix/widget-plugin-filtering/controls/select/Select";
-import { Combobox } from "@mendix/widget-plugin-filtering/controls/combobox/Combobox";
-import { TagPicker } from "@mendix/widget-plugin-filtering/controls/tag-picker/TagPicker";
-import { usePickerJSActions } from "@mendix/widget-plugin-filtering/helpers/usePickerJSActions";
-import { RefFilterStore } from "@mendix/widget-plugin-filtering/stores/picker/RefFilterStore";
+import { RefSelectController } from "../controllers/RefSelectController";
+import { RefComboboxController } from "../controllers/RefComboboxController";
+import { RefTagPickerController } from "../controllers/RefTagPickerController";
+import { Select } from "../controls/select/Select";
+import { Combobox } from "../controls/combobox/Combobox";
+import { TagPicker } from "../controls/tag-picker/TagPicker";
+import { usePickerJSActions } from "../helpers/usePickerJSActions";
+import { RefFilterStore } from "../stores/RefFilterStore";
 import { ActionValue, EditableValue } from "mendix";
 import { observer } from "mobx-react-lite";
-import { createElement, CSSProperties } from "react";
-import { useSetupUpdate } from "@mendix/widget-plugin-filtering/helpers/useSetupUpdate";
-import { useFrontendType } from "../hooks/useFrontendType";
-import { SelectedItemsStyleEnum, SelectionMethodEnum } from "../../typings/DatagridDropdownFilterProps";
+import { createElement, CSSProperties, useEffect } from "react";
+
+import { useFrontendType } from "../helpers/useFrontendType";
 import { useOnScrollBottom } from "@mendix/widget-plugin-hooks/useOnScrollBottom";
+import { SelectedItemsStyleEnum, SelectionMethodEnum } from "../typings/widget";
+import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
+import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 
 export interface RefFilterContainerProps {
     ariaLabel?: string;
@@ -48,7 +51,8 @@ function Container(props: RefFilterContainerProps): React.ReactElement {
 }
 
 const SelectWidget = observer(function SelectWidget(props: RefFilterContainerProps): React.ReactElement {
-    const ctrl1 = useSetupUpdate(() => new RefSelectController(props), props);
+    const gate = useGate(props);
+    const ctrl1 = useConst(() => new RefSelectController({ gate }));
     const handleMenuScroll = useOnScrollBottom(ctrl1.handleMenuScrollEnd, { triggerZoneHeight: 100 });
 
     usePickerJSActions(ctrl1, props);
@@ -71,7 +75,8 @@ const SelectWidget = observer(function SelectWidget(props: RefFilterContainerPro
 });
 
 const ComboboxWidget = observer(function ComboboxWidget(props: RefFilterContainerProps): React.ReactElement {
-    const ctrl2 = useSetupUpdate(() => new RefComboboxController(props), props);
+    const gate = useGate(props);
+    const ctrl2 = useConst(() => new RefComboboxController({ gate }));
     const handleMenuScroll = useOnScrollBottom(ctrl2.handleMenuScrollEnd, { triggerZoneHeight: 100 });
 
     usePickerJSActions(ctrl2, props);
@@ -93,7 +98,8 @@ const ComboboxWidget = observer(function ComboboxWidget(props: RefFilterContaine
 });
 
 const TagPickerWidget = observer(function TagPickerWidget(props: RefFilterContainerProps): React.ReactElement {
-    const ctrl3 = useSetupUpdate(() => new RefTagPickerController(props), props);
+    const gate = useGate(props);
+    const ctrl3 = useConst(() => new RefTagPickerController({ gate }));
     const handleMenuScroll = useOnScrollBottom(ctrl3.handleMenuScrollEnd, { triggerZoneHeight: 100 });
 
     usePickerJSActions(ctrl3, props);
@@ -119,3 +125,9 @@ const TagPickerWidget = observer(function TagPickerWidget(props: RefFilterContai
 });
 
 export const RefFilterContainer = Container;
+
+function useGate(props: RefFilterContainerProps): DerivedPropsGate<RefFilterContainerProps> {
+    const gp = useConst(() => new GateProvider(props));
+    useEffect(() => gp.setProps(props));
+    return gp.gate;
+}