pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
55 lines (54 loc) • 3.51 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 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 = () => { }, }) => {
return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: isNarrow ? 'flex flex-col space-y-2' : 'flex items-center flex-wrap gap-2', children: [showSearch && (_jsx(Input, { icon: _jsx(IconSearch, { size: 16 }), placeholder: searctInputPlaceHolder, value: searchQuery, onChange: (event) => onSearch(event), className: isNarrow ? 'w-full' : 'flex-1', sx: { input: { height: 39 }, minWidth: 300 } })), filters.map((filter) => {
const { name, type, options } = filter;
const value = selectedFilters[name];
if (type === 'multi-select') {
return (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-1', style: { minWidth: 300 }, children: _jsx(MultiSelect, { data: options, 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 }) }, name));
}
return (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-1', style: { minWidth: 300 }, children: _jsx(Select, { data: options, placeholder: `Select ${name}`, value: value || null, onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: {
...sharedStyles,
...selectComponentProps,
} }) }, name));
}), showApplyFilterButton && (_jsx(Button, { onClick: handleApplyFilters, className: "bg-core-add hover:bg-core-add-hover", style: { height: 39 }, children: "Apply Filters" })), showClearFilters ? (_jsx(Button, { onClick: resetFilters, variant: "outline-primary", className: "bg-transparent border-customPurple-5 w-full sm:w-auto text-customPurple-5 hover:border-customPurple-15 hover:text-customPurple-15 hover:bg-gray-100", style: { height: 39 }, children: "Clear Filters" })) : null] }), children] }));
};
export default FilterComponent;