@redocly/theme
Version:
Shared UI components lib
81 lines • 4.02 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.SearchFilter = SearchFilter;
const React = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Button_1 = require("../../components/Button/Button");
const CleanIcon_1 = require("../../icons/CleanIcon/CleanIcon");
const SearchFilterField_1 = require("../../components/Search/SearchFilterField");
const hooks_1 = require("../../core/hooks");
function SearchFilter({ className, facets, filter, query, quickFilterFields, onFilterChange, onFilterReset, onFacetReset, }) {
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
return (React.createElement(SearchFilterWrapper, { "data-component-name": "Search/SearchFilter", className: className },
React.createElement(SearchFilterHeader, null,
React.createElement("span", { "data-translation-key": "search.filter.title" }, translate('search.filter.title', 'Advanced filter')),
React.createElement(Button_1.Button, { "data-translation-key": "search.filter.reset", onClick: onFilterReset, variant: "ghost", icon: React.createElement(CleanIcon_1.CleanIcon, null) }, translate('search.filter.reset', 'Reset filters'))),
React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, filter: filter, query: query, quickFilterFields: quickFilterFields, onFilterChange: onFilterChange, onFacetReset: onFacetReset }))))));
}
const SearchFilterWrapper = styled_components_1.default.div `
width: 100%;
max-width: var(--search-filter-width);
display: flex;
flex-direction: column;
padding: var(--search-filter-padding);
font-size: var(--search-filter-font-size);
font-weight: var(--search-filter-font-weight);
line-height: var(--search-filter-line-height);
`;
const SearchFilterHeader = styled_components_1.default.div `
position: sticky;
top: 0px;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--search-filter-header-padding);
color: var(--search-filter-header-text-color);
background-color: var(--search-filter-bg-color);
z-index: var(--search-filter-header-z-index);
`;
const SearchFilterFields = styled_components_1.default.div `
display: flex;
flex-direction: column;
gap: var(--search-filter-fields-gap);
`;
//# sourceMappingURL=SearchFilter.js.map