burdy
Version:
Open Source Headless Platform
109 lines (108 loc) • 7.78 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("@fluentui/react");
const react_2 = __importDefault(require("react"));
const status_1 = __importDefault(require("../../../components/status"));
const theme = (0, react_1.getTheme)();
const styles = (0, react_1.mergeStyleSets)({
itemHeading: {
fontWeight: '600',
},
ellipsis: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
contentType: {
textDecoration: 'underline',
'&:hover': {
cursor: 'pointer',
},
},
link: {
textDecoration: 'underline',
'&:hover': {
cursor: 'pointer',
},
},
shimmer: {
width: '100%',
},
});
const PostDetails = ({ post, loading }) => {
var _a, _b, _c, _d;
const shimmerList = [1, 0.8, 0.6, 0.4];
return (react_2.default.createElement(react_2.default.Fragment, null,
loading && (react_2.default.createElement(react_1.Stack, { tokens: { childrenGap: 10 } }, shimmerList.map((item) => (react_2.default.createElement(react_1.Stack, { key: item },
react_2.default.createElement(react_1.Shimmer, { width: "100%", shimmerElements: [
{ type: react_1.ShimmerElementType.line, height: 12 },
], className: styles.shimmer, style: {
marginBottom: 8,
opacity: item,
} }),
react_2.default.createElement(react_1.Shimmer, { width: "100%", shimmerElements: [
{ type: react_1.ShimmerElementType.line, height: 12 },
], className: styles.shimmer, style: {
marginBottom: 6,
opacity: item,
} })))))),
!loading && (react_2.default.createElement(react_1.Stack, { "data-cy": "post-details", tokens: { childrenGap: 10 } },
react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Name"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true }, post === null || post === void 0 ? void 0 : post.name)),
react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Slug"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true }, post === null || post === void 0 ? void 0 : post.slug)),
react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Status"),
react_2.default.createElement(react_1.Text, { block: true },
react_2.default.createElement("div", null,
react_2.default.createElement(status_1.default, { type: (post === null || post === void 0 ? void 0 : post.status) === 'published' ? 'success' : undefined }, post === null || post === void 0 ? void 0 : post.status)))),
(post === null || post === void 0 ? void 0 : post.publishedAt) && (react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Published at"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true }, new Date(post === null || post === void 0 ? void 0 : post.publishedAt).toLocaleDateString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false,
})))),
(post === null || post === void 0 ? void 0 : post.publishedFrom) && (react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Published from"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true }, new Date(post === null || post === void 0 ? void 0 : post.publishedFrom).toLocaleDateString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false,
})))),
(post === null || post === void 0 ? void 0 : post.publishedUntil) && (react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Published until"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true }, new Date(post === null || post === void 0 ? void 0 : post.publishedUntil).toLocaleDateString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false,
})))),
react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Last Update"),
react_2.default.createElement(react_1.Text, { variant: "medium", className: styles.ellipsis, block: true }, (post === null || post === void 0 ? void 0 : post.updatedAt) &&
new Date(post === null || post === void 0 ? void 0 : post.updatedAt).toLocaleDateString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false,
}))),
react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Updated by"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true, className: styles.ellipsis }, (_a = post === null || post === void 0 ? void 0 : post.author) === null || _a === void 0 ? void 0 :
_a.firstName,
" ", (_b = post === null || post === void 0 ? void 0 : post.author) === null || _b === void 0 ? void 0 :
_b.lastName)),
react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Tags"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true },
!(((_c = post === null || post === void 0 ? void 0 : post.tags) === null || _c === void 0 ? void 0 : _c.length) > 0) && 'No tags',
react_2.default.createElement(react_1.Stack, { style: { marginTop: 4 }, horizontal: true, wrap: true, tokens: { childrenGap: 8 } }, ((post === null || post === void 0 ? void 0 : post.tags) || []).map((tag) => (react_2.default.createElement("div", { key: tag.id, className: "chip chip--small" }, tag.name)))))),
(post === null || post === void 0 ? void 0 : post.contentType) && (react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Content Type"),
react_2.default.createElement(react_1.Text, { variant: "medium", className: styles.ellipsis, block: true }, (_d = post === null || post === void 0 ? void 0 : post.contentType) === null || _d === void 0 ? void 0 : _d.name)))))));
};
exports.default = PostDetails;