synapse-react-client/dist/containers/row_renderers/ObservationCard.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoadingObservationCard = exports.ObservationCard = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var UserCard_1 = (0, tslib_1.__importDefault)(require("../UserCard"));
var IconSvg_1 = (0, tslib_1.__importDefault)(require("../IconSvg"));
var utils_1 = require("./utils");
var getFriendlyPreciseDuration_1 = require("../../utils/functions/getFriendlyPreciseDuration");
var lab_1 = require("@material-ui/lab");
var SkeletonTable_1 = require("../../assets/skeletons/SkeletonTable");
/**
 * Specialized Observation Card, initially implemented for the NF portal.
 * Expects the following columns: submitterName, submitterUserId, time, timeUnits, text, and tag.
 */
var ObservationCard = function (_a) {
    var data = _a.data, schema = _a.schema;
    var submitterName = data[schema.submitterName];
    var submitterUserId = data[schema.submitterUserId];
    var time = data[schema.time];
    var timeUnits = data[schema.timeUnits];
    var text = data[schema.text];
    var tag = data[schema.tag];
    return (React.createElement("div", { className: "SRC-portalCard ObservationCard" },
        React.createElement("div", { className: "ObservationCard__submitter" },
            !submitterUserId && (React.createElement("div", null, submitterName)),
            submitterUserId && (React.createElement(UserCard_1.default, { size: 'SMALL USER CARD', ownerId: submitterUserId }))),
        time && React.createElement("div", { className: "ObservationCard__time" },
            React.createElement(IconSvg_1.default, { options: {
                    icon: 'time'
                } }),
            React.createElement("span", null, (0, getFriendlyPreciseDuration_1.getFriendlyPreciseDuration)(time, timeUnits))),
        React.createElement("div", { className: "ObservationCard__text" },
            React.createElement(utils_1.ShowMore, { summary: text })),
        React.createElement("div", { className: "ObservationCard__tags" }, tag && React.createElement("span", { className: "SRC-tag" }, tag))));
};
exports.ObservationCard = ObservationCard;
var LoadingObservationCard = function () {
    return (React.createElement("div", { className: "SRC-portalCard ObservationCard" },
        React.createElement("div", { className: "ObservationCard__submitter" },
            React.createElement("span", null,
                React.createElement(lab_1.Skeleton, { width: '100px' }))),
        React.createElement("div", { className: "ObservationCard__time" },
            React.createElement(IconSvg_1.default, { options: {
                    icon: 'time'
                } })),
        React.createElement("div", { className: "ObservationCard__text" },
            React.createElement(SkeletonTable_1.SkeletonTable, { numCols: 1, numRows: 4 })),
        React.createElement("div", { className: "ObservationCard__tags" },
            React.createElement(lab_1.Skeleton, { width: '80px' }))));
};
exports.LoadingObservationCard = LoadingObservationCard;
//# sourceMappingURL=ObservationCard.js.map