Fix ColumnsButton doesn't honor omit prop

marmelab · Oct 18, 2022 · 02640c8 · 02640c8
1 parent e961cea
commit 02640c8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 deletions.
diff --git a/packages/ra-ui-materialui/src/list/datagrid/ColumnsButton.tsx b/packages/ra-ui-materialui/src/list/datagrid/ColumnsButton.tsx
@@ -5,6 +5,29 @@ import ViewWeekIcon from '@mui/icons-material/ViewWeek';
 
 import { FieldEditor } from './FieldEditor';
 
+/**
+ * Render s a button that lets users show / hide columns in a configurable datagrid
+ * 
+ * @example
+ * import { ColumnsButton, DatagridConfigurable } from 'react-admin';
+ * 
+ * const PostListActions = () => (
+ *   <TopToolbar>
+        <ColumnsButton />
+        <FilterButton />
+ *   </TopToolbar>
+ * );
+ * 
+ * const PostList = () => (
+ *   <List actions={<PostListActions />}>
+ *     <DatagridConfigurable>
+ *       <TextField source="title" />
+ *       <TextField source="author" />
+         ...
+ *     </DatagridConfigurable>
+ *   </List>
+ * );
+ */
 export const ColumnsButton = props => {
     const resource = useResourceContext(props);
     const preferenceKey =
@@ -14,9 +37,12 @@ export const ColumnsButton = props => {
         `${preferenceKey}.availableColumns`,
         []
     );
+    const [omit] = useStore<string[]>(`${preferenceKey}.omit`, []);
     const [columns, setColumns] = useStore<string[]>(
         `${preferenceKey}.columns`,
-        availableColumns.map(column => column.source)
+        availableColumns
+            .map(column => column.source)
+            .filter(source => !omit.includes(source))
     );
     const translate = useTranslate();
 

diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx
@@ -7,6 +7,7 @@ import { DatagridEditor } from './DatagridEditor';
 
 export const DatagridConfigurable = ({
     preferenceKey,
+    omit: omitFromProps,
     ...props
 }: DatagridConfigurableProps) => {
     if (props.optimized) {
@@ -19,6 +20,11 @@ export const DatagridConfigurable = ({
     const [availableColumns, setAvailableColumns] = useStore<
         { source: string; label?: string }[]
     >(`preferences.${finalPreferenceKey}.availableColumns`, []);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_, setOmit] = useStore<string[]>(
+        `preferences.${finalPreferenceKey}.omit`,
+        omitFromProps
+    );
 
     React.useEffect(() => {
         if (availableColumns.length === 0) {
@@ -29,16 +35,13 @@ export const DatagridConfigurable = ({
                     : null
             ).filter(column => column != null);
             setAvailableColumns(columns);
+            setOmit(omitFromProps);
         }
     }, [availableColumns]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
         <Configurable
-            editor={
-                <DatagridEditor omit={props.omit}>
-                    {props.children}
-                </DatagridEditor>
-            }
+            editor={<DatagridEditor>{props.children}</DatagridEditor>}
             preferenceKey={finalPreferenceKey}
             sx={{
                 display: 'block',
@@ -57,12 +60,14 @@ export type DatagridConfigurableProps = DatagridProps & {
     omit?: string[];
 };
 
-const DatagridWithPreferences = ({
-    children,
-    omit,
-    ...props
-}: DatagridProps & { omit?: string[] }) => {
+DatagridConfigurable.propTypes = Datagrid.propTypes;
+
+/**
+ * This Datagrid filters its children depending on preferences
+ */
+const DatagridWithPreferences = ({ children, ...props }: DatagridProps) => {
     const [availableColumns] = usePreference('availableColumns', []);
+    const [omit] = usePreference('omit', []);
     const [columns] = usePreference(
         'columns',
         availableColumns
@@ -87,5 +92,3 @@ const DatagridWithPreferences = ({
         </Datagrid>
     );
 };
-
-DatagridConfigurable.propTypes = Datagrid.propTypes;
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridEditor.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridEditor.tsx
@@ -4,20 +4,18 @@ import { Box, Button } from '@mui/material';
 
 import { FieldEditor } from './FieldEditor';
 
-export const DatagridEditor = (props: {
-    children: React.ReactNode;
-    omit?: string[];
-}) => {
+export const DatagridEditor = (props: { children: React.ReactNode }) => {
     const translate = useTranslate();
     useSetInspectorTitle('ra.inspector.datagrid', { _: 'Datagrid' });
 
     const [availableColumns] = usePreference('availableColumns', []);
+    const [omit] = usePreference('omit', []);
 
     const [columns, setColumns] = usePreference(
         'columns',
         availableColumns
             .map(column => column.source)
-            .filter(name => !props.omit?.includes(name))
+            .filter(name => !omit?.includes(name))
     );
 
     const handleToggle = event => {