@redocly/theme
Version:
Shared UI components lib
81 lines • 3.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.SearchGroups = SearchGroups;
const React = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Tag_1 = require("../../components/Tag/Tag");
const hooks_1 = require("../../core/hooks");
function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuickFilterReset, }) {
const groupFacets = facets.filter((facet) => facet.field === groupField);
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const handleGroupTagClick = (value, fieldId, active, currentValues) => {
const values = active
? currentValues.filter((item) => item !== value)
: [...currentValues, value];
onFilterChange(fieldId, values, true);
};
return (React.createElement(SearchGroupsWrapper, null,
React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset(), selectable: true }, translate('search.groups.all', 'All')),
React.createElement(Divider, null),
groupFacets.flatMap((facet) => facet.values.map((facetCount, index) => {
var _a;
const { value, count, isCounterVisible } = facetCount;
const currentValues = ((_a = searchFilter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
const active = currentValues === null || currentValues === void 0 ? void 0 : currentValues.includes(value);
return (React.createElement(GroupTag, { key: `${facet.field}-${index}`, onClick: () => handleGroupTagClick(value, facet.field, active, currentValues), active: active, borderless: true, selectable: true },
value,
" ",
isCounterVisible && React.createElement("span", null, count)));
}))));
}
const SearchGroupsWrapper = styled_components_1.default.div `
display: flex;
gap: 4px;
padding: var(--spacing-md);
`;
const GroupTag = (0, styled_components_1.default)(Tag_1.Tag) `
cursor: pointer;
gap: 4px;
`;
const Divider = styled_components_1.default.div `
border-right: 1px solid var(--border-color-secondary);
margin: 5px 5px 5px 0;
`;
//# sourceMappingURL=SearchGroups.js.map