UNPKG

synapse-react-client

Version:

[![Build Status](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client.svg?branch=main)](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [![npm version](https://badge.fury.io/js/synapse-react-client.svg)](https://badge.fury.io/js/synaps

48 lines 3.51 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var tslib_1 = require("tslib"); var utils_1 = require("./row_renderers/utils"); var MarkdownSynapse_1 = (0, tslib_1.__importDefault)(require("./MarkdownSynapse")); var react_1 = (0, tslib_1.__importStar)(require("react")); var HeaderCard = function (_a) { var type = _a.type, title = _a.title, _b = _a.subTitle, subTitle = _b === void 0 ? '' : _b, description = _a.description, values = _a.values, secondaryLabelLimit = _a.secondaryLabelLimit, isAlignToLeftNav = _a.isAlignToLeftNav, descriptionConfig = _a.descriptionConfig, href = _a.href, target = _a.target, rgbIndex = _a.rgbIndex, icon = _a.icon; // store old document title and description so that we can restore when this component is removed var descriptionElement = document.querySelector('meta[name="description"]'); var docTitle = (0, react_1.useState)(document.title)[0]; var docDescription = (0, react_1.useState)(descriptionElement ? descriptionElement.getAttribute('content') : '')[0]; (0, react_1.useEffect)(function () { // update page title and description based on header card values if (title && document.title !== title) { document.title = title; } if (description || subTitle) { descriptionElement === null || descriptionElement === void 0 ? void 0 : descriptionElement.setAttribute('content', description ? description : subTitle); } return function cleanup() { document.title = docTitle; descriptionElement === null || descriptionElement === void 0 ? void 0 : descriptionElement.setAttribute('content', docDescription); }; }); return (react_1.default.createElement("div", { className: "SRC-portalCard SRC-portalCardHeader " + (isAlignToLeftNav ? 'isAlignToLeftNav' : '') }, react_1.default.createElement("div", { className: "SRC-portalCardMain" }, icon, react_1.default.createElement("div", { className: "SRC-cardContent" }, react_1.default.createElement("div", { className: "SRC-type" }, type), react_1.default.createElement("div", null, react_1.default.createElement("h3", { className: "SRC-boldText", style: { margin: 'none' } }, href ? (react_1.default.createElement("a", { target: target, href: href, className: "highlight-link" }, title)) : (react_1.default.createElement("span", null, " ", title, " ")))), subTitle && react_1.default.createElement("div", { className: "SRC-author" }, " ", subTitle, " "), description && (react_1.default.createElement("span", { className: "SRC-font-size-base" }, (descriptionConfig === null || descriptionConfig === void 0 ? void 0 : descriptionConfig.isMarkdown) ? (react_1.default.createElement(MarkdownSynapse_1.default, { markdown: description })) : (description))), react_1.default.createElement("div", { style: { borderTop: '1px solid rgba(26, 28, 41, 0.2)', marginTop: '15px', paddingTop: '5px', } }, values && (react_1.default.createElement(utils_1.CardFooter, { isHeader: true, secondaryLabelLimit: secondaryLabelLimit, values: values }))))))); }; exports.default = HeaderCard; //# sourceMappingURL=HeaderCard.js.map