@redocly/theme
Version:
Shared UI components lib
65 lines • 3.32 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterContent = FilterContent;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const FilterInput_1 = require("../../components/Filter/FilterInput");
const hooks_1 = require("../../core/hooks");
const Button_1 = require("../../components/Button/Button");
const Filter_1 = require("../../components/Filter/Filter");
const utils_1 = require("../../core/utils");
function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, }) {
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const hasActiveFilters = filters.some((filter) => {
if (filterTerm)
return true;
if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
return filter.selectedOptions.size;
}
else if ((0, utils_1.isFromToSelectedOptions)(filter.selectedOptions) &&
filter.selectedOptions.from &&
filter.selectedOptions.to) {
return true;
}
});
const handleClearAll = () => {
filters.forEach((filter) => filter.selectOption(''));
setFilterTerm('');
};
return (react_1.default.createElement(FilterContentWrapper, { "data-component-name": "Filter/FilterContent" },
react_1.default.createElement(FiltersHeader, null,
react_1.default.createElement(FiltersTitle, { "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('catalog.filters.clearAll', 'Clear filters'))) : null),
react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) }),
react_1.default.createElement(FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing }))))));
}
const FilterContentWrapper = styled_components_1.default.div `
padding: var(--filter-content-padding-vertical) var(--filter-content-padding-horizontal);
display: flex;
flex-direction: column;
gap: var(--filter-content-gap);
`;
const FiltersHeader = styled_components_1.default.div `
display: flex;
padding: var(--filter-content-header-padding-vertical)
var(--filter-content-header-padding-horizontal);
`;
const FiltersTitle = styled_components_1.default.div `
margin-right: auto;
font-size: var(--filter-content-title-font-size);
font-weight: var(--filter-content-title-font-weight);
line-height: var(--filter-content-title-line-height);
`;
const FilterItems = styled_components_1.default.div `
padding: var(--filter-content-items-padding);
height: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-base);
border-top: 1px solid var(--border-color-secondary);
`;
//# sourceMappingURL=FilterContent.js.map