[DataGrid] Fix components casing, rm context, refact GridComponent

packages/grid/_modules_/grid/GridComponent.tsx

@@ -6,19 +6,18 @@ import * as React from 'react';
 import { useForkRef } from '@material-ui/core/utils';
 import { AutoSizer } from './components/AutoSizer';
 import { ColumnsHeader } from './components/columnHeaders/ColumnHeaders';
-import { DefaultFooter } from './components/default-footer';
-import { ErrorBoundary } from './components/error-boundary';
-import { Pagination } from './components/pagination';
+import { DefaultFooter } from './components/DefaultFooter';
+import { ErrorBoundary } from './components/ErrorBoundary';
+import { Pagination } from './components/Pagination';
 import { GridColumnsContainer } from './components/styled-wrappers/GridColumnsContainer';
 import { GridDataContainer } from './components/styled-wrappers/GridDataContainer';
 import { GridRoot } from './components/styled-wrappers/GridRoot';
 import { GridWindow } from './components/styled-wrappers/GridWindow';
 import { GridToolbar } from './components/styled-wrappers/GridToolbar';
 import { ColumnsToolbarButton } from './components/toolbar/ColumnsToolbarButton';
 import { FilterToolbarButton } from './components/toolbar/FilterToolbarButton';
-import { Viewport } from './components/viewport';
-import { Watermark } from './components/watermark';
-import { DATA_CONTAINER_CSS_CLASS } from './constants/cssClassesConstants';
+import { Viewport } from './components/Viewport';
+import { Watermark } from './components/Watermark';
 import { GridComponentProps } from './GridComponentProps';
 import { useColumnMenu } from './hooks/features/columnMenu/useColumnMenu';
 import { visibleColumnsLengthSelector } from './hooks/features/columns/columnsSelector';
@@ -44,11 +43,10 @@ import { useOptionsProp } from './hooks/utils/useOptionsProp';
 import { useResizeContainer } from './hooks/utils/useResizeContainer';
 import { useVirtualRows } from './hooks/features/virtualization/useVirtualRows';
 import { useDensity } from './hooks/features/density';
+import { useStateProp } from './hooks/utils/useStateProp';
 import { RootContainerRef } from './models/rootContainerRef';
 import { getCurryTotalHeight } from './utils/getTotalHeight';
 import { ApiContext } from './components/api-context';
-import { OptionsContext } from './components/options-context';
-import { RenderContext } from './components/render-context';
 import { DensitySelector } from './components/toolbar/DensitySelector';
 import { useFilter } from './hooks/features/filter/useFilter';
 
@@ -66,7 +64,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     const renderingZoneRef = React.useRef<HTMLDivElement>(null);
 
     const apiRef = useApiRef(props.apiRef);
-    const [gridState, setGridState, forceUpdate] = useGridState(apiRef);
+    const [gridState] = useGridState(apiRef);
 
     const internalOptions = useOptionsProp(apiRef, props);
 
@@ -88,13 +86,16 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     useFilter(apiRef, props.rows);
     useContainerProps(windowRef, apiRef);
     useDensity(apiRef);
-    const renderCtx = useVirtualRows(columnsHeaderRef, windowRef, renderingZoneRef, apiRef);
+    useVirtualRows(columnsHeaderRef, windowRef, renderingZoneRef, apiRef);
 
     useColumnReorder(apiRef);
-    const separatorProps = useColumnResize(columnsHeaderRef, apiRef);
+    useColumnResize(columnsHeaderRef, apiRef);
     usePagination(apiRef);
 
     const customComponents = useComponents(props.components, apiRef, rootContainerRef);
+    useStateProp(apiRef, props.state);
+
+    const visibleColumnsLength = useGridSelector(apiRef, visibleColumnsLengthSelector);
 
     // TODO move that to renderCtx
     const getTotalHeight = React.useCallback(
@@ -108,19 +109,18 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
       [gridState.options, gridState.containerSizes],
     );
 
