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] Lower filter debounce delay #9712

Merged
merged 23 commits into from
Aug 14, 2023
Merged
Show file tree
Hide file tree
Changes from 20 commits
Commits
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
2 changes: 1 addition & 1 deletion docs/data/data-grid/demo/PopularFeaturesDemo.js
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,7 @@ export default function PopularFeaturesDemo() {
detailPanelCollapseIcon: ArrowUp,
}}
slotProps={{
toolbar: { showQuickFilter: true, quickFilterProps: { debounceMs: 500 } },
toolbar: { showQuickFilter: true },
}}
getDetailPanelContent={getDetailPanelContent}
getDetailPanelHeight={getDetailPanelHeight}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/demo/PopularFeaturesDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -432,7 +432,7 @@ export default function PopularFeaturesDemo() {
detailPanelCollapseIcon: ArrowUp,
}}
slotProps={{
toolbar: { showQuickFilter: true, quickFilterProps: { debounceMs: 500 } },
toolbar: { showQuickFilter: true },
}}
getDetailPanelContent={getDetailPanelContent}
getDetailPanelHeight={getDetailPanelHeight}
Expand Down
7 changes: 3 additions & 4 deletions docs/data/data-grid/filtering/CustomMultiValueOperator.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import * as React from 'react';
romgrk marked this conversation as resolved.
Show resolved Hide resolved
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { DataGrid } from '@mui/x-data-grid';
import { DataGrid, useGridRootProps } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import SyncIcon from '@mui/icons-material/Sync';

const SUBMIT_FILTER_STROKE_TIME = 500;

function InputNumberInterval(props) {
const rootProps = useGridRootProps();
const { item, applyValue, focusElementRef = null } = props;

const filterTimeout = React.useRef();
Expand All @@ -33,7 +32,7 @@ function InputNumberInterval(props) {
filterTimeout.current = setTimeout(() => {
setIsApplying(false);
applyValue({ ...item, value: [lowerBound, upperBound] });
}, SUBMIT_FILTER_STROKE_TIME);
}, rootProps.filterDebounceMs);
};

const handleUpperFilterChange = (event) => {
Expand Down
6 changes: 3 additions & 3 deletions docs/data/data-grid/filtering/CustomMultiValueOperator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import {
GridFilterItem,
GridFilterModel,
GridFilterOperator,
useGridRootProps,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import SyncIcon from '@mui/icons-material/Sync';

const SUBMIT_FILTER_STROKE_TIME = 500;

function InputNumberInterval(props: GridFilterInputValueProps) {
const rootProps = useGridRootProps();
const { item, applyValue, focusElementRef = null } = props;

const filterTimeout = React.useRef<any>();
Expand Down Expand Up @@ -41,7 +41,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) {
filterTimeout.current = setTimeout(() => {
setIsApplying(false);
applyValue({ ...item, value: [lowerBound, upperBound] });
}, SUBMIT_FILTER_STROKE_TIME);
}, rootProps.filterDebounceMs);
};

