@redocly/theme
Version:
Shared UI components lib
105 lines • 4.93 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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 = __importStar(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, hideSearch, showCounter = true, }) {
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('');
};
if (!filters.length) {
return null;
}
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),
!hideSearch && (react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })),
react_1.default.createElement(FilterItems, { hideSearch: hideSearch }, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
}
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);
${({ hideSearch }) => hideSearch &&
(0, styled_components_1.css) `
border-top: none;
`}
`;
//# sourceMappingURL=FilterContent.js.map