pagamio-frontend-commons-lib/lib/components/ui/FilterComponent.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Input, MultiSelect, Select } from '@mantine/core';
import { IconSearch } from '@tabler/icons-react';
import { isDefaultFilterValue } from '../../shared/utils/filterUtils';
import Button from './Button';
import FilterWrapper from './FilterWrapper';
const sharedStyles = {
    input: {
        backgroundColor: 'transparent',
        borderColor: '#ced4da',
        borderRadius: '6px',
    },
    label: {
        fontSize: '13px',
    },
    width: '100%',
};
const selectComponentProps = {
    input: {
        '&[type="search"]': {
            backgroundColor: '#fff',
            borderColor: '#ced4da',
            borderRadius: '6px',
            fontSize: '0.8rem',
            height: '39px',
        },
    },
    dropdown: {
        '& .mantine-Select-item': {
            fontSize: '0.75rem',
        },
    },
};
const commonProps = {
    size: 'md',
    style: { width: 240 },
};
const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = true, showClearFilters, searctInputPlaceHolder = 'Search...', showApplyFilters = true, showSearch = false, searchQuery = '', children, isNarrow, handleFilterChange, handleApplyFilters, resetFilters, onSearch = () => { }, }) => {
    const hasSelectedActiveFilters = Object.entries(selectedFilters).some(([key, v]) => !isDefaultFilterValue(v, key));
    const shouldShowActionButtons = hasSelectedActiveFilters || (showSearch && searchQuery.length > 0);
    // Keyboard handler for search input
    const handleSearchKeyDown = (e) => {
        if (e.key === 'Enter') {
            handleApplyFilters();
        }
        else if (e.key === 'Escape') {
            onSearch({ target: { value: '' } });
            resetFilters();
        }
    };
    // Keyboard handler for select/multiselect (dropdown) filters
    const handleFilterKeyDown = (e, name) => {
        if (e.key === 'Enter') {
            handleApplyFilters();
        }
        else if (e.key === 'Escape') {
            handleFilterChange(name, '');
            resetFilters();
        }
    };
    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsx("div", { className: "w-full sm:w-[300px]", children: _jsx(Input, { icon: _jsx(IconSearch, { size: 16 }), placeholder: searctInputPlaceHolder, value: searchQuery, onChange: (event) => onSearch(event), onKeyDown: handleSearchKeyDown, className: "w-full", sx: { input: { height: 39 } }, "aria-label": "Search" }) })), filters.map((filter) => {
                        const { name, type, options } = filter;
                        const value = selectedFilters[name];
                        return (_jsx("div", { className: "w-full sm:w-[240px]", children: type === 'multi-select' ? (_jsx(MultiSelect, { data: options, placeholder: filter.placeholder ?? `Select ${name}`, value: value || [], onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: { ...sharedStyles }, sx: {
                                    'input[type="search"]': {
                                        fontSize: '0.9rem',
                                    },
                                }, ...commonProps, onKeyDown: (e) => handleFilterKeyDown(e, name), "aria-label": filter.placeholder ?? name })) : (_jsx(Select, { data: options, placeholder: filter.placeholder ?? `Select ${name}`, value: value || null, onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: {
                                    ...sharedStyles,
                                    ...selectComponentProps,
                                }, onKeyDown: (e) => handleFilterKeyDown(e, name), "aria-label": filter.placeholder ?? name })) }, name));
                    }), showApplyFilterButton && shouldShowActionButtons && (_jsx(Button, { onClick: handleApplyFilters, variant: "primary", className: "w-full sm:w-auto", style: { height: 39 }, tabIndex: 0, "aria-label": "Apply Filters", children: "Apply Filters" })), showClearFilters && shouldShowActionButtons && (_jsx(Button, { onClick: resetFilters, variant: "outline-primary", className: "w-full sm:w-auto", style: { height: 39 }, tabIndex: 0, "aria-label": "Clear Filters", children: "Clear Filters" }))] }), children] }));
};
export default FilterComponent;