@kadconsulting/dry
Version:
KAD Reusable Component Library
150 lines • 7.43 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
// @ts-nocheck
// // CLI Version 1.0.1
// Component Version 1.0.0
import { useEffect, useState } from 'react';
import classnames from 'classnames';
// Internal Components
import { DropdownCheckboxGroup, RadioButtonGroup, Button, DividerLine, } from '../index';
// import * as Utils from "./Filters.utils.js";
import './Filters.scss';
const Filters = ({ filterType, filterCategories, selectedFiltersCount, onFilterChange, loading, defaultFilters, onSaveFilters, onLoadFilters, onCreateCustomOption, onSelectAllOptions, onDeselectAllOptions, onResetFiltersToDefault, onApplyFilterPreset, isStacked, }) => {
// ====================
// Hooks
// ====================
// ====================
// State
// ====================
const [selectedFilters, setSelectedFilters] = useState(defaultFilters || {});
const [searchQuery, setSearchQuery] = useState({});
// ====================
// Handle Functions
// ====================
const handleFilterUpdate = (categoryName, newValues) => {
const updatedFilters = {
...selectedFilters,
[categoryName]: newValues,
};
// @ts-ignore
setSelectedFilters(updatedFilters);
// @ts-ignore
onFilterChange?.(updatedFilters);
};
const handleSearchQueryChange = (category, query) => {
setSearchQuery((prevQuery) => ({
...prevQuery,
[category]: query,
}));
};
const handleCreateCustomOption = (category, option) => {
onCreateCustomOption?.(category, option);
};
const handleSelectAllOptions = (category) => {
onSelectAllOptions?.(category);
};
const handleDeselectAllOptions = (category) => {
onDeselectAllOptions?.(category);
};
const handleResetFiltersToDefault = () => {
setSelectedFilters(defaultFilters || {});
onResetFiltersToDefault?.();
};
const handleApplyFilterPreset = (preset) => {
setSelectedFilters(preset);
onApplyFilterPreset?.(preset);
};
const clearFilters = () => {
setSelectedFilters({});
onFilterChange?.({});
};
const saveFilters = () => {
onSaveFilters?.(selectedFilters);
};
const loadFilters = () => {
const savedFilters = onLoadFilters?.();
setSelectedFilters(savedFilters || {});
};
// ====================
// Use Effects
// ====================
useEffect(() => {
setSelectedFilters(defaultFilters || {});
}, [defaultFilters]);
// ====================
// Display Functions
// ====================
const displayFilterCategoryOption = ({ options, categoryName, type, value, name, }) => {
const selectedValues = selectedFilters[categoryName] || [];
const searchValue = searchQuery[categoryName] || '';
if (searchValue &&
!name.toLowerCase().includes(searchValue.toLowerCase())) {
return null;
}
const checkboxOptions = options.map((option) => {
return {
...option,
checked: selectedValues.includes(option.value) || false,
LabelContent: option.LabelContent || option.name || '',
color: option.color || 'light-contrast',
extraColor: option.extraColor,
};
});
switch (type) {
case 'checkbox':
return (_jsx(DropdownCheckboxGroup, { options: checkboxOptions, handleUpdate: (values) => handleFilterUpdate(categoryName, values), selectedDefaultValues: selectedValues, buttonWidth: isStacked ? '100%' : null, isButtonFullWidth: isStacked, buttonText: name, isLayedOut: filterType === 'vertical' }));
case 'radio':
return (_jsx(RadioButtonGroup, { name: name, options: options.map((option) => ({
...option,
checked: selectedValues.includes(option.value),
})), selectedValue: `${selectedValues[0] || ''}`, onChange: (e) => handleFilterUpdate(categoryName, [e.target.value]) }, value));
default:
return null;
}
};
const displayFilterCategory = (filterCategory) => {
const { name, label, options } = filterCategory;
// TODO-p3 : Clean this up
// ========================================================================
let layoutClasses = {
container: '',
header: '',
content: '',
headerWrapper: '',
};
if (filterType === 'vertical') {
layoutClasses = {
container: 'filters__dropdownVertical',
header: 'filters__dropdownVerticalHeader',
content: 'filters__dropdownVerticalContent',
headerWrapper: 'filters__dropdownVerticalHeaderWrapper',
};
}
if (filterType === 'horizontal' && isStacked) {
layoutClasses = {
container: 'filters__dropdownHorizontal',
header: 'filters__dropdownHorizontalHeader',
content: 'filters__dropdownHorizontalContent',
headerWrapper: 'filters__dropdownHorizontalHeaderWrapper',
};
}
// ========================================================================
return (_jsxs("div", { className: layoutClasses?.container, children: [filterType === 'vertical' && (_jsxs("div", { className: layoutClasses?.headerWrapper, children: [_jsx(DividerLine, {}), _jsx("span", { className: layoutClasses.header, children: label })] })), _jsx("div", { className: layoutClasses.content, children: displayFilterCategoryOption({
options,
categoryName: name,
type: filterCategory.type,
value: label,
name,
}) })] }, name));
};
return (_jsxs("div", { className: classnames('filters', {
['filtersHorizontal']: filterType === 'horizontal',
['filtersVertical']: filterType === 'vertical',
['filtersLoading']: loading,
}), children: [selectedFiltersCount !== undefined && (_jsx("div", { className: 'filters__selectedCount', children: `${selectedFiltersCount} filter${selectedFiltersCount !== 1 ? 's' : ''} selected` })), _jsx("div", { className: classnames('filters__container', {
['filters__containerHorizontal']: filterType === 'horizontal',
['filters__containerVertical']: filterType === 'vertical',
['filters__containerStacked']: isStacked,
}), children: filterCategories.map(displayFilterCategory) }), filterType === 'vertical' && false && (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleResetFiltersToDefault, text: 'Reset to Default' }), _jsx(Button, { onClick: () => handleApplyFilterPreset({}), text: 'Apply Filter Preset' }), _jsx(Button, { onClick: clearFilters, text: 'Clear Filters' }), _jsx(Button, { onClick: saveFilters, text: 'Save Filters' }), _jsx(Button, { onClick: loadFilters, text: 'Load Filters' }), loading && (_jsx("div", { className: 'filters__loadingIndicator', children: "Loading..." }))] }))] }));
};
export default Filters;
//# sourceMappingURL=Filters.js.map