@redocly/theme
Version:
Shared UI components lib
112 lines • 5.12 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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__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.SearchFilterFieldSelect = SearchFilterFieldSelect;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../../core/hooks");
const Select_1 = require("../../../components/Select/Select");
const CounterTag_1 = require("../../../components/Tags/CounterTag");
function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChange, }) {
const MAX_SELECT_OPTIONS = 20;
const { useFacetQuery, useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
const [selectOptions, setSelectOptions] = (0, react_1.useState)([]);
const isMultiple = facet.type === 'multi-select';
(0, react_1.useEffect)(() => {
setSelectOptions(getSelectOptions());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchFacet, facet]);
const onSearch = (value) => {
if (value === null) {
setSearchFacet(null);
setSearchFacetQuery(null);
}
else if (typeof value === 'string') {
setSearchFacetQuery({
query,
filter,
facetQuery: value,
});
}
};
const getSelectOptions = () => {
return searchFacet
? searchFacet.values.map(facetValueToSelectOption)
: facet.values.map(facetValueToSelectOption);
};
const facetValueToSelectOption = (facetValue) => {
if (!facetValue) {
return { element: null, value: '' };
}
if (typeof facetValue === 'string') {
return {
element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
react_1.default.createElement(FilterSelectOptionText, null, facetValue))),
value: facetValue,
};
}
else {
const { value, count, isCounterVisible } = facetValue;
return {
element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
react_1.default.createElement(FilterSelectOptionText, null, value),
isCounterVisible && react_1.default.createElement(CounterTag_1.CounterTag, null, count))),
value: value,
};
}
};
return (react_1.default.createElement(Select_1.Select, { value: selectedValues.length
? isMultiple
? selectedValues.map((value) => facetValueToSelectOption(value))
: facetValueToSelectOption(selectedValues[0])
: undefined, options: selectOptions, onChange: onChange, placeholder: `${translate('search.filter.field.placeholder', 'Search')} ${facet.name.toLowerCase()}...`, alignment: "start", multiple: isMultiple, searchable: true, footer: selectOptions.length === MAX_SELECT_OPTIONS ? (react_1.default.createElement(FilterSelectFooter, null, "Search to show more items...")) : null, onSearch: onSearch, checkmarkIconPosition: "start" }));
}
const FilterSelectOptionWrapper = styled_components_1.default.div `
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--search-filter-field-select-option-gap);
`;
const FilterSelectOptionText = styled_components_1.default.span `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
padding: var(--search-filter-field-select-option-text-padding);
`;
const FilterSelectFooter = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
padding: var(--search-filter-field-select-footer-padding);
color: var(--search-filter-field-select-footer-text-color);
`;
//# sourceMappingURL=SearchFilterFieldSelect.js.map