Use api ref (#86)

* refactor GridApiRef to useApiRef

* prettier

* renamed GridRootRef to RootContainerRef

* rebased with  master

packages/grid/x-grid-modules/src/components/api-context.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { GridApiRef } from '../models';
+import { ApiRef } from '../models';
 
-export const ApiContext = React.createContext<GridApiRef | undefined>(undefined);
+export const ApiContext = React.createContext<ApiRef | undefined>(undefined);

packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx

@@ -19,7 +19,8 @@ export const HeaderCheckbox: React.FC<ColParams> = React.memo(({ api }) => {
   };
   const selectionChanged = React.useCallback(
     (event: SelectionChangedParams) => {
-      const isAllSelected = api.getAllRowIds().length === e.rows.length && e.rows.length > 0;
+      const isAllSelected =
+        api.getAllRowIds().length === event.rows.length && event.rows.length > 0;
       const hasNoneSelected = event.rows.length === 0;
       setChecked(isAllSelected || !hasNoneSelected);
       setIndeterminate(!isAllSelected && !hasNoneSelected);

packages/grid/x-grid-modules/src/gridComponent.tsx

@@ -7,7 +7,13 @@ import {
   useSelection,
   useSorting,
 } from './hooks/features';
-import { DEFAULT_GRID_OPTIONS, ElementSize, GridApi, GridOptions, GridRootRef } from './models';
+import {
+  DEFAULT_GRID_OPTIONS,
+  ElementSize,
+  GridApi,
+  GridOptions,
+  RootContainerRef,
+} from './models';
 import { DATA_CONTAINER_CSS_CLASS } from './constants';
 import { ColumnsContainer, DataContainer, GridRoot } from './components/styled-wrappers';
 import { useVirtualRows } from './hooks/virtualization';
@@ -35,7 +41,7 @@ export const GridComponent: React.FC<GridComponentProps> = React.memo(
   ({ rows, columns, options, apiRef, loading, licenseStatus, className, components }) => {
     useLoggerFactory(options?.logger, options?.logLevel);
     const logger = useLogger('Grid');
-    const gridRootRef: GridRootRef = React.useRef<HTMLDivElement>(null);
+    const rootContainerRef: RootContainerRef = React.useRef<HTMLDivElement>(null);
     const footerRef = React.useRef<HTMLDivElement>(null);
     const columnsHeaderRef = React.useRef<HTMLDivElement>(null);
     const columnsContainerRef = React.useRef<HTMLDivElement>(null);
@@ -55,7 +61,7 @@ export const GridComponent: React.FC<GridComponentProps> = React.memo(
       apiRef = internalApiRef;
     }
 
-    const initialised = useApi(gridRootRef, windowRef, internalOptions, apiRef);
+    const initialised = useApi(rootContainerRef, windowRef, internalOptions, apiRef);
     const internalColumns = useColumns(internalOptions, columns, apiRef);
     const internalRows = useRows(internalOptions, rows, initialised, apiRef);
     useKeyboard(internalOptions, initialised, apiRef);
@@ -91,7 +97,7 @@ export const GridComponent: React.FC<GridComponentProps> = React.memo(
       components,
       paginationProps,
       apiRef,
-      gridRootRef,
+      rootContainerRef,
     );
 
     const onResize = React.useCallback(
@@ -143,7 +149,7 @@ export const GridComponent: React.FC<GridComponentProps> = React.memo(
       <AutoSizerWrapper onResize={debouncedOnResize} style={{ height: 'unset', width: 'unset' }}>
         {(size: any) => (
           <GridRoot
-            ref={gridRootRef}
+            ref={rootContainerRef}
             className={`material-grid MuiGrid ${className || ''}`}
             options={internalOptions}
             style={{ width: size.width, height: getTotalHeight(size) }}

packages/grid/x-grid-modules/src/gridComponentProps.ts

@@ -1,4 +1,4 @@
-import { Columns, GridApiRef, GridComponentOverridesProp, GridOptions, RowsProp } from './models';
+import { Columns, ApiRef, GridComponentOverridesProp, GridOptions, RowsProp } from './models';
 
 /**
  * Partial set of [[GridOptions]].
@@ -28,7 +28,7 @@ export interface GridComponentProps {
   /**
    * The ref object that allows grid manipulation. Can be instantiated with [[gridApiRef()]]
    */
-  apiRef?: GridApiRef;
+  apiRef?: ApiRef;
   /**
    * Boolean prop that toggle the loading overlay
    */

packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ApiRef } from '../../models/api/apiRef';
+import { GridApi } from '../../models/api/gridApi';
+
+/**
+ * Hook that instantiate an ApiRef to pass in component prop.
+ */
+export const useApiRef = (): ApiRef => React.useRef<GridApi | null | undefined>();

packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx

@@ -4,15 +4,15 @@ import { ScrollParams, useLogger } from '../utils';
 import { COL_RESIZE_START, COL_RESIZE_STOP, SCROLLING } from '../../constants/eventsConstants';
 import { findCellElementsFromCol, findDataContainerFromCurrent } from '../../utils';
 import { useStateRef } from '../utils/useStateRef';
-import { GridApiRef } from '../../models';
+import { ApiRef } from '../../models';
 
 const MIN_COL_WIDTH = 50;
 const MOUSE_LEFT_TIMEOUT = 1000;
 
 // TODO improve experience for last column
 export const useColumnResize = (
   columnsRef: React.RefObject<HTMLDivElement>,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
   headerHeight: number,
 ) => {
   const logger = useLogger('useColumnResize');

packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { PaginationProps } from './usePagination';
 import {
   ComponentParams,
-  GridApiRef,
+  ApiRef,
   GridComponentOverridesProp,
   GridOptions,
-  GridRootRef,
+  RootContainerRef,
   InternalColumns,
   Rows,
 } from '../../models';
@@ -17,8 +17,8 @@ export const useComponents = (
   options: GridOptions,
   componentOverrides: GridComponentOverridesProp | undefined,
   paginationProps: PaginationProps,
-  apiRef: GridApiRef,
-  gridRootRef: GridRootRef,
+  apiRef: ApiRef,
+  gridRootRef: RootContainerRef,
 ) => {
   const componentParams: ComponentParams = React.useMemo(
     () => ({

packages/grid/x-grid-modules/src/hooks/features/usePagination.ts

@@ -11,8 +11,8 @@ import { PageChangedParams } from '../../models/params/pageChangedParams';
 import { Rows } from '../../models/rows';
 import { InternalColumns } from '../../models/colDef/colDef';
 import { GridOptions } from '../../models/gridOptions';
-import { GridApiRef } from '../../models/api/gridApiRef';
 import { PaginationApi } from '../../models/api/paginationApi';
+import { ApiRef } from '../../models/api';
 
 export interface PaginationProps {
   page: number;
@@ -49,7 +49,7 @@ export const usePagination = (
   rows: Rows,
   columns: InternalColumns,
   options: GridOptions,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): PaginationProps => {
   const logger = useLogger('usePagination');
 

packages/grid/x-grid-modules/src/hooks/features/useSelection.ts

@@ -7,7 +7,7 @@ import {
   RowSelectedParams,
   RowsProp,
   SelectionChangedParams,
-  GridApiRef,
+  ApiRef,
 } from '../../models';
 import { useLogger } from '../utils/useLogger';
 import {
@@ -24,7 +24,7 @@ export const useSelection = (
   options: GridOptions,
   rowsProp: RowsProp,
   initialised: boolean,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): void => {
   const logger = useLogger('useSelection');
   const selectedItemsRef = React.useRef<RowId[]>([]);

packages/grid/x-grid-modules/src/hooks/features/useSorting.ts

@@ -11,7 +11,7 @@ import {
   RowModel,
   RowsProp,
   SortApi,
-  GridApiRef,
+  ApiRef,
 } from '../../models';
 import {
   COLUMN_HEADER_CLICKED,
@@ -31,7 +31,7 @@ export const useSorting = (
   options: GridOptions,
   rowsProp: RowsProp,
   colsProp: Columns,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ) => {
   const logger = useLogger('useSorting');
   const sortModelRef = React.useRef<SortModel>([]);

packages/grid/x-grid-modules/src/hooks/root/useApi.ts

@@ -15,7 +15,7 @@ import {
   ROW_SELECTED_EVENT,
   SELECTION_CHANGED_EVENT,
 } from '../../constants/eventsConstants';
-import { CellClickedParam, GridOptions, RowClickedParam, GridApiRef } from '../../models';
+import { CellClickedParam, GridOptions, RowClickedParam, ApiRef } from '../../models';
 import { GridApi } from '../../models/api/gridApi';
 import {
   CELL_CSS_CLASS,
@@ -40,7 +40,7 @@ export function useApi(
   gridRootRef: React.RefObject<HTMLDivElement>,
   windowRef: React.RefObject<HTMLDivElement>,
   options: GridOptions,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): boolean {
   const [isApiInitialised, setApiInitialised] = React.useState(false);
   const [initialised, setInit] = React.useState(false);

packages/grid/x-grid-modules/src/hooks/root/useApiEventHandler.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useLogger } from '../utils';
-import { GridApiRef } from '../../models/api';
+import { ApiRef } from '../../models/api';
 
 export function useApiEventHandler(
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
   eventName: string,
   handler?: (args: any) => void,
 ) {

packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { GridApi, GridApiRef } from '../../models/api';
+import { ApiRef, GridApi } from '../../models/api';
 import { useLogger } from '../utils';
 
-export function useApiMethod(apiRef: GridApiRef, apiMethods: Partial<GridApi>, apiName: string) {
+export function useApiMethod(apiRef: ApiRef, apiMethods: Partial<GridApi>, apiName: string) {
   const logger = useLogger('useApiMethod');
 
   React.useEffect(() => {

packages/grid/x-grid-modules/src/hooks/root/useColumns.ts

@@ -9,7 +9,7 @@ import {
   GridOptions,
   InternalColumns,
   SortModel,
-  GridApiRef,
+  ApiRef,
 } from '../../models';
 import { Logger, useLogger } from '../utils/useLogger';
 import { COLUMNS_UPDATED, POST_SORT } from '../../constants/eventsConstants';
@@ -31,7 +31,7 @@ function hydrateColumns(
   columns: Columns,
   withCheckboxSelection: boolean,
   logger: Logger,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): Columns {
   logger.debug('Hydrating Columns with default definitions');
   let mappedCols = columns.map((c) => ({ ...getColDef(c.type), ...c }));
@@ -90,7 +90,7 @@ const resetState = (
   columns: Columns,
   withCheckboxSelection: boolean,
   logger: Logger,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): InternalColumns => {
   if (columns.length === 0) {
     return initialState;
@@ -140,7 +140,7 @@ const getUpdatedColumnState = (
 export function useColumns(
   options: GridOptions,
   columns: Columns,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): InternalColumns {
   const logger = useLogger('useColumns');
   const [, forceUpdate] = React.useState();

packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts

@@ -21,7 +21,7 @@ import {
   isTabKey,
 } from '../../utils';
 import { CELL_CSS_CLASS, ROW_CSS_CLASS } from '../../constants/cssClassesConstants';
-import { CellIndexCoordinates, GridOptions, GridApiRef } from '../../models';
+import { CellIndexCoordinates, GridOptions, ApiRef } from '../../models';
 import { useApiEventHandler } from './useApiEventHandler';
 
 const getNextCellIndexes = (code: string, indexes: CellIndexCoordinates) => {
@@ -42,11 +42,7 @@ const getNextCellIndexes = (code: string, indexes: CellIndexCoordinates) => {
   return { ...indexes, rowIndex: indexes.rowIndex + 1 };
 };
 
-export const useKeyboard = (
-  options: GridOptions,
-  initialised: boolean,
-  apiRef: GridApiRef,
-): void => {
+export const useKeyboard = (options: GridOptions, initialised: boolean, apiRef: ApiRef): void => {
   const logger = useLogger('useKeyboard');
   const isMultipleKeyPressed = React.useRef(false);
 

packages/grid/x-grid-modules/src/hooks/root/useNativeEventListener.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useLogger } from '../utils';
 import { isFunction } from '../../utils';
-import { GridApiRef } from '../../models';
+import { ApiRef } from '../../models';
 
 export const useNativeEventListener = (
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
   ref: React.MutableRefObject<HTMLDivElement | null> | (() => Element | undefined | null),
   eventName: string,
   handler?: (event: Event) => any,

packages/grid/x-grid-modules/src/hooks/root/useRows.ts

@@ -7,7 +7,7 @@ import {
   RowModel,
   Rows,
   RowsProp,
-  GridApiRef,
+  ApiRef,
 } from '../../models';
 import { useLogger } from '../utils/useLogger';
 import { useRafUpdate } from '../utils';
@@ -27,7 +27,7 @@ export const useRows = (
   options: GridOptions,
   rows: RowsProp,
   initialised: boolean,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): RowModel[] => {
   const logger = useLogger('useRows');
   const rowModels = React.useMemo(() => rows.map((r) => createRow(r)), [rows]);

packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts

@@ -4,7 +4,7 @@ import {
   GridOptions,
   RenderColumnsProps,
   VirtualizationApi,
-  GridApiRef,
+  ApiRef,
 } from '../../models';
 import { useLogger } from '../utils/useLogger';
 import { COLUMNS_UPDATED } from '../../constants/eventsConstants';
@@ -22,7 +22,7 @@ type UseVirtualColumnsReturnType = [
 
 export const useVirtualColumns = (
   options: GridOptions,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): UseVirtualColumnsReturnType => {
   const logger = useLogger('useVirtualColumns');
   const renderedColRef = useRef<RenderColumnsProps | null>(null);

packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualRows.ts

@@ -9,7 +9,7 @@ import {
   RenderRowProps,
   Rows,
   VirtualizationApi,
-  GridApiRef,
+  ApiRef,
 } from '../../models';
 import { ScrollParams, useScrollFn } from '../utils';
 import { useLogger } from '../utils/useLogger';
@@ -34,7 +34,7 @@ export const useVirtualRows = (
   internalColumns: InternalColumns,
   rows: Rows,
   options: GridOptions,
-  apiRef: GridApiRef,
+  apiRef: ApiRef,
 ): UseVirtualRowsReturnType => {
   const logger = useLogger('useVirtualRows');
   const pageRef = useRef<number>(0);

packages/grid/x-grid-modules/src/models/api/apiRef.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridApi } from './gridApi';
+/**
+ * The apiRef component prop type.
+ */
+export type ApiRef = React.MutableRefObject<GridApi | null | undefined>;

packages/grid/x-grid-modules/src/models/api/index.ts

@@ -1,6 +1,6 @@
+export * from './apiRef';
 export * from './columnApi';
 export * from './gridApi';
-export * from './gridApiRef';
 export * from './paginationApi';
 export * from './rowApi';
 export * from './selectionApi';

packages/grid/x-grid-modules/src/models/index.ts

@@ -2,6 +2,7 @@ export * from './colDef';
 export * from './containerProps';
 export * from './elementSize';
 export * from './gridOptions';
+export * from './rootContainerRef';
 export * from './renderContextProps';
 export * from './rows';
 export * from './sortModel';