@redocly/theme/lib/components/Filter/FilterCheckboxes.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.FilterCheckboxes = FilterCheckboxes;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const FilterOptions_1 = require("../../components/Filter/FilterOptions");
const FilterOption_1 = require("../../components/Filter/FilterOption");
const FilterTitle_1 = require("../../components/Filter/FilterTitle");
const FilterOptionLabel_1 = require("../../components/Filter/FilterOptionLabel");
const hooks_1 = require("../../core/hooks");
const CheckboxIcon_1 = require("../../icons/CheckboxIcon/CheckboxIcon");
const CounterTag_1 = require("../../components/Tags/CounterTag");
const utils_1 = require("../../core/utils");
function FilterCheckboxes({ filter, filterValuesCasing }) {
    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const otelTelemetry = useOtelTelemetry();
    return (react_1.default.createElement(FilterCheckboxesWrapper, { "data-component-name": "Filter/FilterCheckboxes" },
        react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
        react_1.default.createElement(FilterOptions_1.FilterOptions, null, filter.filteredOptions.map(({ value, count }) => {
            const id = 'filter--' + filter.property + '--' + value;
            return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                    filter.toggleOption(value);
                    otelTelemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
                } },
                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value) }),
                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
        }))));
}
const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
  padding-left: var(--filter-option-checkbox-padding-left);
`;
const FilterCheckboxesWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
`;
//# sourceMappingURL=FilterCheckboxes.js.map