public component

mui · Nov 24, 2020 · dc64394 · dc64394
1 parent bfdaa7b
commit dc64394
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 38 deletions.
diff --git a/packages/grid/_modules_/grid/components/tools/ColumnsPanel.tsx b/packages/grid/_modules_/grid/components/tools/ColumnsPanel.tsx
@@ -86,7 +86,7 @@ export const ColumnsPanel: React.FC<{}> = () => {
 
   return (
     <React.Fragment>
-      <div className="MuiDataGrid-panelHeader">
+      <div className="MuiDataGridPreferences-header">
         <TextField
           label="Find column"
           placeholder="Column Title"
@@ -97,7 +97,7 @@ export const ColumnsPanel: React.FC<{}> = () => {
           fullWidth
         />
       </div>
-      <div className="MuiDataGrid-panelMainContainer">
+      <div className="MuiDataGridPreferences-container">
         <div className={classes.columnsListContainer}>
           {currentColumns.map((column) => (
             <div key={column.field} className={classes.column}>
@@ -123,7 +123,7 @@ export const ColumnsPanel: React.FC<{}> = () => {
           ))}
         </div>
       </div>
-      <div className="MuiDataGrid-panelFooter">
+      <div className="MuiDataGridPreferences-footer">
         <Button onClick={hideAllColumns} color="primary">
           Hide All
         </Button>

diff --git a/packages/grid/_modules_/grid/components/tools/FilterPanel.tsx b/packages/grid/_modules_/grid/components/tools/FilterPanel.tsx
@@ -59,7 +59,7 @@ export const FilterPanel: React.FC<{}> = () => {
 
   return (
     <React.Fragment>
-      <div className="MuiDataGrid-panelMainContainer">
+      <div className="MuiDataGridPreferences-container">
         {gridState.filter.items.map((item, index) => (
           <FilterForm
             key={item.id}
@@ -76,7 +76,7 @@ export const FilterPanel: React.FC<{}> = () => {
         ))}
       </div>
       {!disableMultipleColumnsFiltering && (
-        <div className="MuiDataGrid-panelFooter">
+        <div className="MuiDataGridPreferences-footer">
           <Button onClick={addNewFilter} startIcon={<AddIcon />} color="primary">
             Add Filter
           </Button>

diff --git a/packages/grid/_modules_/grid/components/tools/Preferences.tsx b/packages/grid/_modules_/grid/components/tools/Preferences.tsx
@@ -15,39 +15,42 @@ import { ApiContext } from '../api-context';
 import { ColumnsPanel } from './ColumnsPanel';
 import { FilterPanel } from './FilterPanel';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  paper: {
-    backgroundColor: theme.palette.background.paper,
-    minWidth: 300,
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  tabsRoot: {
-    flexShrink: 0,
-  },
-  tab: {
-    minWidth: 50,
-  },
-  panel: {
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    flex: 1,
-    '& .MuiDataGrid-panelMainContainer': {
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    paper: {
+      backgroundColor: theme.palette.background.paper,
+      minWidth: 300,
       display: 'flex',
       flexDirection: 'column',
-      overflow: 'auto',
-      flex: '1 1',
     },
-    '& .MuiDataGrid-panelFooter, .MuiDataGrid-panelHeader': {
-      padding: 8,
-      display: 'inline-flex',
-      justifyContent: 'space-between',
+    tabsRoot: {
+      flexShrink: 0,
     },
-  },
-}));
+    tab: {
+      minWidth: 50,
+    },
+    panel: {
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flex: 1,
+      '& .MuiDataGridPreferences-container': {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'auto',
+        flex: '1 1',
+      },
+      '& .MuiDataGridPreferences-footer, .MuiDataGridPreferences-header': {
+        padding: 8,
+        display: 'inline-flex',
+        justifyContent: 'space-between',
+      },
+    },
+  }),
+  { name: 'MuiDataGridPreference' },
+);
 
-export const PreferencesPanel = () => {
+export function Preferences() {
   const classes = useStyles();
   const apiRef = React.useContext(ApiContext);
   const columns = useGridSelector(apiRef, allColumnsSelector);

diff --git a/packages/grid/_modules_/grid/models/api/columnApi.ts b/packages/grid/_modules_/grid/models/api/columnApi.ts
@@ -49,7 +49,7 @@ export interface ColumnApi {
   /**
    * Allows to toggle a column.
    * @param field
-   * @param forceHide optional value, if not provided the column will toggle
+   * @param forceHide Optional value, if not provided the column will toggle.
    */
   toggleColumn: (field: string, forceHide?: boolean) => void;
 }
diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx
@@ -86,15 +86,15 @@ export interface GridOptions {
    */
   disableMultipleSelection?: boolean;
   /**
-   * If `true`, sorting with multiple columns is disabled.
+   * If `true`, filtering with multiple columns is disabled.
    * @default false
    */
-  disableMultipleColumnsSorting?: boolean;
+  disableMultipleColumnsFiltering?: boolean;
   /**
-   * If `true`, filtering with multiple columns is disabled.
+   * If `true`, sorting with multiple columns is disabled.
    * @default false
    */
-  disableMultipleColumnsFiltering?: boolean;
+  disableMultipleColumnsSorting?: boolean;
   /**
    * If `true`, resizing columns is disabled.
    * @default false