Fix custom footer hiding issue #821, and custom component stories (#846)

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>

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} />

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);
+    });
+  });
+});

packages/storybook/README.md

@@ -1,5 +1,9 @@
 # Datagrid & X-Grid Storybook
 
+## Start the storybook
+
 yarn start
 
+## Run the integration test on stories
+
 yarn test

packages/storybook/src/stories/playground/customize-components.stories.tsx

@@ -9,7 +9,7 @@ import Pagination from '@material-ui/lab/Pagination';
 import DoneIcon from '@material-ui/icons/Done';
 import ClearIcon from '@material-ui/icons/Clear';
 import CreateIcon from '@material-ui/icons/Create';
-import { getData } from '../../data/data-service';
+import { useData } from '../../hooks/useData';
 
 export default {
   title: 'X-Grid Demos/Custom-Components',
@@ -47,7 +47,8 @@ const rows = [
 const defaultData = { columns, rows };
 
 const Template: Story<XGridProps> = (args) => {
-  return <XGrid {...args} />;
+  const data = useData(2000, 200);
+  return <XGrid {...data} {...args} />;
 };
 
 function LoadingComponent() {
@@ -106,20 +107,19 @@ Icons.args = {
 };
 
 function PaginationComponent(props) {
-  const { paginationProps } = props;
+  const { pagination } = props;
   return (
     <Pagination
       className="my-custom-pagination"
-      page={paginationProps.page}
-      count={paginationProps.pageCount}
-      onChange={(event, value) => paginationProps.setPage(value)}
+      page={pagination.page}
+      count={pagination.pageCount}
+      onChange={(event, value) => pagination.setPage(value)}
     />
   );
 }
 
 export const CustomPagination = Template.bind({});
 CustomPagination.args = {
-  ...getData(2000, 200),
   pagination: true,
   pageSize: 50,
   components: {
@@ -128,25 +128,24 @@ CustomPagination.args = {
 };
 
 function FooterComponent(props) {
-  const { paginationProps } = props;
+  const { pagination } = props;
   return (
     <GridFooter className="my-custom-footer">
       <span style={{ display: 'flex', alignItems: 'center' }}>
         This is my custom footer and pagination here!{' '}
       </span>
       <Pagination
         className="my-custom-pagination"
-        page={paginationProps.page}
-        count={paginationProps.pageCount}
-        onChange={(event, value) => paginationProps.setPage(value)}
+        page={pagination.page}
+        count={pagination.pageCount}
+        onChange={(event, value) => pagination.setPage(value)}
       />
     </GridFooter>
   );
 }
 
 export const CustomFooter = Template.bind({});
 CustomFooter.args = {
-  ...getData(2000, 200),
   pagination: true,
   hideFooterPagination: true,
   hideFooter: true,
@@ -157,11 +156,9 @@ CustomFooter.args = {
 };
 
 function FooterComponent2(props) {
-  const { paginationProps } = props;
+  const { pagination } = props;
 
-  return (
-    <div className="footer my-custom-footer"> I counted {paginationProps.rowCount} row(s) </div>
-  );
+  return <div className="footer my-custom-footer"> I counted {pagination.rowCount} row(s) </div>;
 }
 
 function CustomHeader(props) {
@@ -174,7 +171,6 @@ function CustomHeader(props) {
 
 export const HeaderAndFooter = Template.bind({});
 HeaderAndFooter.args = {
-  ...getData(2000, 200),
   pagination: true,
   hideFooterPagination: true,
   pageSize: 33,
@@ -294,7 +290,6 @@ function ToolbarComponent() {
 
 export const CustomToolbar = Template.bind({});
 CustomToolbar.args = {
-  ...getData(2000, 200),
   pageSize: 33,
   components: {
     header: ToolbarComponent,