@redocly/theme
Version:
Shared UI components lib
176 lines (175 loc) • 8.71 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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogEntityHistorySidebar = CatalogEntityHistorySidebar;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_router_dom_1 = require("react-router-dom");
const CloseIcon_1 = require("../../../../icons/CloseIcon/CloseIcon");
const hooks_1 = require("../../../../core/hooks");
const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
const utils_1 = require("../../../../core/utils");
const constants_1 = require("../../../../core/constants");
const CatalogEntityVersionItem_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem");
const RecentlyViewedIcon_1 = require("../../../../icons/RecentlyViewedIcon/RecentlyViewedIcon");
function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
const location = (0, react_router_dom_1.useLocation)();
const basePath = location.pathname;
const { useTranslate, useFetchCatalogEntityRevisions, useL10nConfig } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const { currentLocale } = useL10nConfig();
const { items: revisions } = useFetchCatalogEntityRevisions({ entityKey });
const normalizedLocale = currentLocale && currentLocale !== constants_1.DEFAULT_LOCALE_PLACEHOLDER ? currentLocale : 'en-US';
const versionHistoryItems = (0, react_1.useMemo)(() => (0, utils_1.transformRevisionsToVersionHistory)({
revisions,
currentRevisionDate: revision,
currentVersion: version,
locale: normalizedLocale,
}), [revisions, revision, version, normalizedLocale]);
const activeRevisionLabel = (0, react_1.useMemo)(() => {
var _a;
const itemWithActiveRevision = versionHistoryItems.find((item) => { var _a; return (_a = item.revisions) === null || _a === void 0 ? void 0 : _a.some((revision) => revision.isActive); });
const activeRevision = (_a = itemWithActiveRevision === null || itemWithActiveRevision === void 0 ? void 0 : itemWithActiveRevision.revisions) === null || _a === void 0 ? void 0 : _a.find((revision) => revision.isActive);
return activeRevision === null || activeRevision === void 0 ? void 0 : activeRevision.name;
}, [versionHistoryItems]);
const [expandedVersions, setExpandedVersions] = (0, react_1.useState)(new Set());
(0, react_1.useEffect)(() => {
setExpandedVersions(new Set(versionHistoryItems.filter((item) => item.isExpanded).map((item) => item.version)));
}, [versionHistoryItems]);
const handleOpenSidebar = (0, react_1.useCallback)(() => {
setIsOpen(true);
}, []);
(0, react_1.useEffect)(() => {
window.addEventListener('portal:sidebar:open-version-history', handleOpenSidebar);
return () => {
window.removeEventListener('portal:sidebar:open-version-history', handleOpenSidebar);
};
}, [handleOpenSidebar]);
const handleClose = () => {
window.dispatchEvent(new CustomEvent('portal:sidebar:close-version-history', {
detail: { version, revision: activeRevisionLabel },
}));
setIsOpen(false);
};
const toggleVersion = (version) => {
setExpandedVersions((prev) => {
const newSet = new Set(prev);
if (newSet.has(version)) {
newSet.delete(version);
}
else {
newSet.add(version);
}
return newSet;
});
};
if (!isOpen) {
return null;
}
return (react_1.default.createElement(SidebarOverlay, { className: className, "data-component-name": "Catalog/CatalogHistorySidebar" },
react_1.default.createElement(SidebarHeader, null,
react_1.default.createElement(HeaderWrapper, null,
react_1.default.createElement(HistoryIcon, null),
react_1.default.createElement(HeaderTitle, null, translate('catalog.history.sidebar.title', 'Version history'))),
react_1.default.createElement(CloseButton, { onClick: handleClose, "aria-label": translate('catalog.history.sidebar.close', 'Close version history') },
react_1.default.createElement(CloseIcon_1.CloseIcon, { size: "20px", color: "--catalog-history-sidebar-close-icon-color" }))),
react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: true },
react_1.default.createElement(VersionList, null, versionHistoryItems.map((group) => (react_1.default.createElement(CatalogEntityVersionItem_1.CatalogEntityVersionItem, { key: group.version, group: group, basePath: basePath, isExpanded: expandedVersions.has(group.version), onToggle: toggleVersion })))))));
}
const SidebarOverlay = styled_components_1.default.div `
position: fixed;
top: calc(var(--navbar-height) + var(--banner-height));
left: 0;
width: var(--sidebar-width);
height: calc(100vh - var(--navbar-height) - var(--banner-height));
background-color: var(--catalog-history-sidebar-bg-color);
border-right: 1px solid var(--catalog-history-sidebar-border-color);
display: flex;
flex-direction: column;
z-index: calc(var(--z-index-raised) - 1);
overflow: hidden;
`;
const SidebarHeader = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--catalog-history-sidebar-header-padding);
border-bottom: 1px solid var(--catalog-history-sidebar-border-color);
flex-shrink: 0;
`;
const HeaderTitle = styled_components_1.default.h2 `
margin: 0;
font-family: var(--catalog-history-sidebar-header-font-family);
font-size: var(--catalog-history-sidebar-header-font-size);
font-weight: var(--catalog-history-sidebar-header-font-weight);
line-height: var(--catalog-history-sidebar-header-line-height);
letter-spacing: var(--catalog-history-sidebar-header-letter-spacing);
color: var(--catalog-history-sidebar-header-color);
`;
const CloseButton = styled_components_1.default.button `
all: unset;
display: flex;
align-items: center;
justify-content: center;
width: var(--catalog-history-sidebar-close-button-size);
height: var(--catalog-history-sidebar-close-button-size);
cursor: pointer;
border-radius: var(--catalog-history-sidebar-close-button-border-radius);
transition: background-color 0.2s ease;
&:hover {
background-color: var(--catalog-history-sidebar-close-button-bg-color-hover);
}
`;
const VersionList = styled_components_1.default.ul `
list-style: none;
margin: 0;
padding: var(--catalog-history-sidebar-content-padding);
margin-top: var(--catalog-history-sidebar-content-margin-top);
`;
const HistoryIcon = (0, styled_components_1.default)(RecentlyViewedIcon_1.RecentlyViewedIcon) `
width: var(--catalog-history-icon-size);
height: var(--catalog-history-icon-size);
flex-shrink: 0;
`;
const HeaderWrapper = styled_components_1.default.div `
display: flex;
align-items: center;
gap: var(--spacing-xs);
`;
//# sourceMappingURL=CatalogEntityHistorySidebar.js.map