item 41 of mui#633

dtassone · Dec 1, 2020 · 18237ba · 18237ba
1 parent 6c02239
commit 18237ba
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 44 deletions.
diff --git a/packages/grid/_modules_/grid/components/toolbar/ColumnsToolbarButton.tsx b/packages/grid/_modules_/grid/components/toolbar/ColumnsToolbarButton.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
+import { GridState } from '../../hooks/features/core/gridState';
 import { PreferencePanelsValue } from '../../hooks/features/preferencesPanel/preferencesPanelValue';
 import { useIcons } from '../../hooks/utils/useIcons';
 import { ApiContext } from '../api-context';
@@ -10,7 +11,12 @@ export const ColumnsToolbarButton: React.FC<{}> = () => {
   const iconElement = React.createElement(icons.ColumnSelector!, {});
 
   const showColumns = React.useCallback(() => {
-    apiRef!.current.showPreferences(PreferencePanelsValue.columns);
+    const {open, openedPanelValue} = apiRef?.current.getState<GridState>().preferencePanel!;
+    if(open && openedPanelValue ===  PreferencePanelsValue.columns) {
+      apiRef!.current.hidePreferences();
+    } else {
+      apiRef!.current.showPreferences(PreferencePanelsValue.columns);
+    }
   }, [apiRef]);
 
   return (

diff --git a/packages/grid/_modules_/grid/components/toolbar/FilterToolbarButton.tsx b/packages/grid/_modules_/grid/components/toolbar/FilterToolbarButton.tsx
@@ -3,11 +3,13 @@ import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import * as React from 'react';
 import { columnLookupSelector } from '../../hooks/features/columns/columnsSelector';
+import { GridState } from '../../hooks/features/core/gridState';
 import { useGridSelector } from '../../hooks/features/core/useGridSelector';
 import {
   activeFilterItemsSelector,
   filterItemsCounterSelector,
 } from '../../hooks/features/filter/filterSelector';
+import { PreferencePanelsValue } from '../../hooks/features/preferencesPanel/preferencesPanelValue';
 import { useIcons } from '../../hooks/utils/useIcons';
 import { optionsSelector } from '../../hooks/utils/useOptionsProp';
 import { ApiContext } from '../api-context';
@@ -41,8 +43,13 @@ export const FilterToolbarButton: React.FC<{}> = () => {
 
   const icons = useIcons();
   const filterIconElement = React.createElement(icons.ColumnFiltering!, {});
-  const showFilter = React.useCallback(() => {
-    apiRef!.current.showFilterPanel();
+  const toggleFilter = React.useCallback(() => {
+    const {open, openedPanelValue} = apiRef?.current.getState<GridState>().preferencePanel!;
+    if(open && openedPanelValue ===  PreferencePanelsValue.filters) {
+      apiRef!.current.hideFilterPanel();
+    } else {
+      apiRef!.current.showFilterPanel();
+    }
   }, [apiRef]);
 
   if (options.disableColumnFilter) {
@@ -52,7 +59,7 @@ export const FilterToolbarButton: React.FC<{}> = () => {
   return (
     <Tooltip title={tooltipContentNode} enterDelay={1000}>
       <Button
-        onClick={showFilter}
+        onClick={toggleFilter}
         color="primary"
         aria-label="Show Filters"
         startIcon={

diff --git a/packages/grid/_modules_/grid/hooks/features/filter/useFilter.ts b/packages/grid/_modules_/grid/hooks/features/filter/useFilter.ts
@@ -209,6 +209,10 @@ export const useFilter = (apiRef: ApiRef, rowsProp: RowsProp): void => {
     },
     [apiRef, gridState.filter.items],
   );
+  const hideFilterPanel = React.useCallback(()=> {
+    apiRef?.current.hidePreferences();
+
+  },[apiRef])
 
   const applyFilterLinkOperator = React.useCallback(
     (linkOperator: LinkOperator = LinkOperator.And) => {
@@ -249,6 +253,7 @@ export const useFilter = (apiRef: ApiRef, rowsProp: RowsProp): void => {
       onFilterModelChange,
       setFilterModel,
       showFilterPanel,
+      hideFilterPanel,
     },
     'FilterApi',
   );

diff --git a/packages/grid/_modules_/grid/models/api/filterApi.ts b/packages/grid/_modules_/grid/models/api/filterApi.ts
@@ -4,6 +4,7 @@ import { FilterModelParams } from '../params/filterModelParams';
 
 export interface FilterApi {
   showFilterPanel: (targetColumnField?: string) => void;
+  hideFilterPanel: () => void;
   upsertFilter: (item: FilterItem) => void;
   applyFilters: () => void;
   applyFilter: (item: FilterItem, linkOperator?: LinkOperator) => void;

diff --git a/packages/storybook/src/stories/grid-filter.stories.tsx b/packages/storybook/src/stories/grid-filter.stories.tsx
@@ -1,9 +1,11 @@
 import Button from '@material-ui/core/Button';
 import {
   ColDef,
-  ColTypeDef, FilterItem, FilterModel,
+  ColTypeDef,
+  FilterModel,
   LinkOperator,
-  PreferencePanelsValue, RowModel,
+  PreferencePanelsValue,
+  RowModel,
   useApiRef,
   XGrid,
 } from '@material-ui/x-grid';
@@ -131,67 +133,75 @@ export function CommodityWithNewRowsViaProps() {
 export function ServerFilterViaProps() {
   const demoServer = useDemoData({ dataSet: 'Commodity', rowLength: 100 });
   const [rows, setRows] = useState<RowModel[]>(demoServer.data.rows);
-  const [filterModel, setFilterModel] = useState<FilterModel>({items:[{ id: 123, columnField: 'commodity', value: 'soy', operatorValue: 'contains' }]});
+  const [filterModel, setFilterModel] = useState<FilterModel>({
+    items: [{ id: 123, columnField: 'commodity', value: 'soy', operatorValue: 'contains' }],
+  });
   const [loading, setLoading] = useState(false);
 
-  const applyFilter = React.useCallback(()=> {
-    if(!filterModel.items.length) {
+  const applyFilter = React.useCallback(() => {
+    if (!filterModel.items.length) {
       setRows(demoServer.data.rows);
     } else {
-      const newRows = demoServer.data.rows.filter(row =>
-        row[filterModel.items[0].columnField!].toString().toLowerCase()
-          .indexOf(filterModel.items[0].value) > -1);
+      const newRows = demoServer.data.rows.filter(
+        (row) =>
+          row[filterModel.items[0].columnField!]
+            .toString()
+            .toLowerCase()
+            .indexOf(filterModel.items[0].value) > -1,
+      );
       setRows(newRows);
     }
     setLoading(false);
-
   }, [demoServer.data.rows, filterModel]);
 
   //TODO allow to filter operators using string value
   // columnTypes={{string: {filterOperators: ['contains']}}}
 
-  const onFilterChange = React.useCallback( (params: FilterModelParams)=> {
-    const hasChanged = params.filterModel.items[0].value !== filterModel.items[0].value;
-    setLoading(hasChanged);
-    if (!hasChanged) {
-      return;
-    }
-    setTimeout(() => {
-      action('onFilterChange')(params);
-      setFilterModel({items: [params.filterModel.items[0]]})
-    }, 1500);
-  }, [filterModel.items]);
+  const onFilterChange = React.useCallback(
+    (params: FilterModelParams) => {
+      const hasChanged = params.filterModel.items[0].value !== filterModel.items[0].value;
+      setLoading(hasChanged);
+      if (!hasChanged) {
+        return;
+      }
+      setTimeout(() => {
+        action('onFilterChange')(params);
+        setFilterModel({ items: [params.filterModel.items[0]] });
+      }, 1500);
+    },
+    [filterModel.items],
+  );
 
-  React.useEffect(()=> {
+  React.useEffect(() => {
     applyFilter();
-  }, [applyFilter, demoServer.data.rows])
+  }, [applyFilter, demoServer.data.rows]);
 
   return (
-      <div className="grid-container">
-        <XGrid
-          rows={rows}
-          columns={demoServer.data.columns}
-          filterMode={'server'}
-          onFilterModelChange={onFilterChange}
-          disableMultipleColumnsFiltering
-          filterModel={filterModel}
-          loading={loading}
-          state={{
-            preferencePanel: {
-              open: true,
-              openedPanelValue: PreferencePanelsValue.filters,
-            },
-          }}
-        />
-      </div>
+    <div className="grid-container">
+      <XGrid
+        rows={rows}
+        columns={demoServer.data.columns}
+        filterMode={'server'}
+        onFilterModelChange={onFilterChange}
+        disableMultipleColumnsFiltering
+        filterModel={filterModel}
+        loading={loading}
+        state={{
+          preferencePanel: {
+            open: true,
+            openedPanelValue: PreferencePanelsValue.filters,
+          },
+        }}
+      />
+    </div>
   );
 }
 export function CommodityWithNewRowsViaApi() {
   const apiRef = useApiRef();
   const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 100 });
   const apiDemoData = useDemoData({ dataSet: 'Commodity', rowLength: 150 });
 
-  const setNewRows = React.useCallback(()=> {
+  const setNewRows = React.useCallback(() => {
     apiDemoData.setRowLength(randomInt(100, 500));
     apiDemoData.loadNewData();
     apiRef.current.setRows(apiDemoData.data.rows);