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.

Sign up for GitHub

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

[XGrid] Document virtualization APIs in virtualization section #2247

Merged
merged 8 commits into from
Aug 6, 2021
Merged

[XGrid] Document virtualization APIs in virtualization section #2247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1e07d17
add scroll and scrollToIndexes API docs
ZeeshanTamboli Jul 31, 2021
90d84e2
add getScrollPosition and updateViewport in api docs
ZeeshanTamboli Jul 31, 2021
07fdf1e
Merge branch 'master' into issue/1103-document-scroll-API
ZeeshanTamboli Jul 31, 2021
c04fee6
make updateViewport private, it should not be needed so far
oliviertassinari Jul 31, 2021
655698d
absolute path
oliviertassinari Jul 31, 2021
e686534
partial is enough
oliviertassinari Jul 31, 2021
8189978
it's not done by hand
oliviertassinari Jul 31, 2021
671e70a
merge master branch and resolve conflict
ZeeshanTamboli Aug 5, 2021
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
3 changes: 1 addition & 2 deletions docs/pages/api-docs/data-grid/grid-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import { GridApi } from '@material-ui/x-grid';
| <span class="prop-name">publishEvent</span> | <span class="prop-type">(name: string, params?: any, event?: MuiEvent&lt;MouseEvent \| UIEvent \| Event \| SyntheticEvent&lt;Element, Event&gt; \| KeyboardEvent \| ClipboardEvent \| ProgressEvent&lt;EventTarget&gt; \| ErrorEvent \| AnimationEvent \| InputEvent \| FocusEvent \| CompositionEvent \| DragEvent \| PointerEvent \| SecurityPolicyViolationEvent \| TouchEvent \| TransitionEvent \| WheelEvent&gt;) =&gt; void</span> | Emits an event. |
| <span class="prop-name">resize</span> | <span class="prop-type">() =&gt; void</span> | Triggers a resize of the component and recalculation of width and height. |
| <span class="prop-name">scroll</span> | <span class="prop-type">(params: Partial&lt;GridScrollParams&gt;) =&gt; void</span> | Triggers the viewport to scroll to the given positions (in pixels). |
| <span class="prop-name">scrollToIndexes</span> | <span class="prop-type">(params: Optional&lt;GridCellIndexCoordinates, rowIndex&gt;) =&gt; boolean</span> | Triggers the viewport to scroll to the cell at indexes given by `params`.<br />Returns `true` if the grid had to scroll to reach the target. |
| <span class="prop-name">scrollToIndexes</span> | <span class="prop-type">(params: Partial&lt;GridCellIndexCoordinates&gt;) =&gt; boolean</span> | Triggers the viewport to scroll to the cell at indexes given by `params`.<br />Returns `true` if the grid had to scroll to reach the target. |
| <span class="prop-name">selectRow</span> | <span class="prop-type">(id: GridRowId, isSelected?: boolean, allowMultiple?: boolean) =&gt; void</span> | Change the selection state of a row. |
| <span class="prop-name">selectRows</span> | <span class="prop-type">(ids: GridRowId[], isSelected?: boolean, deselectOtherRows?: boolean) =&gt; void</span> | Change the selection state of multiple rows. |
| <span class="prop-name">setCellFocus</span> | <span class="prop-type">(id: GridRowId, field: string) =&gt; void</span> | Sets the focus to the cell at the given `id` and `field`. |
Expand Down Expand Up @@ -89,5 +89,4 @@ import { GridApi } from '@material-ui/x-grid';
| <span class="prop-name">updateColumn</span> | <span class="prop-type">(col: GridColDef) =&gt; void</span> | Updates the definition of a column. |
| <span class="prop-name">updateColumns</span> | <span class="prop-type">(cols: GridColDef[]) =&gt; void</span> | Updates the definition of multiple columns at the same time. |
| <span class="prop-name">updateRows</span> | <span class="prop-type">(updates: GridRowModelUpdate&lt;&gt;[]) =&gt; void</span> | Allows to updates, insert and delete rows in a single call. |
| <span class="prop-name">updateViewport</span> | <span class="prop-type">(forceRender?: boolean) =&gt; void</span> | Refreshes the viewport cells according to the scroll positions |
| <span class="prop-name">upsertFilter</span> | <span class="prop-type">(item: GridFilterItem) =&gt; void</span> | Updates or inserts a GridFilterItem. |
21 changes: 21 additions & 0 deletions docs/pages/api-docs/data-grid/grid-virtualization-api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "GridVirtualizationApi",
"description": "The virtualization API interface that is available in the grid apiRef.",
"properties": [
{
"name": "getScrollPosition",
"description": "Returns the current scroll position.",
"type": "() => GridScrollParams"
},
{
"name": "scroll",
"description": "Triggers the viewport to scroll to the given positions (in pixels).",
"type": "(params: Partial<GridScrollParams>) => void"
},
{
"name": "scrollToIndexes",
"description": "Triggers the viewport to scroll to the cell at indexes given by <code>params</code>.\nReturns <code>true</code> if the grid had to scroll to reach the target.",
"type": "(params: Partial<GridCellIndexCoordinates>) => boolean"
}
]
}
1 change: 1 addition & 0 deletions docs/scripts/buildApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ function run(argv: { outputDirectory?: string }) {
'GridFilterApi',
'GridCsvExportApi',
'GridExportCsvOptions',
'GridVirtualizationApi',
];

