@redocly/theme/lib/components/Filter/FilterSelect.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterSelect = FilterSelect;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const FilterOption_1 = require("../../components/Filter/FilterOption");
const FilterOptionLabel_1 = require("../../components/Filter/FilterOptionLabel");
const FilterTitle_1 = require("../../components/Filter/FilterTitle");
const Select_1 = require("../../components/Select/Select");
const CounterTag_1 = require("../../components/Tags/CounterTag");
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
function FilterSelect({ filter, filterValuesCasing }) {
    var _a;
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    let selectOptions = [];
    const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
    selectOptions = [
        {
            value: '',
            element: (react_1.default.createElement(FilterOption_1.FilterOption, { key: "all", onClick: () => filter.selectOption('') },
                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": "catalog.filters.select.all" }, translate('catalog.filters.select.all', 'All')),
                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, defaultOptionCount))),
        },
        ...filter.filteredOptions.map((option) => ({
            value: option.value,
            element: (react_1.default.createElement(FilterOption_1.FilterOption, { key: option.value },
                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": option.value }, (0, utils_1.changeTextCasing)(translate(option.value), filterValuesCasing)),
                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, option.count))),
        })),
    ];
    return (react_1.default.createElement(FilterSelectWrapper, { "data-component-name": "Filter/FilterSelect" },
        react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
        react_1.default.createElement(StyledSelect, { value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: (value) => filter.selectOption(value), options: selectOptions })));
}
const FilterSelectWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  gap: var(--filter-select-wrapper-gap);
`;
const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
  --select-list-max-width: var(--filter-select-max-width);

  min-height: var(--filter-select-min-height);
  --select-text-color: var(--filter-select-color);
  border: 1px solid var(--filter-select-border-color);
  --select-border-radius: var(--filter-select-border-radius);
  padding: var(--filter-select-padding);

  :hover {
    border-color: var(--filter-select-border-color-hover);
  }
  --filter-option-margin: var(--filter-select-option-margin);
`;
//# sourceMappingURL=FilterSelect.js.map