@quillsql/react 2.15.3 → 2.15.4

package/dist/esm/components/ReportBuilder/FilterModal.js

@@ -1,700 +0,0 @@
-/* eslint-disable no-unused-vars */
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from 'react';
-import { NumberOperator, DateOperator, StringOperator, FieldType, NullOperator, TimeUnit, InternalFilterType, BoolOperator, } from '../../models/Filter';
-import { QuillDateRangePicker } from '../../DateRangePicker/QuillDateRangePicker';
-import { format, isValid, parse, startOfToday } from 'date-fns';
-import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
-import { getType } from '../../utils/filterProcessing';
-/**
- * Modal for adding, editing, and deleting Filters
- */
-export default function FilterModal({ schema, tables, filter, fieldValuesMap, fieldValuesMapIsLoading, customOperatorOptions, hideTableName, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, reportBuilderColumns, }) {
-    const [field, setField] = useState('');
-    const [fieldOptions, setFieldOptions] = useState([]);
-    const [fieldValues, setFieldValues] = useState([]);
-    const [type, setType] = useState(null);
-    const [value, setValue] = useState(undefined);
-    const [selectedOptions, setSelectedOptions] = useState([]);
-    const [operator, setOperator] = useState(undefined);
-    const [operatorOptions, setOperatorOptions] = useState([]);
-    const [unit, setUnit] = useState('');
-    const [unitOptions, setUnitOptions] = useState([]);
-    const [startDate, setStartDate] = useState(startOfToday().toISOString().substring(0, 10));
-    const [endDate, setEndDate] = useState(startOfToday().toISOString().substring(0, 10));
-    const [filterInitialized, setFilterInitialized] = useState(false);
-    const [table, setTable] = useState(undefined);
-    const memoizedFieldValuesMap = useMemo(() => fieldValuesMap, [JSON.stringify(fieldValuesMap)]);
-    const memoizedFilter = useMemo(() => filter, [JSON.stringify(filter)]);
-    useEffect(() => {
-        if (!filter) {
-            onFieldChange(field, fieldOptions, table);
-        }
-    }, [memoizedFieldValuesMap]);
-    // Define all supported operator options for each field type
-    const allOperatorOptions = {
-        [FieldType.Number]: [
-            NumberOperator.EqualTo,
-            NumberOperator.NotEqualTo,
-            NumberOperator.GreaterThan,
-            NumberOperator.LessThan,
-            NumberOperator.GreaterThanOrEqualTo,
-            NumberOperator.LessThanOrEqualTo,
-            NullOperator.IsNotNull,
-            NullOperator.IsNull,
-        ],
-        [FieldType.Date]: [
-            DateOperator.Custom,
-            DateOperator.InTheLast,
-            DateOperator.InThePrevious,
-            DateOperator.InTheCurrent,
-            DateOperator.GreaterThan,
-            DateOperator.LessThan,
-            DateOperator.GreaterThanOrEqualTo,
-            DateOperator.LessThanOrEqualTo,
-            NullOperator.IsNotNull,
-            NullOperator.IsNull,
-        ],
-        [FieldType.String]: [
-            StringOperator.IsExactly,
-            StringOperator.IsNotExactly,
-            StringOperator.Contains,
-            StringOperator.Is,
-            StringOperator.IsNot,
-            NullOperator.IsNotNull,
-            NullOperator.IsNull,
-        ],
-        [FieldType.Boolean]: [
-            BoolOperator.EqualTo,
-            BoolOperator.NotEqualTo,
-            NullOperator.IsNotNull,
-            NullOperator.IsNull,
-        ],
-        [FieldType.Null]: [NullOperator.IsNotNull, NullOperator.IsNull],
-    };
-    // Effect hook to initialize or update fieldValues based on selected field
-    useEffect(() => {
-        if (filter) {
-            setField(filter.field);
-            setTable(filter.table);
-            onFieldChange(filter.field, fieldOptions, filter.table);
-            setType(filter.fieldType);
-            onTypeChange(filter.fieldType);
-            setValue(filter.filterType === 'date-filter' ? filter.value.value : filter.value);
-            setOperator(filter.operator);
-            onOperatorChange(filter.operator);
-            setUnit(filter.filterType === 'date-filter' ? filter.value.unit : '');
-            setStartDate(filter.value?.startDate
-                ? filter.value.startDate.substring(0, 10)
-                : startOfToday().toISOString().substring(0, 10));
-            setEndDate(filter.value?.endDate
-                ? filter.value.endDate.substring(0, 10)
-                : startOfToday().toISOString().substring(0, 10));
-            if (filter.filterType === 'string-in-filter') {
-                setSelectedOptions(filter.value.map((val) => {
-                    return { label: val, value: val };
-                }));
-            }
-        }
-    }, [memoizedFilter]);
-    // Given the schema, set the options for the field
-    useEffect(() => {
-        if (schema) {
-            const fo = schema.flatMap((table) => {
-                if (tables && !tables.includes(table.name)) {
-                    return [];
-                }
-                return table.columns.map((column) => {
-                    return {
-                        name: column.field,
-                        type: column.fieldType,
-                        table: table.name,
-                    };
-                });
-            });
-            setFieldOptions(fo);
-            if (!filter && fo.length > 0 && fo[0]) {
-                setField(fo[0].name);
-                onFieldChange(fo[0].name, fo, fo[0].table);
-            }
-            else {
-                onFieldChange(field !== '' ? field : (filter?.field ?? ''), fo, table ?? filter?.table);
-            }
-        }
-    }, [schema]);
-    function onTypeChange(type) {
-        if (type) {
-            const options = customOperatorOptions?.[type] ?? allOperatorOptions[type];
-            if (options) {
-                setOperatorOptions(options);
-                if (filterInitialized || !filter) {
-                    switch (type) {
-                        case 'string':
-                            setOperator(StringOperator.Is);
-                            onOperatorChange(StringOperator.Is);
-                            setValue('');
-                            break;
-                        case 'date':
-                            setOperator(DateOperator.InTheLast);
-                            onOperatorChange(DateOperator.InTheLast);
-                            setValue('90');
-                            break;
-                        case 'number':
-                            setOperator(NumberOperator.EqualTo);
-                            onOperatorChange(NumberOperator.EqualTo);
-                            setValue('0');
-                            break;
-                        case 'boolean':
-                            setOperator(BoolOperator.EqualTo);
-                            onOperatorChange(BoolOperator.EqualTo);
-                            setValue(true);
-                            break;
-                        case 'null':
-                            setOperator(NullOperator.IsNotNull);
-                            onOperatorChange(NullOperator.IsNotNull);
-                            setValue('');
-                            break;
-                    }
-                }
-                else if (filter) {
-                    setFilterInitialized(true);
-                }
-            }
-        }
-        else {
-            setOperatorOptions([]);
-            setOperator('');
-            onOperatorChange('');
-        }
-    }
-    function onOperatorChange(operator) {
-        if (operator === '' || operator === undefined) {
-            setValue('');
-            return;
-        }
-        if (typeof value !== 'string' &&
-            typeof value !== 'number' &&
-            typeof value !== 'boolean' &&
-            operator !== DateOperator.Custom &&
-            (filterInitialized || !filter)) {
-            setValue('');
-        }
-        else if (type === FieldType.Date &&
-            [
-                DateOperator.GreaterThan,
-                DateOperator.GreaterThanOrEqualTo,
-                DateOperator.EqualTo,
-                DateOperator.LessThan,
-                DateOperator.LessThanOrEqualTo,
-                DateOperator.NotEqualTo,
-            ].includes(operator) &&
-            !isValid(parse(value, 'yyyy-mm-dd', new Date())) &&
-            (filterInitialized || !filter)) {
-            setValue(startOfToday().toISOString().substring(0, 10));
-        }
-        else if (type === FieldType.Date &&
-            [
-                DateOperator.InTheLast,
-                DateOperator.InTheCurrent,
-                DateOperator.InThePrevious,
-            ].includes(operator) &&
-            (value === '' || (typeof value !== 'number' && isNaN(Number(value)))) &&
-            (filterInitialized || !filter)) {
-            setValue('90');
-        }
-        const options = getUnits(operator);
-        setUnitOptions(options);
-        if (unit === '' && options.length > 0) {
-            setUnit(TimeUnit.Day);
-        }
-        else if (!options || !options.includes(unit)) {
-            setUnit('');
-        }
-    }
-    function onFieldChange(field, fieldOptions, table) {
-        if (field !== '') {
-            const selectedOption = fieldOptions.find((option) => option.name === field && (!table || option.table === table));
-            if (selectedOption) {
-                const fieldValues = getFieldValues(selectedOption.name, selectedOption.table);
-                if (filterInitialized || !filter) {
-                    if (!selectedOptions.every((item) => fieldValues
-                        .map((v) => v.toLowerCase())
-                        .includes(item.value.toLowerCase()))) {
-                        setSelectedOptions([]);
-                    }
-                }
-                else {
-                    const preSelected = Array.isArray(filter.value)
-                        ? filter.value.map((val) => {
-                            return { label: val, value: val };
-                        })
-                        : [];
-                    // if a filter comes with invalid choices, include them anyway
-                    const valuesSet = new Set(fieldValues.map((v) => v.toLowerCase()));
-                    preSelected.forEach((option) => {
-                        if (!valuesSet.has(option.value.toLowerCase())) {
-                            valuesSet.add(option.value.toLowerCase());
-                            fieldValues.push(option.value);
-                        }
-                    });
-                }
-                setFieldValues(fieldValues);
-                setType(getType(selectedOption.type));
-                onTypeChange(getType(selectedOption.type));
-                if (selectedOption.table !== '') {
-                    setTable(selectedOption.table);
-                }
-            }
-        }
-        else {
-            setType(null);
-            onTypeChange(null);
-            setFieldValues([]);
-            setSelectedOptions([]);
-        }
-    }
-    // Function that returns the list of units used for certain DateOperators
-    const getUnits = (operator) => {
-        switch (operator) {
-            case DateOperator.InTheLast:
-            case DateOperator.InThePrevious:
-                return [
-                    TimeUnit.Year,
-                    TimeUnit.Month,
-                    TimeUnit.Week,
-                    TimeUnit.Day,
-                    TimeUnit.Hour,
-                ];
-            case DateOperator.InTheCurrent:
-                return [
-                    TimeUnit.Year,
-                    TimeUnit.Quarter,
-                    TimeUnit.Month,
-                    TimeUnit.Week,
-                    TimeUnit.Day,
-                    TimeUnit.Hour,
-                ];
-            default:
-                return [];
-        }
-    };
-    // Get the unique values available to a field
-    const getFieldValues = (field, table) => {
-        if (table !== '' &&
-            typeof fieldValuesMap[table] === 'object' &&
-            !Array.isArray(fieldValuesMap[table])) {
-            const tableMap = fieldValuesMap[table];
-            return tableMap[field] ?? [];
-        }
-        else if (typeof fieldValuesMap === 'object' &&
-            !Array.isArray(fieldValuesMap)) {
-            return fieldValuesMap[field] ?? [];
-        }
-        else {
-            return [];
-        }
-    };
-    // Handler for operator selection change
-    const handleOperatorChange = (event) => {
-        const newOp = event.target.value;
-        if (typeof newOp === 'string') {
-            setOperator(newOp);
-            onOperatorChange(newOp);
-        }
-    };
-    const handleFieldChange = (event) => {
-        const value = event.target.value;
-        if (typeof value === 'string') {
-            const [_table, _field] = value.split(':');
-            const newField = _field;
-            const newTable = _table !== '' ? _table : undefined;
-            setField(newField);
-            onFieldChange(newField, fieldOptions, newTable);
-        }
-    };
-    // Handler for date range selection
-    const handleDateRangeSelect = (date) => {
-        if (date) {
-            if (date.from) {
-                setStartDate(date.from.toISOString().substring(0, 10));
-            }
-            if (date.to) {
-                setEndDate(date.to.toISOString().substring(0, 10));
-            }
-        }
-        setOperator(DateOperator.Custom);
-        onOperatorChange(DateOperator.Custom);
-    };
-    // Handler for form submission
-    const handleSubmit = () => {
-        if (!field || field === '') {
-            alert('Please specify field');
-            return;
-        }
-        if (!operator || operator === '') {
-            alert('Please specify operator');
-            return;
-        }
-        // Handle different filter types and submit the filter
-        switch (type) {
-            case FieldType.Date:
-                switch (operator) {
-                    case DateOperator.InTheLast:
-                    case DateOperator.InThePrevious:
-                        if (value === undefined ||
-                            value === '' ||
-                            (typeof value !== 'number' && isNaN(Number(value)))) {
-                            alert('Please specify a valid number');
-                            return;
-                        }
-                        if (!getUnits(operator).includes(unit)) {
-                            alert('Please specify a valid unit');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.DateFilter,
-                            fieldType: FieldType.Date,
-                            operator: operator,
-                            value: { value: value, unit: unit },
-                            table,
-                        });
-                        break;
-                    case DateOperator.InTheCurrent:
-                        if (!getUnits(operator).includes(unit)) {
-                            alert('Please specify a valid unit');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.DateFilter,
-                            fieldType: FieldType.Date,
-                            operator: operator,
-                            value: { value: 0, unit: unit },
-                            table,
-                        });
-                        break;
-                    case DateOperator.Custom:
-                        if (!startDate || !endDate) {
-                            alert('Please specify a valid date range');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.DateCustomFilter,
-                            fieldType: FieldType.Date,
-                            operator: operator,
-                            value: { startDate, endDate },
-                            table,
-                        });
-                        break;
-                    case DateOperator.EqualTo:
-                    case DateOperator.NotEqualTo:
-                    case DateOperator.GreaterThan:
-                    case DateOperator.LessThan:
-                    case DateOperator.GreaterThanOrEqualTo:
-                    case DateOperator.LessThanOrEqualTo: {
-                        const parsedDate = parse(value, 'yyyy-mm-dd', new Date());
-                        if (!isValid(parsedDate)) {
-                            alert('Please specify a valid date in yyyy-mm-dd');
-                            return;
-                        }
-                        const normalizedDate = format(parsedDate, 'yyyy-mm-dd');
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.DateComparisonFilter,
-                            fieldType: FieldType.Date,
-                            operator: operator,
-                            value: normalizedDate,
-                            table,
-                        });
-                        break;
-                    }
-                    case NullOperator.IsNotNull:
-                    case NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.NullFilter,
-                            fieldType: FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                }
-                break;
-            case FieldType.String:
-                switch (operator) {
-                    case StringOperator.Is:
-                    case StringOperator.IsNot:
-                        if (!selectedOptions || selectedOptions.length === 0) {
-                            alert('Please specify some values');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.StringInFilter,
-                            fieldType: FieldType.String,
-                            operator: operator,
-                            value: selectedOptions.map((val) => val.label),
-                            table,
-                        });
-                        break;
-                    case NullOperator.IsNotNull:
-                    case NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.NullFilter,
-                            fieldType: FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                    default:
-                        if (typeof value !== 'string' || value === '') {
-                            alert('Please specify a valid string');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.StringFilter,
-                            fieldType: FieldType.String,
-                            operator: operator,
-                            value,
-                            table,
-                        });
-                }
-                break;
-            case FieldType.Number:
-                switch (operator) {
-                    case NullOperator.IsNotNull:
-                    case NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.NullFilter,
-                            fieldType: FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                    default:
-                        if (value === undefined ||
-                            value === '' ||
-                            (typeof value !== 'number' && isNaN(Number(value)))) {
-                            alert('Please specify a valid number');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.NumericFilter,
-                            fieldType: FieldType.Number,
-                            operator: operator,
-                            value,
-                            table,
-                        });
-                }
-                break;
-            case FieldType.Boolean:
-                switch (operator) {
-                    case NullOperator.IsNotNull:
-                    case NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.NullFilter,
-                            fieldType: FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                    case BoolOperator.EqualTo:
-                    case BoolOperator.NotEqualTo:
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.BooleanFilter,
-                            fieldType: FieldType.Boolean,
-                            operator: operator,
-                            value: value,
-                            table,
-                        });
-                        break;
-                }
-                break;
-            case FieldType.Null:
-                switch (operator) {
-                    case NullOperator.IsNotNull:
-                    case NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: InternalFilterType.NullFilter,
-                            fieldType: FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                }
-                break;
-            default:
-                alert('Error parsing filter');
-        }
-    };
-    // Handler filter delete
-    const handleDelete = () => {
-        onDeleteFilter();
-    };
-    const filterColumnLabel = (option) => {
-        if (reportBuilderColumns) {
-            const column = reportBuilderColumns.find((col) => col.field === option.name && (col.table || '') === option.table);
-            if (column && column.alias) {
-                return snakeAndCamelCaseToTitleCase(column.alias);
-            }
-        }
-        return option.table !== '' && !hideTableName
-            ? `${snakeAndCamelCaseToTitleCase(option.name)} (${option.table})`
-            : snakeAndCamelCaseToTitleCase(option.name);
-    };
-    if (filter && !filterInitialized) {
-        return null; // prevent flashing
-    }
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 12,
-        }, children: [_jsx("div", { style: {
-                    display: 'flex',
-                    gap: '12px',
-                    flexDirection: 'column',
-                    width: '100%',
-                    padding: '6px 0px',
-                }, children: _jsxs("div", { style: {
-                        display: 'flex',
-                        gap: '20px',
-                        flexDirection: 'row',
-                        width: '100%',
-                    }, children: [_jsx("div", { style: { display: 'flex', gap: 20 }, children: _jsx(SelectComponent, { value: `${table ?? ''}:${field}`, width: 200, onChange: handleFieldChange, options: [
-                                    ...fieldOptions.map((option) => ({
-                                        value: `${option.table}:${option.name}`,
-                                        label: filterColumnLabel(option),
-                                    })),
-                                ] }) }), operatorOptions.length > 0 && (_jsx("div", { style: { display: 'flex', gap: 20 }, children: _jsx(SelectComponent, { value: operator, width: 200, onChange: handleOperatorChange, options: [
-                                    ...operatorOptions.map((operator) => ({
-                                        value: operator,
-                                        label: operator === StringOperator.Is ||
-                                            operator === StringOperator.IsNot
-                                            ? `${operator} one of`
-                                            : operator,
-                                    })),
-                                ] }) })), (() => {
-                            switch (operator) {
-                                case BoolOperator.EqualTo:
-                                case BoolOperator.NotEqualTo:
-                                case StringOperator.IsExactly:
-                                case StringOperator.IsNotExactly:
-                                case StringOperator.Contains:
-                                case NumberOperator.EqualTo:
-                                case NumberOperator.NotEqualTo:
-                                case NumberOperator.GreaterThan:
-                                case NumberOperator.LessThan:
-                                case NumberOperator.GreaterThanOrEqualTo:
-                                case NumberOperator.LessThanOrEqualTo:
-                                    if (type === 'boolean') {
-                                        return (_jsx("div", { style: { display: 'flex', gap: 20 }, children: _jsx(SelectComponent, { value: value, width: 200, onChange: (event) => setValue(event.target.value), options: [
-                                                    { value: true, label: 'true' },
-                                                    { value: false, label: 'false' },
-                                                ] }) }));
-                                    }
-                                    else {
-                                        return (_jsx("div", { style: { display: 'flex', gap: 20 }, children: _jsx(TextInputComponent, { value: value, width: 120, onChange: (event) => {
-                                                    setValue(event.target.value);
-                                                } }) }));
-                                    }
-                                case StringOperator.Is:
-                                case StringOperator.IsNot:
-                                    return (_jsx("div", { style: { display: 'flex', gap: 20 }, children: _jsx(MultiSelectComponent, { options: fieldValues.length > 0 &&
-                                                fieldValues[0] !== 'EXCEEDS_LIMIT'
-                                                ? fieldValues.map((v) => {
-                                                    return { value: v.toLowerCase(), label: v };
-                                                })
-                                                : fieldValues.length > 0
-                                                    ? [
-                                                        {
-                                                            value: 'EXCEEDS_LIMIT',
-                                                            label: 'Exceeds Limit',
-                                                        },
-                                                    ]
-                                                    : [], isLoading: fieldValuesMapIsLoading, width: 200, value: selectedOptions.map((val) => val.value.toLowerCase()), onChange: (e) => {
-                                                if (e.target.value === '' ||
-                                                    (Array.isArray(e.target.value) &&
-                                                        e.target.value.length === 0)) {
-                                                    setSelectedOptions([]);
-                                                    return;
-                                                }
-                                                let parsedValue = e.target.value;
-                                                if (typeof e.target.value === 'string') {
-                                                    parsedValue = e.target.value.split(',');
-                                                }
-                                                const jsonValue = parsedValue.map((val) => {
-                                                    return {
-                                                        value: val,
-                                                        label: fieldValues.find((v) => v.toLowerCase() === val.toLowerCase()) ?? val,
-                                                    };
-                                                });
-                                                setSelectedOptions(jsonValue);
-                                            } }) }));
-                                case DateOperator.Custom:
-                                    return (_jsx("div", { style: { display: 'flex', gap: 20 }, children: _jsx(QuillDateRangePicker, { dateRange: {
-                                                startDate: startDate
-                                                    ? new Date(startDate + 'T00:00:00')
-                                                    : startOfToday(),
-                                                endDate: endDate
-                                                    ? new Date(endDate + 'T00:00:00')
-                                                    : startOfToday(),
-                                            }, preset: "", presetOptions: [], onChangePreset: () => { }, hidePreset: true, onChangeDateRange: (value) => {
-                                                handleDateRangeSelect({
-                                                    from: value.startDate,
-                                                    to: value.endDate,
-                                                });
-                                            } }) }));
-                                case DateOperator.InTheLast:
-                                case DateOperator.InThePrevious:
-                                    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row' }, children: [_jsx(TextInputComponent, { value: value, width: 120, onChange: (event) => {
-                                                    setValue(event.target.value);
-                                                } }), unitOptions.length > 0 && (_jsx("div", { style: { marginLeft: '10px' }, children: _jsx(SelectComponent, { value: unit, width: 200, onChange: (event) => setUnit(event.target.value), options: [
-                                                        // { value: 'Select', label: 'Select' },
-                                                        ...unitOptions.map((unit) => ({
-                                                            value: unit,
-                                                            label: `${unit}${value && value !== '1' && value !== 1 ? 's' : ''}`,
-                                                        })),
-                                                    ] }) }))] }));
-                                case DateOperator.InTheCurrent:
-                                    return (_jsx("div", { style: { display: 'flex', gap: 20 }, children: unitOptions.length > 0 && (_jsx(SelectComponent, { value: unit, width: 200, onChange: (event) => setUnit(event.target.value), options: [
-                                                // { value: 'Select', label: 'Select' },
-                                                ...unitOptions.map((unit) => ({
-                                                    value: unit,
-                                                    label: `${unit}${operator !== DateOperator.InTheCurrent &&
-                                                        value &&
-                                                        value !== '1' &&
-                                                        value !== 1
-                                                        ? 's'
-                                                        : ''}`,
-                                                })),
-                                            ] })) }));
-                                default:
-                                    return _jsx(_Fragment, {});
-                            }
-                        })()] }) }), _jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: 'flex-end',
-                }, children: filter ? (_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'end',
-                        gap: 8,
-                        width: '100%',
-                    }, children: [SecondaryButtonComponent ? (_jsx(SecondaryButtonComponent, { onClick: handleDelete, label: 'Delete' })) : (_jsx(ButtonComponent, { onClick: handleDelete, label: 'Delete' })), _jsx(ButtonComponent, { onClick: handleSubmit, label: 'Save' })] })) : (operator && (_jsx(ButtonComponent, { onClick: handleSubmit, label: 'Add Filter' }))) })] }));
-}