@redocly/theme
Version:
Shared UI components lib
42 lines • 2.6 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.SearchFilterField = SearchFilterField;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Button_1 = require("../../components/Button/Button");
const ResetIcon_1 = require("../../icons/ResetIcon/ResetIcon");
const hooks_1 = require("../../core/hooks");
const SearchFilterFieldSelect_1 = require("../../components/Search/FilterFields/SearchFilterFieldSelect");
const SearchFilterFieldTags_1 = require("../../components/Search/FilterFields/SearchFilterFieldTags");
function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }) {
var _a;
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const selectedValues = ((_a = filter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
const onChange = (value) => {
onFilterChange(facet.field, value, facet.field in quickFilterFields);
};
const onReset = () => {
onFacetReset(facet.field);
};
return (react_1.default.createElement(FilterFieldWrapper, { "data-component-name": "Search/SearchFilterField", className: className },
react_1.default.createElement(FilterFieldLabel, null,
facet.name,
selectedValues.length > 0 && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "search.filter.field.reset", icon: react_1.default.createElement(ResetIcon_1.ResetIcon, null), variant: "ghost", size: "small", onClick: onReset }, translate('search.filter.field.reset', 'Reset')))),
['select', 'multi-select'].includes(facet.type) && (react_1.default.createElement(SearchFilterFieldSelect_1.SearchFilterFieldSelect, { facet: facet, filter: filter, query: query, selectedValues: selectedValues, onChange: onChange })),
facet.type === 'tags' && (react_1.default.createElement(SearchFilterFieldTags_1.SearchFilterFieldTags, { facet: facet, selectedValues: selectedValues, onChange: onChange }))));
}
const FilterFieldWrapper = styled_components_1.default.div `
display: flex;
flex-direction: column;
gap: 4px;
`;
const FilterFieldLabel = styled_components_1.default.div `
display: flex;
justify-content: space-between;
align-items: center;
`;
//# sourceMappingURL=SearchFilterField.js.map