@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
59 lines • 3.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tab, Tabs, TabsComponent, } from "@patternfly/react-core";
import { Children, isValidElement, } from "react";
import { generatePath, matchPath, useHref, useLocation, useParams, } from "react-router-dom";
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
import { PageHandler } from "../../page/PageHandler";
import { TAB_PROVIDER } from "../../page/PageList";
import useIsFeatureEnabled, { Feature } from "../../utils/useIsFeatureEnabled";
import { useTranslation } from "react-i18next";
export const RoutableTabs = ({ children, defaultLocation, ...otherProps }) => {
var _a, _b;
const { pathname } = useLocation();
const params = useParams();
const { componentTypes } = useServerInfo();
const tabs = (componentTypes === null || componentTypes === void 0 ? void 0 : componentTypes[TAB_PROVIDER]) || [];
const isFeatureEnabled = useIsFeatureEnabled();
const { t } = useTranslation();
const matchedTabs = tabs
.filter((tab) => matchPath({ path: tab.metadata.path }, pathname))
.map((t) => ({
...t,
pathname: generatePath(t.metadata.path, {
...params,
...t.metadata.params,
}),
}));
// Extract all keys from matchedTabs
const matchedTabsKeys = matchedTabs.map((t) => t.pathname);
// Extract event keys from children
const eventKeys = Children.toArray(children)
.filter((child) => isValidElement(child))
.map((child) => child.props.eventKey.toString());
const allKeys = [...eventKeys, ...matchedTabsKeys];
// Determine if there is an exact match.
const exactMatch = allKeys.find((eventKey) => eventKey === decodeURI(pathname));
// Determine which event keys at least partially match the current path, then sort them so the nearest match ends up on top.
const nearestMatch = eventKeys
.filter((eventKey) => pathname.includes(eventKey))
.sort((a, b) => a.length - b.length)
.pop();
return (_jsxs(Tabs, { activeKey: (_b = (_a = exactMatch !== null && exactMatch !== void 0 ? exactMatch : nearestMatch) !== null && _a !== void 0 ? _a : defaultLocation === null || defaultLocation === void 0 ? void 0 : defaultLocation.pathname) !== null && _b !== void 0 ? _b : pathname, component: TabsComponent.nav, inset: {
default: "insetNone",
xl: "insetLg",
"2xl": "inset2xl",
}, ...otherProps, children: [children, isFeatureEnabled(Feature.DeclarativeUI) &&
matchedTabs.map((tab) => (_jsx(DynamicTab, { eventKey: tab.pathname, title: t(tab.id), children: _jsx(PageHandler, { page: tab, providerType: TAB_PROVIDER }) }, tab.id)))] }));
};
const DynamicTab = ({ children, ...props }) => {
const href = useHref(props.eventKey);
return (_jsx(Tab, { href: href, ...props, children: children }));
};
export const useRoutableTab = (to) => {
var _a;
return ({
eventKey: (_a = to.pathname) !== null && _a !== void 0 ? _a : "",
href: useHref(to),
});
};
//# sourceMappingURL=RoutableTabs.js.map