const handleUpperFilterChange: TextFieldProps['onChange'] = (event) => {
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/filtering/QuickFilteringGrid.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export default function QuickFilteringGrid() {
slotProps={{
toolbar: {
showQuickFilter: true,
quickFilterProps: { debounceMs: 500 },
},
}}
/>
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/filtering/QuickFilteringGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export default function QuickFilteringGrid() {
slotProps={{
toolbar: {
showQuickFilter: true,
quickFilterProps: { debounceMs: 500 },
},
}}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
slotProps={{
toolbar: {
showQuickFilter: true,
quickFilterProps: { debounceMs: 500 },
},
}}
/>
1 change: 0 additions & 1 deletion docs/data/data-grid/filtering/QuickFilteringInitialize.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export default function QuickFilteringInitialize() {
slotProps={{
toolbar: {
showQuickFilter: true,
quickFilterProps: { debounceMs: 500 },
},
}}
/>
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/filtering/QuickFilteringInitialize.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export default function QuickFilteringInitialize() {
slotProps={{
toolbar: {
showQuickFilter: true,
quickFilterProps: { debounceMs: 500 },
},
}}
/>
Expand Down
1 change: 1 addition & 0 deletions docs/pages/x/api/data-grid/data-grid-premium.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"description": "{ ariaV7?: bool, clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }"
}
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
"filterMode": {
"type": { "name": "custom", "description": "'client'<br>&#124;&nbsp;'server'" },
"default": "\"client\""
Expand Down
1 change: 1 addition & 0 deletions docs/pages/x/api/data-grid/data-grid-pro.json
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
"description": "{ ariaV7?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }"
}
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
"filterMode": {
"type": { "name": "custom", "description": "'client'<br>&#124;&nbsp;'server'" },
"default": "\"client\""
Expand Down
1 change: 1 addition & 0 deletions docs/pages/x/api/data-grid/data-grid.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"description": "{ ariaV7?: bool, columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }"
}
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
"filterMode": {
"type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
"default": "\"client\""
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"props": {
"debounceMs": { "type": { "name": "number" }, "default": "500" },
"debounceMs": { "type": { "name": "number" }, "default": "150" },
"quickFilterFormatter": {
"type": { "name": "func" },
"signature": {
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-premium.json
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,11 @@
"deprecated": "",
"typeDescriptions": {}
},
"filterDebounceMs": {
"description": "The milliseconds delay to wait after a keystroke before triggering filtering.",
"deprecated": "",
"typeDescriptions": {}
},
"filterMode": {
"description": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side.",
"deprecated": "",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-pro.json
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,11 @@
"deprecated": "",
"typeDescriptions": {}
},
"filterDebounceMs": {
"description": "The milliseconds delay to wait after a keystroke before triggering filtering.",
"deprecated": "",
"typeDescriptions": {}
},
"filterMode": {
"description": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side.",
"deprecated": "",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid.json
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,11 @@
"deprecated": "",
"typeDescriptions": {}
},
"filterDebounceMs": {
"description": "The milliseconds delay to wait after a keystroke before triggering filtering.",
"deprecated": "",
"typeDescriptions": {}
},
"filterMode": {
"description": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side.",
"deprecated": "",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"release:publish": "lerna publish from-package --no-private --dist-tag latest --contents build",
"release:publish:dry-run": "lerna publish from-package --dist-tag latest --contents build --registry=\"http://localhost:4873/\"",
"release:tag": "node scripts/releaseTag.mjs",
"validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn docs:typescript:formatted\" \"yarn docs:api\""
"validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn proptypes\" \"yarn docs:typescript:formatted\" \"yarn docs:api\""
},
"devDependencies": {
"@argos-ci/core": "^0.9.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export { SUBMIT_FILTER_STROKE_TIME, SUBMIT_FILTER_DATE_STROKE_TIME } from '@mui/x-data-grid';

/**
* @deprecated Import DataGridPremium instead.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,11 @@ DataGridPremiumRaw.propTypes = {
lazyLoading: PropTypes.bool,
warnIfFocusStateIsNotSynced: PropTypes.bool,
}),
/**
* The milliseconds delay to wait after a keystroke before triggering filtering.
* @default 150
*/
filterDebounceMs: PropTypes.number,
/**
* Filtering can be processed on the server or client-side.
* Set it to 'server' if you would like to handle filtering on the server-side.
Expand Down
2 changes: 2 additions & 0 deletions packages/grid/x-data-grid-pro/src/DataGridPro/DataGrid.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export { SUBMIT_FILTER_STROKE_TIME, SUBMIT_FILTER_DATE_STROKE_TIME } from '@mui/x-data-grid';

/**
* @deprecated Import DataGridPro instead.
*/
Expand Down
5 changes: 5 additions & 0 deletions packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,11 @@ DataGridProRaw.propTypes = {
lazyLoading: PropTypes.bool,
warnIfFocusStateIsNotSynced: PropTypes.bool,
}),
/**
* The milliseconds delay to wait after a keystroke before triggering filtering.
* @default 150
*/
filterDebounceMs: PropTypes.number,
/**
* Filtering can be processed on the server or client-side.
* Set it to 'server' if you would like to handle filtering on the server-side.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
GridLogicOperator,
GridPreferencePanelsValue,
GridRowModel,
SUBMIT_FILTER_STROKE_TIME,
DATA_GRID_PRO_PROPS_DEFAULT_VALUES,
useGridApiRef,
DataGridPro,
GetColumnForNewFilterArgs,
Expand All @@ -21,6 +21,8 @@ import * as React from 'react';
import { spy } from 'sinon';
import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn';

const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PRO_PROPS_DEFAULT_VALUES.filterDebounceMs;

const isJSDOM = /jsdom/.test(window.navigator.userAgent);

describe('<DataGridPro /> - Filter', () => {
Expand Down
19 changes: 18 additions & 1 deletion packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../compon
import { DataGridProps } from '../models/props/DataGridProps';
import { GridContextProvider } from '../context/GridContextProvider';
import { useDataGridComponent } from './useDataGridComponent';
import { useDataGridProps } from './useDataGridProps';
import { useDataGridProps, DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';
import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
import { GridValidRowModel } from '../models/gridRows';

Expand Down Expand Up @@ -42,6 +42,18 @@ interface DataGridComponent {

export const DataGrid = React.memo(DataGridRaw) as DataGridComponent;

/**
* Remove at v7
* @deprecated
*/
export const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;

/**
* Remove at v7
* @deprecated
*/
export const SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;

DataGridRaw.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
Expand Down Expand Up @@ -186,6 +198,11 @@ DataGridRaw.propTypes = {
columnGrouping: PropTypes.bool,
warnIfFocusStateIsNotSynced: PropTypes.bool,
}),
/**
* The milliseconds delay to wait after a keystroke before triggering filtering.
* @default 150
*/
filterDebounceMs: PropTypes.number,
/**
* Filtering can be processed on the server or client-side.
* Set it to 'server' if you would like to handle filtering on the server-side.
Expand Down
1 change: 1 addition & 0 deletions packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
disableVirtualization: false,
editMode: GridEditModes.Cell,
filterMode: 'client',
filterDebounceMs: 150,
columnHeaderHeight: 56,
hideFooter: false,
hideFooterPagination: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { TextFieldProps } from '@mui/material/TextField';
import { unstable_useId as useId } from '@mui/utils';
import { useTimeout } from '../../../hooks/utils/useTimeout';
import { GridFilterInputValueProps } from './GridFilterInputValueProps';
import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';

Expand All @@ -16,8 +17,6 @@ export type GridFilterInputDateProps = GridFilterInputValueProps &
isFilterActive?: boolean;
};

export const SUBMIT_FILTER_DATE_STROKE_TIME = 500;

function GridFilterInputDate(props: GridFilterInputDateProps) {
const {
item,
Expand All @@ -32,7 +31,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
disabled,
...other
} = props;
const filterTimeout = React.useRef<any>();
const filterTimeout = useTimeout();
const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
const [applying, setIsApplying] = React.useState(false);
const id = useId();
Expand All @@ -42,24 +41,17 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const value = event.target.value;

clearTimeout(filterTimeout.current);
setFilterValueState(String(value));

setIsApplying(true);
filterTimeout.current = setTimeout(() => {
filterTimeout.start(rootProps.filterDebounceMs, () => {
applyValue({ ...item, value });
setIsApplying(false);
}, SUBMIT_FILTER_DATE_STROKE_TIME);
});
},
[applyValue, item],
[applyValue, item, rootProps.filterDebounceMs, filterTimeout],
);

React.useEffect(() => {
return () => {
clearTimeout(filterTimeout.current);
};
}, []);

React.useEffect(() => {
const itemValue = item.value ?? '';
setFilterValueState(String(itemValue));
Expand Down
Loading