inovua / reactdatagrid

Empower Your Data with the best React Data Grid there is
https://reactdatagrid.io
Other
3.45k stars 57 forks source link

Can't clear filter when customized #390

Open GTLSlb opened 8 months ago

GTLSlb commented 8 months ago

Relevant code or config

const dateOnlyFilter = {
        type: "dateOnly",
        operators: [
            {
                name: "eq",
                fn: ({ value, filterValue }) => {
                    const dateValue = new Date(value);
                    const filterDateValue = new Date(filterValue);
                    const isSameDate =
                        dateValue.getDate() === filterDateValue.getDate() &&
                        dateValue.getMonth() === filterDateValue.getMonth() &&
                        dateValue.getFullYear() ===
                            filterDateValue.getFullYear();
                    if (!filterValue) {
                        return true;
                    }
                    return isSameDate;
                },
            },
            {
                name: "neq",
                fn: ({ value, filterValue }) => {
                    const dateValue = new Date(value);
                    const filterDateValue = new Date(filterValue);
                    if (!filterValue) {
                        return true;
                    }
                    return !(
                        dateValue.getDate() === filterDateValue.getDate() &&
                        dateValue.getMonth() === filterDateValue.getMonth() &&
                        dateValue.getFullYear() ===
                            filterDateValue.getFullYear()
                    );
                },
            },
            {
                name: "gt",
                fn: ({ value, filterValue }) => {
                    const dateValue = new Date(value).setHours(0, 0, 0, 0);
                    const filterDateValue = new Date(filterValue).setHours(
                        0,
                        0,
                        0,
                        0
                    );
                    if (!filterValue) {
                        return true;
                    }
                    return dateValue > filterDateValue;
                },
            },
            {
                name: "lt",
                fn: ({ value, filterValue }) => {
                    const dateValue = new Date(value).setHours(0, 0, 0, 0);
                    const filterDateValue = new Date(filterValue).setHours(
                        0,
                        0,
                        0,
                        0
                    );
                    if (!filterValue) {
                        return true;
                    }
                    return dateValue < filterDateValue;
                },
            },
            {
                name: "inrange",
                fn: ({ value, filterValue }) => {
                    console.log(filterValue);
                    if (!filterValue || typeof filterValue !== 'object' || !filterValue?.start || !filterValue?.end) {
                        return false; // Invalid filter value format
                    }
                    const dateValue = new Date(value).setHours(0, 0, 0, 0);
                    const startDate = new Date(filterValue?.start).setHours(0, 0, 0, 0);
                    const endDate = new Date(filterValue?.end).setHours(0, 0, 0, 0);
                    return dateValue >= startDate && dateValue <= endDate;
                },
            },
            {
                name: "notinrange",
                fn: ({ value, filterValue }) => {            
                    if (!filterValue || typeof filterValue !== 'object' || !filterValue?.start || !filterValue?.end) {
                        return true;
                    }
                    const dateValue = new Date(value).setHours(0, 0, 0, 0);
                    const startDate = new Date(filterValue?.start).setHours(0, 0, 0, 0);
                    const endDate = new Date(filterValue?.end).setHours(0, 0, 0, 0);
                    return dateValue < startDate || dateValue > endDate;
                },
            }
            // Add other operators if needed
        ],
    };

I created a new date filter called dateOnly, it's job is to filter based on date only not on date and time What happened:

The problem is when I select the inrange filter type, and then clear the filter the website goes to a white screen and this error shows in the console

image