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","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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"}