registering filter in control state

mui · Jun 15, 2021 · 0f256fb · 0f256fb
1 parent 85858ff
commit 0f256fb
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 19 deletions.
diff --git a/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts b/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts
@@ -185,17 +185,8 @@ export const useGridFilter = (
         return newState;
       });
       applyFilters();
-      apiRef.current.publishEvent(GRID_FILTER_MODEL_CHANGE, getFilterModelParams());
     },
-    [
-      logger,
-      setGridState,
-      apiRef,
-      getFilterModelParams,
-      applyFilters,
-      options.disableMultipleColumnsFiltering,
-      filterableColumnsIds,
-    ],
+    [logger, setGridState, apiRef, applyFilters, options.disableMultipleColumnsFiltering, filterableColumnsIds],
   );
 
   const deleteFilter = React.useCallback(
@@ -215,9 +206,9 @@ export const useGridFilter = (
         upsertFilter({});
       }
       applyFilters();
-      apiRef.current.publishEvent(GRID_FILTER_MODEL_CHANGE, getFilterModelParams());
+      // apiRef.current.publishEvent(GRID_FILTER_MODEL_CHANGE, getFilterModelParams());
     },
-    [apiRef, applyFilters, getFilterModelParams, logger, setGridState, upsertFilter],
+    [applyFilters, logger, setGridState, upsertFilter],
   );
 
   const showFilterPanel = React.useCallback(
@@ -249,9 +240,9 @@ export const useGridFilter = (
         filter: { ...state.filter, linkOperator },
       }));
       applyFilters();
-      apiRef.current.publishEvent(GRID_FILTER_MODEL_CHANGE, getFilterModelParams());
+      // apiRef.current.publishEvent(GRID_FILTER_MODEL_CHANGE, getFilterModelParams());
     },