-    React.useEffect(() => {
-      if (props.state != null && apiRef.current.state !== props.state) {
-        logger.debug('Overriding state with props.state');
-        setGridState((previousState) => ({ ...previousState, ...props.state! }));
-        forceUpdate();
-      }
-    }, [apiRef, forceUpdate, logger, props.state, setGridState]);
-
-    logger.info(
-      `Rendering, page: ${renderCtx?.page}, col: ${renderCtx?.firstColIdx}-${renderCtx?.lastColIdx}, row: ${renderCtx?.firstRowIdx}-${renderCtx?.lastRowIdx}`,
-    );
-
-    const visibleColumnsLength = useGridSelector(apiRef, visibleColumnsLengthSelector);
+    if (gridState.rendering.renderContext != null) {
+      const {
+        page,
+        firstColIdx,
+        lastColIdx,
+        firstRowIdx,
+        lastRowIdx,
+      } = gridState.rendering.renderContext!;
+      logger.info(
+        `Rendering, page: ${page}, col: ${firstColIdx}-${lastColIdx}, row: ${firstRowIdx}-${lastRowIdx}`,
+      );
+    }
 
     return (
       <AutoSizer onResize={onResize}>
@@ -148,74 +148,57 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
               )}
             >
               <ApiContext.Provider value={apiRef}>