apisToGenerate.forEach((apiName) => {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/export/CsvExportApiNoSnap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from '../../../../../pages/api-docs/data-grid/grid-csv-export-api.json';
import api from 'docsx/pages/api-docs/data-grid/grid-csv-export-api.json';

export default function CsvExportApiNoSnap() {
return <ApiDocs api={api} />;
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/filtering/FilterApiNoSnap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from '../../../../../pages/api-docs/data-grid/grid-filter-api.json';
import api from 'docsx/pages/api-docs/data-grid/grid-filter-api.json';

export default function FilterApiNoSnap() {
return <ApiDocs api={api} />;
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/selection/SelectionApiNoSnap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from '../../../../../pages/api-docs/data-grid/grid-selection-api.json';
import api from 'docsx/pages/api-docs/data-grid/grid-selection-api.json';

export default function SelectionApiNoSnap() {
return <ApiDocs api={api} />;
Expand Down
7 changes: 7 additions & 0 deletions docs/src/pages/components/data-grid/virtualization/VirtualizationApiNoSnap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react';
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/api-docs/data-grid/grid-virtualization-api.json';

export default function VirtualizationApiNoSnap() {
return <ApiDocs api={api} />;
}
4 changes: 4 additions & 0 deletions docs/src/pages/components/data-grid/virtualization/virtualization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ By default, 2 columns are rendered outside of the viewport. You can change this

You can disable column virtualization by setting the column buffer to a higher number than the number of rendered columns, e.g. with `columnBuffer={columns.length}` or `columnBuffer={Number.MAX_SAFE_INTEGER}`.

## apiRef [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-pro/)

{{"demo": "pages/components/data-grid/virtualization/VirtualizationApiNoSnap.js", "bg": "inline", "hideToolbar": true}}

## API

- [DataGrid](/api/data-grid/data-grid/)
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { GridVirtualizationApi } from '../../../models/api/gridVirtualizationApi
import { GridCellIndexCoordinates } from '../../../models/gridCell';
import { GridScrollParams } from '../../../models/params/gridScrollParams';
import { GridRenderContextProps, GridRenderRowProps } from '../../../models/gridRenderContextProps';
import { isDeepEqual, Optional } from '../../../utils/utils';
import { isDeepEqual } from '../../../utils/utils';
import { useEnhancedEffect } from '../../../utils/material-ui-utils';
import { optionsSelector } from '../../utils/optionsSelector';
import {
Expand Down Expand Up @@ -199,7 +199,7 @@ export const useGridVirtualRows = (apiRef: GridApiRef): void => {
);

const scrollToIndexes = React.useCallback(
(params: Optional<GridCellIndexCoordinates, 'rowIndex'>) => {
(params: Partial<GridCellIndexCoordinates>) => {
if (totalRowCount === 0 || visibleColumns.length === 0) {
return false;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/_modules_/grid/models/api/gridVirtualizationApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { GridCellIndexCoordinates } from '../gridCell';
import { GridContainerProps } from '../gridContainerProps';
import { GridScrollParams } from '../params/gridScrollParams';
import { GridRenderContextProps } from '../gridRenderContextProps';
import { Optional } from '../../utils/utils';

/**
* The virtualization API interface that is available in the grid [[apiRef]].
Expand All @@ -19,7 +18,7 @@ export interface GridVirtualizationApi {
* @param {GridCellIndexCoordinates} params The indexes where the cell is.
* @returns {boolean} Returns `true` if the index was outside of the viewport and the grid had to scroll to reach the target.
*/
scrollToIndexes: (params: Optional<GridCellIndexCoordinates, 'rowIndex'>) => boolean;
scrollToIndexes: (params: Partial<GridCellIndexCoordinates>) => boolean;
/**
* Get the current containerProps.
* @ignore - do not document.
Expand All @@ -38,6 +37,7 @@ export interface GridVirtualizationApi {
/**
* Refreshes the viewport cells according to the scroll positions
* @param {boolean} forceRender If `true`, forces a rerender. By default, it is `false`.
* @ignore - do not document.
*/
updateViewport: (forceRender?: boolean) => void;
}
3 changes: 0 additions & 3 deletions packages/grid/_modules_/grid/utils/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,6 @@ export function localStorageAvailable() {
}
}

// Util to make specific interface properties optional
export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

export function getDataGridUtilityClass(slot) {
return generateUtilityClass(GRID_CSS_CLASS_PREFIX, slot);
}
Expand Down