@redocly/theme
Version:
Shared UI components lib
91 lines • 4.96 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;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogEntities = CatalogEntities;
const react_1 = __importStar(require("react"));
const hooks_1 = require("../../core/hooks");
const ArrowDownIcon_1 = require("../../icons/ArrowDownIcon/ArrowDownIcon");
const CatalogCardView_1 = require("../../components/Catalog/CatalogCardView/CatalogCardView");
const CatalogTableView_1 = require("../../components/Catalog/CatalogTableView/CatalogTableView");
const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
const LoadMore_1 = require("../../components/LoadMore/LoadMore");
const CatalogEntitiesEmptyState_1 = require("../../components/Catalog/CatalogEntitiesEmptyState");
const LOAD_MORE_THRESHOLD = 10;
function CatalogEntities(props) {
const { catalogConfig, excludedEntities, filterQuery, entitiesTypes, sortOption, searchQuery, viewMode, setEntitiesCounter, setSortOption, handleSortClick, isColumnSorted, } = props;
const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
catalogConfig,
});
const { useTelemetry, useFetchCatalogEntities } = (0, hooks_1.useThemeHooks)();
const telemetry = useTelemetry();
const { initialFilter } = (0, hooks_1.useCatalogEntities)({
entitiesTypes,
excludedEntities,
});
const { items: entities, query, total, } = useFetchCatalogEntities({
limit: LOAD_MORE_THRESHOLD,
filter: initialFilter && filterQuery
? `(${initialFilter}) AND (${filterQuery})`
: initialFilter || filterQuery,
sort: sortOption || undefined,
search: searchQuery,
}, props.initialEntitiesList);
const onRowClick = (entity) => {
if (searchQuery) {
telemetry.sendCatalogEntitiesListSearchResultClickedMessage([
{
id: entity.id,
object: 'catalog_entity',
uri: getEntityDetailsLink(entity),
query: searchQuery,
entityKey: entity.key,
entityType: entity.type,
},
]);
}
};
const shouldShowLoadMore = query.hasNextPage ||
(query.isPlaceholderData && entities && entities.length >= LOAD_MORE_THRESHOLD);
(0, react_1.useEffect)(() => {
setEntitiesCounter(total || 0);
}, [total, setEntitiesCounter]);
if (!query.isPending && (!entities || entities.length === 0)) {
return react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, null);
}
return (react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery], "data-component-name": "Catalog/CatalogEntities" },
viewMode === 'cards' ? (react_1.default.createElement(CatalogCardView_1.CatalogCardView, { entities: entities, catalogConfig: catalogConfig })) : (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: entities, catalogConfig: catalogConfig, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, onRowClick: onRowClick })),
shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
}
//# sourceMappingURL=CatalogEntities.js.map