@redocly/theme/lib/components/CatalogClassic/CatalogClassic.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.CatalogPageDescriptionWrapper = exports.CatalogPageWrapper = exports.CatalogDescription = exports.CatalogTitle = exports.CatalogPageContent = void 0;
exports.default = CatalogClassic;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const H2_1 = require("../../components/Typography/H2");
const FilterContent_1 = require("../../components/Filter/FilterContent");
const FilterPopover_1 = require("../../components/Filter/FilterPopover");
const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
const CatalogClassicActions_1 = require("../../components/CatalogClassic/CatalogClassicActions");
const Sidebar_1 = require("../../components/Sidebar/Sidebar");
const CatalogClassicVirtualizedGroups_1 = require("../../components/CatalogClassic/CatalogClassicVirtualizedGroups");
function CatalogClassic(props) {
    const { catalogConfig } = props.pageProps;
    const { useTranslate, useCatalogClassic } = (0, hooks_1.useThemeHooks)();
    const { filterTerm, setFilterTerm, groups, filters } = useCatalogClassic(catalogConfig);
    const [filterPopoverVisible, setFilterPopoverVisible] = react_1.default.useState(false);
    const { translate } = useTranslate();
    (0, hooks_1.useModalScrollLock)(filterPopoverVisible);
    return (react_1.default.createElement(CatalogClassicHighlight_1.HighlightContext.Provider, { value: [filterTerm] },
        react_1.default.createElement(exports.CatalogPageWrapper, { "data-component-name": "CatalogClassic/CatalogClassic", withoutFilters: !filters.length },
            react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) }),
            filterPopoverVisible && (react_1.default.createElement(FilterPopover_1.FilterPopover, { onClose: () => setFilterPopoverVisible(false), setFilterTerm: setFilterTerm, filterTerm: filterTerm, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
            react_1.default.createElement(CatalogClassicActions_1.CatalogClassicActions, { onOpenFilter: () => setFilterPopoverVisible(true), filters: filters, filterTerm: filterTerm }),
            react_1.default.createElement(exports.CatalogPageContent, null,
                react_1.default.createElement(exports.CatalogPageDescriptionWrapper, null,
                    catalogConfig.title ? (react_1.default.createElement(exports.CatalogTitle, { "data-translation-key": catalogConfig.titleTranslationKey },
                        ' ',
                        translate(catalogConfig.titleTranslationKey, catalogConfig.title),
                        ' ')) : null,
                    catalogConfig.description ? (react_1.default.createElement(exports.CatalogDescription, { "data-translation-key": catalogConfig.descriptionTranslationKey },
                        ' ',
                        translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                        ' ')) : null),
                react_1.default.createElement(CatalogClassicVirtualizedGroups_1.CatalogClassicVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
}
exports.CatalogPageContent = styled_components_1.default.main `
  flex: 1;
  width: 90%;
  margin: 0 auto;

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    width: 100%;
    padding: var(--catalog-classic-page-padding);
  }
`;
exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
  color: var(--catalog-classic-title-text-color);
  font-weight: var(--catalog-classic-title-font-weight);
  font-size: var(--catalog-classic-title-font-size);
  margin: var(--catalog-classic-title-margin);
`;
exports.CatalogDescription = styled_components_1.default.p `
  color: var(--catalog-classic-description-text-color);
  font-weight: var(--catalog-classic-description-font-weight);
  font-size: var(--catalog-classic-description-font-size);
  margin: var(--catalog-classic-description-margin);
`;
exports.CatalogPageWrapper = styled_components_1.default.div `
  --sidebar-width: var(--catalog-classic-sidebar-width, 285px);

  display: flex;
  flex-direction: column;

  font-weight: var(--font-weight-regular);

  color: var(--text-color-secondary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);

  hr {
    border: 0;
    width: calc(100% + 48px);
    margin: auto -24px 0 -24px;
    border-top: 1px solid var(--border-color-primary);
  }
  a:not([role='button']) {
    text-decoration: none;
    color: var(--link-color-primary);
    font-weight: var(--link-font-weight);
  }

  padding: ${({ withoutFilters }) => (withoutFilters ? 'var(--spacing-base) 0 0 0' : '0')};

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    flex-direction: row;
    padding: 0;
  }
`;
exports.CatalogPageDescriptionWrapper = styled_components_1.default.div `
  margin: var(--catalog-classic-heading-margin);
  display: none;

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    display: block;
  }
`;
const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
  display: none;

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    display: flex;
  }
  --menu-container-padding-top: 0;
`;
//# sourceMappingURL=CatalogClassic.js.map