koval-ui/dist/src/lib/DataTable/dialogs/FilterDialog.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"FilterDialog.cjs","sources":["../../../../../src/lib/DataTable/dialogs/FilterDialog.tsx"],"sourcesContent":["import type {ComponentProps, FC, ChangeEvent} from 'react';\nimport {useMemo, useState, useCallback, useEffect, memo} from 'react';\nimport type {ColumnFiltersState, Table} from '@tanstack/react-table';\n\nimport {Dialog, useDialogState} from '@/lib/Dialog';\nimport {FormField} from '@/lib/FormField';\nimport {Select} from '@/lib/Select';\nimport {IconFilter, IconFilterOff, IconColumns} from '@/internal/Icons';\n\nimport classes from './Dialog.module.css';\nimport type {TableRow, FilterValue} from './../types.ts';\nimport {ColumnTypes} from './../types.ts';\nimport {NumberRangeField} from './NumberRangeField.tsx';\nimport {DateRangeField} from './DateRangeField.tsx';\nimport {TextField} from './TextField.tsx';\n\nexport type FilterConfig = {filter: FilterValue | string; column?: string};\n\nexport type Props = {\n    id: string;\n    columnsList?: string[];\n    onApplyFiler: (filter: FilterConfig) => void;\n    columnFilters: ColumnFiltersState;\n    tableContext: Table<TableRow>;\n};\n\nconst fieldMapping = {\n    [ColumnTypes.text]: TextField,\n    [ColumnTypes.currency]: NumberRangeField,\n    [ColumnTypes.decimal]: NumberRangeField,\n    [ColumnTypes.unit]: NumberRangeField,\n    [ColumnTypes.percentage]: NumberRangeField,\n    [ColumnTypes.select]: TextField,\n    [ColumnTypes.date]: DateRangeField,\n};\n\nexport const FilterDialog: FC<Props> = memo(({id, onApplyFiler, columnFilters, tableContext}) => {\n    const {dialogParams, closeDialog} = useDialogState(id);\n\n    const columnsConfig = useMemo(\n        () =>\n            tableContext\n                .getAllColumns()\n                .map(column => {\n                    return {\n                        id: column.id,\n                        name: column.columnDef.meta?.name as string,\n                        type: column.columnDef.meta?.type as keyof typeof ColumnTypes,\n                        filterable: column?.getCanFilter(),\n                    };\n                })\n                .filter(({filterable}) => filterable),\n        [tableContext]\n    );\n\n    const [selectedColumn, setSelectedColumn] = useState(\n        dialogParams?.columnId as string | undefined\n    );\n\n    useEffect(() => {\n        dialogParams?.columnId && setSelectedColumn(dialogParams?.columnId as string);\n    }, [dialogParams?.columnId]);\n\n    const handleColumnSelect = useCallback((event: ChangeEvent<HTMLSelectElement>) => {\n        setSelectedColumn(event.target.value);\n    }, []);\n\n    const [selectedType, setSelectedType] = useState<keyof typeof ColumnTypes>(ColumnTypes.text);\n\n    useEffect(() => {\n        const nextType =\n            columnsConfig.find(({id}) => id === selectedColumn)?.type ||\n            (ColumnTypes.text as keyof typeof ColumnTypes);\n        setSelectedType(nextType);\n    }, [columnsConfig, selectedColumn, setSelectedType]);\n\n    const FilterField = useMemo(\n        () => selectedColumn && tableContext.getColumn(selectedColumn)?.columnDef.meta?.filterInput,\n        [selectedColumn, tableContext]\n    );\n\n    const InputField = useMemo(\n        () => FilterField || fieldMapping[selectedType],\n        [FilterField, selectedType]\n    );\n\n    const tableFilterValue = useMemo(() => {\n        const columnFilter = columnFilters.find(({id}) => id === selectedColumn);\n        return columnFilter?.value !== undefined ? (columnFilter?.value as FilterValue) : '';\n    }, [columnFilters, selectedColumn]);\n\n    const [filterValue, setFilterValue] = useState(tableFilterValue);\n\n    useEffect(() => {\n        setFilterValue('');\n    }, [selectedColumn]);\n\n    const hasFilter = Array.isArray(filterValue)\n        ? filterValue.every(value => Boolean(value))\n        : Boolean(filterValue);\n\n    useEffect(() => {\n        setFilterValue(tableFilterValue);\n    }, [tableFilterValue]);\n\n    const handleFilterChange = useCallback((value: string | FilterValue) => {\n        setFilterValue(value);\n    }, []);\n\n    const handleApplyFilter = useCallback(() => {\n        onApplyFiler({column: selectedColumn, filter: filterValue});\n        closeDialog();\n    }, [closeDialog, filterValue, onApplyFiler, selectedColumn]);\n\n    const handleResetFilter = useCallback(() => {\n        onApplyFiler({column: selectedColumn, filter: ''});\n        closeDialog();\n    }, [closeDialog, onApplyFiler, selectedColumn]);\n\n    const actions = useMemo<ComponentProps<typeof Dialog>['actions']>(\n        () => [\n            [\n                {title: 'Reset filter', onClick: handleResetFilter, icon: IconFilterOff},\n                {\n                    title: 'Apply filter',\n                    icon: IconFilter,\n                    onClick: handleApplyFilter,\n                    type: 'success' as const,\n                    disabled: !hasFilter,\n                },\n            ] as const,\n        ],\n        [handleApplyFilter, handleResetFilter, hasFilter]\n    );\n\n    const cellProps = useMemo(() => {\n        return typeof selectedColumn === 'string'\n            ? tableContext.getColumn(selectedColumn)?.columnDef.meta?.cellProps\n            : {};\n    }, [selectedColumn, tableContext]);\n\n    return (\n        <Dialog\n            animation=\"scale-in\"\n            showCloseButton={false}\n            dialogTitle=\"Filter column\"\n            id={id}\n            className={classes.dialog}\n            actions={actions}>\n            <div className={classes.fieldset}>\n                <FormField className={classes.field} label=\"Column:\">\n                    <Select\n                        prefix={IconColumns}\n                        value={selectedColumn}\n                        onChange={handleColumnSelect}>\n                        {columnsConfig.map(({id, name}) => (\n                            <option key={id} value={id}>\n                                {name}\n                            </option>\n                        ))}\n                    </Select>\n                </FormField>\n                {/*                <FormField className={classes.field} label=\"Operator:\">\n                    <Select onChange={handleOperatorSelect}>\n                        <option value=\"includes\">Includes</option>\n                        <option value=\"equals\">Equals</option>\n                    </Select>\n                </FormField>*/}\n                <InputField\n                    value={filterValue}\n                    onChange={handleFilterChange}\n                    cellProps={cellProps}\n                />\n            </div>\n        </Dialog>\n    );\n});\n\nFilterDialog.displayName = 'FilterDialog';\n"],"names":["fieldMapping","ColumnTypes","TextField","NumberRangeField","DateRangeField","FilterDialog","memo","id","onApplyFiler","columnFilters","tableContext","dialogParams","closeDialog","useDialogState","columnsConfig","useMemo","column","_a","_b","filterable","selectedColumn","setSelectedColumn","useState","useEffect","handleColumnSelect","useCallback","event","selectedType","setSelectedType","nextType","FilterField","InputField","tableFilterValue","columnFilter","filterValue","setFilterValue","hasFilter","value","handleFilterChange","handleApplyFilter","handleResetFilter","actions","IconFilterOff","IconFilter","cellProps","jsx","Dialog","classes","jsxs","FormField","Select","IconColumns","name"],"mappings":"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"}