From 9afd3f462c29c65a44178dbb9129b0fb4c845900 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 22 Dec 2021 17:05:00 +0100 Subject: [PATCH 01/32] add props to filter panel --- .../panel/filterPanel/GridFilterForm.tsx | 152 +++++++++++++++--- .../panel/filterPanel/GridFilterPanel.tsx | 90 ++++++++++- 2 files changed, 219 insertions(+), 23 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 396346821f67b..5a778ec3d4bc6 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -6,7 +6,7 @@ import IconButton from '@mui/material/IconButton'; import InputLabel from '@mui/material/InputLabel'; import Select, { SelectChangeEvent } from '@mui/material/Select'; import { capitalize, unstable_useId as useId } from '@mui/material/utils'; -import { styled } from '@mui/material/styles'; +import { styled, SxProps, Theme } from '@mui/material/styles'; import { filterableGridColumnsSelector } from '../../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../../hooks/utils/useGridSelector'; import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem'; @@ -27,6 +27,14 @@ export interface GridFilterFormProps { applyFilterChanges: (item: GridFilterItem) => void; applyMultiFilterOperatorChanges: (operator: GridLinkOperator) => void; deleteFilter: (item: GridFilterItem) => void; + hasLinkOperatorColumn?: boolean; + linkOperators: (GridLinkOperator.And | GridLinkOperator.Or)[]; + columnsSort: 'asc' | 'desc' | undefined; + deleteIconContainerSx: SxProps; + linkOperatorContainerSx: SxProps; + columnContainerSx: SxProps; + operatorContainerSx: SxProps; + valueContainerSx: SxProps; } type OwnerState = { classes: GridComponentProps['classes'] }; @@ -47,14 +55,51 @@ const GridFilterFormRoot = styled('div', { overridesResolver: (props, styles) => styles.filterForm, })(({ theme }) => ({ display: 'flex', - justifyContent: 'space-around', padding: theme.spacing(1), })); +const getLinkOperatorLocaleKey = (linkOperator) => { + switch (linkOperator) { + case GridLinkOperator.And: + return 'filterPanelOperatorAnd'; + case GridLinkOperator.Or: + return 'filterPanelOperatorOr'; + default: + throw new Error('MUI: Invalid `linkOperator` property in the `GridFilterPanel`.'); + } +}; + +const getColumnLabel = (col) => col.headerName || col.field; + +const useColumnSorting = (filterableColumns, columnsSort) => { + const [sortedColumns, setSortedColumns] = React.useState(filterableColumns); + + React.useEffect(() => { + switch (columnsSort) { + case 'asc': + setSortedColumns( + filterableColumns.sort((a, b) => (getColumnLabel(a) < getColumnLabel(b) ? -1 : 1)), + ); + + break; + case 'desc': + setSortedColumns( + filterableColumns.sort((a, b) => (getColumnLabel(a) < getColumnLabel(b) ? 1 : -1)), + ); + + break; + default: + setSortedColumns(filterableColumns); + break; + } + }, [filterableColumns, columnsSort]); + + return sortedColumns; +}; + function GridFilterForm(props: GridFilterFormProps) { const { item, - hasMultipleFilters, deleteFilter, applyFilterChanges, multiFilterOperator, @@ -62,6 +107,14 @@ function GridFilterForm(props: GridFilterFormProps) { disableMultiFilterOperator, applyMultiFilterOperatorChanges, focusElementRef, + linkOperators, + hasLinkOperatorColumn, + columnsSort, + deleteIconContainerSx, + linkOperatorContainerSx, + columnContainerSx, + operatorContainerSx, + valueContainerSx, } = props; const apiRef = useGridApiContext(); const filterableColumns = useGridSelector(apiRef, filterableGridColumnsSelector); @@ -77,6 +130,8 @@ function GridFilterForm(props: GridFilterFormProps) { const valueRef = React.useRef(null); const filterSelectorRef = React.useRef(null); + const sortedFilterableColumns = useColumnSorting(filterableColumns, columnsSort); + const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null; const currentOperator = React.useMemo(() => { @@ -175,7 +230,12 @@ function GridFilterForm(props: GridFilterFormProps) { {apiRef.current.getLocaleText('filterPanelOperators')} @@ -202,18 +267,23 @@ function GridFilterForm(props: GridFilterFormProps) { id={linkOperatorSelectId} value={multiFilterOperator} onChange={changeLinkOperator} - disabled={!!disableMultiFilterOperator} + disabled={!!disableMultiFilterOperator || linkOperators.length === 1} native > - - + {linkOperators.map((linkOperator) => ( + + ))} - + {apiRef.current.getLocaleText('filterPanelColumns')} @@ -224,14 +294,20 @@ function GridFilterForm(props: GridFilterFormProps) { onChange={changeColumn} native > - {filterableColumns.map((col) => ( + {sortedFilterableColumns.map((col) => ( ))} - + {apiRef.current.getLocaleText('filterPanelOperators')} @@ -253,7 +329,13 @@ function GridFilterForm(props: GridFilterFormProps) { ))} - + {currentOperator?.InputComponent ? ( {} + +const defaultGridFilterPanelProps = { + linkOperators: [GridLinkOperator.And, GridLinkOperator.Or], + columnsSort: undefined, + deleteIconContainerSx: {}, + linkOperatorContainerSx: {}, + columnContainerSx: {}, + operatorContainerSx: {}, + valueContainerSx: {}, +}; + +function GridFilterPanel({ + linkOperators, + columnsSort, + deleteIconContainerSx, + linkOperatorContainerSx, + columnContainerSx, + operatorContainerSx, + valueContainerSx, +}: GridFilterPanelProps = defaultGridFilterPanelProps) { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const filterModel = useGridSelector(apiRef, gridFilterModelSelector); @@ -37,6 +68,7 @@ export function GridFilterPanel() { const firstColumnWithOperator = filterableColumns.find( (colDef) => colDef.filterOperators?.length, ); + if (!firstColumnWithOperator) { return null; } @@ -75,6 +107,16 @@ export function GridFilterPanel() { [apiRef], ); + React.useEffect(() => { + if ( + linkOperators.length > 0 && + filterModel.linkOperator && + !linkOperators.includes(filterModel.linkOperator) + ) { + applyFilterLinkOperator(linkOperators[0]); + } + }, [linkOperators, applyFilterLinkOperator, filterModel.linkOperator]); + React.useEffect(() => { if (items.length > 0) { lastFilterRef.current!.focus(); @@ -96,6 +138,14 @@ export function GridFilterPanel() { disableMultiFilterOperator={index !== 1} applyMultiFilterOperatorChanges={applyFilterLinkOperator} focusElementRef={index === items.length - 1 ? lastFilterRef : null} + linkOperators={linkOperators} + hasLinkOperatorColumn={hasMultipleFilters && linkOperators.length > 0} + columnsSort={columnsSort} + deleteIconContainerSx={deleteIconContainerSx} + linkOperatorContainerSx={linkOperatorContainerSx} + columnContainerSx={columnContainerSx} + operatorContainerSx={operatorContainerSx} + valueContainerSx={valueContainerSx} /> ))} @@ -109,3 +159,39 @@ export function GridFilterPanel() { ); } + +GridFilterPanel.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + columnContainerSx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + columnsSort: PropTypes.oneOf(['asc', 'desc']), + deleteIconContainerSx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + linkOperatorContainerSx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired).isRequired, + operatorContainerSx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + valueContainerSx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), +} as any; + +export { GridFilterPanel }; From 129e93927dd08ddc41448ecac4233c0bb1352209 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 22 Dec 2021 17:05:12 +0100 Subject: [PATCH 02/32] add doc --- .../data-grid/filtering/CustomFilterPanel.js | 33 +++++++++++++++++++ .../data-grid/filtering/CustomFilterPanel.tsx | 33 +++++++++++++++++++ .../data-grid/filtering/filtering.md | 16 +++++++++ scripts/x-data-grid-pro.exports.json | 3 +- scripts/x-data-grid.exports.json | 3 +- 5 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js create mode 100644 docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js new file mode 100644 index 0000000000000..8e76d2e04619b --- /dev/null +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { DataGridPro, GridLinkOperator } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function DisableSortingGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 6, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx new file mode 100644 index 0000000000000..8e76d2e04619b --- /dev/null +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { DataGridPro, GridLinkOperator } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function DisableSortingGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 6, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/src/pages/components/data-grid/filtering/filtering.md b/docs/src/pages/components/data-grid/filtering/filtering.md index 1fc087797ee7b..79cea5677580d 100644 --- a/docs/src/pages/components/data-grid/filtering/filtering.md +++ b/docs/src/pages/components/data-grid/filtering/filtering.md @@ -116,6 +116,22 @@ In this demo, you can see how to create a completely new operator for the Rating {{"demo": "pages/components/data-grid/filtering/CustomRatingOperator.js", "bg": "inline", "defaultCodeOpen": false}} +### Customize the filterPanel + +Like most of the components, the filter panel can be [overridden](/components/data-grid/components/#overriding-components) by a custom one. +For common modification, a simpler approach is available: modifying props. +The default component `` provides props allowing you to customize: + +- The available `linkOperators` +- The order of the column selector +- The style of the container for each input + +In this example, the filter panel is customized such that the column selector is sorted by ascending order. +The link operator is fixed to `"And"`. +The delete icon has been removed and the value input is larger. + +{{"demo": "pages/components/data-grid/filtering/CustomFilterPanel.js", "bg": "inline"}} + ## Server-side filter Filtering can be run server-side by setting the `filterMode` prop to `server`, and implementing the `onFilterModelChange` handler. diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index b17609d327cc6..8ed8d170de2b6 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -190,7 +190,8 @@ { "name": "GridFilterModel", "kind": "Interface" }, { "name": "gridFilterModelSelector", "kind": "Variable" }, { "name": "GridFilterOperator", "kind": "Interface" }, - { "name": "GridFilterPanel", "kind": "Function" }, + { "name": "GridFilterPanel", "kind": "ExportSpecifier" }, + { "name": "GridFilterPanelProps", "kind": "Interface" }, { "name": "GridFilterState", "kind": "ExportSpecifier" }, { "name": "gridFilterStateSelector", "kind": "Variable" }, { "name": "GridFocusApi", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 21cdfbe5342c6..ba6298f40d2e6 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -190,7 +190,8 @@ { "name": "GridFilterModel", "kind": "Interface" }, { "name": "gridFilterModelSelector", "kind": "Variable" }, { "name": "GridFilterOperator", "kind": "Interface" }, - { "name": "GridFilterPanel", "kind": "Function" }, + { "name": "GridFilterPanel", "kind": "ExportSpecifier" }, + { "name": "GridFilterPanelProps", "kind": "Interface" }, { "name": "GridFilterState", "kind": "ExportSpecifier" }, { "name": "gridFilterStateSelector", "kind": "Variable" }, { "name": "GridFocusApi", "kind": "Interface" }, From 0af72138ecda55d4c46a13d1cf7bc0e52a66115a Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 22 Dec 2021 18:59:08 +0100 Subject: [PATCH 03/32] set default values --- .../panel/filterPanel/GridFilterForm.tsx | 28 ++++++++-------- .../panel/filterPanel/GridFilterPanel.tsx | 32 +++++++------------ 2 files changed, 26 insertions(+), 34 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 5a778ec3d4bc6..2002a23817c24 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -28,13 +28,13 @@ export interface GridFilterFormProps { applyMultiFilterOperatorChanges: (operator: GridLinkOperator) => void; deleteFilter: (item: GridFilterItem) => void; hasLinkOperatorColumn?: boolean; - linkOperators: (GridLinkOperator.And | GridLinkOperator.Or)[]; - columnsSort: 'asc' | 'desc' | undefined; - deleteIconContainerSx: SxProps; - linkOperatorContainerSx: SxProps; - columnContainerSx: SxProps; - operatorContainerSx: SxProps; - valueContainerSx: SxProps; + linkOperators?: (GridLinkOperator.And | GridLinkOperator.Or)[]; + columnsSort?: 'asc' | 'desc'; + deleteIconContainerSx?: SxProps; + linkOperatorContainerSx?: SxProps; + columnContainerSx?: SxProps; + operatorContainerSx?: SxProps; + valueContainerSx?: SxProps; } type OwnerState = { classes: GridComponentProps['classes'] }; @@ -107,14 +107,14 @@ function GridFilterForm(props: GridFilterFormProps) { disableMultiFilterOperator, applyMultiFilterOperatorChanges, focusElementRef, - linkOperators, hasLinkOperatorColumn, + linkOperators = [GridLinkOperator.And, GridLinkOperator.Or], columnsSort, - deleteIconContainerSx, - linkOperatorContainerSx, - columnContainerSx, - operatorContainerSx, - valueContainerSx, + deleteIconContainerSx = {}, + linkOperatorContainerSx = {}, + columnContainerSx = {}, + operatorContainerSx = {}, + valueContainerSx = {}, } = props; const apiRef = useGridApiContext(); const filterableColumns = useGridSelector(apiRef, filterableGridColumnsSelector); @@ -387,7 +387,7 @@ GridFilterForm.propTypes = { PropTypes.func, PropTypes.object, ]), - linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired).isRequired, + linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired), multiFilterOperator: PropTypes.oneOf(['and', 'or']), operatorContainerSx: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx index 16a6507029453..b53c7b9f0705b 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx @@ -25,31 +25,23 @@ export interface GridFilterPanelProps | 'valueContainerSx' > {} -const defaultGridFilterPanelProps = { - linkOperators: [GridLinkOperator.And, GridLinkOperator.Or], - columnsSort: undefined, - deleteIconContainerSx: {}, - linkOperatorContainerSx: {}, - columnContainerSx: {}, - operatorContainerSx: {}, - valueContainerSx: {}, -}; - -function GridFilterPanel({ - linkOperators, - columnsSort, - deleteIconContainerSx, - linkOperatorContainerSx, - columnContainerSx, - operatorContainerSx, - valueContainerSx, -}: GridFilterPanelProps = defaultGridFilterPanelProps) { +function GridFilterPanel(props: GridFilterPanelProps) { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const filterModel = useGridSelector(apiRef, gridFilterModelSelector); const filterableColumns = useGridSelector(apiRef, filterableGridColumnsSelector); const lastFilterRef = React.useRef(null); + const { + linkOperators = [GridLinkOperator.And, GridLinkOperator.Or], + columnsSort, + deleteIconContainerSx = {}, + linkOperatorContainerSx = {}, + columnContainerSx = {}, + operatorContainerSx = {}, + valueContainerSx = {}, + } = props; + const applyFilter = React.useCallback( (item: GridFilterItem) => { apiRef.current.upsertFilterItem(item); @@ -181,7 +173,7 @@ GridFilterPanel.propTypes = { PropTypes.func, PropTypes.object, ]), - linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired).isRequired, + linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired), operatorContainerSx: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, From 93e7aa3e7fb3d73778e461ac1d404983f9bf929f Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Fri, 7 Jan 2022 12:21:28 +0100 Subject: [PATCH 04/32] small PR feedbacks --- .../data-grid/filtering/CustomFilterPanel.tsx | 2 +- .../panel/filterPanel/GridFilterForm.tsx | 39 +++++++------------ 2 files changed, 14 insertions(+), 27 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx index 8e76d2e04619b..e39532bbe62ad 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { DataGridPro, GridLinkOperator } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; -export default function DisableSortingGrid() { +export default function CustomFilterPanel() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 10, diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 2002a23817c24..8c5f95db1377b 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -71,31 +71,7 @@ const getLinkOperatorLocaleKey = (linkOperator) => { const getColumnLabel = (col) => col.headerName || col.field; -const useColumnSorting = (filterableColumns, columnsSort) => { - const [sortedColumns, setSortedColumns] = React.useState(filterableColumns); - - React.useEffect(() => { - switch (columnsSort) { - case 'asc': - setSortedColumns( - filterableColumns.sort((a, b) => (getColumnLabel(a) < getColumnLabel(b) ? -1 : 1)), - ); - - break; - case 'desc': - setSortedColumns( - filterableColumns.sort((a, b) => (getColumnLabel(a) < getColumnLabel(b) ? 1 : -1)), - ); - - break; - default: - setSortedColumns(filterableColumns); - break; - } - }, [filterableColumns, columnsSort]); - - return sortedColumns; -}; +const collator = new Intl.Collator(); function GridFilterForm(props: GridFilterFormProps) { const { @@ -130,7 +106,18 @@ function GridFilterForm(props: GridFilterFormProps) { const valueRef = React.useRef(null); const filterSelectorRef = React.useRef(null); - const sortedFilterableColumns = useColumnSorting(filterableColumns, columnsSort); + const sortedFilterableColumns = React.useMemo(() => { + switch (columnsSort) { + case 'asc': + return filterableColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b))); + + case 'desc': + return filterableColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b))); + + default: + return filterableColumns; + } + }, [filterableColumns, columnsSort]); const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null; From bd3fcddd7c1f0e736e6010496d38e28d1d37b869 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 11 Jan 2022 12:10:25 +0100 Subject: [PATCH 05/32] use class override for style modification --- .../data-grid/filtering/CustomFilterPanel.js | 57 ++++++++-- .../data-grid/filtering/CustomFilterPanel.tsx | 55 +++++++-- .../data-grid/filtering/filtering.md | 8 +- .../components/panel/GridPanelWrapper.tsx | 26 ++++- .../panel/filterPanel/GridFilterForm.tsx | 104 +++++++++--------- .../panel/filterPanel/GridFilterPanel.tsx | 49 ++------- 6 files changed, 181 insertions(+), 118 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js index 8e76d2e04619b..45d407ff1ebdb 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js @@ -1,8 +1,35 @@ import * as React from 'react'; -import { DataGridPro, GridLinkOperator } from '@mui/x-data-grid-pro'; +import { DataGridPro, GridLinkOperator, GridToolbar } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; -export default function DisableSortingGrid() { +const initialState = { + filter: { + filterModel: { + items: [ + { + id: 1, + columnField: 'desk', + operatorValue: 'contains', + value: 'D', + }, + { + id: 2, + columnField: 'desk', + operatorValue: 'contains', + value: 'D', + }, + { + id: 3, + columnField: 'quantity', + operatorValue: '>', + value: '0', + }, + ], + }, + }, +}; + +export default function CustomFilterPanel() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 10, @@ -13,20 +40,30 @@ export default function DisableSortingGrid() {
+ theme.palette.mode === 'dark' ? '#444' : '#ddd', + }, + '& .MuiDataGrid-closeIconController': { display: 'none' }, + '& .MuiDataGrid-linkOperatorController': { mr: 2 }, + '& .MuiDataGrid-columnController': { mr: 2, width: 200 }, + '& .MuiDataGrid-operatorController': { mr: 5 }, + '& .MuiDataGrid-valueController': { width: 400 }, + }, }, }} + initialState={initialState} />
); diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx index e39532bbe62ad..45d407ff1ebdb 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx @@ -1,7 +1,34 @@ import * as React from 'react'; -import { DataGridPro, GridLinkOperator } from '@mui/x-data-grid-pro'; +import { DataGridPro, GridLinkOperator, GridToolbar } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; +const initialState = { + filter: { + filterModel: { + items: [ + { + id: 1, + columnField: 'desk', + operatorValue: 'contains', + value: 'D', + }, + { + id: 2, + columnField: 'desk', + operatorValue: 'contains', + value: 'D', + }, + { + id: 3, + columnField: 'quantity', + operatorValue: '>', + value: '0', + }, + ], + }, + }, +}; + export default function CustomFilterPanel() { const { data } = useDemoData({ dataSet: 'Commodity', @@ -13,20 +40,30 @@ export default function CustomFilterPanel() {
+ theme.palette.mode === 'dark' ? '#444' : '#ddd', + }, + '& .MuiDataGrid-closeIconController': { display: 'none' }, + '& .MuiDataGrid-linkOperatorController': { mr: 2 }, + '& .MuiDataGrid-columnController': { mr: 2, width: 200 }, + '& .MuiDataGrid-operatorController': { mr: 5 }, + '& .MuiDataGrid-valueController': { width: 400 }, + }, }, }} + initialState={initialState} />
); diff --git a/docs/src/pages/components/data-grid/filtering/filtering.md b/docs/src/pages/components/data-grid/filtering/filtering.md index 79cea5677580d..0dd445c82caf2 100644 --- a/docs/src/pages/components/data-grid/filtering/filtering.md +++ b/docs/src/pages/components/data-grid/filtering/filtering.md @@ -119,16 +119,16 @@ In this demo, you can see how to create a completely new operator for the Rating ### Customize the filterPanel Like most of the components, the filter panel can be [overridden](/components/data-grid/components/#overriding-components) by a custom one. -For common modification, a simpler approach is available: modifying props. -The default component `` provides props allowing you to customize: +This approche must be consider only for deep modification of the component. Simpler customization can be performed by passing props to the he default `` component. +These props allows you to override - The available `linkOperators` - The order of the column selector -- The style of the container for each input +- The style of the controller for each input In this example, the filter panel is customized such that the column selector is sorted by ascending order. The link operator is fixed to `"And"`. -The delete icon has been removed and the value input is larger. +The components style has bee [override](/customization/how-to-customize/#overriding-nested-component-styles) such that the delete icon is not displayed, all the components are expanded, and the background color changes between filters. {{"demo": "pages/components/data-grid/filtering/CustomFilterPanel.js", "bg": "inline"}} diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx index 55a2447ebe705..5ad897b36b6e4 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import clsx from 'clsx'; import TrapFocus from '@mui/material/Unstable_TrapFocus'; -import { styled } from '@mui/material/styles'; +import { styled, SxProps, Theme } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/material'; import { getDataGridUtilityClass } from '../../gridClasses'; import { GridComponentProps } from '../../GridComponentProps'; @@ -34,9 +35,12 @@ const GridPanelWrapperRoot = styled('div', { const isEnabled = () => true; -export function GridPanelWrapper( - props: React.PropsWithChildren>, -) { +interface GridPanelWrapperProps + extends React.PropsWithChildren> { + sx?: SxProps; +} + +function GridPanelWrapper(props: GridPanelWrapperProps) { const { className, ...other } = props; const rootProps = useGridRootProps(); const ownerState = { classes: rootProps.classes }; @@ -48,3 +52,17 @@ export function GridPanelWrapper( ); } + +GridPanelWrapper.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), +} as any; + +export { GridPanelWrapper }; diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 8c5f95db1377b..ca93f71b64bf5 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -7,6 +7,7 @@ import InputLabel from '@mui/material/InputLabel'; import Select, { SelectChangeEvent } from '@mui/material/Select'; import { capitalize, unstable_useId as useId } from '@mui/material/utils'; import { styled, SxProps, Theme } from '@mui/material/styles'; +import clix from 'clsx'; import { filterableGridColumnsSelector } from '../../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../../hooks/utils/useGridSelector'; import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem'; @@ -44,6 +45,11 @@ const useUtilityClasses = (ownerState: OwnerState) => { const slots = { root: ['filterForm'], + closeIcon: ['closeIconController'], + linkOperator: ['linkOperatorController'], + column: ['columnController'], + operator: ['operatorController'], + value: ['valueController'], }; return composeClasses(slots, getDataGridUtilityClass, classes); @@ -73,6 +79,29 @@ const getColumnLabel = (col) => col.headerName || col.field; const collator = new Intl.Collator(); +const FormControlCloseIcon = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'closeIconController', +})({}); + +const FormControlLinkOperator = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'linkOperatorController', +})({}); + +const FormControlColumn = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'columnController', +})({}); +const FormControlOperator = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'operatorController', +})({}); +const FormControlValue = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'valueController', +})({}); + function GridFilterForm(props: GridFilterFormProps) { const { item, @@ -86,11 +115,6 @@ function GridFilterForm(props: GridFilterFormProps) { hasLinkOperatorColumn, linkOperators = [GridLinkOperator.And, GridLinkOperator.Or], columnsSort, - deleteIconContainerSx = {}, - linkOperatorContainerSx = {}, - columnContainerSx = {}, - operatorContainerSx = {}, - valueContainerSx = {}, } = props; const apiRef = useGridApiContext(); const filterableColumns = useGridSelector(apiRef, filterableGridColumnsSelector); @@ -109,10 +133,14 @@ function GridFilterForm(props: GridFilterFormProps) { const sortedFilterableColumns = React.useMemo(() => { switch (columnsSort) { case 'asc': - return filterableColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b))); + return filterableColumns.sort((a, b) => + collator.compare(getColumnLabel(a), getColumnLabel(b)), + ); case 'desc': - return filterableColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b))); + return filterableColumns.sort( + (a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b)), + ); default: return filterableColumns; @@ -215,14 +243,10 @@ function GridFilterForm(props: GridFilterFormProps) { return ( - - - + {apiRef.current.getLocaleText('filterPanelOperators')} @@ -263,14 +283,8 @@ function GridFilterForm(props: GridFilterFormProps) { ))} - - + + {apiRef.current.getLocaleText('filterPanelColumns')} @@ -287,13 +301,11 @@ function GridFilterForm(props: GridFilterFormProps) { ))} - - + {apiRef.current.getLocaleText('filterPanelOperators')} @@ -315,14 +327,8 @@ function GridFilterForm(props: GridFilterFormProps) { ))} - - + + {currentOperator?.InputComponent ? ( ) : null} - + ); } diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx index b53c7b9f0705b..d5b1fe57eadb8 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; +import { SxProps, Theme } from '@mui/material/styles'; import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { GridAddIcon } from '../../icons'; @@ -14,16 +15,9 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt import { filterableGridColumnsSelector } from '../../../hooks/features/columns/gridColumnsSelector'; export interface GridFilterPanelProps - extends Pick< - GridFilterFormProps, - | 'linkOperators' - | 'columnsSort' - | 'deleteIconContainerSx' - | 'linkOperatorContainerSx' - | 'columnContainerSx' - | 'operatorContainerSx' - | 'valueContainerSx' - > {} + extends Pick { + sx?: SxProps; +} function GridFilterPanel(props: GridFilterPanelProps) { const apiRef = useGridApiContext(); @@ -35,11 +29,7 @@ function GridFilterPanel(props: GridFilterPanelProps) { const { linkOperators = [GridLinkOperator.And, GridLinkOperator.Or], columnsSort, - deleteIconContainerSx = {}, - linkOperatorContainerSx = {}, - columnContainerSx = {}, - operatorContainerSx = {}, - valueContainerSx = {}, + sx = {}, } = props; const applyFilter = React.useCallback( @@ -116,7 +106,7 @@ function GridFilterPanel(props: GridFilterPanelProps) { }, [items.length]); return ( - + {items.map((item, index) => ( 0} columnsSort={columnsSort} - deleteIconContainerSx={deleteIconContainerSx} - linkOperatorContainerSx={linkOperatorContainerSx} - columnContainerSx={columnContainerSx} - operatorContainerSx={operatorContainerSx} - valueContainerSx={valueContainerSx} /> ))} @@ -157,29 +142,9 @@ GridFilterPanel.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - columnContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), columnsSort: PropTypes.oneOf(['asc', 'desc']), - deleteIconContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - linkOperatorContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired), - operatorContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - valueContainerSx: PropTypes.oneOfType([ + sx: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object, From d421ad9d0548367275d7fa8c640a48fc0322dd5d Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 11 Jan 2022 13:45:46 +0100 Subject: [PATCH 06/32] scripts --- docs/pages/api-docs/data-grid/grid-filter-item.js | 2 +- docs/pages/api-docs/data-grid/grid-filter-model.js | 2 +- docs/pages/api-docs/data-grid/grid-filter-operator.js | 2 +- scripts/x-data-grid-pro.exports.json | 2 +- scripts/x-data-grid.exports.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/api-docs/data-grid/grid-filter-item.js b/docs/pages/api-docs/data-grid/grid-filter-item.js index 96177a43fd67e..5155144ea50ef 100644 --- a/docs/pages/api-docs/data-grid/grid-filter-item.js +++ b/docs/pages/api-docs/data-grid/grid-filter-item.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import MarkdownDocs from '@material-ui/monorepo/docs/src/modules/components/MarkdownDocs'; +import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; import { demos, docs, demoComponents } from './grid-filter-item.md?@mui/markdown'; export default function Page() { diff --git a/docs/pages/api-docs/data-grid/grid-filter-model.js b/docs/pages/api-docs/data-grid/grid-filter-model.js index 35447b4d301a4..61239d3ad426f 100644 --- a/docs/pages/api-docs/data-grid/grid-filter-model.js +++ b/docs/pages/api-docs/data-grid/grid-filter-model.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import MarkdownDocs from '@material-ui/monorepo/docs/src/modules/components/MarkdownDocs'; +import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; import { demos, docs, demoComponents } from './grid-filter-model.md?@mui/markdown'; export default function Page() { diff --git a/docs/pages/api-docs/data-grid/grid-filter-operator.js b/docs/pages/api-docs/data-grid/grid-filter-operator.js index 83ab3cae12fa9..2cbd12ae534ef 100644 --- a/docs/pages/api-docs/data-grid/grid-filter-operator.js +++ b/docs/pages/api-docs/data-grid/grid-filter-operator.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import MarkdownDocs from '@material-ui/monorepo/docs/src/modules/components/MarkdownDocs'; +import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; import { demos, docs, demoComponents } from './grid-filter-operator.md?@mui/markdown'; export default function Page() { diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 7774a2163855d..3fd218a4c8d44 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -248,7 +248,7 @@ { "name": "GridPanelFooter", "kind": "Function" }, { "name": "GridPanelHeader", "kind": "Function" }, { "name": "GridPanelProps", "kind": "Interface" }, - { "name": "GridPanelWrapper", "kind": "Function" }, + { "name": "GridPanelWrapper", "kind": "ExportSpecifier" }, { "name": "GridParamsApi", "kind": "Interface" }, { "name": "GridPinnedColumns", "kind": "Interface" }, { "name": "GridPinnedPosition", "kind": "Enum" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 28117023aee49..68d3281090487 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -248,7 +248,7 @@ { "name": "GridPanelFooter", "kind": "Function" }, { "name": "GridPanelHeader", "kind": "Function" }, { "name": "GridPanelProps", "kind": "Interface" }, - { "name": "GridPanelWrapper", "kind": "Function" }, + { "name": "GridPanelWrapper", "kind": "ExportSpecifier" }, { "name": "GridParamsApi", "kind": "Interface" }, { "name": "GridPinnedColumns", "kind": "Interface" }, { "name": "GridPinnedPosition", "kind": "Enum" }, From 01dbe3ee21a3d0aa82a1b54ffa8268e024629d4e Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 11 Jan 2022 14:35:20 +0100 Subject: [PATCH 07/32] markdownlint --- docs/src/pages/components/data-grid/filtering/filtering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/data-grid/filtering/filtering.md b/docs/src/pages/components/data-grid/filtering/filtering.md index fce7ac30b01c8..0621f7af808c5 100644 --- a/docs/src/pages/components/data-grid/filtering/filtering.md +++ b/docs/src/pages/components/data-grid/filtering/filtering.md @@ -147,7 +147,7 @@ You can get them by importing the following functions: | `number` | `getGridNumericOperators()` | | `boolean` | `getGridBooleanOperators()` | | `date` | `getGridDateOperators()` | -| `dateTime ` | `getGridDateOperators(true)` | +| `dateTime` | `getGridDateOperators(true)` | | `singleSelect` | `getGridSingleSelectOperators()` | You can find more information about the supported column types in the [columns section](/components/data-grid/columns/#column-types). From 5b50bf0ebfc832122734c8248fc4bdfc00f6b7eb Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Mon, 17 Jan 2022 16:47:48 +0100 Subject: [PATCH 08/32] Apply suggestions from code review Co-authored-by: Matheus Wichman --- docs/src/pages/components/data-grid/filtering/filtering.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/filtering.md b/docs/src/pages/components/data-grid/filtering/filtering.md index 0621f7af808c5..f762e65109901 100644 --- a/docs/src/pages/components/data-grid/filtering/filtering.md +++ b/docs/src/pages/components/data-grid/filtering/filtering.md @@ -232,8 +232,8 @@ You can customize the rendering of the filter panel as shown in [the component s ### Customize the filter panel content -The customization of the filter panel content, can be performed by passing props to the he default `` component. -These props allows you to override +The customization of the filter panel content can be performed by passing props to the default `` component. +The props available allow to override: - The available `linkOperators` - The order of the column selector @@ -241,7 +241,7 @@ These props allows you to override In this example, the filter panel is customized such that the column selector is sorted by ascending order. The link operator is fixed to `"And"`. -The components style has bee [override](/customization/how-to-customize/#overriding-nested-component-styles) such that the delete icon is not displayed, all the components are expanded, and the background color changes between filters. +The components style has been [overridden](/customization/how-to-customize/#overriding-nested-component-styles) to not display the delete icon, all the components are expanded, and the background color changes between filters. {{"demo": "pages/components/data-grid/filtering/CustomFilterPanelContent.js", "bg": "inline"}} From 3560f2bd0bc5bb6d58146adddd0beef2e5c627ba Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 18 Jan 2022 10:22:20 +0100 Subject: [PATCH 09/32] typing feedbacks and avoid breaking changes --- .../grid/components/panel/filterPanel/GridFilterForm.tsx | 9 +++++---- .../components/panel/filterPanel/GridFilterPanel.tsx | 1 - 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 11057592d27b7..ea8f347a7bdbc 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -27,8 +27,7 @@ export interface GridFilterFormProps { applyFilterChanges: (item: GridFilterItem) => void; applyMultiFilterOperatorChanges: (operator: GridLinkOperator) => void; deleteFilter: (item: GridFilterItem) => void; - hasLinkOperatorColumn?: boolean; - linkOperators?: (GridLinkOperator.And | GridLinkOperator.Or)[]; + linkOperators?: GridLinkOperator[]; columnsSort?: 'asc' | 'desc'; deleteIconContainerSx?: SxProps; linkOperatorContainerSx?: SxProps; @@ -63,7 +62,7 @@ const GridFilterFormRoot = styled('div', { padding: theme.spacing(1), })); -const getLinkOperatorLocaleKey = (linkOperator) => { +const getLinkOperatorLocaleKey = (linkOperator: GridLinkOperator) => { switch (linkOperator) { case GridLinkOperator.And: return 'filterPanelOperatorAnd'; @@ -81,6 +80,7 @@ const collator = new Intl.Collator(); function GridFilterForm(props: GridFilterFormProps) { const { item, + hasMultipleFilters, deleteFilter, applyFilterChanges, multiFilterOperator, @@ -88,7 +88,6 @@ function GridFilterForm(props: GridFilterFormProps) { disableMultiFilterOperator, applyMultiFilterOperatorChanges, focusElementRef, - hasLinkOperatorColumn, linkOperators = [GridLinkOperator.And, GridLinkOperator.Or], columnsSort, } = props; @@ -106,6 +105,8 @@ function GridFilterForm(props: GridFilterFormProps) { const valueRef = React.useRef(null); const filterSelectorRef = React.useRef(null); + const hasLinkOperatorColumn: boolean = hasMultipleFilters && linkOperators.length > 0; + const { className: baseFormControlClassName, ...baseFormControl } = rootProps.componentsProps?.baseFormControl || {}; diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx index 62349ea62e17f..bfd059855d642 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx @@ -120,7 +120,6 @@ function GridFilterPanel(props: GridFilterPanelProps) { applyMultiFilterOperatorChanges={applyFilterLinkOperator} focusElementRef={index === items.length - 1 ? lastFilterRef : null} linkOperators={linkOperators} - hasLinkOperatorColumn={hasMultipleFilters && linkOperators.length > 0} columnsSort={columnsSort} /> ))} From 2855ab6bcd640bb458a39b6016b9c3bdea2872c8 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 18 Jan 2022 10:24:38 +0100 Subject: [PATCH 10/32] update classes names --- .../filtering/CustomFilterPanelContent.js | 6 +++--- .../filtering/CustomFilterPanelContent.tsx | 14 +++++++------- .../panel/filterPanel/GridFilterForm.tsx | 12 ++++++------ 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js index 84824eb8c48bd..18b9db2949f55 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js @@ -52,12 +52,12 @@ export default function CustomFilterPanel() { linkOperators: [GridLinkOperator.And], columnsSort: 'asc', sx: { - '& .MuiDataGrid-filterForm': { p: 2 }, - '& .MuiDataGrid-filterForm:nth-child(even)': { + '& .MuiDataGrid-filterPanelFilterForm': { p: 2 }, + '& .MuiDataGrid-filterPanelFilterForm:nth-child(even)': { backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#444' : '#ddd', }, - '& .MuiDataGrid-closeIconController': { display: 'none' }, + '& .MuiDataGrid-filterPanelDeleteIcon': { display: 'none' }, '& .MuiDataGrid-linkOperatorController': { mr: 2 }, '& .MuiDataGrid-columnController': { mr: 2, width: 200 }, '& .MuiDataGrid-operatorController': { mr: 5 }, diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx index 84824eb8c48bd..10e4f2e3008e4 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx @@ -52,16 +52,16 @@ export default function CustomFilterPanel() { linkOperators: [GridLinkOperator.And], columnsSort: 'asc', sx: { - '& .MuiDataGrid-filterForm': { p: 2 }, - '& .MuiDataGrid-filterForm:nth-child(even)': { + '& .MuiDataGrid-filterPanelFilterForm': { p: 2 }, + '& .MuiDataGrid-filterPanelFilterForm:nth-child(even)': { backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#444' : '#ddd', }, - '& .MuiDataGrid-closeIconController': { display: 'none' }, - '& .MuiDataGrid-linkOperatorController': { mr: 2 }, - '& .MuiDataGrid-columnController': { mr: 2, width: 200 }, - '& .MuiDataGrid-operatorController': { mr: 5 }, - '& .MuiDataGrid-valueController': { width: 400 }, + '& .MuiDataGrid-filterPanelDeleteIcon': { display: 'none' }, + '& .MuiDataGrid-filterPanelLinkOperatorInput': { mr: 2 }, + '& .MuiDataGrid-filterPanelColumnInput': { mr: 2, width: 200 }, + '& .MuiDataGrid-filterPanelOperatorInput': { mr: 5 }, + '& .MuiDataGrid-filterPanelValueInput': { width: 400 }, }, }, }} diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index ea8f347a7bdbc..f1c895824a0aa 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -42,12 +42,12 @@ const useUtilityClasses = (ownerState: OwnerState) => { const { classes } = ownerState; const slots = { - root: ['filterForm'], - closeIcon: ['closeIconController'], - linkOperator: ['linkOperatorController'], - column: ['columnController'], - operator: ['operatorController'], - value: ['valueController'], + root: ['filterForm', 'filterPanelFilterForm'], + closeIcon: ['filterPanelDeleteIcon'], + linkOperator: ['filterPanelLinkOperatorInput'], + column: ['filterPanelColumnInput'], + operator: ['filterPanelOperatorInput'], + value: ['filterPanelValueInput'], }; return composeClasses(slots, getDataGridUtilityClass, classes); From d8c41ac825a8bfc78a0f9df193286d7cf7eff618 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 18 Jan 2022 12:02:33 +0100 Subject: [PATCH 11/32] pass props to filterForm FormeControl --- .../filtering/CustomFilterPanelContent.js | 23 +++++-- .../filtering/CustomFilterPanelContent.tsx | 17 ++++- .../panel/filterPanel/GridFilterForm.tsx | 69 +++++++++++++------ .../panel/filterPanel/GridFilterPanel.tsx | 11 +++ 4 files changed, 93 insertions(+), 27 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js index 18b9db2949f55..d5a7315604942 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js @@ -51,6 +51,21 @@ export default function CustomFilterPanel() { filterPanel: { linkOperators: [GridLinkOperator.And], columnsSort: 'asc', + filterFormProps: { + columnInputProps: { + variant: 'outlined', + size: 'small', + sx: { justifyContent: 'flex-end' }, + }, + operatorInputProps: { + variant: 'outlined', + size: 'small', + sx: { justifyContent: 'flex-end' }, + }, + valueInputProps: { + required: true, + }, + }, sx: { '& .MuiDataGrid-filterPanelFilterForm': { p: 2 }, '& .MuiDataGrid-filterPanelFilterForm:nth-child(even)': { @@ -58,10 +73,10 @@ export default function CustomFilterPanel() { theme.palette.mode === 'dark' ? '#444' : '#ddd', }, '& .MuiDataGrid-filterPanelDeleteIcon': { display: 'none' }, - '& .MuiDataGrid-linkOperatorController': { mr: 2 }, - '& .MuiDataGrid-columnController': { mr: 2, width: 200 }, - '& .MuiDataGrid-operatorController': { mr: 5 }, - '& .MuiDataGrid-valueController': { width: 400 }, + '& .MuiDataGrid-filterPanelLinkOperatorInput': { mr: 2 }, + '& .MuiDataGrid-filterPanelColumnInput': { mr: 2, width: 200 }, + '& .MuiDataGrid-filterPanelOperatorInput': { mr: 5 }, + '& .MuiDataGrid-filterPanelValueInput': { width: 300 }, }, }, }} diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx index 10e4f2e3008e4..d5a7315604942 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx @@ -51,6 +51,21 @@ export default function CustomFilterPanel() { filterPanel: { linkOperators: [GridLinkOperator.And], columnsSort: 'asc', + filterFormProps: { + columnInputProps: { + variant: 'outlined', + size: 'small', + sx: { justifyContent: 'flex-end' }, + }, + operatorInputProps: { + variant: 'outlined', + size: 'small', + sx: { justifyContent: 'flex-end' }, + }, + valueInputProps: { + required: true, + }, + }, sx: { '& .MuiDataGrid-filterPanelFilterForm': { p: 2 }, '& .MuiDataGrid-filterPanelFilterForm:nth-child(even)': { @@ -61,7 +76,7 @@ export default function CustomFilterPanel() { '& .MuiDataGrid-filterPanelLinkOperatorInput': { mr: 2 }, '& .MuiDataGrid-filterPanelColumnInput': { mr: 2, width: 200 }, '& .MuiDataGrid-filterPanelOperatorInput': { mr: 5 }, - '& .MuiDataGrid-filterPanelValueInput': { width: 400 }, + '& .MuiDataGrid-filterPanelValueInput': { width: 300 }, }, }, }} diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index f1c895824a0aa..49f7ae0230cfd 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton'; import InputLabel from '@mui/material/InputLabel'; import { SelectChangeEvent } from '@mui/material/Select'; import { capitalize, unstable_useId as useId } from '@mui/material/utils'; -import { styled, SxProps, Theme } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; import clsx from 'clsx'; import { filterableGridColumnsSelector } from '../../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../../hooks/utils/useGridSelector'; @@ -29,11 +29,11 @@ export interface GridFilterFormProps { deleteFilter: (item: GridFilterItem) => void; linkOperators?: GridLinkOperator[]; columnsSort?: 'asc' | 'desc'; - deleteIconContainerSx?: SxProps; - linkOperatorContainerSx?: SxProps; - columnContainerSx?: SxProps; - operatorContainerSx?: SxProps; - valueContainerSx?: SxProps; + deleteIconProps?: any; + linkOperatorInputProps?: any; + operatorInputProps?: any; + columnInputProps?: any; + valueInputProps?: any; } type OwnerState = { classes: DataGridProcessedProps['classes'] }; @@ -90,6 +90,11 @@ function GridFilterForm(props: GridFilterFormProps) { focusElementRef, linkOperators = [GridLinkOperator.And, GridLinkOperator.Or], columnsSort, + deleteIconProps, + linkOperatorInputProps, + operatorInputProps, + columnInputProps, + valueInputProps, } = props; const apiRef = useGridApiContext(); const filterableColumns = useGridSelector(apiRef, filterableGridColumnsSelector); @@ -107,8 +112,7 @@ function GridFilterForm(props: GridFilterFormProps) { const hasLinkOperatorColumn: boolean = hasMultipleFilters && linkOperators.length > 0; - const { className: baseFormControlClassName, ...baseFormControl } = - rootProps.componentsProps?.baseFormControl || {}; + const baseFormControlProps = rootProps.componentsProps?.baseFormControl || {}; const sortedFilterableColumns = React.useMemo(() => { switch (columnsSort) { @@ -225,9 +229,16 @@ function GridFilterForm(props: GridFilterFormProps) { {apiRef.current.getLocaleText('filterPanelOperators')} @@ -269,9 +282,13 @@ function GridFilterForm(props: GridFilterFormProps) { {apiRef.current.getLocaleText('filterPanelColumns')} @@ -293,9 +310,13 @@ function GridFilterForm(props: GridFilterFormProps) { {apiRef.current.getLocaleText('filterPanelOperators')} @@ -321,9 +342,13 @@ function GridFilterForm(props: GridFilterFormProps) { {currentOperator?.InputComponent ? ( { sx?: SxProps; + filterFormProps: Pick< + GridFilterFormProps, + | 'columnsSort' + | 'deleteIconProps' + | 'linkOperatorInputProps' + | 'operatorInputProps' + | 'columnInputProps' + | 'valueInputProps' + >; } function GridFilterPanel(props: GridFilterPanelProps) { @@ -29,6 +38,7 @@ function GridFilterPanel(props: GridFilterPanelProps) { linkOperators = [GridLinkOperator.And, GridLinkOperator.Or], columnsSort, sx = {}, + filterFormProps, } = props; const applyFilter = React.useCallback( @@ -121,6 +131,7 @@ function GridFilterPanel(props: GridFilterPanelProps) { focusElementRef={index === items.length - 1 ? lastFilterRef : null} linkOperators={linkOperators} columnsSort={columnsSort} + {...filterFormProps} /> ))} From 7d39cd8c290b12c3eb3b6ef299845d197e934147 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 18 Jan 2022 12:13:15 +0100 Subject: [PATCH 12/32] proptypes --- .../panel/filterPanel/GridFilterForm.tsx | 31 +++---------------- .../panel/filterPanel/GridFilterPanel.tsx | 8 +++++ 2 files changed, 13 insertions(+), 26 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 49f7ae0230cfd..8ab9432f06cdf 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -371,24 +371,15 @@ GridFilterForm.propTypes = { // ---------------------------------------------------------------------- applyFilterChanges: PropTypes.func.isRequired, applyMultiFilterOperatorChanges: PropTypes.func.isRequired, - columnContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), + columnInputProps: PropTypes.any, columnsSort: PropTypes.oneOf(['asc', 'desc']), deleteFilter: PropTypes.func.isRequired, - deleteIconContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), + deleteIconProps: PropTypes.any, disableMultiFilterOperator: PropTypes.bool, focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.func, PropTypes.object, ]), - hasLinkOperatorColumn: PropTypes.bool, hasMultipleFilters: PropTypes.bool.isRequired, item: PropTypes.shape({ columnField: PropTypes.string.isRequired, @@ -396,24 +387,12 @@ GridFilterForm.propTypes = { operatorValue: PropTypes.string, value: PropTypes.any, }).isRequired, - linkOperatorContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), + linkOperatorInputProps: PropTypes.any, linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired), multiFilterOperator: PropTypes.oneOf(['and', 'or']), - operatorContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), + operatorInputProps: PropTypes.any, showMultiFilterOperators: PropTypes.bool, - valueContainerSx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), + valueInputProps: PropTypes.any, } as any; export { GridFilterForm }; diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx index 61df3130d5392..2b101bfae87d5 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx @@ -157,6 +157,14 @@ GridFilterPanel.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- columnsSort: PropTypes.oneOf(['asc', 'desc']), + filterFormProps: PropTypes.shape({ + columnInputProps: PropTypes.any, + columnsSort: PropTypes.oneOf(['asc', 'desc']), + deleteIconProps: PropTypes.any, + linkOperatorInputProps: PropTypes.any, + operatorInputProps: PropTypes.any, + valueInputProps: PropTypes.any, + }).isRequired, linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired), sx: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), From 15630d7295ca870764a8e185d2d1f4390f154115 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 18 Jan 2022 12:53:11 +0100 Subject: [PATCH 13/32] remove required --- .../grid/components/panel/filterPanel/GridFilterPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx index 2b101bfae87d5..58f81ce5a0f62 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx @@ -16,7 +16,7 @@ import { filterableGridColumnsSelector } from '../../../hooks/features/columns/g export interface GridFilterPanelProps extends Pick { sx?: SxProps; - filterFormProps: Pick< + filterFormProps?: Pick< GridFilterFormProps, | 'columnsSort' | 'deleteIconProps' @@ -164,7 +164,7 @@ GridFilterPanel.propTypes = { linkOperatorInputProps: PropTypes.any, operatorInputProps: PropTypes.any, valueInputProps: PropTypes.any, - }).isRequired, + }), linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired), sx: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), From 87e656a65f7fb1d6f60c25e9ba8108a993fc818c Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 18 Jan 2022 13:54:08 +0100 Subject: [PATCH 14/32] update doc explainations --- .../filtering/CustomFilterPanelContent.js | 4 ++++ .../filtering/CustomFilterPanelContent.tsx | 4 ++++ .../data-grid/filtering/filtering.md | 20 ++++++++++++------- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js index d5a7315604942..c9b2bb5f6a92c 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js @@ -49,9 +49,12 @@ export default function CustomFilterPanel() { }} componentsProps={{ filterPanel: { + // Force to use "And" operator linkOperators: [GridLinkOperator.And], + // Display columns by ascending alphabetical order columnsSort: 'asc', filterFormProps: { + // Customize inputs by passing props columnInputProps: { variant: 'outlined', size: 'small', @@ -67,6 +70,7 @@ export default function CustomFilterPanel() { }, }, sx: { + // Customize inputs using css selectors '& .MuiDataGrid-filterPanelFilterForm': { p: 2 }, '& .MuiDataGrid-filterPanelFilterForm:nth-child(even)': { backgroundColor: (theme) => diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx index d5a7315604942..c9b2bb5f6a92c 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx @@ -49,9 +49,12 @@ export default function CustomFilterPanel() { }} componentsProps={{ filterPanel: { + // Force to use "And" operator linkOperators: [GridLinkOperator.And], + // Display columns by ascending alphabetical order columnsSort: 'asc', filterFormProps: { + // Customize inputs by passing props columnInputProps: { variant: 'outlined', size: 'small', @@ -67,6 +70,7 @@ export default function CustomFilterPanel() { }, }, sx: { + // Customize inputs using css selectors '& .MuiDataGrid-filterPanelFilterForm': { p: 2 }, '& .MuiDataGrid-filterPanelFilterForm:nth-child(even)': { backgroundColor: (theme) => diff --git a/docs/src/pages/components/data-grid/filtering/filtering.md b/docs/src/pages/components/data-grid/filtering/filtering.md index f762e65109901..94630870667a2 100644 --- a/docs/src/pages/components/data-grid/filtering/filtering.md +++ b/docs/src/pages/components/data-grid/filtering/filtering.md @@ -235,13 +235,19 @@ You can customize the rendering of the filter panel as shown in [the component s The customization of the filter panel content can be performed by passing props to the default `` component. The props available allow to override: -- The available `linkOperators` -- The order of the column selector -- The style of the controller for each input - -In this example, the filter panel is customized such that the column selector is sorted by ascending order. -The link operator is fixed to `"And"`. -The components style has been [overridden](/customization/how-to-customize/#overriding-nested-component-styles) to not display the delete icon, all the components are expanded, and the background color changes between filters. +- The available `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`) +- The order of the column selector (can be `"asc"` or `"desc"`) +- Any prop of the input components + +Input components can be [customized](/customization/how-to-customize/) by using two approaches. You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel. More details are available in the demo. + +| Props | Class | +| :----------------------- | :----------------------------------------- | +| `deleteIconProps` | `MuiDataGrid-filterPanelDeleteIcon` | +| `linkOperatorInputProps` | `MuiDataGrid-filterPanelLinkOperatorInput` | +| `columnInputProps` | `MuiDataGrid-filterPanelColumnInput` | +| `operatorInputProps` | `MuiDataGrid-filterPanelOperatorInput` | +| `valueInputProps` | `MuiDataGrid-filterPanelValueInput` | {{"demo": "pages/components/data-grid/filtering/CustomFilterPanelContent.js", "bg": "inline"}} From 3d7b052f5c0cf85ce8055f994d6331a09970cbf1 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 26 Jan 2022 11:41:04 +0100 Subject: [PATCH 15/32] update styling --- .../filtering/CustomFilterPanelContent.js | 14 +- .../filtering/CustomFilterPanelContent.tsx | 14 +- .../panel/filterPanel/GridFilterForm.tsx | 151 ++++++++++++------ 3 files changed, 114 insertions(+), 65 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js index c9b2bb5f6a92c..69a6736a47e29 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js @@ -71,16 +71,16 @@ export default function CustomFilterPanel() { }, sx: { // Customize inputs using css selectors - '& .MuiDataGrid-filterPanelFilterForm': { p: 2 }, - '& .MuiDataGrid-filterPanelFilterForm:nth-child(even)': { + '& .MuiDataGrid-filterForm': { p: 2 }, + '& .MuiDataGrid-filterForm:nth-child(even)': { backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#444' : '#ddd', }, - '& .MuiDataGrid-filterPanelDeleteIcon': { display: 'none' }, - '& .MuiDataGrid-filterPanelLinkOperatorInput': { mr: 2 }, - '& .MuiDataGrid-filterPanelColumnInput': { mr: 2, width: 200 }, - '& .MuiDataGrid-filterPanelOperatorInput': { mr: 5 }, - '& .MuiDataGrid-filterPanelValueInput': { width: 300 }, + '& .MuiDataGrid-filterFormDeleteIcon': { display: 'none' }, + '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, + '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 200 }, + '& .MuiDataGrid-filterFormOperatorInput': { mr: 5 }, + '& .MuiDataGrid-filterFormValueInput': { width: 300 }, }, }, }} diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx index c9b2bb5f6a92c..69a6736a47e29 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx @@ -71,16 +71,16 @@ export default function CustomFilterPanel() { }, sx: { // Customize inputs using css selectors - '& .MuiDataGrid-filterPanelFilterForm': { p: 2 }, - '& .MuiDataGrid-filterPanelFilterForm:nth-child(even)': { + '& .MuiDataGrid-filterForm': { p: 2 }, + '& .MuiDataGrid-filterForm:nth-child(even)': { backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#444' : '#ddd', }, - '& .MuiDataGrid-filterPanelDeleteIcon': { display: 'none' }, - '& .MuiDataGrid-filterPanelLinkOperatorInput': { mr: 2 }, - '& .MuiDataGrid-filterPanelColumnInput': { mr: 2, width: 200 }, - '& .MuiDataGrid-filterPanelOperatorInput': { mr: 5 }, - '& .MuiDataGrid-filterPanelValueInput': { width: 300 }, + '& .MuiDataGrid-filterFormDeleteIcon': { display: 'none' }, + '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, + '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 200 }, + '& .MuiDataGrid-filterFormOperatorInput': { mr: 5 }, + '& .MuiDataGrid-filterFormValueInput': { width: 300 }, }, }, }} diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 8ab9432f06cdf..1c1a0ae0e1d7a 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -42,12 +42,12 @@ const useUtilityClasses = (ownerState: OwnerState) => { const { classes } = ownerState; const slots = { - root: ['filterForm', 'filterPanelFilterForm'], - closeIcon: ['filterPanelDeleteIcon'], - linkOperator: ['filterPanelLinkOperatorInput'], - column: ['filterPanelColumnInput'], - operator: ['filterPanelOperatorInput'], - value: ['filterPanelValueInput'], + root: ['filterForm'], + deleteIcon: ['filterFormDeleteIcon'], + linkOperator: ['filterFormLinkOperatorInput'], + column: ['filterFormColumnInput'], + operator: ['filterFormOperatorInput'], + value: ['filterFormValueInput'], }; return composeClasses(slots, getDataGridUtilityClass, classes); @@ -90,11 +90,11 @@ function GridFilterForm(props: GridFilterFormProps) { focusElementRef, linkOperators = [GridLinkOperator.And, GridLinkOperator.Or], columnsSort, - deleteIconProps, - linkOperatorInputProps, - operatorInputProps, - columnInputProps, - valueInputProps, + deleteIconProps = {}, + linkOperatorInputProps = {}, + operatorInputProps = {}, + columnInputProps = {}, + valueInputProps = {}, } = props; const apiRef = useGridApiContext(); const filterableColumns = useGridSelector(apiRef, filterableGridColumnsSelector); @@ -225,20 +225,75 @@ function GridFilterForm(props: GridFilterFormProps) { [currentOperator], ); + const FilterFormDeleteIcon = React.useMemo( + () => + styled(rootProps.components.BaseFormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormDeleteIcon', + overridesResolver: (props, styles) => styles.filterFormDeleteIcon, + })({ + flexShrink: 0, + justifyContent: 'flex-end', + marginRight: 0.5, + marginBottom: 0.2, + }), + [rootProps.components.BaseFormControl], + ); + + const FilterFormLinkOperatorInput = React.useMemo( + () => + styled(rootProps.components.BaseFormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormLinkOperatorInput', + overridesResolver: (props, styles) => styles.filterFormLinkOperatorInput, + })({ + minWidth: 60, + display: hasLinkOperatorColumn ? 'block' : 'none', + visibility: showMultiFilterOperators ? 'visible' : 'hidden', + }), + [rootProps.components.BaseFormControl, hasLinkOperatorColumn, showMultiFilterOperators], + ); + + const FilterFormColumnInput = React.useMemo( + () => + styled(rootProps.components.BaseFormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormColumnInput', + overridesResolver: (props, styles) => styles.filterFormColumnInput, + })({ width: 150 }), + [rootProps.components.BaseFormControl], + ); + const FilterFormOperatorInput = React.useMemo( + () => + styled(rootProps.components.BaseFormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormOperatorInput', + overridesResolver: (props, styles) => styles.filterFormOperatorInput, + })({ width: 120 }), + [rootProps.components.BaseFormControl], + ); + const FilterFormValueInput = React.useMemo( + () => + styled(rootProps.components.BaseFormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormValueInput', + overridesResolver: (props, styles) => styles.filterFormValueInput, + })({ width: 190 }), + [rootProps.components.BaseFormControl], + ); + return ( - - - + {apiRef.current.getLocaleText('filterPanelOperators')} @@ -279,16 +333,13 @@ function GridFilterForm(props: GridFilterFormProps) { ))} - - + {apiRef.current.getLocaleText('filterPanelColumns')} @@ -307,16 +358,17 @@ function GridFilterForm(props: GridFilterFormProps) { ))} - - + {apiRef.current.getLocaleText('filterPanelOperators')} @@ -339,16 +391,13 @@ function GridFilterForm(props: GridFilterFormProps) { ))} - - + {currentOperator?.InputComponent ? ( ) : null} - + ); } From 3936174729261be2b180edd4b9f1015133d90644 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 26 Jan 2022 11:41:24 +0100 Subject: [PATCH 16/32] update doc table --- .../data-grid/filtering/filtering.md | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/filtering.md b/docs/src/pages/components/data-grid/filtering/filtering.md index 00a34365aa47f..1463a97fb9582 100644 --- a/docs/src/pages/components/data-grid/filtering/filtering.md +++ b/docs/src/pages/components/data-grid/filtering/filtering.md @@ -235,7 +235,8 @@ In the demo below, the `rating` column only has the `<` and `>` operators. ### Edit an operator The value used by the operator to look for has to be entered by the user. -On most column types, a text field is used. However, a custom component can be rendered instead. +On most column types, a text field is used. +However, a custom component can be rendered instead. In the demo below, the `rating` column reuses the numeric operators but the rating component is used to enter the value of the filter. @@ -268,15 +269,17 @@ The props available allow to override: - The order of the column selector (can be `"asc"` or `"desc"`) - Any prop of the input components -Input components can be [customized](/customization/how-to-customize/) by using two approaches. You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel. More details are available in the demo. - -| Props | Class | -| :----------------------- | :----------------------------------------- | -| `deleteIconProps` | `MuiDataGrid-filterPanelDeleteIcon` | -| `linkOperatorInputProps` | `MuiDataGrid-filterPanelLinkOperatorInput` | -| `columnInputProps` | `MuiDataGrid-filterPanelColumnInput` | -| `operatorInputProps` | `MuiDataGrid-filterPanelOperatorInput` | -| `valueInputProps` | `MuiDataGrid-filterPanelValueInput` | +Input components can be [customized](/customization/how-to-customize/) by using two approaches. +You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel. +More details are available in the demo. + +| Props | Class | +| :----------------------- | :---------------------------------------- | +| `deleteIconProps` | `MuiDataGrid-filterFormDeleteIcon` | +| `linkOperatorInputProps` | `MuiDataGrid-filterFormLinkOperatorInput` | +| `columnInputProps` | `MuiDataGrid-filterFormColumnInput` | +| `operatorInputProps` | `MuiDataGrid-filterFormOperatorInput` | +| `valueInputProps` | `MuiDataGrid-filterFormValueInput` | {{"demo": "pages/components/data-grid/filtering/CustomFilterPanelContent.js", "bg": "inline"}} From 9d3e4faef09d8d08fdf5a025c87804beaa415c1a Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 26 Jan 2022 11:59:32 +0100 Subject: [PATCH 17/32] fix tests --- .../data-grid/filtering/CustomFilterPanelContent.js | 2 +- .../data-grid/filtering/CustomFilterPanelContent.tsx | 2 +- .../data-grid/filtering/CustomFilterPanelPosition.js | 2 +- .../data-grid/filtering/CustomFilterPanelPosition.tsx | 2 +- .../components/panel/filterPanel/GridFilterForm.tsx | 10 +++++----- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js index 69a6736a47e29..cc727ea158c8a 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js @@ -31,7 +31,7 @@ const initialState = { }, }; -export default function CustomFilterPanel() { +export default function CustomFilterPanelContent() { const { data } = useDemoData({ dataSet: 'Employee', visibleFields: VISIBLE_FIELDS, diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx index 69a6736a47e29..cc727ea158c8a 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx @@ -31,7 +31,7 @@ const initialState = { }, }; -export default function CustomFilterPanel() { +export default function CustomFilterPanelContent() { const { data } = useDemoData({ dataSet: 'Employee', visibleFields: VISIBLE_FIELDS, diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelPosition.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelPosition.js index 711e9d7ecbf15..3133baeee60c8 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelPosition.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelPosition.js @@ -19,7 +19,7 @@ CustomToolbar.propTypes = { setFilterButtonEl: PropTypes.func.isRequired, }; -export default function CustomFilterPanel() { +export default function CustomFilterPanelPosition() { const { data } = useDemoData({ dataSet: 'Employee', visibleFields: VISIBLE_FIELDS, diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelPosition.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelPosition.tsx index 49f4da816b859..2aea5193f421a 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelPosition.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelPosition.tsx @@ -16,7 +16,7 @@ const CustomToolbar: React.FunctionComponent<{ ); -export default function CustomFilterPanel() { +export default function CustomFilterPanelPosition() { const { data } = useDemoData({ dataSet: 'Employee', visibleFields: VISIBLE_FIELDS, diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 1c1a0ae0e1d7a..ab907ab349bef 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -230,7 +230,7 @@ function GridFilterForm(props: GridFilterFormProps) { styled(rootProps.components.BaseFormControl, { name: 'MuiDataGrid', slot: 'FilterFormDeleteIcon', - overridesResolver: (props, styles) => styles.filterFormDeleteIcon, + overridesResolver: (_, styles) => styles.filterFormDeleteIcon, })({ flexShrink: 0, justifyContent: 'flex-end', @@ -245,7 +245,7 @@ function GridFilterForm(props: GridFilterFormProps) { styled(rootProps.components.BaseFormControl, { name: 'MuiDataGrid', slot: 'FilterFormLinkOperatorInput', - overridesResolver: (props, styles) => styles.filterFormLinkOperatorInput, + overridesResolver: (_, styles) => styles.filterFormLinkOperatorInput, })({ minWidth: 60, display: hasLinkOperatorColumn ? 'block' : 'none', @@ -259,7 +259,7 @@ function GridFilterForm(props: GridFilterFormProps) { styled(rootProps.components.BaseFormControl, { name: 'MuiDataGrid', slot: 'FilterFormColumnInput', - overridesResolver: (props, styles) => styles.filterFormColumnInput, + overridesResolver: (_, styles) => styles.filterFormColumnInput, })({ width: 150 }), [rootProps.components.BaseFormControl], ); @@ -268,7 +268,7 @@ function GridFilterForm(props: GridFilterFormProps) { styled(rootProps.components.BaseFormControl, { name: 'MuiDataGrid', slot: 'FilterFormOperatorInput', - overridesResolver: (props, styles) => styles.filterFormOperatorInput, + overridesResolver: (_, styles) => styles.filterFormOperatorInput, })({ width: 120 }), [rootProps.components.BaseFormControl], ); @@ -277,7 +277,7 @@ function GridFilterForm(props: GridFilterFormProps) { styled(rootProps.components.BaseFormControl, { name: 'MuiDataGrid', slot: 'FilterFormValueInput', - overridesResolver: (props, styles) => styles.filterFormValueInput, + overridesResolver: (_, styles) => styles.filterFormValueInput, })({ width: 190 }), [rootProps.components.BaseFormControl], ); From 817022446c5389b3204567ee084227c4585377ab Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 26 Jan 2022 12:14:53 +0100 Subject: [PATCH 18/32] add classes --- packages/grid/_modules_/grid/gridClasses.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/grid/_modules_/grid/gridClasses.ts b/packages/grid/_modules_/grid/gridClasses.ts index 2e1611ec74f21..59af04de72fac 100644 --- a/packages/grid/_modules_/grid/gridClasses.ts +++ b/packages/grid/_modules_/grid/gridClasses.ts @@ -360,6 +360,11 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'editBooleanCell', 'editInputCell', 'filterForm', + 'filterFormDeleteIcon', + 'filterFormLinkOperatorInput', + 'filterFormColumnInput', + 'filterFormOperatorInput', + 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', From 7ff5e6ce5e50d9c16f55ccf479cff81b123e80c8 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 26 Jan 2022 12:15:05 +0100 Subject: [PATCH 19/32] match clesse properties with slot names --- .../panel/filterPanel/GridFilterForm.tsx | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index ab907ab349bef..95d22d0d14576 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -44,10 +44,10 @@ const useUtilityClasses = (ownerState: OwnerState) => { const slots = { root: ['filterForm'], deleteIcon: ['filterFormDeleteIcon'], - linkOperator: ['filterFormLinkOperatorInput'], - column: ['filterFormColumnInput'], - operator: ['filterFormOperatorInput'], - value: ['filterFormValueInput'], + linkOperatorInput: ['filterFormLinkOperatorInput'], + columnInput: ['filterFormColumnInput'], + operatorInput: ['filterFormOperatorInput'], + valueInput: ['filterFormValueInput'], }; return composeClasses(slots, getDataGridUtilityClass, classes); @@ -263,6 +263,7 @@ function GridFilterForm(props: GridFilterFormProps) { })({ width: 150 }), [rootProps.components.BaseFormControl], ); + const FilterFormOperatorInput = React.useMemo( () => styled(rootProps.components.BaseFormControl, { @@ -272,6 +273,7 @@ function GridFilterForm(props: GridFilterFormProps) { })({ width: 120 }), [rootProps.components.BaseFormControl], ); + const FilterFormValueInput = React.useMemo( () => styled(rootProps.components.BaseFormControl, { @@ -310,7 +312,7 @@ function GridFilterForm(props: GridFilterFormProps) { {...linkOperatorInputProps} sx={linkOperatorInputProps?.sx || {}} className={clsx( - classes.linkOperator, + classes.linkOperatorInput, baseFormControlProps.className, linkOperatorInputProps.className, )} @@ -339,7 +341,11 @@ function GridFilterForm(props: GridFilterFormProps) { {...baseFormControlProps} {...columnInputProps} sx={columnInputProps?.sx || {}} - className={clsx(classes.column, baseFormControlProps.className, columnInputProps.className)} + className={clsx( + classes.columnInput, + baseFormControlProps.className, + columnInputProps.className, + )} > {apiRef.current.getLocaleText('filterPanelColumns')} @@ -365,7 +371,7 @@ function GridFilterForm(props: GridFilterFormProps) { {...operatorInputProps} sx={operatorInputProps?.sx || {}} className={clsx( - classes.operator, + classes.operatorInput, baseFormControlProps.className, operatorInputProps.className, )} @@ -397,7 +403,11 @@ function GridFilterForm(props: GridFilterFormProps) { {...baseFormControlProps} {...valueInputProps} sx={valueInputProps?.sx || {}} - className={clsx(classes.value, baseFormControlProps.className, valueInputProps.className)} + className={clsx( + classes.valueInput, + baseFormControlProps.className, + valueInputProps.className, + )} > {currentOperator?.InputComponent ? ( Date: Wed, 26 Jan 2022 14:32:22 +0100 Subject: [PATCH 20/32] update CSS doc --- .../api-docs/data-grid/data-grid-pro.json | 5 +++++ docs/pages/api-docs/data-grid/data-grid.json | 5 +++++ .../api-docs/data-grid/data-grid-pro-pt.json | 20 +++++++++++++++++++ .../api-docs/data-grid/data-grid-pro-zh.json | 20 +++++++++++++++++++ .../api-docs/data-grid/data-grid-pro.json | 20 +++++++++++++++++++ .../api-docs/data-grid/data-grid-pt.json | 20 +++++++++++++++++++ .../api-docs/data-grid/data-grid-zh.json | 20 +++++++++++++++++++ .../api-docs/data-grid/data-grid.json | 20 +++++++++++++++++++ packages/grid/_modules_/grid/gridClasses.ts | 20 +++++++++++++++++++ 9 files changed, 150 insertions(+) diff --git a/docs/pages/api-docs/data-grid/data-grid-pro.json b/docs/pages/api-docs/data-grid/data-grid-pro.json index 1a8e84a4de255..ccf984933a2e5 100644 --- a/docs/pages/api-docs/data-grid/data-grid-pro.json +++ b/docs/pages/api-docs/data-grid/data-grid-pro.json @@ -317,6 +317,11 @@ "paper", "editBooleanCell", "filterForm", + "filterFormDeleteIcon", + "filterFormLinkOperatorInput", + "filterFormColumnInput", + "filterFormOperatorInput", + "filterFormValueInput", "editInputCell", "filterIcon", "footerContainer", diff --git a/docs/pages/api-docs/data-grid/data-grid.json b/docs/pages/api-docs/data-grid/data-grid.json index f435adaaed95e..bbb68ab700ea5 100644 --- a/docs/pages/api-docs/data-grid/data-grid.json +++ b/docs/pages/api-docs/data-grid/data-grid.json @@ -264,6 +264,11 @@ "paper", "editBooleanCell", "filterForm", + "filterFormDeleteIcon", + "filterFormLinkOperatorInput", + "filterFormColumnInput", + "filterFormOperatorInput", + "filterFormValueInput", "editInputCell", "filterIcon", "footerContainer", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json index 5b1e93763528f..591558e7a5d40 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json @@ -303,6 +303,26 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" }, + "filterFormDeleteIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the delete icon of the filter form component" + }, + "filterFormLinkOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the link operator inout of the filter form component" + }, + "filterFormColumnInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column input of the filter form component" + }, + "filterFormOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the operator input of the filter form component" + }, + "filterFormValueInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the value input of the filter form component" + }, "editInputCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json index 5b1e93763528f..591558e7a5d40 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json @@ -303,6 +303,26 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" }, + "filterFormDeleteIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the delete icon of the filter form component" + }, + "filterFormLinkOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the link operator inout of the filter form component" + }, + "filterFormColumnInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column input of the filter form component" + }, + "filterFormOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the operator input of the filter form component" + }, + "filterFormValueInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the value input of the filter form component" + }, "editInputCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 5b1e93763528f..591558e7a5d40 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -303,6 +303,26 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" }, + "filterFormDeleteIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the delete icon of the filter form component" + }, + "filterFormLinkOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the link operator inout of the filter form component" + }, + "filterFormColumnInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column input of the filter form component" + }, + "filterFormOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the operator input of the filter form component" + }, + "filterFormValueInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the value input of the filter form component" + }, "editInputCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json index 814ef2296b793..e35ac31619045 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pt.json @@ -274,6 +274,26 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" }, + "filterFormDeleteIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the delete icon of the filter form component" + }, + "filterFormLinkOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the link operator inout of the filter form component" + }, + "filterFormColumnInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column input of the filter form component" + }, + "filterFormOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the operator input of the filter form component" + }, + "filterFormValueInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the value input of the filter form component" + }, "editInputCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json index 814ef2296b793..e35ac31619045 100644 --- a/docs/translations/api-docs/data-grid/data-grid-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-zh.json @@ -274,6 +274,26 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" }, + "filterFormDeleteIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the delete icon of the filter form component" + }, + "filterFormLinkOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the link operator inout of the filter form component" + }, + "filterFormColumnInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column input of the filter form component" + }, + "filterFormOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the operator input of the filter form component" + }, + "filterFormValueInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the value input of the filter form component" + }, "editInputCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 814ef2296b793..e35ac31619045 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -274,6 +274,26 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" }, + "filterFormDeleteIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the delete icon of the filter form component" + }, + "filterFormLinkOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the link operator inout of the filter form component" + }, + "filterFormColumnInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column input of the filter form component" + }, + "filterFormOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the operator input of the filter form component" + }, + "filterFormValueInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the value input of the filter form component" + }, "editInputCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" diff --git a/packages/grid/_modules_/grid/gridClasses.ts b/packages/grid/_modules_/grid/gridClasses.ts index 59af04de72fac..5209be7b7a2b3 100644 --- a/packages/grid/_modules_/grid/gridClasses.ts +++ b/packages/grid/_modules_/grid/gridClasses.ts @@ -173,6 +173,26 @@ export interface GridClasses { * Styles applied to the root of the filter form component. */ filterForm: string; + /** + * Styles applied to the delete icon of the filter form component. + */ + filterFormDeleteIcon: string; + /** + * Styles applied to the link operator inout of the filter form component. + */ + filterFormLinkOperatorInput: string; + /** + * Styles applied to the column input of the filter form component. + */ + filterFormColumnInput: string; + /** + * Styles applied to the operator input of the filter form component. + */ + filterFormOperatorInput: string; + /** + * Styles applied to the value input of the filter form component. + */ + filterFormValueInput: string; /** * Styles applied to the root of the input component. */ From 808261ebaddb9f0f95b05e6f54f622de11a81152 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 1 Feb 2022 17:18:24 +0100 Subject: [PATCH 21/32] update doc example --- .../data-grid/filtering/CustomFilterPanelContent.js | 12 +++++++----- .../data-grid/filtering/CustomFilterPanelContent.tsx | 6 +++--- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js index cc727ea158c8a..edd16a5a66b11 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js @@ -58,12 +58,12 @@ export default function CustomFilterPanelContent() { columnInputProps: { variant: 'outlined', size: 'small', - sx: { justifyContent: 'flex-end' }, + sx: { mt: 'auto' }, }, operatorInputProps: { variant: 'outlined', size: 'small', - sx: { justifyContent: 'flex-end' }, + sx: { mt: 'auto' }, }, valueInputProps: { required: true, @@ -74,12 +74,14 @@ export default function CustomFilterPanelContent() { '& .MuiDataGrid-filterForm': { p: 2 }, '& .MuiDataGrid-filterForm:nth-child(even)': { backgroundColor: (theme) => - theme.palette.mode === 'dark' ? '#444' : '#ddd', + theme.palette.mode === 'dark' ? '#444' : '#f5f5f5', + }, + '& .MuiDataGrid-filterFormDeleteIcon': { + order: 1, }, - '& .MuiDataGrid-filterFormDeleteIcon': { display: 'none' }, '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 200 }, - '& .MuiDataGrid-filterFormOperatorInput': { mr: 5 }, + '& .MuiDataGrid-filterFormOperatorInput': { mr: 2 }, '& .MuiDataGrid-filterFormValueInput': { width: 300 }, }, }, diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx index cc727ea158c8a..362f2bf14e798 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx @@ -74,12 +74,12 @@ export default function CustomFilterPanelContent() { '& .MuiDataGrid-filterForm': { p: 2 }, '& .MuiDataGrid-filterForm:nth-child(even)': { backgroundColor: (theme) => - theme.palette.mode === 'dark' ? '#444' : '#ddd', + theme.palette.mode === 'dark' ? '#444' : '#f5f5f5', }, - '& .MuiDataGrid-filterFormDeleteIcon': { display: 'none' }, + '& .MuiDataGrid-filterFormDeleteIcon': { order: 1 }, '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 200 }, - '& .MuiDataGrid-filterFormOperatorInput': { mr: 5 }, + '& .MuiDataGrid-filterFormOperatorInput': { mr: 2 }, '& .MuiDataGrid-filterFormValueInput': { width: 300 }, }, }, From 00f7cd14c9dcad641887ae095b810b641b0dd855 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 1 Feb 2022 17:19:39 +0100 Subject: [PATCH 22/32] use styled without memo --- .../panel/filterPanel/GridFilterForm.tsx | 112 ++++++++---------- 1 file changed, 48 insertions(+), 64 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 95d22d0d14576..22d472d3948fb 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@mui/material'; import IconButton from '@mui/material/IconButton'; import InputLabel from '@mui/material/InputLabel'; +import FormControl from '@mui/material/FormControl'; import { SelectChangeEvent } from '@mui/material/Select'; import { capitalize, unstable_useId as useId } from '@mui/material/utils'; import { styled } from '@mui/material/styles'; @@ -62,6 +63,43 @@ const GridFilterFormRoot = styled('div', { padding: theme.spacing(1), })); +const FilterFormDeleteIcon = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormDeleteIcon', + overridesResolver: (_, styles) => styles.filterFormDeleteIcon, +})(({ theme }) => ({ + flexShrink: 0, + justifyContent: 'flex-end', + marginRight: theme.spacing(0.5), + marginBottom: theme.spacing(0.2), +})); + +const FilterFormLinkOperatorInput = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormLinkOperatorInput', + overridesResolver: (_, styles) => styles.filterFormLinkOperatorInput, +})({ + minWidth: 60, +}); + +const FilterFormColumnInput = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormColumnInput', + overridesResolver: (_, styles) => styles.filterFormColumnInput, +})({ width: 150 }); + +const FilterFormOperatorInput = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormOperatorInput', + overridesResolver: (_, styles) => styles.filterFormOperatorInput, +})({ width: 120 }); + +const FilterFormValueInput = styled(FormControl, { + name: 'MuiDataGrid', + slot: 'FilterFormValueInput', + overridesResolver: (_, styles) => styles.filterFormValueInput, +})({ width: 190 }); + const getLinkOperatorLocaleKey = (linkOperator: GridLinkOperator) => { switch (linkOperator) { case GridLinkOperator.And: @@ -225,72 +263,13 @@ function GridFilterForm(props: GridFilterFormProps) { [currentOperator], ); - const FilterFormDeleteIcon = React.useMemo( - () => - styled(rootProps.components.BaseFormControl, { - name: 'MuiDataGrid', - slot: 'FilterFormDeleteIcon', - overridesResolver: (_, styles) => styles.filterFormDeleteIcon, - })({ - flexShrink: 0, - justifyContent: 'flex-end', - marginRight: 0.5, - marginBottom: 0.2, - }), - [rootProps.components.BaseFormControl], - ); - - const FilterFormLinkOperatorInput = React.useMemo( - () => - styled(rootProps.components.BaseFormControl, { - name: 'MuiDataGrid', - slot: 'FilterFormLinkOperatorInput', - overridesResolver: (_, styles) => styles.filterFormLinkOperatorInput, - })({ - minWidth: 60, - display: hasLinkOperatorColumn ? 'block' : 'none', - visibility: showMultiFilterOperators ? 'visible' : 'hidden', - }), - [rootProps.components.BaseFormControl, hasLinkOperatorColumn, showMultiFilterOperators], - ); - - const FilterFormColumnInput = React.useMemo( - () => - styled(rootProps.components.BaseFormControl, { - name: 'MuiDataGrid', - slot: 'FilterFormColumnInput', - overridesResolver: (_, styles) => styles.filterFormColumnInput, - })({ width: 150 }), - [rootProps.components.BaseFormControl], - ); - - const FilterFormOperatorInput = React.useMemo( - () => - styled(rootProps.components.BaseFormControl, { - name: 'MuiDataGrid', - slot: 'FilterFormOperatorInput', - overridesResolver: (_, styles) => styles.filterFormOperatorInput, - })({ width: 120 }), - [rootProps.components.BaseFormControl], - ); - - const FilterFormValueInput = React.useMemo( - () => - styled(rootProps.components.BaseFormControl, { - name: 'MuiDataGrid', - slot: 'FilterFormValueInput', - overridesResolver: (_, styles) => styles.filterFormValueInput, - })({ width: 190 }), - [rootProps.components.BaseFormControl], - ); - return ( Date: Tue, 1 Feb 2022 17:19:53 +0100 Subject: [PATCH 23/32] add label for outlined input --- .../grid/components/panel/filterPanel/GridFilterForm.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 22d472d3948fb..8a5ff10659d63 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -337,6 +337,7 @@ function GridFilterForm(props: GridFilterFormProps) { Date: Wed, 2 Feb 2022 09:47:22 +0100 Subject: [PATCH 24/32] docs:typescript:formatted --- .../data-grid/filtering/CustomFilterPanelContent.js | 8 +++----- .../data-grid/filtering/CustomFilterPanelContent.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js index edd16a5a66b11..61e3280546e45 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js @@ -76,13 +76,11 @@ export default function CustomFilterPanelContent() { backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#444' : '#f5f5f5', }, - '& .MuiDataGrid-filterFormDeleteIcon': { - order: 1, - }, + '& .MuiDataGrid-filterFormDeleteIcon': { order: 1 }, '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, - '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 200 }, + '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 150 }, '& .MuiDataGrid-filterFormOperatorInput': { mr: 2 }, - '& .MuiDataGrid-filterFormValueInput': { width: 300 }, + '& .MuiDataGrid-filterFormValueInput': { width: 200 }, }, }, }} diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx index 362f2bf14e798..61e3280546e45 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx @@ -58,12 +58,12 @@ export default function CustomFilterPanelContent() { columnInputProps: { variant: 'outlined', size: 'small', - sx: { justifyContent: 'flex-end' }, + sx: { mt: 'auto' }, }, operatorInputProps: { variant: 'outlined', size: 'small', - sx: { justifyContent: 'flex-end' }, + sx: { mt: 'auto' }, }, valueInputProps: { required: true, @@ -78,9 +78,9 @@ export default function CustomFilterPanelContent() { }, '& .MuiDataGrid-filterFormDeleteIcon': { order: 1 }, '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, - '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 200 }, + '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 150 }, '& .MuiDataGrid-filterFormOperatorInput': { mr: 2 }, - '& .MuiDataGrid-filterFormValueInput': { width: 300 }, + '& .MuiDataGrid-filterFormValueInput': { width: 200 }, }, }, }} From 6c6d6a918b3a0c45b281a8976959816c561f0bd7 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 7 Feb 2022 10:01:17 +0100 Subject: [PATCH 25/32] Jose feedback --- .../data-grid/filtering/CustomFilterPanelContent.js | 6 +++++- .../data-grid/filtering/CustomFilterPanelContent.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js index 61e3280546e45..c02188e5232db 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js @@ -68,6 +68,11 @@ export default function CustomFilterPanelContent() { valueInputProps: { required: true, }, + deleteIconProps: { + sx: { + '& .MuiSvgIcon-root': { color: '#d32f2f' }, + }, + }, }, sx: { // Customize inputs using css selectors @@ -76,7 +81,6 @@ export default function CustomFilterPanelContent() { backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#444' : '#f5f5f5', }, - '& .MuiDataGrid-filterFormDeleteIcon': { order: 1 }, '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 150 }, '& .MuiDataGrid-filterFormOperatorInput': { mr: 2 }, diff --git a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx index 61e3280546e45..c02188e5232db 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx @@ -68,6 +68,11 @@ export default function CustomFilterPanelContent() { valueInputProps: { required: true, }, + deleteIconProps: { + sx: { + '& .MuiSvgIcon-root': { color: '#d32f2f' }, + }, + }, }, sx: { // Customize inputs using css selectors @@ -76,7 +81,6 @@ export default function CustomFilterPanelContent() { backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#444' : '#f5f5f5', }, - '& .MuiDataGrid-filterFormDeleteIcon': { order: 1 }, '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 150 }, '& .MuiDataGrid-filterFormOperatorInput': { mr: 2 }, From 84f4e167af1cdc3caa8228a9a7beab0f344c95d2 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 7 Feb 2022 11:15:10 +0100 Subject: [PATCH 26/32] mat feedbacks on typing --- .../_modules_/grid/components/panel/GridPanelWrapper.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx index 1f0d4cb716397..90c9044065884 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import TrapFocus from '@mui/material/Unstable_TrapFocus'; -import { styled, SxProps, Theme } from '@mui/material/styles'; +import { styled, Theme } from '@mui/material/styles'; +import { MUIStyledCommonProps } from '@mui/system'; import { unstable_composeClasses as composeClasses } from '@mui/material'; import { getDataGridUtilityClass } from '../../gridClasses'; import { DataGridProcessedProps } from '../../models/props/DataGridProps'; @@ -36,9 +37,8 @@ const GridPanelWrapperRoot = styled('div', { const isEnabled = () => true; interface GridPanelWrapperProps - extends React.PropsWithChildren> { - sx?: SxProps; -} + extends React.PropsWithChildren>, + MUIStyledCommonProps {} function GridPanelWrapper(props: GridPanelWrapperProps) { const { className, ...other } = props; From 29bd314ec5c1b8c3d04b59cae9a0a0415efcbea8 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 7 Feb 2022 11:15:21 +0100 Subject: [PATCH 27/32] language --- docs/src/pages/components/data-grid/filtering/filtering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/data-grid/filtering/filtering.md b/docs/src/pages/components/data-grid/filtering/filtering.md index 1463a97fb9582..da416875d5a80 100644 --- a/docs/src/pages/components/data-grid/filtering/filtering.md +++ b/docs/src/pages/components/data-grid/filtering/filtering.md @@ -263,7 +263,7 @@ You can customize the rendering of the filter panel as shown in [the component s ### Customize the filter panel content The customization of the filter panel content can be performed by passing props to the default `` component. -The props available allow to override: +The available props allow to override: - The available `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`) - The order of the column selector (can be `"asc"` or `"desc"`) From 6d5c487bf887bc66afcfc82ccb68448502d70c54 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 7 Feb 2022 11:19:41 +0100 Subject: [PATCH 28/32] yarn proptypes --- .../grid/components/panel/GridPanelWrapper.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx index 90c9044065884..fcbdb0b43a354 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx @@ -53,16 +53,4 @@ function GridPanelWrapper(props: GridPanelWrapperProps) { ); } -GridPanelWrapper.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), -} as any; - export { GridPanelWrapper }; From 72d2886fbb6b1a0e9112cd6b249022b8b8faaaec Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 7 Feb 2022 11:49:17 +0100 Subject: [PATCH 29/32] fix lint --- .../grid/_modules_/grid/components/panel/GridPanelWrapper.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx index fcbdb0b43a354..0882a8cd97e04 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import clsx from 'clsx'; import TrapFocus from '@mui/material/Unstable_TrapFocus'; import { styled, Theme } from '@mui/material/styles'; From 04a5331c9b34b24018cc130972c41c091f2cae26 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 8 Feb 2022 17:39:16 +0100 Subject: [PATCH 30/32] feedbacks --- docs/data/data-grid/filtering/filtering.md | 6 +++--- .../grid/components/panel/filterPanel/GridFilterForm.tsx | 1 + .../grid/components/panel/filterPanel/GridFilterPanel.tsx | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/data/data-grid/filtering/filtering.md b/docs/data/data-grid/filtering/filtering.md index f516f2cac5472..4c0c65b35f6b1 100644 --- a/docs/data/data-grid/filtering/filtering.md +++ b/docs/data/data-grid/filtering/filtering.md @@ -265,15 +265,15 @@ You can customize the rendering of the filter panel as shown in [the component s The customization of the filter panel content can be performed by passing props to the default `` component. The available props allow to override: -- The available `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`) +- The `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`) - The order of the column selector (can be `"asc"` or `"desc"`) - Any prop of the input components Input components can be [customized](/customization/how-to-customize/) by using two approaches. -You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel. +You can pass a `sx` prop to any input container or you can use CSS selectors on nested components of the filter panel. More details are available in the demo. -| Props | Class | +| Props | CSS class | | :----------------------- | :---------------------------------------- | | `deleteIconProps` | `MuiDataGrid-filterFormDeleteIcon` | | `linkOperatorInputProps` | `MuiDataGrid-filterFormLinkOperatorInput` | diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 8a5ff10659d63..2c6f43811538e 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -287,6 +287,7 @@ function GridFilterForm(props: GridFilterFormProps) { + {items.map((item, index) => ( Date: Tue, 8 Feb 2022 19:43:53 +0100 Subject: [PATCH 31/32] add files removed during migration --- .../filtering/CustomFilterPanelContent.js | 95 +++++++++++++++++++ .../filtering/CustomFilterPanelContent.tsx | 95 +++++++++++++++++++ 2 files changed, 190 insertions(+) create mode 100644 docs/data/data-grid/filtering/CustomFilterPanelContent.js create mode 100644 docs/data/data-grid/filtering/CustomFilterPanelContent.tsx diff --git a/docs/data/data-grid/filtering/CustomFilterPanelContent.js b/docs/data/data-grid/filtering/CustomFilterPanelContent.js new file mode 100644 index 0000000000000..c02188e5232db --- /dev/null +++ b/docs/data/data-grid/filtering/CustomFilterPanelContent.js @@ -0,0 +1,95 @@ +import * as React from 'react'; +import { DataGridPro, GridLinkOperator, GridToolbar } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; + +const initialState = { + filter: { + filterModel: { + items: [ + { + id: 1, + columnField: 'name', + operatorValue: 'contains', + value: 'D', + }, + { + id: 2, + columnField: 'name', + operatorValue: 'contains', + value: 'D', + }, + { + id: 3, + columnField: 'rating', + operatorValue: '>', + value: '0', + }, + ], + }, + }, +}; + +export default function CustomFilterPanelContent() { + const { data } = useDemoData({ + dataSet: 'Employee', + visibleFields: VISIBLE_FIELDS, + rowLength: 100, + }); + + return ( +
+ + theme.palette.mode === 'dark' ? '#444' : '#f5f5f5', + }, + '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, + '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 150 }, + '& .MuiDataGrid-filterFormOperatorInput': { mr: 2 }, + '& .MuiDataGrid-filterFormValueInput': { width: 200 }, + }, + }, + }} + initialState={initialState} + /> +
+ ); +} diff --git a/docs/data/data-grid/filtering/CustomFilterPanelContent.tsx b/docs/data/data-grid/filtering/CustomFilterPanelContent.tsx new file mode 100644 index 0000000000000..c02188e5232db --- /dev/null +++ b/docs/data/data-grid/filtering/CustomFilterPanelContent.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import { DataGridPro, GridLinkOperator, GridToolbar } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; + +const initialState = { + filter: { + filterModel: { + items: [ + { + id: 1, + columnField: 'name', + operatorValue: 'contains', + value: 'D', + }, + { + id: 2, + columnField: 'name', + operatorValue: 'contains', + value: 'D', + }, + { + id: 3, + columnField: 'rating', + operatorValue: '>', + value: '0', + }, + ], + }, + }, +}; + +export default function CustomFilterPanelContent() { + const { data } = useDemoData({ + dataSet: 'Employee', + visibleFields: VISIBLE_FIELDS, + rowLength: 100, + }); + + return ( +
+ + theme.palette.mode === 'dark' ? '#444' : '#f5f5f5', + }, + '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 }, + '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 150 }, + '& .MuiDataGrid-filterFormOperatorInput': { mr: 2 }, + '& .MuiDataGrid-filterFormValueInput': { width: 200 }, + }, + }, + }} + initialState={initialState} + /> +
+ ); +} From 3c8dbf78f1e8d3d3d98e2ae13aa1f37e984a13cc Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Thu, 10 Feb 2022 12:04:26 +0100 Subject: [PATCH 32/32] Fix demo migration --- docs/data/data-grid/filtering/filtering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/filtering/filtering.md b/docs/data/data-grid/filtering/filtering.md index c28d773017f8f..c64d3ee73aab8 100644 --- a/docs/data/data-grid/filtering/filtering.md +++ b/docs/data/data-grid/filtering/filtering.md @@ -283,7 +283,7 @@ More details are available in the demo. | `operatorInputProps` | `MuiDataGrid-filterFormOperatorInput` | | `valueInputProps` | `MuiDataGrid-filterFormValueInput` | -{{"demo": "pages/components/data-grid/filtering/CustomFilterPanelContent.js", "bg": "inline"}} +{{"demo": "CustomFilterPanelContent.js", "bg": "inline"}} ### Customize the filter panel position