koval-ui/dist/src/lib/DataTable/tableFeatures/useTableColumns.cjs.map

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

{"version":3,"file":"useTableColumns.cjs","sources":["../../../../../src/lib/DataTable/tableFeatures/useTableColumns.tsx"],"sourcesContent":["import type {DisplayColumnDef, AccessorColumnDef, FilterFnOption} from '@tanstack/react-table';\nimport type {FC} from 'react';\nimport {type ComponentProps, useEffect, useMemo, useState} from 'react';\n\nimport {CellWrapper} from './../cells/CellWrapper.tsx';\nimport {ColumnHeaderCell} from './../cells/ColumnHeaderCell.tsx';\nimport {ColumnFooterCell} from './../cells/ColumnFooterCell.tsx';\nimport {ColumnTypes, CustomFilterFns, FilterModes, SortingModes} from './../types.ts';\nimport type {Column, TableRow, TableValue, TableData} from './../types.ts';\nimport {rowSelection} from './../columns/rowSelection.tsx';\nimport {ViewTextCell} from './../cells/ViewTextCell.tsx';\nimport {ViewDecimalCell} from './../cells/ViewDecimalCell.tsx';\nimport {ViewUnitCell} from './../cells/ViewUnitCell.tsx';\nimport {ViewDateCell} from './../cells/ViewDateCell.tsx';\nimport {ViewCurrencyCell} from './../cells/ViewCurrencyCell.tsx';\nimport {ViewPercentageCell} from './../cells/ViewPercentageCell.tsx';\nimport type {EditDialog} from './../dialogs/EditDialog.tsx';\n\nconst normalizeValue = (value: TableRow | TableValue): TableValue => {\n    if (typeof value === 'string' || typeof value === 'number') {\n        return value;\n    }\n    return value?.toString();\n};\n\nconst cellMapping = {\n    [ColumnTypes.text]: ViewTextCell,\n    [ColumnTypes.unit]: ViewUnitCell,\n    [ColumnTypes.date]: ViewDateCell,\n    [ColumnTypes.decimal]: ViewDecimalCell,\n    [ColumnTypes.currency]: ViewCurrencyCell,\n    [ColumnTypes.percentage]: ViewPercentageCell,\n    [ColumnTypes.select]: undefined,\n};\n\nconst sortMapping = {\n    [ColumnTypes.text]: SortingModes.text,\n    [ColumnTypes.decimal]: SortingModes.basic,\n    [ColumnTypes.currency]: SortingModes.basic,\n    [ColumnTypes.percentage]: SortingModes.basic,\n    [ColumnTypes.unit]: SortingModes.basic,\n    [ColumnTypes.date]: SortingModes.basic,\n    [ColumnTypes.select]: undefined,\n};\n\nconst normalizeSortingFn = (\n    columnType: keyof typeof ColumnTypes,\n    sortingFnProp?: Column['sortingFn']\n) => {\n    if (sortingFnProp !== undefined) {\n        return sortingFnProp;\n    }\n\n    return sortMapping[columnType];\n};\n\nconst filterMapping = {\n    [ColumnTypes.text]: FilterModes.includesString,\n    [ColumnTypes.decimal]: FilterModes.inNumberRange,\n    [ColumnTypes.currency]: FilterModes.inNumberRange,\n    [ColumnTypes.percentage]: CustomFilterFns.isInPercentRange,\n    [ColumnTypes.unit]: FilterModes.inNumberRange,\n    [ColumnTypes.date]: CustomFilterFns.isInDateRange,\n    [ColumnTypes.select]: undefined,\n};\n\nconst normalizeFilterFn = (\n    columnType: keyof typeof ColumnTypes,\n    filterFnProp?: FilterFnOption<TableData> | keyof typeof CustomFilterFns\n) => {\n    if (filterFnProp !== undefined) {\n        return filterFnProp;\n    }\n\n    return filterMapping[columnType];\n};\n\nexport type Props = {\n    columnsProp: Column[];\n    selectable?: boolean;\n};\n\nconst normalizeProp = <TColumn,>(hasSelectableColumn: boolean, columns: TColumn[]) => {\n    return hasSelectableColumn ? [rowSelection, ...columns] : columns;\n};\n\nexport const useTableColumns = ({columnsProp = [], selectable}: Props) => {\n    const initialColumns = useMemo(() => {\n        return normalizeProp(Boolean(selectable), [\n            ...columnsProp.map(\n                ({\n                    id,\n                    size = 166,\n                    name,\n                    accessorKey,\n                    accessorFn,\n                    editable = true,\n                    filterable = true,\n                    sortable = true,\n                    pinnable = true,\n                    columnCell,\n                    sortingFn: sortingFnProp,\n                    cellProps = {},\n                    columnType = ColumnTypes.text,\n                    filterFn: filterFnProp,\n                    headerCell,\n                    footerCell,\n                    filterInput,\n                }) => {\n                    const CellComponent =\n                        columnCell !== undefined ? columnCell : (cellMapping[columnType] as FC);\n                    const HeaderComponent =\n                        headerCell !== undefined ? headerCell : ColumnHeaderCell;\n                    const FooterComponent =\n                        footerCell !== undefined ? footerCell : ColumnFooterCell;\n\n                    return {\n                        meta: {\n                            type: columnType,\n                            editable,\n                            // TODO: replace with columnProp\n                            accessorKey,\n                            cellProps,\n                            name,\n                            filterInput,\n                        },\n                        ...(accessorKey && {accessorKey}),\n                        ...(accessorFn && {accessorFn}),\n                        id,\n                        sortingFn: normalizeSortingFn(columnType, sortingFnProp),\n                        filterFn: normalizeFilterFn(columnType, filterFnProp),\n                        size,\n                        enableColumnFilter: filterable,\n                        enableSorting: sortable,\n                        enablePinning: pinnable,\n                        // disabled tanstack features.\n                        enableMultiSort: false,\n                        enableGrouping: false,\n                        enableResizing: false,\n                        enableGlobalFilter: false,\n                        enableHiding: false,\n                        header: props => {\n                            return (\n                                <CellWrapper columnWidth={size}>\n                                    <HeaderComponent headerContext={props} title={name} />\n                                </CellWrapper>\n                            );\n                        },\n                        cell: props => {\n                            const value = normalizeValue(props.getValue());\n                            return (\n                                <CellWrapper columnWidth={size}>\n                                    <CellComponent\n                                        {...cellProps}\n                                        cellContext={props}\n                                        value={value}\n                                    />\n                                </CellWrapper>\n                            );\n                        },\n                        footer: props => (\n                            <CellWrapper columnWidth={size}>\n                                <FooterComponent cellContext={props} />\n                            </CellWrapper>\n                        ),\n                    } as\n                        | DisplayColumnDef<TableData, TableRow | TableValue>\n                        | AccessorColumnDef<TableData, TableRow | TableValue>;\n                }\n            ),\n        ]);\n    }, [columnsProp, selectable]);\n\n    const [columns, setColumns] = useState(initialColumns);\n\n    useEffect(() => {\n        setColumns(initialColumns);\n    }, [initialColumns]);\n\n    const editableColumns = useMemo(\n        () =>\n            columnsProp\n                .map(({id, name, columnType, editable = true}) => ({\n                    id,\n                    name,\n                    type: columnType,\n                    editable,\n                }))\n                .filter(({editable}) => editable) as ComponentProps<\n                typeof EditDialog\n            >['columnsConfig'],\n        [columnsProp]\n    );\n\n    return {columns, setColumns, editableColumns};\n};\n"],"names":["normalizeValue","value","cellMapping","ColumnTypes","ViewTextCell","ViewUnitCell","ViewDateCell","ViewDecimalCell","ViewCurrencyCell","ViewPercentageCell","sortMapping","SortingModes","normalizeSortingFn","columnType","sortingFnProp","filterMapping","FilterModes","CustomFilterFns","normalizeFilterFn","filterFnProp","normalizeProp","hasSelectableColumn","columns","rowSelection","useTableColumns","columnsProp","selectable","initialColumns","useMemo","id","size","name","accessorKey","accessorFn","editable","filterable","sortable","pinnable","columnCell","cellProps","headerCell","footerCell","filterInput","CellComponent","HeaderComponent","ColumnHeaderCell","FooterComponent","ColumnFooterCell","props","jsx","CellWrapper","setColumns","useState","useEffect","editableColumns"],"mappings":"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"}