From cb4252d29eb43c24a84fdc3b7cc7989f486252ff Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 20 Jul 2020 16:39:46 +0200 Subject: [PATCH 1/4] refactor GridApiRef to useApiRef --- .../src/components/api-context.ts | 4 ++-- .../src/components/checkbox-renderer.tsx | 2 +- .../x-grid-modules/src/gridComponentProps.ts | 4 ++-- .../src/hooks/features/useApiRef.ts | 5 +++++ .../src/hooks/features/useColumnResize.tsx | 4 ++-- .../src/hooks/features/useComponents.tsx | 4 ++-- .../src/hooks/features/usePagination.ts | 4 ++-- .../src/hooks/features/useSelection.ts | 4 ++-- .../src/hooks/features/useSorting.ts | 4 ++-- .../x-grid-modules/src/hooks/root/useApi.ts | 4 ++-- .../src/hooks/root/useApiEventHandler.ts | 4 ++-- .../src/hooks/root/useApiMethod.ts | 4 ++-- .../src/hooks/root/useColumns.ts | 8 ++++---- .../src/hooks/root/useKeyboard.ts | 4 ++-- .../src/hooks/root/useNativeEventListener.ts | 4 ++-- .../x-grid-modules/src/hooks/root/useRows.ts | 4 ++-- .../hooks/virtualization/useVirtualColumns.ts | 4 ++-- .../hooks/virtualization/useVirtualRows.ts | 4 ++-- .../x-grid-modules/src/models/api/apiRef.ts | 4 ++++ .../src/models/api/gridApiRef.ts | 19 ------------------- .../x-grid-modules/src/models/api/index.ts | 2 +- .../x-grid-modules/src/models/gridRootRef.ts | 3 +++ .../grid/x-grid-modules/src/models/index.ts | 1 + .../src/models/params/componentParams.ts | 5 +++-- .../storybook/src/components/feed-grid.tsx | 10 +++++----- .../storybook/src/components/pricing-grid.tsx | 10 +++++----- .../pages/demos/pagination/setPage.demo.tsx | 4 ++-- .../pages/demos/rows/updateRows.demo.tsx | 10 +++++----- .../pages/pagination.stories.mdx | 2 +- .../pages/quick-start.stories.mdx | 2 +- .../src/documentation/pages/rows.stories.mdx | 6 +++--- .../src/stories/grid-pagination.stories.tsx | 4 ++-- .../src/stories/grid-streaming.stories.tsx | 10 +++++----- .../customize-components.stories.tsx | 4 ++-- 34 files changed, 83 insertions(+), 88 deletions(-) create mode 100644 packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts create mode 100644 packages/grid/x-grid-modules/src/models/api/apiRef.ts delete mode 100644 packages/grid/x-grid-modules/src/models/api/gridApiRef.ts create mode 100644 packages/grid/x-grid-modules/src/models/gridRootRef.ts diff --git a/packages/grid/x-grid-modules/src/components/api-context.ts b/packages/grid/x-grid-modules/src/components/api-context.ts index 2fcebbe49a1f..b91cf0a98920 100644 --- a/packages/grid/x-grid-modules/src/components/api-context.ts +++ b/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(undefined); +export const ApiContext = React.createContext(undefined); diff --git a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx index 67280e236fee..4cacfdfaf80e 100644 --- a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx +++ b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx @@ -19,7 +19,7 @@ export const HeaderCheckbox: React.FC = 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); diff --git a/packages/grid/x-grid-modules/src/gridComponentProps.ts b/packages/grid/x-grid-modules/src/gridComponentProps.ts index 5a6b44d4cc06..5525350f3ae6 100644 --- a/packages/grid/x-grid-modules/src/gridComponentProps.ts +++ b/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 */ diff --git a/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts b/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts new file mode 100644 index 000000000000..6904e3de6dfd --- /dev/null +++ b/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts @@ -0,0 +1,5 @@ +import * as React from 'react'; +import {ApiRef} from "../../models/api/apiRef"; +import { GridApi } from '../../models/api/gridApi'; + +export const useApiRef = (): ApiRef => React.useRef(); diff --git a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx index 4f14ec94a92d..c94f91393f09 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx +++ b/packages/grid/x-grid-modules/src/hooks/features/useColumnResize.tsx @@ -4,7 +4,7 @@ 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; @@ -12,7 +12,7 @@ const MOUSE_LEFT_TIMEOUT = 1000; // TODO improve experience for last column export const useColumnResize = ( columnsRef: React.RefObject, - apiRef: GridApiRef, + apiRef: ApiRef, headerHeight: number, ) => { const logger = useLogger('useColumnResize'); diff --git a/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx b/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx index 6d95865a7698..f7a362be210c 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx +++ b/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { PaginationProps } from './usePagination'; import { ComponentParams, - GridApiRef, + ApiRef, GridComponentOverridesProp, GridOptions, GridRootRef, @@ -17,7 +17,7 @@ export const useComponents = ( options: GridOptions, componentOverrides: GridComponentOverridesProp | undefined, paginationProps: PaginationProps, - apiRef: GridApiRef, + apiRef: ApiRef, gridRootRef: GridRootRef, ) => { const componentParams: ComponentParams = React.useMemo( diff --git a/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts b/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts index 25055e2f077e..c1948de0dfc8 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts +++ b/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'); diff --git a/packages/grid/x-grid-modules/src/hooks/features/useSelection.ts b/packages/grid/x-grid-modules/src/hooks/features/useSelection.ts index fd7632dab5e1..358b5cad2b71 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useSelection.ts +++ b/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([]); diff --git a/packages/grid/x-grid-modules/src/hooks/features/useSorting.ts b/packages/grid/x-grid-modules/src/hooks/features/useSorting.ts index 5aef24f4eba1..bb1eefb98c82 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useSorting.ts +++ b/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([]); diff --git a/packages/grid/x-grid-modules/src/hooks/root/useApi.ts b/packages/grid/x-grid-modules/src/hooks/root/useApi.ts index 59c3dcec38ca..a6242fcdd316 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useApi.ts +++ b/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, windowRef: React.RefObject, options: GridOptions, - apiRef: GridApiRef, + apiRef: ApiRef, ): boolean { const [isApiInitialised, setApiInitialised] = React.useState(false); const [initialised, setInit] = React.useState(false); diff --git a/packages/grid/x-grid-modules/src/hooks/root/useApiEventHandler.ts b/packages/grid/x-grid-modules/src/hooks/root/useApiEventHandler.ts index c2240c28579f..04066d20c2be 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useApiEventHandler.ts +++ b/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, ) { diff --git a/packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts b/packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts index 5df51595caea..2fe86b45b8ea 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts +++ b/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, apiName: string) { +export function useApiMethod(apiRef: ApiRef, apiMethods: Partial, apiName: string) { const logger = useLogger('useApiMethod'); React.useEffect(() => { diff --git a/packages/grid/x-grid-modules/src/hooks/root/useColumns.ts b/packages/grid/x-grid-modules/src/hooks/root/useColumns.ts index b8e62acdf496..88dffc91dd28 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useColumns.ts +++ b/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(); diff --git a/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts b/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts index 1fe1044feae3..e68fbdb38cbb 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts +++ b/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) => { @@ -45,7 +45,7 @@ const getNextCellIndexes = (code: string, indexes: CellIndexCoordinates) => { export const useKeyboard = ( options: GridOptions, initialised: boolean, - apiRef: GridApiRef, + apiRef: ApiRef, ): void => { const logger = useLogger('useKeyboard'); const isMultipleKeyPressed = React.useRef(false); diff --git a/packages/grid/x-grid-modules/src/hooks/root/useNativeEventListener.ts b/packages/grid/x-grid-modules/src/hooks/root/useNativeEventListener.ts index 1ec61e980fed..84bbb82e4fb9 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useNativeEventListener.ts +++ b/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 | (() => Element | undefined | null), eventName: string, handler?: (event: Event) => any, diff --git a/packages/grid/x-grid-modules/src/hooks/root/useRows.ts b/packages/grid/x-grid-modules/src/hooks/root/useRows.ts index 2bfbabac04c7..606aff65a027 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useRows.ts +++ b/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]); diff --git a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts b/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts index fbfeb11054f6..ee1d2f881ac1 100644 --- a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts +++ b/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(null); diff --git a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualRows.ts b/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualRows.ts index 1898c3c62438..70c59915b2f9 100644 --- a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualRows.ts +++ b/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(0); diff --git a/packages/grid/x-grid-modules/src/models/api/apiRef.ts b/packages/grid/x-grid-modules/src/models/api/apiRef.ts new file mode 100644 index 000000000000..fe3d78fe7a40 --- /dev/null +++ b/packages/grid/x-grid-modules/src/models/api/apiRef.ts @@ -0,0 +1,4 @@ +import * as React from "react"; +import {GridApi} from "./gridApi"; + +export type ApiRef = React.MutableRefObject; diff --git a/packages/grid/x-grid-modules/src/models/api/gridApiRef.ts b/packages/grid/x-grid-modules/src/models/api/gridApiRef.ts deleted file mode 100644 index 5b69857f67dc..000000000000 --- a/packages/grid/x-grid-modules/src/models/api/gridApiRef.ts +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import { GridApi } from './gridApi'; - -/** - * The apiRef component prop type. - */ -export type GridApiRef = React.MutableRefObject; - -/** - * Helper Function that instantiate GridApiRef to pass in component prop. - */ -// eslint-disable-next-line react-hooks/rules-of-hooks -export const gridApiRef = (): GridApiRef => React.useRef(); -// TODO move to useApiRef hook - -/** - * The ref type of the inner grid root container. - */ -export type GridRootRef = React.RefObject; diff --git a/packages/grid/x-grid-modules/src/models/api/index.ts b/packages/grid/x-grid-modules/src/models/api/index.ts index 498a20d49323..eefed916ffcf 100644 --- a/packages/grid/x-grid-modules/src/models/api/index.ts +++ b/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'; diff --git a/packages/grid/x-grid-modules/src/models/gridRootRef.ts b/packages/grid/x-grid-modules/src/models/gridRootRef.ts new file mode 100644 index 000000000000..3d3319dc55b3 --- /dev/null +++ b/packages/grid/x-grid-modules/src/models/gridRootRef.ts @@ -0,0 +1,3 @@ +import * as React from "react"; + +export type GridRootRef = React.RefObject; diff --git a/packages/grid/x-grid-modules/src/models/index.ts b/packages/grid/x-grid-modules/src/models/index.ts index 2aa57c56755e..cd4c8c1d7cbe 100644 --- a/packages/grid/x-grid-modules/src/models/index.ts +++ b/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 './gridRootRef'; export * from './renderContextProps'; export * from './rows'; export * from './sortModel'; diff --git a/packages/grid/x-grid-modules/src/models/params/componentParams.ts b/packages/grid/x-grid-modules/src/models/params/componentParams.ts index ac0c7f9c6f37..f92e65665908 100644 --- a/packages/grid/x-grid-modules/src/models/params/componentParams.ts +++ b/packages/grid/x-grid-modules/src/models/params/componentParams.ts @@ -1,8 +1,9 @@ import { Rows } from '../rows'; import { Columns } from '../colDef/colDef'; import { GridOptions } from '../gridOptions'; -import { GridApiRef, GridRootRef } from '../api/gridApiRef'; import { PaginationProps } from '../../hooks/features/usePagination'; +import {GridRootRef} from "../gridRootRef"; +import {ApiRef} from "../api"; /** * Object passed as React prop in the component override. @@ -27,7 +28,7 @@ export interface ComponentParams { /** * ApiRef that let you manipulate the grid */ - api: GridApiRef; + api: ApiRef; /** * The ref of the inner div Element of the grid */ diff --git a/packages/storybook/src/components/feed-grid.tsx b/packages/storybook/src/components/feed-grid.tsx index 8cd0caac84ec..9b776e295a66 100644 --- a/packages/storybook/src/components/feed-grid.tsx +++ b/packages/storybook/src/components/feed-grid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { fromEvent, Subscription } from 'rxjs'; import { takeUntil, tap } from 'rxjs/operators'; -import { ColDef, GridApi, GridOptionsProp, XGrid } from '@material-ui/x-grid'; +import { ColDef, GridOptionsProp, XGrid, useApiRef } from '@material-ui/x-grid'; import { PricingModel } from '../data/streaming/pricing-service'; import { feedColumns, subscribeFeed } from '../data/streaming/single-subscription-service'; @@ -15,14 +15,14 @@ export const FeedGrid: React.FC = (p) => { const [rows] = React.useState([]); const [started, setStarted] = React.useState(false); - const gridApiRef = React.useRef(null); + const apiRef = useApiRef(); const stopButton = React.useRef(null); const subscription: Subscription = new Subscription(); const handleNewPrices = (updates: PricingModel[]) => { - if (gridApiRef && gridApiRef.current) { - gridApiRef.current.updateRowData(updates); + if (apiRef && apiRef.current) { + apiRef.current.updateRowData(updates); } }; @@ -66,7 +66,7 @@ export const FeedGrid: React.FC = (p) => {
- +
); diff --git a/packages/storybook/src/components/pricing-grid.tsx b/packages/storybook/src/components/pricing-grid.tsx index 6e7a84d5ccb6..acf5f5f9b2d2 100644 --- a/packages/storybook/src/components/pricing-grid.tsx +++ b/packages/storybook/src/components/pricing-grid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { fromEvent, Subscription } from 'rxjs'; import { takeUntil, tap } from 'rxjs/operators'; -import { XGrid, ColDef, GridApi, GridOptionsProp } from '@material-ui/x-grid'; +import { XGrid, ColDef, GridOptionsProp, useApiRef } from '@material-ui/x-grid'; import { PricingModel, subscribeCurrencyPair, @@ -19,13 +19,13 @@ export const PricingGrid: React.FC = (p) => { const [rows] = React.useState([]); const [started, setStarted] = React.useState(false); - const gridApiRef = React.useRef(null); + const apiRef = useApiRef(); const stopButton = React.useRef(null); const subscription: Subscription = new Subscription(); const handleNewPrice = (pricingModel: PricingModel) => { - if (gridApiRef && gridApiRef.current) { - gridApiRef.current.updateRowData([pricingModel]); + if (apiRef && apiRef.current) { + apiRef.current.updateRowData([pricingModel]); } }; @@ -69,7 +69,7 @@ export const PricingGrid: React.FC = (p) => {
- +
); diff --git a/packages/storybook/src/documentation/pages/demos/pagination/setPage.demo.tsx b/packages/storybook/src/documentation/pages/demos/pagination/setPage.demo.tsx index a0137f16daa5..8ec1ec7598ab 100644 --- a/packages/storybook/src/documentation/pages/demos/pagination/setPage.demo.tsx +++ b/packages/storybook/src/documentation/pages/demos/pagination/setPage.demo.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import { Columns, RowsProp, XGrid, gridApiRef } from '@material-ui/x-grid'; +import { Columns, RowsProp, XGrid, useApiRef } from '@material-ui/x-grid'; import { randomCreatedDate, randomUpdatedDate } from '@material-ui/x-grid-data-generator'; import '../demo.css'; export default function SetPageDemo() { - const apiRef = gridApiRef(); + const apiRef = useApiRef(); React.useEffect(() => { apiRef.current?.setPage(2); diff --git a/packages/storybook/src/documentation/pages/demos/rows/updateRows.demo.tsx b/packages/storybook/src/documentation/pages/demos/rows/updateRows.demo.tsx index 7590471ca89e..3315d02935b4 100644 --- a/packages/storybook/src/documentation/pages/demos/rows/updateRows.demo.tsx +++ b/packages/storybook/src/documentation/pages/demos/rows/updateRows.demo.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import { gridApiRef, XGrid } from '@material-ui/x-grid'; +import { useApiRef, XGrid } from '@material-ui/x-grid'; import { interval } from 'rxjs'; import { randomInt, randomUserName } from '@material-ui/x-grid-data-generator'; export default function UpdateRows() { - const api = gridApiRef(); + const apiRef = useApiRef(); const columns = [{ field: 'id' }, { field: 'username', width: 150 }, { field: 'age', width: 80 }]; const rows = [ { id: 1, username: randomUserName(), age: randomInt(10, 80) }, @@ -14,14 +14,14 @@ export default function UpdateRows() { ]; React.useEffect(() => { const subscription = interval(100).subscribe(() => - api.current?.updateRowData([ + apiRef.current?.updateRowData([ { id: randomInt(1, 4), username: randomUserName(), age: randomInt(10, 80) }, { id: randomInt(1, 4), username: randomUserName(), age: randomInt(10, 80) }, ]), ); return () => subscription.unsubscribe(); - }, [api]); + }, [apiRef]); - return ; + return ; } diff --git a/packages/storybook/src/documentation/pages/pagination.stories.mdx b/packages/storybook/src/documentation/pages/pagination.stories.mdx index 2a83de3d6d84..cc52781a65ad 100644 --- a/packages/storybook/src/documentation/pages/pagination.stories.mdx +++ b/packages/storybook/src/documentation/pages/pagination.stories.mdx @@ -96,7 +96,7 @@ Now that you understand how to implement the pagination feature of the grid. You To achieve this, you should use our `apiRef` as below; ```tsx -const apiRef = gridApiRef(); +const apiRef = useApiRef(); React.useEffect(() => { apiRef.current?.setPage(2); diff --git a/packages/storybook/src/documentation/pages/quick-start.stories.mdx b/packages/storybook/src/documentation/pages/quick-start.stories.mdx index 6e333f3555ac..d306055c2eb8 100644 --- a/packages/storybook/src/documentation/pages/quick-start.stories.mdx +++ b/packages/storybook/src/documentation/pages/quick-start.stories.mdx @@ -125,6 +125,6 @@ A complete example is below. - `rows`: An array of objects - `options`: Optional. An object of type `GridOptions` that allow configuring the grid - `components`: Optional. An object that allows replacing default components -- `apiRef`: Optional. An object of type `GridApiRef` that can be instantiated using `gridApiRef()` that allows manipulating the grid outside the component props. +- `apiRef`: Optional. An object of type `ApiRef` that can be instantiated using `useApiRef()` that allows manipulating the grid outside the component props. - `loading`: Optional. `boolean` that display the `LoadingOverlay` component when true; - `className`: Optional. String containing some CSS classes that will be applied to the grid container; diff --git a/packages/storybook/src/documentation/pages/rows.stories.mdx b/packages/storybook/src/documentation/pages/rows.stories.mdx index 096a7353c32e..104ebbe0b258 100644 --- a/packages/storybook/src/documentation/pages/rows.stories.mdx +++ b/packages/storybook/src/documentation/pages/rows.stories.mdx @@ -46,7 +46,7 @@ Below is a sample code showing how you can achieve this. ```tsx function StreamingGrid() { - const api = gridApiRef(); + const apiRef = useApiRef(); const columns = [ { field: 'id' }, { field: 'username', width: 150 }, @@ -75,13 +75,13 @@ function StreamingGrid() { ); return () => subscription.unsubscribe(); - }, [api]); + }, [apiRef]); return ( ); diff --git a/packages/storybook/src/stories/grid-pagination.stories.tsx b/packages/storybook/src/stories/grid-pagination.stories.tsx index 71321bd1e49c..15e3c8905c81 100644 --- a/packages/storybook/src/stories/grid-pagination.stories.tsx +++ b/packages/storybook/src/stories/grid-pagination.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { XGrid, GridApiRef, gridApiRef } from '@material-ui/x-grid'; +import { XGrid, ApiRef, useApiRef } from '@material-ui/x-grid'; import Button from '@material-ui/core/Button'; import Pagination from '@material-ui/lab/Pagination'; import { action } from '@storybook/addon-actions'; @@ -88,7 +88,7 @@ export function HiddenPagination() { } export function PaginationApiTests() { - const apiRef: GridApiRef = gridApiRef(); + const apiRef: ApiRef = useApiRef(); const data = useData(2000, 200); const [autosize, setAutoSize] = React.useState(false); diff --git a/packages/storybook/src/stories/grid-streaming.stories.tsx b/packages/storybook/src/stories/grid-streaming.stories.tsx index f6568d203fd3..d6094d35dff4 100644 --- a/packages/storybook/src/stories/grid-streaming.stories.tsx +++ b/packages/storybook/src/stories/grid-streaming.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { action } from '@storybook/addon-actions'; -import { GridOptionsProp, XGrid, gridApiRef } from '@material-ui/x-grid'; +import { GridOptionsProp, XGrid, useApiRef } from '@material-ui/x-grid'; import { withKnobs } from '@storybook/addon-knobs'; import { withA11y } from '@storybook/addon-a11y'; import { interval } from 'rxjs'; @@ -67,12 +67,12 @@ export const SingleSubscriptionFast = () => { }; export function SimpleRxUpdate() { - const api = gridApiRef(); + const apiRef = useApiRef(); const columns = [{ field: 'id' }, { field: 'username', width: 150 }, { field: 'age', width: 80 }]; React.useEffect(() => { const subscription = interval(100).subscribe(() => - api.current?.updateRowData([ + apiRef.current?.updateRowData([ { id: 1, username: randomUserName(), age: randomInt(10, 80) }, { id: 2, username: randomUserName(), age: randomInt(10, 80) }, { id: 3, username: randomUserName(), age: randomInt(10, 80) }, @@ -81,7 +81,7 @@ export function SimpleRxUpdate() { ); return () => subscription.unsubscribe(); - }, [api]); + }, [apiRef]); - return ; + return ; } diff --git a/packages/storybook/src/stories/playground/customize-components.stories.tsx b/packages/storybook/src/stories/playground/customize-components.stories.tsx index 5538a0c24e4c..031ca44c3883 100644 --- a/packages/storybook/src/stories/playground/customize-components.stories.tsx +++ b/packages/storybook/src/stories/playground/customize-components.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ColDef, XGrid, GridOverlay, Footer, GridApiRef, gridApiRef } from '@material-ui/x-grid'; +import { ColDef, XGrid, GridOverlay, Footer , useApiRef, ApiRef } from '@material-ui/x-grid'; import LinearProgress from '@material-ui/core/LinearProgress'; import CodeIcon from '@material-ui/icons/Code'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; @@ -119,7 +119,7 @@ function PaginationComponent(props) { } export function CustomPagination() { - const apiRef: GridApiRef = gridApiRef(); + const apiRef: ApiRef = useApiRef(); const data = useData(2000, 200); return ( From 19e9d73b682c62d907879b07f3544172661d51c9 Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 20 Jul 2020 16:41:24 +0200 Subject: [PATCH 2/4] prettier --- .../x-grid-modules/src/components/checkbox-renderer.tsx | 3 ++- .../grid/x-grid-modules/src/hooks/features/useApiRef.ts | 2 +- .../grid/x-grid-modules/src/hooks/features/usePagination.ts | 2 +- .../x-grid-modules/src/hooks/root/useApiEventHandler.ts | 2 +- packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts | 2 +- packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts | 6 +----- packages/grid/x-grid-modules/src/models/api/apiRef.ts | 4 ++-- packages/grid/x-grid-modules/src/models/gridRootRef.ts | 2 +- .../x-grid-modules/src/models/params/componentParams.ts | 4 ++-- .../src/stories/playground/customize-components.stories.tsx | 2 +- 10 files changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx index 4cacfdfaf80e..070af522eb5c 100644 --- a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx +++ b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx @@ -19,7 +19,8 @@ export const HeaderCheckbox: React.FC = React.memo(({ api }) => { }; const selectionChanged = React.useCallback( (event: SelectionChangedParams) => { - const isAllSelected = api.getAllRowIds().length === event.rows.length && event.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); diff --git a/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts b/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts index 6904e3de6dfd..c869f9602cfd 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts +++ b/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import {ApiRef} from "../../models/api/apiRef"; +import { ApiRef } from '../../models/api/apiRef'; import { GridApi } from '../../models/api/gridApi'; export const useApiRef = (): ApiRef => React.useRef(); diff --git a/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts b/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts index c1948de0dfc8..adc2e4d122de 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts +++ b/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts @@ -12,7 +12,7 @@ import { Rows } from '../../models/rows'; import { InternalColumns } from '../../models/colDef/colDef'; import { GridOptions } from '../../models/gridOptions'; import { PaginationApi } from '../../models/api/paginationApi'; -import {ApiRef} from "../../models/api"; +import { ApiRef } from '../../models/api'; export interface PaginationProps { page: number; diff --git a/packages/grid/x-grid-modules/src/hooks/root/useApiEventHandler.ts b/packages/grid/x-grid-modules/src/hooks/root/useApiEventHandler.ts index 04066d20c2be..20bccc98629e 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useApiEventHandler.ts +++ b/packages/grid/x-grid-modules/src/hooks/root/useApiEventHandler.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { useLogger } from '../utils'; -import {ApiRef} from "../../models/api"; +import { ApiRef } from '../../models/api'; export function useApiEventHandler( apiRef: ApiRef, diff --git a/packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts b/packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts index 2fe86b45b8ea..e0944db3567f 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts +++ b/packages/grid/x-grid-modules/src/hooks/root/useApiMethod.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import {ApiRef, GridApi} from '../../models/api'; +import { ApiRef, GridApi } from '../../models/api'; import { useLogger } from '../utils'; export function useApiMethod(apiRef: ApiRef, apiMethods: Partial, apiName: string) { diff --git a/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts b/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts index e68fbdb38cbb..b7589b64ce4d 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts +++ b/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts @@ -42,11 +42,7 @@ const getNextCellIndexes = (code: string, indexes: CellIndexCoordinates) => { return { ...indexes, rowIndex: indexes.rowIndex + 1 }; }; -export const useKeyboard = ( - options: GridOptions, - initialised: boolean, - apiRef: ApiRef, -): void => { +export const useKeyboard = (options: GridOptions, initialised: boolean, apiRef: ApiRef): void => { const logger = useLogger('useKeyboard'); const isMultipleKeyPressed = React.useRef(false); diff --git a/packages/grid/x-grid-modules/src/models/api/apiRef.ts b/packages/grid/x-grid-modules/src/models/api/apiRef.ts index fe3d78fe7a40..565797f0de05 100644 --- a/packages/grid/x-grid-modules/src/models/api/apiRef.ts +++ b/packages/grid/x-grid-modules/src/models/api/apiRef.ts @@ -1,4 +1,4 @@ -import * as React from "react"; -import {GridApi} from "./gridApi"; +import * as React from 'react'; +import { GridApi } from './gridApi'; export type ApiRef = React.MutableRefObject; diff --git a/packages/grid/x-grid-modules/src/models/gridRootRef.ts b/packages/grid/x-grid-modules/src/models/gridRootRef.ts index 3d3319dc55b3..09b2770bc1c9 100644 --- a/packages/grid/x-grid-modules/src/models/gridRootRef.ts +++ b/packages/grid/x-grid-modules/src/models/gridRootRef.ts @@ -1,3 +1,3 @@ -import * as React from "react"; +import * as React from 'react'; export type GridRootRef = React.RefObject; diff --git a/packages/grid/x-grid-modules/src/models/params/componentParams.ts b/packages/grid/x-grid-modules/src/models/params/componentParams.ts index f92e65665908..c3b7fbfeb71c 100644 --- a/packages/grid/x-grid-modules/src/models/params/componentParams.ts +++ b/packages/grid/x-grid-modules/src/models/params/componentParams.ts @@ -2,8 +2,8 @@ import { Rows } from '../rows'; import { Columns } from '../colDef/colDef'; import { GridOptions } from '../gridOptions'; import { PaginationProps } from '../../hooks/features/usePagination'; -import {GridRootRef} from "../gridRootRef"; -import {ApiRef} from "../api"; +import { GridRootRef } from '../gridRootRef'; +import { ApiRef } from '../api'; /** * Object passed as React prop in the component override. diff --git a/packages/storybook/src/stories/playground/customize-components.stories.tsx b/packages/storybook/src/stories/playground/customize-components.stories.tsx index 031ca44c3883..0bdaa3911db6 100644 --- a/packages/storybook/src/stories/playground/customize-components.stories.tsx +++ b/packages/storybook/src/stories/playground/customize-components.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ColDef, XGrid, GridOverlay, Footer , useApiRef, ApiRef } from '@material-ui/x-grid'; +import { ColDef, XGrid, GridOverlay, Footer, useApiRef, ApiRef } from '@material-ui/x-grid'; import LinearProgress from '@material-ui/core/LinearProgress'; import CodeIcon from '@material-ui/icons/Code'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; From bf6f3ff9586d1840528697dbcb670a1f3d088384 Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 20 Jul 2020 16:49:46 +0200 Subject: [PATCH 3/4] renamed GridRootRef to RootContainerRef --- .../grid/x-grid-modules/src/gridComponent.tsx | 16 +++++++++++----- .../src/hooks/features/useComponents.tsx | 4 ++-- .../x-grid-modules/src/models/gridRootRef.ts | 3 --- packages/grid/x-grid-modules/src/models/index.ts | 2 +- .../src/models/params/componentParams.ts | 4 ++-- .../src/models/rootContainerRef.ts | 3 +++ 6 files changed, 19 insertions(+), 13 deletions(-) delete mode 100644 packages/grid/x-grid-modules/src/models/gridRootRef.ts create mode 100644 packages/grid/x-grid-modules/src/models/rootContainerRef.ts diff --git a/packages/grid/x-grid-modules/src/gridComponent.tsx b/packages/grid/x-grid-modules/src/gridComponent.tsx index e09a3357dba8..05335818032a 100644 --- a/packages/grid/x-grid-modules/src/gridComponent.tsx +++ b/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 = React.memo( ({ rows, columns, options, apiRef, loading, licenseStatus, className, components }) => { useLoggerFactory(options?.logger, options?.logLevel); const logger = useLogger('Grid'); - const gridRootRef: GridRootRef = React.useRef(null); + const rootContainerRef: RootContainerRef = React.useRef(null); const footerRef = React.useRef(null); const columnsHeaderRef = React.useRef(null); const columnsContainerRef = React.useRef(null); @@ -55,7 +61,7 @@ export const GridComponent: React.FC = 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 = React.memo( components, paginationProps, apiRef, - gridRootRef, + rootContainerRef, ); const onResize = React.useCallback( @@ -143,7 +149,7 @@ export const GridComponent: React.FC = React.memo( {(size: any) => ( { const componentParams: ComponentParams = React.useMemo( () => ({ diff --git a/packages/grid/x-grid-modules/src/models/gridRootRef.ts b/packages/grid/x-grid-modules/src/models/gridRootRef.ts deleted file mode 100644 index 09b2770bc1c9..000000000000 --- a/packages/grid/x-grid-modules/src/models/gridRootRef.ts +++ /dev/null @@ -1,3 +0,0 @@ -import * as React from 'react'; - -export type GridRootRef = React.RefObject; diff --git a/packages/grid/x-grid-modules/src/models/index.ts b/packages/grid/x-grid-modules/src/models/index.ts index cd4c8c1d7cbe..67ec9c501345 100644 --- a/packages/grid/x-grid-modules/src/models/index.ts +++ b/packages/grid/x-grid-modules/src/models/index.ts @@ -2,7 +2,7 @@ export * from './colDef'; export * from './containerProps'; export * from './elementSize'; export * from './gridOptions'; -export * from './gridRootRef'; +export * from './rootContainerRef'; export * from './renderContextProps'; export * from './rows'; export * from './sortModel'; diff --git a/packages/grid/x-grid-modules/src/models/params/componentParams.ts b/packages/grid/x-grid-modules/src/models/params/componentParams.ts index c3b7fbfeb71c..6c16e3ca5a38 100644 --- a/packages/grid/x-grid-modules/src/models/params/componentParams.ts +++ b/packages/grid/x-grid-modules/src/models/params/componentParams.ts @@ -2,7 +2,7 @@ import { Rows } from '../rows'; import { Columns } from '../colDef/colDef'; import { GridOptions } from '../gridOptions'; import { PaginationProps } from '../../hooks/features/usePagination'; -import { GridRootRef } from '../gridRootRef'; +import { RootContainerRef } from '../rootContainerRef'; import { ApiRef } from '../api'; /** @@ -32,5 +32,5 @@ export interface ComponentParams { /** * The ref of the inner div Element of the grid */ - rootElement: GridRootRef; + rootElement: RootContainerRef; } diff --git a/packages/grid/x-grid-modules/src/models/rootContainerRef.ts b/packages/grid/x-grid-modules/src/models/rootContainerRef.ts new file mode 100644 index 000000000000..4579e14ffc7b --- /dev/null +++ b/packages/grid/x-grid-modules/src/models/rootContainerRef.ts @@ -0,0 +1,3 @@ +import * as React from 'react'; + +export type RootContainerRef = React.RefObject; From 39639b279203aa4961cdc5f758475cff58da54a2 Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 20 Jul 2020 18:06:20 +0200 Subject: [PATCH 4/4] rebased with master --- packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts | 3 +++ packages/grid/x-grid-modules/src/models/api/apiRef.ts | 4 +++- packages/grid/x-grid-modules/src/models/rootContainerRef.ts | 3 +++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts b/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts index c869f9602cfd..f147851629b5 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts +++ b/packages/grid/x-grid-modules/src/hooks/features/useApiRef.ts @@ -2,4 +2,7 @@ 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(); diff --git a/packages/grid/x-grid-modules/src/models/api/apiRef.ts b/packages/grid/x-grid-modules/src/models/api/apiRef.ts index 565797f0de05..a0276fbcfdaf 100644 --- a/packages/grid/x-grid-modules/src/models/api/apiRef.ts +++ b/packages/grid/x-grid-modules/src/models/api/apiRef.ts @@ -1,4 +1,6 @@ import * as React from 'react'; import { GridApi } from './gridApi'; - +/** + * The apiRef component prop type. + */ export type ApiRef = React.MutableRefObject; diff --git a/packages/grid/x-grid-modules/src/models/rootContainerRef.ts b/packages/grid/x-grid-modules/src/models/rootContainerRef.ts index 4579e14ffc7b..9652b08b912f 100644 --- a/packages/grid/x-grid-modules/src/models/rootContainerRef.ts +++ b/packages/grid/x-grid-modules/src/models/rootContainerRef.ts @@ -1,3 +1,6 @@ import * as React from 'react'; +/** + * The ref type of the inner grid root container. + */ export type RootContainerRef = React.RefObject;