From 39cb99003d3d3fe8316b017bcd104f55c7ef2c2d Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Fri, 19 Nov 2021 16:33:46 +0100 Subject: [PATCH 01/12] us special input for single select --- .../GridFilterInputSingleSelect.tsx | 111 ++++++++++++++++++ .../colDef/gridSingleSelectOperators.ts | 9 +- 2 files changed, 117 insertions(+), 3 deletions(-) create mode 100644 packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx new file mode 100644 index 000000000000..dbf42a7aa156 --- /dev/null +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -0,0 +1,111 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import TextField, { TextFieldProps } from '@mui/material/TextField'; +import { unstable_useId as useId } from '@mui/material/utils'; +import { GridLoadIcon } from '../../icons/index'; +import { GridFilterInputValueProps } from './GridFilterInputValueProps'; +import { GridColDef } from '../../../models/colDef/gridColDef'; + +const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: GridColDef, api) => { + const iterableColumnValues = + typeof valueOptions === 'function' + ? ['', ...valueOptions({ field })] + : ['', ...(valueOptions || [])]; + + return iterableColumnValues.map((option) => + typeof option === 'object' ? ( + + ) : ( + + ), + ); +}; + +export interface GridTypeFilterInputSingleSelectProps extends GridFilterInputValueProps { + type?: 'singleSelect'; +} + +function GridFilterInputSingleSelect(props: GridTypeFilterInputSingleSelectProps & TextFieldProps) { + const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; + const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); + const [applying, setIsApplying] = React.useState(false); + const id = useId(); + + const onFilterChange = React.useCallback( + (event) => { + let value = event.target.value; + // NativeSelect casts the value to a string. + const column = apiRef.current.getColumn(item.columnField); + const columnValueOptions = + typeof column.valueOptions === 'function' + ? column.valueOptions({ field: column.field }) + : column.valueOptions; + value = columnValueOptions + .map((option) => (typeof option === 'object' ? option.value : option)) + .find((optionValue) => String(optionValue) === value); + + setFilterValueState(String(value)); + + setIsApplying(true); + applyValue({ ...item, value }); + setIsApplying(false); + }, + [apiRef, applyValue, item], + ); + + React.useEffect(() => { + const itemValue = item.value ?? ''; + setFilterValueState(String(itemValue)); + }, [item.value]); + + const InputProps = applying ? { endAdornment: } : others.InputProps; + + return ( + + {renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)} + + ); +} + +GridFilterInputSingleSelect.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + apiRef: PropTypes.any.isRequired, + applyValue: PropTypes.func.isRequired, + focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.func, + PropTypes.object, + ]), + item: PropTypes.shape({ + columnField: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + operatorValue: PropTypes.string, + value: PropTypes.any, + }).isRequired, +} as any; + +export { GridFilterInputSingleSelect }; diff --git a/packages/grid/_modules_/grid/models/colDef/gridSingleSelectOperators.ts b/packages/grid/_modules_/grid/models/colDef/gridSingleSelectOperators.ts index 5b05d25eea51..10b85f0100fe 100644 --- a/packages/grid/_modules_/grid/models/colDef/gridSingleSelectOperators.ts +++ b/packages/grid/_modules_/grid/models/colDef/gridSingleSelectOperators.ts @@ -1,4 +1,5 @@ -import { GridFilterInputValue } from '../../components/panel/filterPanel/GridFilterInputValue'; +// import { GridFilterInputValue } from '../../components/panel/filterPanel/GridFilterInputValue'; +import { GridFilterInputSingleSelect } from '../../components/panel/filterPanel/GridFilterInputSingleSelect'; import { GridFilterItem } from '../gridFilterItem'; import { GridFilterOperator } from '../gridFilterOperator'; @@ -16,7 +17,8 @@ export const getGridSingleSelectOperators: () => GridFilterOperator[] = () => [ return filterItem.value === value; }; }, - InputComponent: GridFilterInputValue, + // InputComponent: GridFilterInputValue, + InputComponent: GridFilterInputSingleSelect, InputComponentProps: { type: 'singleSelect' }, }, { @@ -32,7 +34,8 @@ export const getGridSingleSelectOperators: () => GridFilterOperator[] = () => [ return filterItem.value !== value; }; }, - InputComponent: GridFilterInputValue, + // InputComponent: GridFilterInputValue, + InputComponent: GridFilterInputSingleSelect, InputComponentProps: { type: 'singleSelect' }, }, ]; From 1b458451ffe6f3c5be3b3169bd156a47c2c544dc Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 22 Nov 2021 09:19:17 +0100 Subject: [PATCH 02/12] deprecate InputValue component for single select --- .../components/panel/filterPanel/GridFilterInputValue.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx index ecc2263631d9..ce4c924bfea1 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx @@ -33,6 +33,14 @@ export interface GridTypeFilterInputValueProps extends GridFilterInputValueProps function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldProps) { const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; + if (process.env.NODE_ENV !== 'production' && type === 'singleSelect') { + console.warn( + [ + 'MUI: the use of GridFilterInputValue is deprecated for singleSelect column', + 'Use GridFilterInputSingleSelect instead.', + ].join('\n'), + ); + } const filterTimeout = React.useRef(); const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); const [applying, setIsApplying] = React.useState(false); From d7f6af6cd09f59be4492648e072388fd16de77f7 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 22 Nov 2021 09:45:44 +0100 Subject: [PATCH 03/12] dedicated component for Date filters --- .../panel/filterPanel/GridFilterInputDate.tsx | 83 +++++++++++++++++++ .../filterPanel/GridFilterInputValue.tsx | 5 +- .../grid/models/colDef/gridDateOperators.ts | 14 ++-- 3 files changed, 94 insertions(+), 8 deletions(-) create mode 100644 packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx new file mode 100644 index 000000000000..739cec4e69f2 --- /dev/null +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx @@ -0,0 +1,83 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import TextField, { TextFieldProps } from '@mui/material/TextField'; +import { unstable_useId as useId } from '@mui/material/utils'; +import { GridLoadIcon } from '../../icons/index'; +import { GridFilterInputValueProps } from './GridFilterInputValueProps'; + +export interface GridTypeFilterInputDateProps extends GridFilterInputValueProps { + type?: 'date' | 'datetime-local'; +} + +export const SUBMIT_FILTER_STROKE_TIME = 500; + +function GridFilterInputDate(props: GridTypeFilterInputDateProps & TextFieldProps) { + const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; + + const filterTimeout = React.useRef(); + const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); + const [applying, setIsApplying] = React.useState(false); + const id = useId(); + + const onFilterChange = React.useCallback( + (event) => { + const value = event.target.value; + + clearTimeout(filterTimeout.current); + setFilterValueState(String(value)); + + setIsApplying(true); + filterTimeout.current = setTimeout(() => { + applyValue({ ...item, value }); + setIsApplying(false); + }, SUBMIT_FILTER_STROKE_TIME); + }, + [applyValue, item], + ); + + React.useEffect(() => { + const itemValue = item.value ?? ''; + setFilterValueState(String(itemValue)); + }, [item.value]); + + const InputProps = applying ? { endAdornment: } : others.InputProps; + + return ( + + ); +} + +GridFilterInputDate.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + apiRef: PropTypes.any.isRequired, + applyValue: PropTypes.func.isRequired, + focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.func, + PropTypes.object, + ]), + item: PropTypes.shape({ + columnField: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + operatorValue: PropTypes.string, + value: PropTypes.any, + }).isRequired, +} as any; + +export { GridFilterInputDate }; diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx index ce4c924bfea1..e89a1b3c2879 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx @@ -33,7 +33,10 @@ export interface GridTypeFilterInputValueProps extends GridFilterInputValueProps function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldProps) { const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; - if (process.env.NODE_ENV !== 'production' && type === 'singleSelect') { + if ( + process.env.NODE_ENV !== 'production' && + ['date', 'datetime-local', 'singleSelect'].includes(type as string) + ) { console.warn( [ 'MUI: the use of GridFilterInputValue is deprecated for singleSelect column', diff --git a/packages/grid/_modules_/grid/models/colDef/gridDateOperators.ts b/packages/grid/_modules_/grid/models/colDef/gridDateOperators.ts index 9ab9cc765e27..2a6b1f5cef2a 100644 --- a/packages/grid/_modules_/grid/models/colDef/gridDateOperators.ts +++ b/packages/grid/_modules_/grid/models/colDef/gridDateOperators.ts @@ -1,4 +1,4 @@ -import { GridFilterInputValue } from '../../components/panel/filterPanel/GridFilterInputValue'; +import { GridFilterInputDate } from '../../components/panel/filterPanel/GridFilterInputDate'; import { GridFilterItem } from '../gridFilterItem'; import { GridFilterOperator } from '../gridFilterOperator'; @@ -50,7 +50,7 @@ export const getGridDateOperators = (showTime?: boolean): GridFilterOperator[] = getApplyFilterFn: (filterItem: GridFilterItem) => { return buildApplyFilterFn(filterItem, (value1, value2) => value1 === value2, showTime); }, - InputComponent: GridFilterInputValue, + InputComponent: GridFilterInputDate, InputComponentProps: { type: showTime ? 'datetime-local' : 'date' }, }, { @@ -58,7 +58,7 @@ export const getGridDateOperators = (showTime?: boolean): GridFilterOperator[] = getApplyFilterFn: (filterItem: GridFilterItem) => { return buildApplyFilterFn(filterItem, (value1, value2) => value1 !== value2, showTime); }, - InputComponent: GridFilterInputValue, + InputComponent: GridFilterInputDate, InputComponentProps: { type: showTime ? 'datetime-local' : 'date' }, }, { @@ -66,7 +66,7 @@ export const getGridDateOperators = (showTime?: boolean): GridFilterOperator[] = getApplyFilterFn: (filterItem: GridFilterItem) => { return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime); }, - InputComponent: GridFilterInputValue, + InputComponent: GridFilterInputDate, InputComponentProps: { type: showTime ? 'datetime-local' : 'date' }, }, { @@ -74,7 +74,7 @@ export const getGridDateOperators = (showTime?: boolean): GridFilterOperator[] = getApplyFilterFn: (filterItem: GridFilterItem) => { return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime); }, - InputComponent: GridFilterInputValue, + InputComponent: GridFilterInputDate, InputComponentProps: { type: showTime ? 'datetime-local' : 'date' }, }, { @@ -87,7 +87,7 @@ export const getGridDateOperators = (showTime?: boolean): GridFilterOperator[] = !showTime, ); }, - InputComponent: GridFilterInputValue, + InputComponent: GridFilterInputDate, InputComponentProps: { type: showTime ? 'datetime-local' : 'date' }, }, { @@ -95,7 +95,7 @@ export const getGridDateOperators = (showTime?: boolean): GridFilterOperator[] = getApplyFilterFn: (filterItem: GridFilterItem) => { return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime); }, - InputComponent: GridFilterInputValue, + InputComponent: GridFilterInputDate, InputComponentProps: { type: showTime ? 'datetime-local' : 'date' }, }, { From 3a21fdf9d6fbe66f8fb77e437711e718e780f0bc Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 22 Nov 2021 09:59:27 +0100 Subject: [PATCH 04/12] limit to 4 digits --- .../components/panel/filterPanel/GridFilterInputDate.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx index 739cec4e69f2..304e10e3e22e 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx @@ -40,7 +40,11 @@ function GridFilterInputDate(props: GridTypeFilterInputDateProps & TextFieldProp setFilterValueState(String(itemValue)); }, [item.value]); - const InputProps = applying ? { endAdornment: } : others.InputProps; + const InputProps = { + ...(applying ? { endAdornment: } : {}), + max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31', + ...others.InputProps, + }; return ( ); } From 5992d612d13f74ca2618ca50deb765c6fd82024c Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 23 Nov 2021 09:37:11 +0100 Subject: [PATCH 05/12] PR feedbacks --- .../panel/filterPanel/GridFilterInputDate.tsx | 16 +++++++++----- .../GridFilterInputSingleSelect.tsx | 4 ++-- .../filterPanel/GridFilterInputValue.tsx | 22 +++++++++++++------ .../colDef/gridSingleSelectOperators.ts | 5 ----- 4 files changed, 28 insertions(+), 19 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx index 304e10e3e22e..0a374c6c8ba1 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx @@ -5,14 +5,14 @@ import { unstable_useId as useId } from '@mui/material/utils'; import { GridLoadIcon } from '../../icons/index'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; -export interface GridTypeFilterInputDateProps extends GridFilterInputValueProps { +export interface GridFilterInputDateProps extends GridFilterInputValueProps { type?: 'date' | 'datetime-local'; } export const SUBMIT_FILTER_STROKE_TIME = 500; -function GridFilterInputDate(props: GridTypeFilterInputDateProps & TextFieldProps) { - const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; +function GridFilterInputDate(props: GridFilterInputDateProps & TextFieldProps) { + const { item, applyValue, type, apiRef, focusElementRef, ...other } = props; const filterTimeout = React.useRef(); const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); @@ -35,6 +35,12 @@ function GridFilterInputDate(props: GridTypeFilterInputDateProps & TextFieldProp [applyValue, item], ); + React.useEffect(() => { + return () => { + clearTimeout(filterTimeout.current); + }; + }, []); + React.useEffect(() => { const itemValue = item.value ?? ''; setFilterValueState(String(itemValue)); @@ -43,7 +49,7 @@ function GridFilterInputDate(props: GridTypeFilterInputDateProps & TextFieldProp const InputProps = { ...(applying ? { endAdornment: } : {}), max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31', - ...others.InputProps, + ...other.InputProps, }; return ( @@ -59,7 +65,7 @@ function GridFilterInputDate(props: GridTypeFilterInputDateProps & TextFieldProp shrink: true, }} inputRef={focusElementRef} - {...others} + {...other} InputProps={InputProps} /> ); diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index dbf42a7aa156..1de4f95e1a32 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -25,11 +25,11 @@ const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: Grid ); }; -export interface GridTypeFilterInputSingleSelectProps extends GridFilterInputValueProps { +export interface GridFilterInputSingleSelectProps extends GridFilterInputValueProps { type?: 'singleSelect'; } -function GridFilterInputSingleSelect(props: GridTypeFilterInputSingleSelectProps & TextFieldProps) { +function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps & TextFieldProps) { const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); const [applying, setIsApplying] = React.useState(false); diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx index e89a1b3c2879..4e51d8578e45 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx @@ -6,6 +6,18 @@ import { GridLoadIcon } from '../../icons/index'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridColDef } from '../../../models/colDef/gridColDef'; +const warnedOnce = {}; +function warnDeprecatedTypeSupport(type) { + console.warn( + [ + `MUI: Using GridFilterInputValue with a "${type}" column is deprecated.`, + 'Use GridFilterInputSingleSelect instead.', + ].join('\n'), + ); + + warnedOnce[type] = true; +} + const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: GridColDef, api) => { const iterableColumnValues = typeof valueOptions === 'function' @@ -35,14 +47,10 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldPr const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; if ( process.env.NODE_ENV !== 'production' && - ['date', 'datetime-local', 'singleSelect'].includes(type as string) + ['date', 'datetime-local', 'singleSelect'].includes(type as string) && + !warnedOnce[type as string] ) { - console.warn( - [ - 'MUI: the use of GridFilterInputValue is deprecated for singleSelect column', - 'Use GridFilterInputSingleSelect instead.', - ].join('\n'), - ); + warnDeprecatedTypeSupport(type); } const filterTimeout = React.useRef(); const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); diff --git a/packages/grid/_modules_/grid/models/colDef/gridSingleSelectOperators.ts b/packages/grid/_modules_/grid/models/colDef/gridSingleSelectOperators.ts index 10b85f0100fe..eb6404325fda 100644 --- a/packages/grid/_modules_/grid/models/colDef/gridSingleSelectOperators.ts +++ b/packages/grid/_modules_/grid/models/colDef/gridSingleSelectOperators.ts @@ -1,4 +1,3 @@ -// import { GridFilterInputValue } from '../../components/panel/filterPanel/GridFilterInputValue'; import { GridFilterInputSingleSelect } from '../../components/panel/filterPanel/GridFilterInputSingleSelect'; import { GridFilterItem } from '../gridFilterItem'; import { GridFilterOperator } from '../gridFilterOperator'; @@ -17,9 +16,7 @@ export const getGridSingleSelectOperators: () => GridFilterOperator[] = () => [ return filterItem.value === value; }; }, - // InputComponent: GridFilterInputValue, InputComponent: GridFilterInputSingleSelect, - InputComponentProps: { type: 'singleSelect' }, }, { value: 'not', @@ -34,8 +31,6 @@ export const getGridSingleSelectOperators: () => GridFilterOperator[] = () => [ return filterItem.value !== value; }; }, - // InputComponent: GridFilterInputValue, InputComponent: GridFilterInputSingleSelect, - InputComponentProps: { type: 'singleSelect' }, }, ]; From a2b3c5972f6b2d6df2bb922d6f4361b4bf9d55f8 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Thu, 25 Nov 2021 14:37:29 +0100 Subject: [PATCH 06/12] remove useless isApplying --- .../panel/filterPanel/GridFilterInputSingleSelect.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index 1de4f95e1a32..69a7a258fc02 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import TextField, { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/material/utils'; -import { GridLoadIcon } from '../../icons/index'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridColDef } from '../../../models/colDef/gridColDef'; @@ -32,7 +31,6 @@ export interface GridFilterInputSingleSelectProps extends GridFilterInputValuePr function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps & TextFieldProps) { const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); - const [applying, setIsApplying] = React.useState(false); const id = useId(); const onFilterChange = React.useCallback( @@ -49,10 +47,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps & T .find((optionValue) => String(optionValue) === value); setFilterValueState(String(value)); - - setIsApplying(true); applyValue({ ...item, value }); - setIsApplying(false); }, [apiRef, applyValue, item], ); @@ -62,8 +57,6 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps & T setFilterValueState(String(itemValue)); }, [item.value]); - const InputProps = applying ? { endAdornment: } : others.InputProps; - return ( Date: Thu, 25 Nov 2021 14:39:03 +0100 Subject: [PATCH 07/12] add types --- .../components/panel/filterPanel/GridFilterInputDate.tsx | 2 +- .../panel/filterPanel/GridFilterInputSingleSelect.tsx | 5 +++-- .../components/panel/filterPanel/GridFilterInputValue.tsx | 3 ++- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx index 0a374c6c8ba1..03e76d6f7288 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx @@ -20,7 +20,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps & TextFieldProps) { const id = useId(); const onFilterChange = React.useCallback( - (event) => { + (event: React.ChangeEvent) => { const value = event.target.value; clearTimeout(filterTimeout.current); diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index 69a7a258fc02..1cb817aba684 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -4,8 +4,9 @@ import TextField, { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/material/utils'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridColDef } from '../../../models/colDef/gridColDef'; +import { GridApi } from '../../../models/api/gridApi'; -const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: GridColDef, api) => { +const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: GridColDef, api: GridApi) => { const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({ field })] @@ -34,7 +35,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps & T const id = useId(); const onFilterChange = React.useCallback( - (event) => { + (event: React.ChangeEvent) => { let value = event.target.value; // NativeSelect casts the value to a string. const column = apiRef.current.getColumn(item.columnField); diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx index 4e51d8578e45..1df1415310a7 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx @@ -5,6 +5,7 @@ import { unstable_useId as useId } from '@mui/material/utils'; import { GridLoadIcon } from '../../icons/index'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridColDef } from '../../../models/colDef/gridColDef'; +import { GridApi } from '../../../models/api/gridApi' const warnedOnce = {}; function warnDeprecatedTypeSupport(type) { @@ -18,7 +19,7 @@ function warnDeprecatedTypeSupport(type) { warnedOnce[type] = true; } -const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: GridColDef, api) => { +const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: GridColDef, api: GridApi) => { const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({ field })] From 41ee9b415f36cdd32796d0952aebfd50f83a95a1 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Thu, 25 Nov 2021 14:39:14 +0100 Subject: [PATCH 08/12] change constant name --- .../grid/components/panel/filterPanel/GridFilterInputDate.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx index 03e76d6f7288..81b79b641f6c 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx @@ -9,7 +9,7 @@ export interface GridFilterInputDateProps extends GridFilterInputValueProps { type?: 'date' | 'datetime-local'; } -export const SUBMIT_FILTER_STROKE_TIME = 500; +export const SUBMIT_FILTER_DATE_STROKE_TIME = 500; function GridFilterInputDate(props: GridFilterInputDateProps & TextFieldProps) { const { item, applyValue, type, apiRef, focusElementRef, ...other } = props; @@ -30,7 +30,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps & TextFieldProps) { filterTimeout.current = setTimeout(() => { applyValue({ ...item, value }); setIsApplying(false); - }, SUBMIT_FILTER_STROKE_TIME); + }, SUBMIT_FILTER_DATE_STROKE_TIME); }, [applyValue, item], ); From f3d8475ef8d322a268aa3fadc67deb9f1a13926f Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Thu, 25 Nov 2021 14:39:26 +0100 Subject: [PATCH 09/12] export components --- .../grid/_modules_/grid/components/panel/filterPanel/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/index.ts b/packages/grid/_modules_/grid/components/panel/filterPanel/index.ts index e2a2353ee040..e4635e2890d2 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/index.ts +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/index.ts @@ -1,4 +1,6 @@ export * from './GridFilterForm'; export * from './GridFilterInputValue'; +export * from './GridFilterInputDate'; +export * from './GridFilterInputSingleSelect'; export * from './GridFilterInputValueProps'; export * from './GridFilterPanel'; From b7e41d1941265910f41e3fc15023992439b8fde0 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Fri, 26 Nov 2021 13:29:18 +0100 Subject: [PATCH 10/12] prettier --- .../panel/filterPanel/GridFilterInputSingleSelect.tsx | 5 ++++- .../components/panel/filterPanel/GridFilterInputValue.tsx | 7 +++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index 1cb817aba684..809d0dd1e7b7 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -6,7 +6,10 @@ import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridColDef } from '../../../models/colDef/gridColDef'; import { GridApi } from '../../../models/api/gridApi'; -const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: GridColDef, api: GridApi) => { +const renderSingleSelectOptions = ( + { valueOptions, valueFormatter, field }: GridColDef, + api: GridApi, +) => { const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({ field })] diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx index 1df1415310a7..e8d30743960c 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx @@ -5,7 +5,7 @@ import { unstable_useId as useId } from '@mui/material/utils'; import { GridLoadIcon } from '../../icons/index'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridColDef } from '../../../models/colDef/gridColDef'; -import { GridApi } from '../../../models/api/gridApi' +import { GridApi } from '../../../models/api/gridApi'; const warnedOnce = {}; function warnDeprecatedTypeSupport(type) { @@ -19,7 +19,10 @@ function warnDeprecatedTypeSupport(type) { warnedOnce[type] = true; } -const renderSingleSelectOptions = ({ valueOptions, valueFormatter, field }: GridColDef, api: GridApi) => { +const renderSingleSelectOptions = ( + { valueOptions, valueFormatter, field }: GridColDef, + api: GridApi, +) => { const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({ field })] From 05b33eab6aaa55be928f3e6a945e8853f67bc3fb Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Fri, 26 Nov 2021 14:25:25 +0100 Subject: [PATCH 11/12] doc:api --- scripts/exportsSnapshot.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/scripts/exportsSnapshot.json b/scripts/exportsSnapshot.json index f6a94e707dd5..af5ee8e30012 100644 --- a/scripts/exportsSnapshot.json +++ b/scripts/exportsSnapshot.json @@ -10,6 +10,8 @@ { "name": "GridEditInputCell", "kind": "Namespace" }, { "name": "GridEditSingleSelectCell", "kind": "Namespace" }, { "name": "GridFilterForm", "kind": "Namespace" }, + { "name": "GridFilterInputDate", "kind": "Namespace" }, + { "name": "GridFilterInputSingleSelect", "kind": "Namespace" }, { "name": "GridFilterInputValue", "kind": "Namespace" }, { "name": "GridFilterMenuItem", "kind": "Namespace" }, { "name": "GridMenu", "kind": "Namespace" }, @@ -76,6 +78,8 @@ { "name": "GridFilterApi", "kind": "Interface" }, { "name": "GridFilterFormProps", "kind": "Interface" }, { "name": "GridFilterInitialState", "kind": "Interface" }, + { "name": "GridFilterInputDateProps", "kind": "Interface" }, + { "name": "GridFilterInputSingleSelectProps", "kind": "Interface" }, { "name": "GridFilterInputValueProps", "kind": "Interface" }, { "name": "GridFilterItem", "kind": "Interface" }, { "name": "GridFilterItemProps", "kind": "Interface" }, @@ -267,6 +271,7 @@ { "name": "GridViewStreamIcon", "kind": "Variable" }, { "name": "HideGridColMenuItem", "kind": "Variable" }, { "name": "MAX_PAGE_SIZE", "kind": "Variable" }, + { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "SortGridMenuItems", "kind": "Variable" }, { "name": "allGridColumnsSelector", "kind": "Variable" }, @@ -348,6 +353,8 @@ { "name": "GridEditSingleSelectCell", "kind": "Function" }, { "name": "GridErrorHandler", "kind": "Function" }, { "name": "GridFilterForm", "kind": "Function" }, + { "name": "GridFilterInputDate", "kind": "Function" }, + { "name": "GridFilterInputSingleSelect", "kind": "Function" }, { "name": "GridFilterInputValue", "kind": "Function" }, { "name": "GridFilterPanel", "kind": "Function" }, { "name": "GridFooterPlaceholder", "kind": "Function" }, From 2839230ba1c83891eb67443c0aa88cce1f64beee Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 29 Nov 2021 10:32:48 +0100 Subject: [PATCH 12/12] correct exported type --- .../components/panel/filterPanel/GridFilterInputDate.tsx | 7 +++---- .../panel/filterPanel/GridFilterInputSingleSelect.tsx | 7 +++---- scripts/exportsSnapshot.json | 4 ++-- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx index 81b79b641f6c..b7a609e82efa 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx @@ -5,13 +5,12 @@ import { unstable_useId as useId } from '@mui/material/utils'; import { GridLoadIcon } from '../../icons/index'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; -export interface GridFilterInputDateProps extends GridFilterInputValueProps { - type?: 'date' | 'datetime-local'; -} +export type GridFilterInputDateProps = GridFilterInputValueProps & + TextFieldProps & { type?: 'date' | 'datetime-local' }; export const SUBMIT_FILTER_DATE_STROKE_TIME = 500; -function GridFilterInputDate(props: GridFilterInputDateProps & TextFieldProps) { +function GridFilterInputDate(props: GridFilterInputDateProps) { const { item, applyValue, type, apiRef, focusElementRef, ...other } = props; const filterTimeout = React.useRef(); diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index 809d0dd1e7b7..b202f1f4f320 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -28,11 +28,10 @@ const renderSingleSelectOptions = ( ); }; -export interface GridFilterInputSingleSelectProps extends GridFilterInputValueProps { - type?: 'singleSelect'; -} +export type GridFilterInputSingleSelectProps = GridFilterInputValueProps & + TextFieldProps & { type?: 'singleSelect' }; -function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps & TextFieldProps) { +function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); const id = useId(); diff --git a/scripts/exportsSnapshot.json b/scripts/exportsSnapshot.json index af5ee8e30012..6bd8da0e6aef 100644 --- a/scripts/exportsSnapshot.json +++ b/scripts/exportsSnapshot.json @@ -78,8 +78,6 @@ { "name": "GridFilterApi", "kind": "Interface" }, { "name": "GridFilterFormProps", "kind": "Interface" }, { "name": "GridFilterInitialState", "kind": "Interface" }, - { "name": "GridFilterInputDateProps", "kind": "Interface" }, - { "name": "GridFilterInputSingleSelectProps", "kind": "Interface" }, { "name": "GridFilterInputValueProps", "kind": "Interface" }, { "name": "GridFilterItem", "kind": "Interface" }, { "name": "GridFilterItemProps", "kind": "Interface" }, @@ -172,6 +170,8 @@ { "name": "GridFeatureMode", "kind": "Type alias" }, { "name": "GridFieldComparatorList", "kind": "Type alias" }, { "name": "GridFilterActiveItemsLookup", "kind": "Type alias" }, + { "name": "GridFilterInputDateProps", "kind": "Type alias" }, + { "name": "GridFilterInputSingleSelectProps", "kind": "Type alias" }, { "name": "GridFooterContainerProps", "kind": "Type alias" }, { "name": "GridInputSelectionModel", "kind": "Type alias" }, { "name": "GridNativeColTypes", "kind": "Type alias" },