-                <OptionsContext.Provider value={gridState.options}>
-                  <div ref={headerRef}>
-                    {customComponents.headerComponent ? (
-                      customComponents.headerComponent
-                    ) : (
-                      <React.Fragment>
-                        {!gridState.options.hideToolbar &&
-                          (!gridState.options.disableColumnFilter ||
-                            !gridState.options.disableColumnSelector ||
-                            !gridState.options.disableDensitySelector) && (
-                            <GridToolbar>
-                              {!gridState.options.disableColumnSelector && <ColumnsToolbarButton />}
-                              {!gridState.options.disableColumnFilter && <FilterToolbarButton />}
-                              {!gridState.options.disableDensitySelector && <DensitySelector />}
-                            </GridToolbar>
-                          )}
-                      </React.Fragment>
-                    )}
-                  </div>
-                  <div className="MuiDataGrid-mainGridContainer">
-                    <Watermark licenseStatus={props.licenseStatus} />
-                    <GridColumnsContainer
-                      ref={columnsContainerRef}
-                      height={gridState.density.headerHeight}
-                    >
-                      <ColumnsHeader
-                        ref={columnsHeaderRef}
-                        hasScrollX={!!gridState.scrollBar.hasScrollX}
-                        separatorProps={separatorProps}
-                        renderCtx={renderCtx}
-                      />
-                    </GridColumnsContainer>
-                    {!props.loading &&
-                      gridState.rows.totalRowCount === 0 &&
-                      customComponents.noRowsComponent}
-                    {props.loading && customComponents.loadingComponent}
-                    <GridWindow ref={windowRef}>
-                      <GridDataContainer
-                        ref={gridRef}
-                        className={DATA_CONTAINER_CSS_CLASS}
-                        style={{
-                          minHeight: gridState.containerSizes?.dataContainerSizes?.height,
-                          minWidth: gridState.containerSizes?.dataContainerSizes?.width,
-                        }}
-                      >
-                        {renderCtx != null && (
-                          <RenderContext.Provider value={renderCtx}>
-                            <Viewport ref={renderingZoneRef} />
-                          </RenderContext.Provider>
+                <div ref={headerRef}>
+                  {customComponents.headerComponent || (
+                    <React.Fragment>
+                      {!gridState.options.hideToolbar &&
+                        (!gridState.options.disableColumnFilter ||
+                          !gridState.options.disableColumnSelector ||
+                          !gridState.options.disableDensitySelector) && (
+                          <GridToolbar>
+                            {!gridState.options.disableColumnSelector && <ColumnsToolbarButton />}
+                            {!gridState.options.disableColumnFilter && <FilterToolbarButton />}
+                            {!gridState.options.disableDensitySelector && <DensitySelector />}
+                          </GridToolbar>
                         )}
-                      </GridDataContainer>
-                    </GridWindow>
-                  </div>
-                  <div ref={footerRef}>
-                    {customComponents.footerComponent ? (
-                      customComponents.footerComponent
-                    ) : (
-                      <DefaultFooter
-                        paginationComponent={
-                          !!gridState.options.pagination &&
-                          gridState.pagination.pageSize != null &&
-                          !gridState.options.hideFooterPagination &&
-                          (customComponents.paginationComponent || <Pagination />)
-                        }
-                      />
-                    )}
-                  </div>
-                </OptionsContext.Provider>
+                    </React.Fragment>
+                  )}
+                </div>
+                <div className="MuiDataGrid-mainGridContainer">
+                  <Watermark licenseStatus={props.licenseStatus} />
+                  <GridColumnsContainer ref={columnsContainerRef}>
+                    <ColumnsHeader ref={columnsHeaderRef} />
+                  </GridColumnsContainer>
+                  {!props.loading &&
+                    gridState.rows.totalRowCount === 0 &&
+                    customComponents.noRowsComponent}
+                  {props.loading && customComponents.loadingComponent}
+                  <GridWindow ref={windowRef}>
+                    <GridDataContainer
+                      ref={gridRef}
+                      style={{
+                        minHeight: gridState.containerSizes?.dataContainerSizes?.height,
+                        minWidth: gridState.containerSizes?.dataContainerSizes?.width,
+                      }}
+                    >
+                      {gridState.rendering.renderContext != null && (
+                        <Viewport ref={renderingZoneRef} />
+                      )}
+                    </GridDataContainer>
+                  </GridWindow>
+                </div>
+                <div ref={footerRef}>
+                  {customComponents.footerComponent || (
+                    <DefaultFooter
+                      paginationComponent={
+                        !!gridState.options.pagination &&
+                        gridState.pagination.pageSize != null &&
+                        !gridState.options.hideFooterPagination &&
+                        (customComponents.paginationComponent || <Pagination />)
+                      }
+                    />
+                  )}
+                </div>
               </ApiContext.Provider>
             </ErrorBoundary>
           </GridRoot>

packages/grid/_modules_/grid/components/default-footer.tsx → packages/grid/_modules_/grid/components/DefaultFooter.tsx

@@ -4,8 +4,8 @@ import { rowCountSelector } from '../hooks/features/rows/rowsSelector';
 import { selectedRowsCountSelector } from '../hooks/features/selection/selectionSelector';
 import { optionsSelector } from '../hooks/utils/useOptionsProp';
 import { ApiContext } from './api-context';
-import { RowCount } from './row-count';
-import { SelectedRowCount } from './selected-row-count';
+import { RowCount } from './RowCount';
+import { SelectedRowCount } from './SelectedRowCount';
 import { GridFooter } from './styled-wrappers/GridFooter';
 
 export interface DefaultFooterProps {

packages/grid/_modules_/grid/components/row-cells.tsx → packages/grid/_modules_/grid/components/RowCells.tsx

@@ -7,7 +7,7 @@ import {
   CellParams,
   CellIndexCoordinates,
 } from '../models';
-import { Cell, GridCellProps } from './cell';
+import { Cell, GridCellProps } from './Cell';
 import { ApiContext } from './api-context';
 import { classnames, isFunction } from '../utils';
 import { buildCellParams } from '../utils/paramsUtils';

packages/grid/_modules_/grid/components/viewport.tsx → packages/grid/_modules_/grid/components/Viewport.tsx

@@ -6,16 +6,15 @@ import { densityRowHeightSelector } from '../hooks/features/density/densitySelec
 import { visibleSortedRowsSelector } from '../hooks/features/filter/filterSelector';
 import { keyboardCellSelector } from '../hooks/features/keyboard/keyboardSelector';
 import { selectionStateSelector } from '../hooks/features/selection/selectionSelector';
+import { renderStateSelector } from '../hooks/features/virtualization/renderingStateSelector';
 import { useLogger } from '../hooks/utils/useLogger';
 import { optionsSelector } from '../hooks/utils/useOptionsProp';
-import { RenderContextProps } from '../models/renderContextProps';
 import { ApiContext } from './api-context';
-import { LeftEmptyCell, RightEmptyCell } from './cell';
-import { RenderContext } from './render-context';
-import { RenderingZone } from './rendering-zone';
-import { Row } from './row';
-import { RowCells } from './row-cells';
-import { StickyContainer } from './sticky-container';
+import { LeftEmptyCell, RightEmptyCell } from './Cell';
+import { RenderingZone } from './RenderingZone';
+import { Row } from './Row';
+import { RowCells } from './RowCells';
+import { StickyContainer } from './StickyContainer';
 
 type ViewportType = React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
 
@@ -26,44 +25,53 @@ export const scrollBarSizeSelector = (state: GridState) => state.scrollBar;
 export const Viewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
   (props, renderingZoneRef) => {
     const logger = useLogger('Viewport');
-    const renderCtx = React.useContext(RenderContext) as RenderContextProps;
     const apiRef = React.useContext(ApiContext);
+
     const options = useGridSelector(apiRef, optionsSelector);
     const containerSizes = useGridSelector(apiRef, containerSizesSelector);
     const viewportSizes = useGridSelector(apiRef, viewportSizesSelector);
     const scrollBarState = useGridSelector(apiRef, scrollBarSizeSelector);
     const visibleColumns = useGridSelector(apiRef, visibleColumnsSelector);
+    const renderState = useGridSelector(apiRef, renderStateSelector);
     const cellFocus = useGridSelector(apiRef, keyboardCellSelector);
     const selectionState = useGridSelector(apiRef, selectionStateSelector);
     const rows = useGridSelector(apiRef, visibleSortedRowsSelector);
     const rowHeight = useGridSelector(apiRef, densityRowHeightSelector);
 
     const getRowsElements = () => {
-      // TODO move that to selector
-      const renderedRows = rows.slice(renderCtx.firstRowIdx, renderCtx.lastRowIdx!);
+      if (renderState.renderContext == null) {
+        return null;
+      }
+
+      const renderedRows = rows.slice(
+        renderState.renderContext.firstRowIdx,
+        renderState.renderContext.lastRowIdx!,
+      );
       return renderedRows.map((r, idx) => (
         <Row
-          className={(renderCtx.firstRowIdx! + idx) % 2 === 0 ? 'Mui-even' : 'Mui-odd'}
+          className={
+            (renderState.renderContext!.firstRowIdx! + idx) % 2 === 0 ? 'Mui-even' : 'Mui-odd'
+          }
           key={r.id}
           id={r.id}
           selected={!!selectionState[r.id]}
-          rowIndex={renderCtx.firstRowIdx + idx}
+          rowIndex={renderState.renderContext!.firstRowIdx! + idx}
         >
-          <LeftEmptyCell width={renderCtx.leftEmptyWidth} height={rowHeight} />
+          <LeftEmptyCell width={renderState.renderContext!.leftEmptyWidth} height={rowHeight} />
           <RowCells
             columns={visibleColumns}
             row={r}
-            firstColIdx={renderCtx.firstColIdx}
-            lastColIdx={renderCtx.lastColIdx}
+            firstColIdx={renderState.renderContext!.firstColIdx!}
+            lastColIdx={renderState.renderContext!.lastColIdx!}
             hasScroll={{ y: scrollBarState!.hasScrollY, x: scrollBarState.hasScrollX }}
             scrollSize={options.scrollbarSize}
             showCellRightBorder={!!options.showCellRightBorder}
             extendRowFullWidth={!options.disableExtendRowFullWidth}
-            rowIndex={renderCtx.firstRowIdx + idx}
+            rowIndex={renderState.renderContext!.firstRowIdx! + idx}
             cellFocus={cellFocus}
             domIndex={idx}
           />
-          <RightEmptyCell width={renderCtx.rightEmptyWidth} height={rowHeight} />
+          <RightEmptyCell width={renderState.renderContext!.rightEmptyWidth} height={rowHeight} />
         </Row>
       ));
     };

packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderItem.tsx

@@ -23,7 +23,6 @@ interface ColumnHeaderItemProps {
   sortDirection: SortDirection;
   sortIndex?: number;
   options: GridOptions;
-  separatorProps: React.HTMLAttributes<HTMLDivElement>;
   filterItemsCounter?: number;
 }
 
@@ -32,7 +31,6 @@ export const ColumnHeaderItem = ({
   colIndex,
   isDragging,
   isResizing,
-  separatorProps,
   sortDirection,
   sortIndex,
   options,
@@ -165,7 +163,7 @@ export const ColumnHeaderItem = ({
         resizable={!disableColumnResize && !!column.resizable}
         resizing={isResizing}
         height={headerHeight}
-        {...separatorProps}
+        onMouseDown={apiRef?.current.startResizeOnMouseDown}
       />
     </div>
   );

packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderSeparator.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { useGridSelector } from '../../hooks/features/core/useGridSelector';
 import { useIcons } from '../../hooks/utils/useIcons';
+import { optionsSelector } from '../../hooks/utils/useOptionsProp';
 import { classnames } from '../../utils/index';
-import { OptionsContext } from '../options-context';
+import { ApiContext } from '../api-context';
 
 export interface ColumnHeaderSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
   resizable: boolean;
@@ -14,7 +16,8 @@ export const ColumnHeaderSeparator = React.memo(function ColumnHeaderSeparator(
 ) {
   const { resizable, resizing, height, ...other } = props;
   const icons = useIcons();
-  const { showColumnRightBorder } = React.useContext(OptionsContext);
+  const apiRef = React.useContext(ApiContext);
+  const { showColumnRightBorder } = useGridSelector(apiRef, optionsSelector);
   const Icon = icons!.ColumnResize!;
 
   const stopClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {