@redocly/theme
Version:
Shared UI components lib
209 lines (205 loc) • 10.9 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;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogEntityVersionItem = CatalogEntityVersionItem;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const ChevronDownIcon_1 = require("../../../../icons/ChevronDownIcon/ChevronDownIcon");
const ChevronRightIcon_1 = require("../../../../icons/ChevronRightIcon/ChevronRightIcon");
const CheckmarkOutlineIcon_1 = require("../../../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
const NavaidMilitaryIcon_1 = require("../../../../icons/NavaidMilitaryIcon/NavaidMilitaryIcon");
const Link_1 = require("../../../../components/Link/Link");
const Tag_1 = require("../../../../components/Tag/Tag");
const hooks_1 = require("../../../../core/hooks");
const ShowMoreButton_1 = require("../../../../components/Catalog/CatalogEntity/ShowMoreButton");
const CatalogEntityRevisionItem_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem");
const utils_1 = require("../../../../core/utils");
const constants_1 = require("../../../../core/constants");
const MAX_INITIAL_REVISIONS = 5;
const MAX_REVISIONS = 20;
function CatalogEntityVersionItem({ group, basePath, isExpanded, onToggle, }) {
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const [showAllRevisions, setShowAllRevisions] = (0, react_1.useState)(false);
const revisions = group.revisions || [];
const hasRevisions = revisions.length > 0;
const hasMoreThanMax = revisions.length > MAX_INITIAL_REVISIONS;
const hasMoreThanLimit = revisions.length > MAX_REVISIONS;
const displayedRevisions = showAllRevisions
? revisions.slice(0, MAX_REVISIONS)
: revisions.slice(0, MAX_INITIAL_REVISIONS);
(0, react_1.useEffect)(() => {
if (!isExpanded) {
setShowAllRevisions(false);
}
}, [isExpanded]);
const isNotSpecifiedVersion = group.version === constants_1.VERSION_NOT_SPECIFIED;
const singleRevisionLink = (0, utils_1.buildRevisionUrl)(basePath, group.singleRevisionDate, group.version);
const versionTitle = isNotSpecifiedVersion
? `${translate('catalog.history.version.label', 'Version')}:\u00a0${translate('catalog.history.version.notSpecified', 'not specified')}`
: `${translate('catalog.history.version.label', 'Version')}:\u00a0${group.version}`;
const versionButton = (react_1.default.createElement(VersionButton, { type: "button", onClick: () => hasRevisions && onToggle(group.version), "$isCurrent": group.isCurrent },
react_1.default.createElement(VersionIcon, { "$isCurrent": group.isCurrent }, group.isCurrent ? (react_1.default.createElement(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon, { size: "16px", color: "--catalog-history-sidebar-version-icon-color-current" })) : (react_1.default.createElement(NavaidMilitaryIcon_1.NavaidMilitaryIcon, { size: "16px", color: "--catalog-history-sidebar-version-icon-color" }))),
react_1.default.createElement(VersionInfo, null,
react_1.default.createElement(VersionTitleRow, null,
react_1.default.createElement(VersionTitle, null, versionTitle),
group.isDefaultVersion && (react_1.default.createElement(Tag_1.Tag, { color: "grey", borderless: true, textTransform: "lowercase", style: {
fontSize: 'var(--font-size-xs)',
borderRadius: 'var(--catalog-history-sidebar-version-tag-border-radius)',
flexShrink: 0,
marginLeft: 'var(--spacing-xxs)',
} }, translate('catalog.history.version.default', 'default')))),
!isNotSpecifiedVersion && react_1.default.createElement(VersionDate, null, group.date)),
hasRevisions && (react_1.default.createElement(ChevronIcon, null, isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "16px", color: "--catalog-history-sidebar-chevron-icon-color" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "16px", color: "--catalog-history-sidebar-chevron-icon-color" }))))));
return (react_1.default.createElement("li", null,
singleRevisionLink ? react_1.default.createElement(Link_1.Link, { to: singleRevisionLink }, versionButton) : versionButton,
hasRevisions && isExpanded && (react_1.default.createElement(RevisionsList, null,
displayedRevisions.map((revisionItem) => (react_1.default.createElement(CatalogEntityRevisionItem_1.CatalogEntityRevisionItem, { key: revisionItem.name, revisionItem: revisionItem, basePath: basePath, version: group.version }))),
hasMoreThanLimit && showAllRevisions && (react_1.default.createElement(RevisionsLimitMessage, null, translate('catalog.history.revisions.limitMessage', 'Older revisions are not stored.'))),
hasMoreThanMax && (react_1.default.createElement(ShowMoreButton_1.ShowMoreButton, { onClick: () => setShowAllRevisions(!showAllRevisions), isExpanded: showAllRevisions }, showAllRevisions
? translate('catalog.history.revisions.showLess', 'Show less')
: translate('catalog.history.revisions.showMore', {
defaultValue: 'Show more',
count: Math.min(revisions.length - MAX_INITIAL_REVISIONS, MAX_REVISIONS - MAX_INITIAL_REVISIONS),
})))))));
}
const VersionButton = styled_components_1.default.button `
all: unset;
display: flex;
align-items: center;
width: calc(100% - var(--catalog-history-sidebar-version-icon-margin-right));
padding: var(--catalog-history-sidebar-version-header-padding);
cursor: pointer;
border-radius: var(--catalog-history-sidebar-version-header-border-radius);
transition: 0.2s ease;
text-decoration: none;
color: inherit;
background-color: 'transparent';
&:hover {
background-color: var(--catalog-history-sidebar-version-header-bg-color-hover);
}
${({ $isCurrent }) => !$isCurrent &&
`
&:hover ${VersionIcon} {
background-color: var(--color-static-white);
}
`}
`;
const VersionIcon = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
width: var(--catalog-history-sidebar-version-icon-size);
height: var(--catalog-history-sidebar-version-icon-size);
flex-shrink: 0;
border-radius: 50%;
background-color: ${({ $isCurrent }) => $isCurrent ? 'var(--color-primary-base)' : 'var(--catalog-avatar-bg-color)'};
transition: background-color 0.2s ease;
margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
svg path {
transition: fill 0.2s ease;
}
`;
const VersionInfo = styled_components_1.default.div `
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--catalog-history-sidebar-version-info-gap);
`;
const VersionTitleRow = styled_components_1.default.div `
display: flex;
align-items: center;
gap: var(--spacing-xs, 8px);
`;
const VersionTitle = styled_components_1.default.span `
font-family: var(--catalog-history-sidebar-version-title-font-family);
font-size: var(--catalog-history-sidebar-version-title-font-size);
font-weight: var(--catalog-history-sidebar-version-title-font-weight);
line-height: var(--catalog-history-sidebar-version-title-line-height);
color: var(--catalog-history-sidebar-version-title-color);
flex-shrink: 1;
min-width: 0;
overflow-wrap: break-word;
word-break: break-word;
`;
const VersionDate = styled_components_1.default.span `
font-family: var(--catalog-history-sidebar-version-date-font-family);
font-size: var(--catalog-history-sidebar-version-date-font-size);
font-weight: var(--catalog-history-sidebar-version-date-font-weight);
line-height: var(--catalog-history-sidebar-version-date-line-height);
color: var(--catalog-history-sidebar-version-date-color);
`;
const ChevronIcon = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: auto;
`;
const RevisionsList = styled_components_1.default.ul `
list-style: none;
margin: 0;
padding: 0;
padding-left: var(--catalog-history-sidebar-revisions-padding-left);
padding-bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
position: relative;
&::before {
content: '';
position: absolute;
left: 22px;
top: 0;
bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
width: 1px;
background-color: var(
--catalog-history-sidebar-revision-line-color,
var(--border-color-secondary)
);
}
`;
const RevisionsLimitMessage = styled_components_1.default.div `
padding: var(--catalog-history-sidebar-revision-item-padding);
margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
padding-left: var(--catalog-history-sidebar-revisions-padding-left);
font-family: var(--catalog-history-sidebar-revision-name-font-family);
font-size: var(--font-size-sm);
font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
line-height: var(--catalog-history-sidebar-revision-name-line-height);
color: var(--catalog-history-sidebar-revisions-limit-message-color);
text-align: center;
`;
//# sourceMappingURL=CatalogEntityVersionItem.js.map