fix freeze col issue on demos

mui · Feb 11, 2021 · 519362c · 519362c
1 parent de62aeb
commit 519362c
Showing 1 changed file with 47 additions and 28 deletions.
diff --git a/packages/storybook/src/stories/grid-filter.stories.tsx b/packages/storybook/src/stories/grid-filter.stories.tsx
@@ -1,25 +1,25 @@
-import * as React from 'react';
+import Button from '@material-ui/core/Button';
+import InputAdornment from '@material-ui/core/InputAdornment';
 import { makeStyles } from '@material-ui/core/styles';
-import { DataGrid } from '@material-ui/data-grid';
+import { DataGrid, PreferencePanelsValue } from '@material-ui/data-grid';
 import Rating from '@material-ui/lab/Rating';
-import Button from '@material-ui/core/Button';
 import {
   ColDef,
   ColTypeDef,
   FilterInputValueProps,
-  FilterModel,
   FilterItem,
+  FilterModel,
+  FilterModelParams,
+  getNumericColumnOperators,
   LinkOperator,
   PreferencePanelsValue,
   RowModel,
   useApiRef,
   XGrid,
-  getNumericColumnOperators,
-  FilterModelParams,
 } from '@material-ui/x-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 import { action } from '@storybook/addon-actions';
-import InputAdornment from '@material-ui/core/InputAdornment';
+import * as React from 'react';
 import { randomInt } from '../data/random-generator';
 import { useData } from '../hooks/useData';
 
@@ -419,19 +419,22 @@ export function CustomFilterOperator() {
   const { data } = useDemoData({ dataSet: 'Employee', rowLength: 100 });
   const [columns, setColumns] = React.useState(data.columns);
 
-  React.useEffect(()=> {
-  if (data.columns.length > 0) {
-    let newColumns = [...data.columns];
-    const ratingColumn = { ...newColumns.find((col) => col.field === 'rating') };
+  React.useEffect(() => {
+    if (data.columns.length > 0) {
+      let newColumns: ColDef[] = [...data.columns];
+      const ratingColumn = { ...newColumns.find((col) => col.field === 'rating') };
 
-    const ratingOperators = getNumericColumnOperators();
-    ratingColumn!.filterOperators = ratingOperators.map((operator) => {
-      operator.InputComponent = RatingInputValue;
-      return operator;
-    });
+      const ratingOperators = getNumericColumnOperators();
+      ratingColumn!.filterOperators = ratingOperators.map((operator) => {
+        operator.InputComponent = RatingInputValue;
+        return operator;
+      });
 
-    setColumns(newColumns);
-  }
+      newColumns = newColumns.map((col) =>
+        col.field === 'rating' ? ratingColumn : col,
+      ) as ColDef[];
+      setColumns(newColumns);
+    }
   }, [data.columns]);
 
   return (
@@ -473,17 +476,25 @@ const RatingOnlyOperators = [
 
 export function RatingOperator() {
   const { data } = useDemoData({ dataSet: 'Employee', rowLength: 100 });
+  const [columns, setColumns] = React.useState(data.columns);
 
-  if (data.columns.length > 0) {
-    const ratingColumn = data.columns.find((col) => col.field === 'rating');
-    ratingColumn!.filterOperators = RatingOnlyOperators;
-  }
+  React.useEffect(() => {
+    if (data.columns.length > 0) {
+      let newColumns: ColDef[] = [...data.columns];
+      const ratingColumn = { ...newColumns.find((col) => col.field === 'rating') };
+      ratingColumn!.filterOperators = RatingOnlyOperators;
 
+      newColumns = newColumns.map((col) =>
+        col.field === 'rating' ? ratingColumn : col,
+      ) as ColDef[];
+      setColumns(newColumns);
+    }
+  }, [data.columns]);
   return (
     <div className="grid-container">
       <XGrid
         rows={data.rows}
-        columns={data.columns}
+        columns={columns}
         filterModel={{
           items: [{ columnField: 'rating', value: '3.5', operatorValue: 'from' }],
         }}
@@ -563,7 +574,15 @@ export function NewColumnTypes() {
 
   return (
     <div className="grid-container">
-      <DataGrid rows={data.rows} columns={cols} columnTypes={{ price: priceColumnType }} />
+      <DataGrid
+        rows={data.rows}
+        columns={cols}
+        columnTypes={{ price: priceColumnType }}
+        filterModel={{
+          items: [{ id: 1, columnField: 'totalPrice', operatorValue: '>', value: '1000000' }],
+        }}
+        state={{ preferencePanel: { openedPanelValue: PreferencePanelsValue.filters, open: true } }}
+      />
     </div>
   );
 }
@@ -587,10 +606,10 @@ export function DemoCustomRatingFilterOperator() {
         return operator;
       });
 
-      // Just hidding some columns for demo clarity
-      newColumns = newColumns
-        .filter((col) => col.field === 'phone' || col.field === 'email' || col.field === 'username')
-        .map((col) => ({ ...col, hide: true }));
+      newColumns = newColumns.map((col) =>
+        col.field === 'rating' ? ratingColumn : col,
+      ) as ColDef[];
+
       setColumns(newColumns);
     }
   }, [data.columns]);