From ecb3323ac7fca1c41ecf1e87f0e79acb48277d2e Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 2 Dec 2022 13:38:56 +0100 Subject: [PATCH] remove date parsing logic from date operators and use Date instead --- .../EditingWithDatePickers.tsx | 142 ++---------------- .../src/colDef/gridDateOperators.ts | 14 +- .../panel/filterPanel/GridFilterInputDate.tsx | 18 +-- 3 files changed, 25 insertions(+), 149 deletions(-) diff --git a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx index 3d796c2f10698..8a0b836efdb4a 100644 --- a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx @@ -7,10 +7,9 @@ import { GridRenderEditCellParams, GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF, - GridFilterItem, - GridCellParams, GridColTypeDef, GridFilterInputValueProps, + getGridDateOperators, } from '@mui/x-data-grid'; import { randomCreatedDate, @@ -28,133 +27,6 @@ import InputBase from '@mui/material/InputBase'; import locale from 'date-fns/locale/en-US'; import { styled } from '@mui/material/styles'; -function buildApplyDateFilterFn( - filterItem: GridFilterItem, - compareFn: (value1: number, value2: number) => boolean, - showTime: boolean = false, -) { - if (!filterItem.value) { - return null; - } - - const filterValueMs = filterItem.value.getTime(); - - return ({ value }: GridCellParams): boolean => { - if (!value) { - return false; - } - - // Make a copy of the date to not reset the hours in the original object - const dateCopy = new Date(value); - dateCopy.setHours( - showTime ? value.getHours() : 0, - showTime ? value.getMinutes() : 0, - 0, - 0, - ); - const cellValueMs = dateCopy.getTime(); - - return compareFn(cellValueMs, filterValueMs); - }; -} - -function getDateFilterOperators( - showTime: boolean = false, -): GridColTypeDef['filterOperators'] { - return [ - { - value: 'is', - getApplyFilterFn: (filterItem) => { - return buildApplyDateFilterFn( - filterItem, - (value1, value2) => value1 === value2, - showTime, - ); - }, - InputComponent: GridFilterDateInput, - InputComponentProps: { showTime }, - }, - { - value: 'not', - getApplyFilterFn: (filterItem) => { - return buildApplyDateFilterFn( - filterItem, - (value1, value2) => value1 !== value2, - showTime, - ); - }, - InputComponent: GridFilterDateInput, - InputComponentProps: { showTime }, - }, - { - value: 'after', - getApplyFilterFn: (filterItem) => { - return buildApplyDateFilterFn( - filterItem, - (value1, value2) => value1 > value2, - showTime, - ); - }, - InputComponent: GridFilterDateInput, - InputComponentProps: { showTime }, - }, - { - value: 'onOrAfter', - getApplyFilterFn: (filterItem) => { - return buildApplyDateFilterFn( - filterItem, - (value1, value2) => value1 >= value2, - showTime, - ); - }, - InputComponent: GridFilterDateInput, - InputComponentProps: { showTime }, - }, - { - value: 'before', - getApplyFilterFn: (filterItem) => { - return buildApplyDateFilterFn( - filterItem, - (value1, value2) => value1 < value2, - showTime, - ); - }, - InputComponent: GridFilterDateInput, - InputComponentProps: { showTime }, - }, - { - value: 'onOrBefore', - getApplyFilterFn: (filterItem) => { - return buildApplyDateFilterFn( - filterItem, - (value1, value2) => value1 <= value2, - showTime, - ); - }, - InputComponent: GridFilterDateInput, - InputComponentProps: { showTime }, - }, - { - value: 'isEmpty', - getApplyFilterFn: () => { - return ({ value }): boolean => { - return value == null; - }; - }, - requiresFilterValue: false, - }, - { - value: 'isNotEmpty', - getApplyFilterFn: () => { - return ({ value }): boolean => { - return value != null; - }; - }, - requiresFilterValue: false, - }, - ]; -} - const dateAdapter = new AdapterDateFns({ locale }); /** @@ -167,7 +39,11 @@ const dateColumnType: GridColTypeDef = { renderEditCell: (params) => { return ; }, - filterOperators: getDateFilterOperators(), + filterOperators: getGridDateOperators(false).map((item) => ({ + ...item, + InputComponent: GridFilterDateInput, + InputComponentProps: { showTime: false }, + })), valueFormatter: (params) => { if (typeof params.value === 'string') { return params.value; @@ -260,7 +136,11 @@ const dateTimeColumnType: GridColTypeDef = { renderEditCell: (params) => { return ; }, - filterOperators: getDateFilterOperators(true), + filterOperators: getGridDateOperators(true).map((item) => ({ + ...item, + InputComponent: GridFilterDateInput, + InputComponentProps: { showTime: true }, + })), valueFormatter: (params) => { if (typeof params.value === 'string') { return params.value; diff --git a/packages/grid/x-data-grid/src/colDef/gridDateOperators.ts b/packages/grid/x-data-grid/src/colDef/gridDateOperators.ts index a7c7c61853cf9..b22ca193aa186 100644 --- a/packages/grid/x-data-grid/src/colDef/gridDateOperators.ts +++ b/packages/grid/x-data-grid/src/colDef/gridDateOperators.ts @@ -3,9 +3,6 @@ import { GridFilterItem } from '../models/gridFilterItem'; import { GridFilterOperator } from '../models/gridFilterOperator'; import { GridCellParams } from '../models/params/gridCellParams'; -const dateRegex = /(\d+)-(\d+)-(\d+)/; -const dateTimeRegex = /(\d+)-(\d+)-(\d+)T(\d+):(\d+)/; - function buildApplyFilterFn( filterItem: GridFilterItem, compareFn: (value1: number, value2: number) => boolean, @@ -16,12 +13,11 @@ function buildApplyFilterFn( return null; } - const [year, month, day, hour, minute] = filterItem.value - .match(showTime ? dateTimeRegex : dateRegex)! - .slice(1) - .map(Number); - - const time = new Date(year, month - 1, day, hour || 0, minute || 0).getTime(); + const date = new Date(filterItem.value); + if (!showTime) { + date.setHours(0, 0, 0, 0); + } + const time = date.getTime(); return ({ value }: GridCellParams): boolean => { if (!value) { diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx index 2f531fcec57b8..710931c980598 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx @@ -20,15 +20,13 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { const rootProps = useGridRootProps(); const onFilterChange = React.useCallback( - (event: React.ChangeEvent) => { - const value = event.target.value; - + (event: React.ChangeEvent) => { clearTimeout(filterTimeout.current); - setFilterValueState(String(value)); + setFilterValueState(event.target.value); setIsApplying(true); filterTimeout.current = setTimeout(() => { - applyValue({ ...item, value }); + applyValue({ ...item, value: event.target.valueAsDate }); setIsApplying(false); }, SUBMIT_FILTER_DATE_STROKE_TIME); }, @@ -43,7 +41,11 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { React.useEffect(() => { const itemValue = item.value ?? ''; - setFilterValueState(String(itemValue)); + let value = ''; + if (itemValue instanceof Date) { + value = itemValue.toISOString().substring(0, 10); + } + setFilterValueState(value); }, [item.value]); return ( @@ -55,9 +57,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { onChange={onFilterChange} variant="standard" type={type || 'text'} - InputLabelProps={{ - shrink: true, - }} + InputLabelProps={{ shrink: true }} inputRef={focusElementRef} InputProps={{ ...(applying ? { endAdornment: } : {}),