-    [apiRef, applyFilters, getFilterModelParams, logger, setGridState],
+    [applyFilters, logger, setGridState],
   );
 
   const clearFilterModel = React.useCallback(() => {
@@ -266,9 +257,9 @@ export const useGridFilter = (
       logger.debug('Setting filter model');
       applyFilterLinkOperator(model.linkOperator);
       model.items.forEach((item) => upsertFilter(item));
-      apiRef.current.publishEvent(GRID_FILTER_MODEL_CHANGE, getFilterModelParams());
+      // apiRef.current.publishEvent(GRID_FILTER_MODEL_CHANGE, getFilterModelParams());
     },
-    [apiRef, applyFilterLinkOperator, clearFilterModel, getFilterModelParams, logger, upsertFilter],
+    [applyFilterLinkOperator, clearFilterModel, logger, upsertFilter],
   );
 
   const getVisibleRowModels = React.useCallback(
@@ -294,7 +285,7 @@ export const useGridFilter = (
 
   useGridApiEventHandler(apiRef, GRID_ROWS_SET, apiRef.current.applyFilters);
   useGridApiEventHandler(apiRef, GRID_ROWS_UPDATED, apiRef.current.applyFilters);
-  useGridApiOptionHandler(apiRef, GRID_FILTER_MODEL_CHANGE, props.onFilterModelChange);
+  // useGridApiOptionHandler(apiRef, GRID_FILTER_MODEL_CHANGE, props.onFilterModelChange);
 
   React.useEffect(() => {
     if (!props.filterModel) {
@@ -331,5 +322,18 @@ export const useGridFilter = (
     apiRef.current.applyFilters();
   }, [apiRef, logger]);
 
+  React.useEffect(() => {
+    apiRef.current.registerControlState<GridFilterModel, GridFilterModelState>({
+      stateId: 'filter',
+      propModel: props.filterModel,
+      propOnChange: props.onFilterModelChange,
+      stateSelector: (state) => state.filter,
+      // TODO here we don't need the callback arg.
+      // Should we also call applyFilters?
+      onChangeCallback: (model) =>
+        apiRef.current.publishEvent(GRID_FILTER_MODEL_CHANGE, model),
+    });
+  }, [apiRef, getFilterModelParams, props.filterModel, props.onFilterModelChange]);
+
   useGridApiEventHandler(apiRef, GRID_COLUMNS_UPDATED, onColUpdated);
 };
diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx
@@ -339,7 +339,7 @@ export interface GridOptions {
    * Callback fired when the Filter model changes before the filters are applied.
    * @param param With all properties from [[GridFilterModelParams]].
    */
-  onFilterModelChange?: (params: GridFilterModelParams) => void;
+  onFilterModelChange?: (model: GridFilterModel) => void;
   /**
    * Callback fired when the current page has changed.
    * @param param With all properties from [[GridPageChangeParams]].

diff --git a/packages/storybook/src/stories/grid-filter.stories.tsx b/packages/storybook/src/stories/grid-filter.stories.tsx
@@ -1,7 +1,10 @@
 import Button from '@material-ui/core/Button';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import { makeStyles } from '@material-ui/styles';
-import { DataGrid } from '@material-ui/data-grid';
+import {
+  DataGrid,
+  GRID_FILTER_MODEL_CHANGE,
+} from '@material-ui/data-grid';
 import Rating from '@material-ui/lab/Rating';
 import {
   GridColDef,
@@ -16,10 +19,12 @@ import {
   GridRowModel,
   useGridApiRef,
   XGrid,
+  getInitialGridFilterState,
 } from '@material-ui/x-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 import { action } from '@storybook/addon-actions';
 import * as React from 'react';
+import { GridSelectionModel } from '../../../grid/_modules_/grid/models/gridSelectionModel';
 import { randomInt } from '../data/random-generator';
 import { useData } from '../hooks/useData';
 
@@ -743,3 +748,101 @@ export function MultiFilteringWithOrGrid() {
     </div>
   );
 }
+
+export function SimpleModelWithOnChangeControlFilter() {
+  const [simpleColumns] = React.useState([
+    {
+      field: 'name',
+    },
+  ]);
+  const [simpleRows] = React.useState([
+    {
+      id: '1',
+      name: 'Paris',
+    },
+    {
+      id: '2',
+      name: 'Nice',
+    },
+    {
+      id: '3',
+      name: 'London',
+    },
+  ]);
+
+  const [simpleFilterModel, setFilterModel] = React.useState<GridFilterModel>(
+    getInitialGridFilterState(),
+  );
+  const handleFilterChange = React.useCallback((params) => {
+    setFilterModel(params.filterModel);
+  }, []);
+
+
+  return (
+    <XGrid
+      rows={simpleRows}
+      columns={simpleColumns}
+      filterModel={simpleFilterModel}
+      onFilterModelChange={handleFilterChange}
+    />
+  );
+}
+export function SimpleModelControlFilter() {
+  const [simpleColumns] = React.useState([
+    {
+      field: 'name',
+    },
+  ]);
+  const [simpleRows] = React.useState([
+    {
+      id: '1',
+      name: 'Paris',
+    },
+    {
+      id: '2',
+      name: 'Nice',
+    },
+    {
+      id: '3',
+      name: 'London',
+    },
+  ]);
+
+  const [simpleFilterModel, ] = React.useState<GridFilterModel>(
+    {
+      items: [{id:1, value:'lon', operatorValue:'contains', columnField: 'name'}],
+      linkOperator: GridLinkOperator.And,
+    }
+  );
+
+  return <XGrid rows={simpleRows} columns={simpleColumns} filterModel={simpleFilterModel} />;
+}
+export function SimpleOnChangeControlFilter() {
+  const [simpleColumns] = React.useState([
+    {
+      field: 'name',
+    },
+  ]);
+  const [simpleRows] = React.useState([
+    {
+      id: '1',
+      name: 'Paris',
+    },
+    {
+      id: '2',
+      name: 'Nice',
+    },
+    {
+      id: '3',
+      name: 'London',
+    },
+  ]);
+
+  const handleFilterChange = React.useCallback((params) => {
+    console.log('Filter model changed to', params);
+  }, []);
+
+  return (
+    <XGrid rows={simpleRows} columns={simpleColumns} onFilterModelChange={handleFilterChange} />
+  );
+}