diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx index 8fa0af94f8a5..1746ad3b4657 100644 --- a/packages/grid/_modules_/grid/GridComponent.tsx +++ b/packages/grid/_modules_/grid/GridComponent.tsx @@ -2,8 +2,8 @@ * Data Grid component implementing [[GridComponentProps]]. * @returns JSX.Element */ -import useForkRef from '@material-ui/core/utils/useForkRef'; import * as React from 'react'; +import { useForkRef } from '@material-ui/core/utils'; import { AutoSizer } from './components/AutoSizer'; import { ColumnsHeader } from './components/column-headers'; import { DefaultFooter } from './components/default-footer'; diff --git a/packages/grid/_modules_/grid/components/AutoSizer.tsx b/packages/grid/_modules_/grid/components/AutoSizer.tsx index 02763e673efc..139d6d9f0ca3 100644 --- a/packages/grid/_modules_/grid/components/AutoSizer.tsx +++ b/packages/grid/_modules_/grid/components/AutoSizer.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useForkRef, ownerWindow } from '@material-ui/core/utils'; -import { useEventCallback } from '../utils/material-ui-utils'; +import { useEventCallback, useEnhancedEffect } from '../utils/material-ui-utils'; import createDetectElementResize from '../lib/createDetectElementResize'; // TODO replace with https://caniuse.com/resizeobserver. @@ -47,9 +47,6 @@ export interface AutoSizerProps extends Omit void; } -// TODO v5: replace with @material-ui/core/utils/useEnhancedEffect. -const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; - export const AutoSizer = React.forwardRef(function AutoSizer( props, ref, diff --git a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts index 7a8470a593b8..9714b7f68a58 100644 --- a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts +++ b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts @@ -28,8 +28,8 @@ export interface GridState { export const getInitialState: () => GridState = () => ({ rows: getInitialRowState(), - pagination: { ...INITIAL_PAGINATION_STATE }, - options: { ...DEFAULT_GRID_OPTIONS }, + pagination: INITIAL_PAGINATION_STATE, + options: DEFAULT_GRID_OPTIONS, isScrolling: false, columns: getInitialColumnsState(), columnReorder: getInitialColumnReorderState(), diff --git a/packages/grid/_modules_/grid/hooks/features/core/useGridReducer.ts b/packages/grid/_modules_/grid/hooks/features/core/useGridReducer.ts index e597f5729c81..5442e350d28f 100644 --- a/packages/grid/_modules_/grid/hooks/features/core/useGridReducer.ts +++ b/packages/grid/_modules_/grid/hooks/features/core/useGridReducer.ts @@ -1,4 +1,3 @@ -import { useEffect, useRef } from 'react'; import * as React from 'react'; import { ApiRef } from '../../../models/api/apiRef'; import { useGridApi } from './useGridApi'; @@ -10,7 +9,7 @@ export const useGridReducer = ( reducer: React.Reducer, initialState: State, ) => { - const api = useGridApi(apiRef); + const gridApi = useGridApi(apiRef); const [gridState, setGridState, forceUpdate] = useGridState(apiRef); const gridDispatch = React.useCallback( @@ -18,26 +17,23 @@ export const useGridReducer = ( if (gridState[stateId] === undefined) { gridState[stateId] = initialState; } - const newLocalState = reducer(api.state[stateId], action); setGridState((oldState) => { - const updatingState: any = {}; - updatingState[stateId] = { ...newLocalState }; - - oldState = { ...oldState, ...updatingState }; - return oldState; + const newState = { ...oldState }; + newState[stateId] = reducer(oldState[stateId], action); + return newState; }); forceUpdate(); }, - [api, forceUpdate, gridState, initialState, reducer, setGridState, stateId], + [forceUpdate, gridState, initialState, reducer, setGridState, stateId], ); - const dispatchRef = useRef(gridDispatch); + const dispatchRef = React.useRef(gridDispatch); - useEffect(() => { + React.useEffect(() => { dispatchRef.current = gridDispatch; }, [gridDispatch]); const dispatch = React.useCallback((args) => dispatchRef.current(args), []); - return { gridState, dispatch, gridApi: api }; + return { gridState, dispatch, gridApi }; }; diff --git a/packages/grid/_modules_/grid/hooks/features/core/useGridSelector.ts b/packages/grid/_modules_/grid/hooks/features/core/useGridSelector.ts index e517c1b5f25f..f699a47bebb6 100644 --- a/packages/grid/_modules_/grid/hooks/features/core/useGridSelector.ts +++ b/packages/grid/_modules_/grid/hooks/features/core/useGridSelector.ts @@ -5,7 +5,6 @@ export const useGridSelector = ( apiRef: ApiRef | undefined, selector: (state: any) => State, ) => { - const [state, ,] = useGridState(apiRef!); - + const [state] = useGridState(apiRef!); return selector(state); }; diff --git a/packages/grid/_modules_/grid/hooks/features/pagination/paginationReducer.ts b/packages/grid/_modules_/grid/hooks/features/pagination/paginationReducer.ts index 66dc636c62c4..e8001c668ac3 100644 --- a/packages/grid/_modules_/grid/hooks/features/pagination/paginationReducer.ts +++ b/packages/grid/_modules_/grid/hooks/features/pagination/paginationReducer.ts @@ -8,19 +8,19 @@ export interface PaginationState { paginationMode: FeatureMode; } -const SET_PAGE_ACTION = 'SetPage'; -const SET_PAGESIZE_ACTION = 'SetPageSize'; -const SET_PAGINATION_MODE_ACTION = 'SetPaginationMode'; -const SET_ROWCOUNT_ACTION = 'setRowCount'; +const SET_PAGE_ACTION = 'SET_PAGE_ACTION'; +const SET_PAGESIZE_ACTION = 'SET_PAGESIZE_ACTION'; +const SET_PAGINATION_MODE_ACTION = 'SET_PAGINATION_MODE_ACTION'; +const SET_ROWCOUNT_ACTION = 'SET_ROWCOUNT_ACTION'; -type SetPageAction = { type: 'SetPage'; payload: { page: number } }; -type SetPageSizeAction = { type: 'SetPageSize'; payload: { pageSize: number } }; +type SetPageAction = { type: typeof SET_PAGE_ACTION; payload: { page: number } }; +type SetPageSizeAction = { type: typeof SET_PAGESIZE_ACTION; payload: { pageSize: number } }; type SetPaginationModeAction = { - type: 'SetPaginationMode'; + type: typeof SET_PAGINATION_MODE_ACTION; payload: { paginationMode: FeatureMode }; }; type SetRowCountAction = { - type: 'setRowCount'; + type: typeof SET_ROWCOUNT_ACTION; payload: { totalRowCount: number }; }; diff --git a/packages/grid/_modules_/grid/hooks/features/virtualization/useVirtualRows.ts b/packages/grid/_modules_/grid/hooks/features/virtualization/useVirtualRows.ts index 8cbbf04a653d..9094afcd988d 100644 --- a/packages/grid/_modules_/grid/hooks/features/virtualization/useVirtualRows.ts +++ b/packages/grid/_modules_/grid/hooks/features/virtualization/useVirtualRows.ts @@ -6,6 +6,7 @@ import { CellIndexCoordinates } from '../../../models/cell'; import { ScrollParams } from '../../../models/params/scrollParams'; import { RenderContextProps, RenderRowProps } from '../../../models/renderContextProps'; import { isEqual } from '../../../utils/utils'; +import { useEnhancedEffect } from '../../../utils/material-ui-utils'; import { useGridSelector } from '../core/useGridSelector'; import { useGridState } from '../core/useGridState'; import { PaginationState } from '../pagination/paginationReducer'; @@ -22,9 +23,6 @@ import { useVirtualColumns } from './useVirtualColumns'; type UseVirtualRowsReturnType = Partial | null; -// TODO v5: replace with @material-ui/core/utils/useEnhancedEffect. -const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; - export const useVirtualRows = ( colRef: React.MutableRefObject, windowRef: React.MutableRefObject, diff --git a/packages/grid/_modules_/grid/hooks/utils/useLogger.ts b/packages/grid/_modules_/grid/hooks/utils/useLogger.ts index 89881c685f16..d976a2f4a05f 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useLogger.ts +++ b/packages/grid/_modules_/grid/hooks/utils/useLogger.ts @@ -47,7 +47,7 @@ function getAppender(name: string, logLevel: string, appender: Logger = console) loggerObj[method] = (...args: any[]) => { const [message, ...rest] = args; - (appender as any)[method](`${name}: ${message}`, ...rest); + (appender as any)[method](`Material-UI: ${name} - ${message}`, ...rest); }; } else { loggerObj[method] = noop; diff --git a/packages/grid/_modules_/grid/models/api/virtualizationApi.ts b/packages/grid/_modules_/grid/models/api/virtualizationApi.ts index 7de69996adfe..73ae47972329 100644 --- a/packages/grid/_modules_/grid/models/api/virtualizationApi.ts +++ b/packages/grid/_modules_/grid/models/api/virtualizationApi.ts @@ -15,7 +15,7 @@ export interface VirtualizationApi { /** * Trigger the grid viewport to scroll to a row of x y indexes. * @param params - * @returns boolean that indicates if the viewport has scrolled to reach the indexes + * @returns boolean Return if the index was outside of the viewport and the grid has to scroll to reach the target. */ scrollToIndexes: (params: CellIndexCoordinates) => boolean; /** diff --git a/packages/grid/_modules_/grid/utils/material-ui-utils.ts b/packages/grid/_modules_/grid/utils/material-ui-utils.ts index a6f961545d5d..0f501f6cc258 100644 --- a/packages/grid/_modules_/grid/utils/material-ui-utils.ts +++ b/packages/grid/_modules_/grid/utils/material-ui-utils.ts @@ -1,6 +1,11 @@ +import * as React from 'react'; import { useEventCallback as muiUseEventCallback } from '@material-ui/core/utils'; export function useEventCallback any>(func: T): T { // @ts-expect-error TODO remove wrapper once upgraded to v5 return muiUseEventCallback(func); } + +// TODO replace with { useEnhancedEffect } from @material-ui/core/utils. +export const useEnhancedEffect = + typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx index 1b264acab0e2..64edc84b33e7 100644 --- a/packages/grid/data-grid/src/DataGrid.test.tsx +++ b/packages/grid/data-grid/src/DataGrid.test.tsx @@ -105,7 +105,9 @@ describe('', () => { ); clock.tick(100); // @ts-expect-error need to migrate helpers to TypeScript - }).toWarnDev('useResizeContainer: The parent of the grid has an empty height.'); + }).toWarnDev( + 'Material-UI: useResizeContainer - The parent of the grid has an empty height.', + ); }); it('should warn if the container has no intrinsic width', () => { @@ -119,7 +121,9 @@ describe('', () => { ); clock.tick(100); // @ts-expect-error need to migrate helpers to TypeScript - }).toWarnDev('useResizeContainer: The parent of the grid has an empty width.'); + }).toWarnDev( + 'Material-UI: useResizeContainer - The parent of the grid has an empty width.', + ); }); }); });