fix mui#821 custom footer not hiding on hideFooter

dtassone · Jan 12, 2021 · 8964ced · 8964ced
1 parent 2b74a22
commit 8964ced
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 16 deletions.
diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx
@@ -186,18 +186,20 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
                     </GridDataContainer>
                   </GridWindow>
                 </div>
-                <div ref={footerRef}>
-                  {customComponents.footerComponent || (
-                    <DefaultFooter
-                      paginationComponent={
-                        !!gridState.options.pagination &&
-                        gridState.pagination.pageSize != null &&
-                        !gridState.options.hideFooterPagination &&
-                        (customComponents.paginationComponent || <Pagination />)
-                      }
-                    />
-                  )}
-                </div>
+                {!gridState.options.hideFooter && (
+                  <div ref={footerRef}>
+                    {customComponents.footerComponent || (
+                      <DefaultFooter
+                        paginationComponent={
+                          !!gridState.options.pagination &&
+                          gridState.pagination.pageSize != null &&
+                          !gridState.options.hideFooterPagination &&
+                          (customComponents.paginationComponent || <Pagination />)
+                        }
+                      />
+                    )}
+                  </div>
+                )}
               </ErrorBoundary>
             </ApiContext.Provider>
           </GridRoot>

diff --git a/packages/grid/_modules_/grid/components/DefaultFooter.tsx b/packages/grid/_modules_/grid/components/DefaultFooter.tsx
@@ -20,10 +20,6 @@ export const DefaultFooter = React.forwardRef<HTMLDivElement, DefaultFooterProps
     const options = useGridSelector(apiRef, optionsSelector);
     const selectedRowCount = useGridSelector(apiRef, selectedRowsCountSelector);
 
-    if (options.hideFooter) {
-      return null;
-    }
-
     const showSelectedRowCount =
       !options.hideFooterSelectedRowCount && selectedRowCount > 0 ? (
         <SelectedRowCount selectedRowCount={selectedRowCount} />

diff --git a/packages/grid/data-grid/src/tests/components.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/components.DataGrid.test.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { createClientRenderStrictMode } from 'test/utils';
+import { expect } from 'chai';
+import { DataGrid } from '@material-ui/data-grid';
+
+describe('<DataGrid /> - Components', () => {
+  // TODO v5: replace with createClientRender
+  const render = createClientRenderStrictMode();
+
+  const baselineProps = {
+    rows: [
+      {
+        id: 0,
+        brand: 'Nike',
+      },
+      {
+        id: 1,
+        brand: 'Adidas',
+      },
+      {
+        id: 2,
+        brand: 'Puma',
+      },
+    ],
+    columns: [{ field: 'brand' }],
+  };
+
+  describe('footer', () => {
+    before(function beforeHook() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        // Need layouting
+        this.skip();
+      }
+    });
+
+    it('should hide footer if prop hideFooter is set', () => {
+      render(
+        <div style={{ width: 300, height: 500 }}>
+          <DataGrid {...baselineProps} hideFooter />
+        </div>,
+      );
+      expect(document.querySelectorAll('.MuiDataGrid-footer').length).to.equal(0);
+    });
+
+    it('should hide custom footer if prop hideFooter is set', () => {
+      const CustomFooter = () => <div className="customFooter">Custom Footer</div>;
+      render(
+        <div style={{ width: 300, height: 500 }}>
+          <DataGrid {...baselineProps} hideFooter components={{ footer: CustomFooter }} />
+        </div>,
+      );
+      expect(document.querySelectorAll('.customFooter').length).to.equal(0);
+    });
+  });
+});