@redocly/theme
Version:
Shared UI components lib
115 lines • 5.86 kB
JavaScript
;
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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogEntityMetadata = CatalogEntityMetadata;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
const utils_1 = require("../../../core/utils");
const hooks_1 = require("../../../core/hooks");
const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
const ShowMoreButton_1 = require("../../../components/Catalog/CatalogEntity/ShowMoreButton");
const MAX_INITIAL_ITEMS = 4;
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
function renderMetadataValue(value) {
if ((0, utils_1.isPlainObject)(value)) {
return react_1.default.createElement(JsonViewerWrapper, { data: value, expandLevel: 3, controls: false });
}
if (Array.isArray(value)) {
return (react_1.default.createElement(ArrayWrapper, null, value.map((item, index) => (react_1.default.createElement("div", { key: index }, (0, utils_1.isPlainObject)(item) ? (react_1.default.createElement(JsonViewerWrapper, { data: item, expandLevel: 3, controls: false })) : (react_1.default.createElement("span", null, String(item))))))));
}
return react_1.default.createElement("span", null, String(value));
}
function CatalogEntityMetadata({ entity }) {
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const _a = entity.metadata || {}, { schema, sdl } = _a, metadata = __rest(_a, ["schema", "sdl"]);
const metadataToShow = Object.entries(metadata).filter(([key]) => !(entity.type === 'api-description' && key === 'descriptionFile'));
const [isOn, setIsOn] = (0, react_1.useState)(false);
const hasMoreItems = metadataToShow.length > MAX_INITIAL_ITEMS;
const visibleMetadata = isOn ? metadataToShow : metadataToShow.slice(0, MAX_INITIAL_ITEMS);
if (!metadataToShow.length) {
return null;
}
return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
visibleMetadata.map(([key, value]) => (react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { key: key, leftContent: react_1.default.createElement(Label, null,
(0, utils_1.capitalize)(key),
":"), rightContent: react_1.default.createElement(Value, null, renderMetadataValue(value)), hoverEffect: false, isCodeBlock: (0, utils_1.isPlainObject)(value) || Array.isArray(value) }))),
hasMoreItems && (react_1.default.createElement(ShowMoreButton_1.ShowMoreButton, { onClick: () => setIsOn(!isOn), isExpanded: isOn }, isOn ? 'Show less' : 'Show more'))));
}
const JsonViewerWrapper = (0, styled_components_1.default)(JsonViewer_1.JsonViewer) `
text-align: left;
`;
const MetadataWrapper = styled_components_1.default.div `
display: flex;
flex-direction: column;
border-radius: var(--border-radius);
background-color: var(--catalog-metadata-bg-color);
transition: all 0.2s ease-in-out;
margin: var(--spacing-lg) 0;
`;
const Label = styled_components_1.default.span `
font-weight: var(--font-weight-medium);
color: var(--catalog-metadata-label-color);
`;
const Value = styled_components_1.default.span `
color: var(--catalog-metadata-value-color);
font-weight: var(--font-weight-medium);
`;
const ArrayWrapper = styled_components_1.default.div `
display: flex;
flex-direction: column;
`;
const Heading = styled_components_1.default.h2 `
margin-bottom: var(--spacing-sm);
margin-top: 0;
font-size: var(--catalog-metadata-heading-size);
`;
//# sourceMappingURL=CatalogEntityMetadata.js.map