Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Refactor state #412

Merged
merged 44 commits into from
Oct 26, 2020
Merged
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
af1df68
WIP state refactoring on pagination
dtassone Oct 7, 2020
9f89b01
fix merging issues
dtassone Oct 7, 2020
95434d5
WIP working on the rowsReducer and global state
dtassone Oct 8, 2020
153813f
fixes state refactoring finalizing api
dtassone Oct 10, 2020
a2ac04b
refactored grid reducer
dtassone Oct 13, 2020
3cbdb8d
fix issue with state and cleanup
dtassone Oct 13, 2020
6d26841
fix state and added sortedSelctor for viewport
dtassone Oct 13, 2020
aabf153
prettier
dtassone Oct 13, 2020
853198e
fix state virtualisation
dtassone Oct 15, 2020
84e77d5
small refactoring with selector
dtassone Oct 15, 2020
d874bae
rollback lint rules
dtassone Oct 15, 2020
5d3d8e3
remove options prop to useGridSelector
dtassone Oct 15, 2020
31c2a96
prettier
dtassone Oct 15, 2020
5220264
cleanup commented code
dtassone Oct 15, 2020
9359199
fix pagination and rendering issues
dtassone Oct 16, 2020
55d6d99
fix sorting and refactored hooks props
dtassone Oct 16, 2020
ed6a93e
Refactored useSorting to new gridState
dtassone Oct 20, 2020
a6c9bf2
rebased and fix issues
dtassone Oct 20, 2020
ed67afe
cleanup
dtassone Oct 20, 2020
e3d03a3
prettier
dtassone Oct 20, 2020
2817bf9
fix test
dtassone Oct 21, 2020
d847d5f
rebased
dtassone Oct 21, 2020
ae53a83
fix demo app
dtassone Oct 21, 2020
5b232d4
small refactoring on header item
dtassone Oct 21, 2020
091a07f
fix dependency cycle
dtassone Oct 21, 2020
19c4ede
fix index
dtassone Oct 21, 2020
ed328d3
prettier
dtassone Oct 21, 2020
e403bb3
removed unused fn
dtassone Oct 21, 2020
94140d8
fixing test
dtassone Oct 22, 2020
a344fba
small refactoringg
dtassone Oct 22, 2020
9bb2d3b
prettier
dtassone Oct 22, 2020
caa1398
perf improvements and keyboard refactoring
dtassone Oct 22, 2020
82ec871
improve perf and fix keyboard and test
dtassone Oct 23, 2020
77bcac0
move virtualisation folder
dtassone Oct 23, 2020
2f4586a
prettier
dtassone Oct 23, 2020
a4c6e47
refactor useComponents and useEvents
dtassone Oct 26, 2020
4de3fd9
yarn docs ts formatted
dtassone Oct 26, 2020
37e2f19
fix demos and issue with resizing
dtassone Oct 26, 2020
75ce9fc
fix types in doc
dtassone Oct 26, 2020
20e4a54
small fix prettier
dtassone Oct 26, 2020
30e7853
fix rows perf, and prettier
dtassone Oct 26, 2020
e0801e3
fix dependency array
dtassone Oct 26, 2020
bc93224
fix prettier
dtassone Oct 26, 2020
7466c49
restored rowIndex
dtassone Oct 26, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix dependency cycle
dtassone committed Oct 21, 2020

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
commit 091a07f2a86df43f316b1851cb135272b2772425
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@
"test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.tsx' --exclude '**/node_modules/**'",
"test:watch": "yarn test:unit --watch",
"lint": "yarn eslint && yarn jsonlint",
"eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx",
"eslint": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx",
"eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx",
"jsonlint": "node scripts/jsonlint.js",
"typescript": "lerna run typescript --parallel",
2 changes: 1 addition & 1 deletion packages/grid/_modules_/grid/components/column-headers.tsx
Original file line number Diff line number Diff line change
@@ -53,7 +53,7 @@ export const ColumnHeaderItemCollection: React.FC<ColumnHeadersItemCollectionPro
onColumnDragEnter={onColumnDragEnter}
onColumnDragOver={onColumnDragOver}
/>
)), [columns, gridSortModel, onColumnDragEnter, onColumnDragOver, onColumnDragStart, resizingColField, separatorProps]);
)), [columns, gridSortModel, onColumnDragEnter, onColumnDragOver, onColumnDragStart, options, resizingColField, separatorProps]);

