@redocly/theme
Version:
Shared UI components lib
227 lines (217 loc) • 12.7 kB
JavaScript
"use strict";
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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__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.Catalog = Catalog;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const H3_1 = require("../../components/Typography/H3");
const CatalogFilterContent_1 = require("../../components/Catalog/CatalogFilter/CatalogFilterContent");
const Sidebar_1 = require("../../components/Sidebar/Sidebar");
const CatalogSelector_1 = require("../../components/Catalog/CatalogSelector");
const SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
const CounterTag_1 = require("../../components/Tags/CounterTag");
const FilterInput_1 = require("../../components/Filter/FilterInput");
const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
const CatalogEntities_1 = require("../../components/Catalog/CatalogEntities");
const CatalogMobileTopBar_1 = require("../../components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar");
const CatalogMobileFiltersPanelOverlay_1 = require("../../components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay");
function getActiveFiltersCount(filters, filterTerm) {
const filterOptionsCount = filters.reduce((sum, filter) => {
if (filter.selectedOptions instanceof Set)
return sum + filter.selectedOptions.size;
if ((0, utils_1.isFromToSelectedOptions)(filter.selectedOptions) &&
filter.selectedOptions.from &&
filter.selectedOptions.to) {
return sum + 1;
}
return sum;
}, 0);
const searchTermCount = filterTerm.trim() ? 1 : 0;
return searchTermCount + filterOptionsCount;
}
function Catalog(props) {
const { catalogConfig, filters: serverFilters, entitiesTypes, initialEntitiesList, catalogSwitcherItems, initialViewMode, } = props;
const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog({
config: catalogConfig,
entitiesCounterInitial: (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0,
serverFilters,
initialViewMode,
});
const [mobileFiltersPanelOpen, setMobileFiltersPanelOpen] = (0, react_1.useState)(false);
const activeFiltersCount = (0, react_1.useMemo)(() => getActiveFiltersCount(filters, searchQuery), [filters, searchQuery]);
const filterContent = (react_1.default.createElement(CatalogFilterContent_1.CatalogFilterContent, { catalogSelector: react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, onChange: () => {
setSearchQuery('');
setSortOption(null);
} }), filters: filters, filterTerm: searchQuery, filterValuesCasing: utils_1.customCatalogOptionsCasing, onClear: () => {
setSearchQuery('');
}, searchInput: react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-filter-search-input" }) }));
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/Catalog" },
react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, menu: filterContent, footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
react_1.default.createElement(CatalogContentWrapper, null,
react_1.default.createElement(CatalogMobileTopBar_1.CatalogMobileTopBar, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen, activeFiltersCount: activeFiltersCount, setSortOption: setSortOption, sortOption: sortOption, viewMode: viewMode, setViewMode: setViewMode }),
mobileFiltersPanelOpen ? (react_1.default.createElement(CatalogMobileFiltersPanelOverlay_1.CatalogMobileFiltersPanelOverlay, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen, filterContent: filterContent })) : null,
react_1.default.createElement(CatalogContentScrollWrapper, null,
react_1.default.createElement(CatalogPageContentWrapper, null,
react_1.default.createElement(CatalogTitleWrapper, null,
react_1.default.createElement(CatalogTitle, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey },
(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
? translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
: catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug,
' '),
react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, entitiesCounter)),
react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey)),
react_1.default.createElement(CatalogActionsRow, null,
react_1.default.createElement(CatalogSearchInputWrapper, null,
react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-search-input" })),
react_1.default.createElement(CatalogControlsWrapper, null,
react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode }))),
react_1.default.createElement(CatalogEntities_1.CatalogEntities, { catalogConfig: catalogConfig, excludedEntities: catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.excludes, filterQuery: filterQuery, entitiesTypes: entitiesTypes, sortOption: sortOption, searchQuery: searchQuery, viewMode: viewMode, setEntitiesCounter: setEntitiesCounter, initialEntitiesList: initialEntitiesList, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))))));
}
const CatalogActionsRow = styled_components_1.default.div `
display: flex;
align-items: center;
margin-bottom: var(--spacing-xl);
@media screen and (max-width: ${utils_1.breakpoints.medium}) {
display: none;
}
`;
const CatalogControlsWrapper = styled_components_1.default.div `
display: var(--catalog-controls-wrapper-display);
align-items: var(--catalog-controls-wrapper-align-items);
margin-left: var(--catalog-controls-wrapper-margin-left);
gap: var(--catalog-controls-wrapper-gap);
`;
const CatalogContentWrapper = styled_components_1.default.div `
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
`;
const CatalogContentScrollWrapper = styled_components_1.default.div `
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
`;
const CatalogPageContentWrapper = styled_components_1.default.main `
width: var(--catalog-page-content-width);
margin: var(--catalog-page-content-margin);
padding: var(--catalog-page-padding);
max-width: 1072px;
@media screen and (max-width: ${utils_1.breakpoints.small}) {
padding: var(--catalog-page-padding-mobile);
}
`;
const CatalogTitleWrapper = styled_components_1.default.div `
display: flex;
align-items: center;
color: var(--catalog-title-text-color);
font-weight: var(--catalog-title-font-weight) !important;
font-size: var(--catalog-title-font-size);
`;
const CatalogTitle = (0, styled_components_1.default)(H3_1.H3) `
color: var(--catalog-title-text-color);
font-weight: var(--catalog-title-font-weight) !important;
font-size: var(--catalog-title-font-size);
margin: var(--catalog-title-margin);
margin-right: var(--catalog-title-spacing-right);
`;
const CatalogDescription = styled_components_1.default.p `
color: var(--catalog-description-text-color);
font-weight: var(--catalog-description-font-weight);
font-size: var(--catalog-description-font-size);
margin: var(--catalog-description-margin);
line-height: var(--catalog-description-line-height);
`;
const CatalogPageWrapper = styled_components_1.default.div `
--sidebar-width: var(--catalog-sidebar-width);
height: calc(100vh - var(--navbar-height) - var(--banner-height));
display: flex;
flex-direction: column;
overflow: hidden;
font-weight: var(--catalog-page-wrapper-font-weight);
color: var(--catalog-page-wrapper-text-color);
font-size: var(--catalog-page-wrapper-font-size);
font-family: var(--catalog-page-wrapper-font-family);
line-height: var(--catalog-page-wrapper-line-height);
hr {
border: 0;
width: var(--catalog-hr-width);
margin: var(--catalog-hr-margin);
border-top: var(--catalog-hr-border-width) solid var(--catalog-hr-border-color);
}
a:not([role='button']) {
text-decoration: var(--catalog-link-text-decoration);
color: var(--catalog-link-color);
font-weight: var(--catalog-link-font-weight);
}
@media screen and (min-width: ${utils_1.breakpoints.medium}) {
flex-direction: row;
padding: 0;
}
`;
const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
display: var(--catalog-sidebar-display-mobile);
@media screen and (max-width: ${utils_1.breakpoints.medium}) {
display: none;
}
@media screen and (min-width: ${utils_1.breakpoints.medium}) {
display: var(--catalog-sidebar-display-desktop);
}
--menu-container-padding-top: var(--catalog-sidebar-menu-container-padding-top);
${Sidebar_1.SidebarHeader} {
border: none;
}
`;
const CatalogSearchInputWrapper = styled_components_1.default.div `
display: none;
width: var(--catalog-search-input-wrapper-width);
@media screen and (min-width: ${utils_1.breakpoints.medium}) {
display: block;
}
`;
//# sourceMappingURL=Catalog.js.map