pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
81 lines (80 loc) • 4.88 kB
JavaScript
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 DatePicker from './DatePicker';
import FilterWrapper from './FilterWrapper';
const sharedStyles = {
input: {
borderRadius: '6px',
},
label: {
fontSize: '13px',
},
width: '100%',
};
const selectComponentProps = {
input: {
'&[type="search"]': {
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];
const renderFilterInput = () => {
if (type === 'date') {
return (_jsx(DatePicker, { value: value || null, onChange: (date) => handleFilterChange(name, date), placeholder: filter.placeholder ?? `Select ${name}` }));
}
if (type === 'multi-select') {
return (_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 }));
}
return (_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 }));
};
return (_jsx("div", { className: "w-full sm:w-[240px]", children: renderFilterInput() }, 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;