return <React.Fragment>{items}</React.Fragment>;
};
Original file line number Diff line number Diff line change
@@ -3,22 +3,13 @@ import { COLUMNS_UPDATED } from '../../../constants/eventsConstants';
import { ApiRef } from '../../../models/api/apiRef';
import { ColumnApi } from '../../../models/api/columnApi';
import { checkboxSelectionColDef } from '../../../models/colDef/checkboxSelection';
import { ColDef, Columns, ColumnsMeta, InternalColumns } from '../../../models/colDef/colDef';
import { ColDef, Columns, ColumnsMeta, getInitialColumnsState, InternalColumns } from '../../../models/colDef/colDef';
import { ColumnTypesRecord } from '../../../models/colDef/colTypeDef';
import { getColDef } from '../../../models/colDef/getColDef';
import { useApiMethod } from '../../root/useApiMethod';
import { Logger, useLogger } from '../../utils/useLogger';
import { useGridState } from '../core/useGridState';

export const getInitialColumnsState = (): InternalColumns => ({
visible: [],
all: [],
lookup: {},
hasVisibleColumns: false,
hasColumns: false,
meta: { positions: [], totalWidth: 0 },
});

function hydrateColumns(
columns: Columns,
columnTypes: ColumnTypesRecord,
45 changes: 6 additions & 39 deletions packages/grid/_modules_/grid/hooks/features/core/gridState.ts
Original file line number Diff line number Diff line change
@@ -1,54 +1,21 @@
import { InternalColumns } from '../../../models/colDef/colDef';
import { getInitialColumnsState, InternalColumns } from '../../../models/colDef/colDef';
import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../../models/gridOptions';
import { RowId } from '../../../models/rows';
import {
getInitialRenderingState,
InternalRenderingState,
} from '../../virtualization/useVirtualRows';
import { getInitialColumnsState } from '../columns/useColumns';
import { getInitialRenderingState, InternalRenderingState } from '../../virtualization/renderingState';
import { INITIAL_PAGINATION_STATE, PaginationState } from '../pagination/paginationReducer';
import { getInitialRowState, InternalRowsState } from '../rows/rowsState';
import { getInitialSortingState, SortingState } from '../sorting/useSorting';
import { getInitialSortingState, SortingState } from '../sorting/sortingState';
import { ContainerProps } from '../../../models/containerProps';

interface RowsState {
export interface GridState {
rows: InternalRowsState;
}

interface SelectedRowsState {
selectedRows: RowId[];
}

interface HiddenRowsState {
hiddenRows: RowId[];
}

interface GridPaginationState {
pagination: PaginationState;
}

interface GridOptionsState {
options: GridOptions;
}

interface ScrollingState {
isScrolling: boolean;
}
interface ColumnState {
columns: InternalColumns;
}

interface RenderingState {
rendering: InternalRenderingState;
containerSizes: ContainerProps | null ;
sorting: SortingState;
}
export type GridState = RowsState &
SelectedRowsState &
HiddenRowsState &
GridPaginationState &
GridOptionsState &
ScrollingState &
ColumnState &
RenderingState & { containerSizes: ContainerProps | null } & { sorting: SortingState };

export const getInitialState: () => GridState = () => ({
rows: getInitialRowState(),
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { ApiRef } from '../../../models/api/apiRef';
import { GridState } from './gridState';
import { useGridState } from './useGridState';

export const useGridSelector = <State>(
apiRef: ApiRef | undefined,
selector: (state: GridState) => State,
selector: (state: any) => State,
) => {
const [state, ,] = useGridState(apiRef!);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const [state, ,] = useGridState(apiRef!);
const [state] = useGridState(apiRef!);


Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FeatureMode } from '../../../models';
import { FeatureMode } from '../../../models/featureMode';

export interface PaginationState {
page: number;
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { GridState } from '../core/gridState';
import { PaginationState } from './paginationReducer';

export const paginationSelector = (state: GridState) => state.pagination;
export const paginationSelector = (state: any) : PaginationState => state.pagination;
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
import { PAGE_CHANGED, PAGESIZE_CHANGED, RESIZE } from '../../../constants/eventsConstants';
import { ApiRef } from '../../../models/api/apiRef';
import { PaginationApi } from '../../../models/api/paginationApi';
import { PaginationProps } from '../../../models/paginationProps';
import { PageChangeParams } from '../../../models/params/pageChangeParams';
import { useApiEventHandler } from '../../root/useApiEventHandler';
import { useApiMethod } from '../../root/useApiMethod';
@@ -22,15 +23,6 @@ import {
setRowCountActionCreator,
} from './paginationReducer';

export interface PaginationProps {
page: number;
pageCount: number;
pageSize: number;
rowCount: number;
setPage: (page: number) => void;
setPageSize: (pageSize: number) => void;
}

const PAGINATION_STATE_ID = 'pagination';

export const usePagination = (apiRef: ApiRef): PaginationProps => {
2 changes: 2 additions & 0 deletions packages/grid/_modules_/grid/hooks/features/sorting/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
export * from './sortingSelector';
export * from './useSorting';
export { getInitialSortingState } from './sortingState';
export { SortingState } from './sortingState';
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import { RowId, RowModel } from '../../../models/rows';
import { SortModel } from '../../../models/sortModel';
import { GridState } from '../core/gridState';
import { rowsLookupSelector, unorderedRowModelsSelector } from '../rows/rowsSelector';
import { SortingState } from './useSorting';
import { SortingState } from './sortingState';

const sortingStateSelector = (state: GridState) => state.sorting;
export const sortedRowIdsSelector = createSelector<GridState, SortingState, RowId[]>(
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { RowId } from '../../../models/rows';
import { SortModel } from '../../../models/sortModel';

export interface SortingState {
sortedRows: RowId[];
sortModel: SortModel;
}

export function getInitialSortingState(): SortingState {
return {sortedRows: [], sortModel: []};
}
12 changes: 2 additions & 10 deletions packages/grid/_modules_/grid/hooks/features/sorting/useSorting.ts
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ import { FeatureModeConstant } from '../../../models/featureMode';
import { CellParams } from '../../../models/params/cellParams';
import { ColParams } from '../../../models/params/colParams';
import { SortModelParams } from '../../../models/params/sortModelParams';
import { CellValue, RowId, RowModel } from '../../../models/rows';
import { CellValue, RowModel } from '../../../models/rows';
import { FieldComparatorList, SortItem, SortModel } from '../../../models/sortModel';
import { buildCellParams } from '../../../utils/paramsUtils';
import { isDesc, nextSortDirection } from '../../../utils/sortingUtils';
@@ -25,15 +25,7 @@ import { columnsSelector } from '../columns/columnsSelector';
import { useGridSelector } from '../core/useGridSelector';
import { useGridState } from '../core/useGridState';
import { rowCountSelector, unorderedRowModelsSelector } from '../rows/rowsSelector';

export interface SortingState {
sortedRows: RowId[];
sortModel: SortModel;
}

export function getInitialSortingState(): SortingState {
return { sortedRows: [], sortModel: [] };
}
import { SortingState } from './sortingState';

export const useSorting = (apiRef: ApiRef) => {
const logger = useLogger('useSorting');
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { PaginationProps } from './pagination/usePagination';
import { PaginationProps } from '../../models/paginationProps';
import {
ComponentProps,
ApiRef,
2 changes: 1 addition & 1 deletion packages/grid/_modules_/grid/hooks/root/useApi.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { ApiRef } from '../../models/api/apiRef';
import { useLogger } from '../utils/useLogger';
import { COMPONENT_ERROR, UNMOUNT } from '../../constants/eventsConstants';
import { ApiRef } from '../../models';
import { useApiMethod } from './useApiMethod';

export function useApi(gridRootRef: React.RefObject<HTMLDivElement>, apiRef: ApiRef): boolean {
4 changes: 2 additions & 2 deletions packages/grid/_modules_/grid/hooks/root/useApiEventHandler.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { useLogger } from '../utils';
import { ApiRef } from '../../models/api';
import { ApiRef } from '../../models/api/apiRef';
import { useLogger } from '../utils/useLogger';

export function useApiEventHandler(
apiRef: ApiRef,
5 changes: 3 additions & 2 deletions packages/grid/_modules_/grid/hooks/root/useApiMethod.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { ApiRef, GridApi } from '../../models/api';
import { useLogger } from '../utils';
import { ApiRef } from '../../models/api/apiRef';
import { GridApi } from '../../models/api/gridApi';
import { useLogger } from '../utils/useLogger';

export function useApiMethod(apiRef: ApiRef, apiMethods: Partial<GridApi>, apiName: string) {
const logger = useLogger('useApiMethod');
6 changes: 5 additions & 1 deletion packages/grid/_modules_/grid/hooks/root/useEvents.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import * as React from 'react';
import { ApiRef } from '../../models/api/apiRef';
import { GridOptions } from '../../models/gridOptions';
import { CellParams } from '../../models/params/cellParams';
import { ColParams } from '../../models/params/colParams';
import { RowParams } from '../../models/params/rowParams';
import { useLogger } from '../utils/useLogger';
import {
CELL_CLICK,
@@ -19,7 +24,6 @@ import {
GRID_FOCUS_OUT,
COMPONENT_ERROR,
} from '../../constants/eventsConstants';
import { GridOptions, ApiRef, CellParams, ColParams, RowParams } from '../../models';
import {
CELL_CSS_CLASS,
HEADER_CELL_CSS_CLASS,
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { useLogger } from '../utils';
import { isFunction } from '../../utils';
import { ApiRef } from '../../models';
import { ApiRef } from '../../models/api/apiRef';
import { isFunction } from '../../utils/utils';
import { useLogger } from '../utils/useLogger';

export const useNativeEventListener = (
apiRef: ApiRef,
5 changes: 3 additions & 2 deletions packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as React from 'react';
import { GridComponentProps, GridOptionsProp } from '../../GridComponentProps';
import { ApiRef, DEFAULT_GRID_OPTIONS, GridOptions } from '../../models';
import { mergeOptions } from '../../utils';
import { ApiRef } from '../../models/api/apiRef';
import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../models/gridOptions';
import { mergeOptions } from '../../utils/mergeOptions';
import { GridState } from '../features/core/gridState';
import { useGridReducer } from '../features/core/useGridReducer';

1 change: 1 addition & 0 deletions packages/grid/_modules_/grid/hooks/virtualization/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './useVirtualColumns';
export * from './useVirtualRows';
export * from './renderingState';
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ContainerProps } from '../../models/containerProps';
import { RenderContextProps } from '../../models/renderContextProps';
import { ScrollParams } from '../utils/useScrollFn';

export interface InternalRenderingState {
virtualPage: number;
virtualRowsCount: number;
renderContext: Partial<RenderContextProps> | null;
realScroll: ScrollParams;
renderingZoneScroll: ScrollParams;
renderedSizes: ContainerProps | null;
}

export const getInitialRenderingState = (): InternalRenderingState => {
return {
realScroll: {left: 0, top: 0},
renderContext: null,
renderingZoneScroll: {left: 0, top: 0},
virtualPage: 0,
virtualRowsCount: 0,
renderedSizes: null,
};
};
Original file line number Diff line number Diff line change
@@ -16,34 +16,14 @@ import { useNativeEventListener } from '../root/useNativeEventListener';
import { useLogger } from '../utils/useLogger';
import { optionsSelector } from '../utils/useOptionsProp';
import { ScrollParams, useScrollFn } from '../utils/useScrollFn';
import { InternalRenderingState } from './renderingState';
import { useVirtualColumns } from './useVirtualColumns';
import { ContainerProps } from '../../models/containerProps';

type UseVirtualRowsReturnType = Partial<RenderContextProps> | null;

// TODO v5: replace with @material-ui/core/utils/useEnhancedEffect.
const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;

export interface InternalRenderingState {
virtualPage: number;
virtualRowsCount: number;
renderContext: Partial<RenderContextProps> | null;
realScroll: ScrollParams;
renderingZoneScroll: ScrollParams;
renderedSizes: ContainerProps | null;
}

export const getInitialRenderingState = (): InternalRenderingState => {
return {
realScroll: { left: 0, top: 0 },
renderContext: null,
renderingZoneScroll: { left: 0, top: 0 },
virtualPage: 0,
virtualRowsCount: 0,
renderedSizes: null,
};
};

export const useVirtualRows = (
colRef: React.MutableRefObject<HTMLDivElement | null>,
windowRef: React.MutableRefObject<HTMLDivElement | null>,
10 changes: 0 additions & 10 deletions packages/grid/_modules_/grid/models/api/coreApi.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
import { EventEmitter } from 'events';
import { GridState } from '../../hooks/features/core/gridState';

/**
* The core API interface that is available in the grid [[apiRef]].
*/
export interface CoreApi extends EventEmitter {
/**
* Property that contains the whole state of the grid.
*/
state: GridState;
/**
* allows to get the whole state of the grid if stateId is null or to get a part of the state if stateId has a value.
*/
getState: <T>(stateId?: string) => T;

/**
* Property that comes true when the grid has its EventEmitter initialised.
*/
2 changes: 2 additions & 0 deletions packages/grid/_modules_/grid/models/api/gridApi.ts
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import { ColumnApi } from './columnApi';
import { SelectionApi } from './selectionApi';
import { SortApi } from './sortApi';
import { PaginationApi } from './paginationApi';
import { StateApi } from './stateApi';
import { VirtualizationApi } from './virtualizationApi';
import { CoreApi } from './coreApi';
import { EventsApi } from './eventsApi';
@@ -11,6 +12,7 @@ import { EventsApi } from './eventsApi';
* The full grid API.
*/
export type GridApi = CoreApi &
StateApi &
EventsApi &
RowApi &
ColumnApi &
1 change: 1 addition & 0 deletions packages/grid/_modules_/grid/models/api/index.ts
Original file line number Diff line number Diff line change
@@ -7,4 +7,5 @@ export * from './paginationApi';
export * from './rowApi';
export * from './selectionApi';
export * from './sortApi';
export * from './stateApi';
export * from './virtualizationApi';
12 changes: 12 additions & 0 deletions packages/grid/_modules_/grid/models/api/stateApi.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { GridState } from '../../hooks/features/core/gridState';

export interface StateApi {
/**
* Property that contains the whole state of the grid.
*/
state: GridState;
/**
* allows to get the whole state of the grid if stateId is null or to get a part of the state if stateId has a value.
*/
getState: <T>(stateId?: string) => T;
}
Loading