forked from keycloak/keycloak
-
Notifications
You must be signed in to change notification settings - Fork 0
/
RoutableTabs.tsx
125 lines (112 loc) · 3.18 KB
/
RoutableTabs.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import {
Tab,
TabProps,
Tabs,
TabsComponent,
TabsProps,
} from "@patternfly/react-core";
import {
Children,
JSXElementConstructor,
PropsWithChildren,
ReactElement,
isValidElement,
} from "react";
import {
Path,
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";
// TODO: Remove the custom 'children' props and type once the following issue has been resolved:
// https://github.com/patternfly/patternfly-react/issues/6766
type ChildElement = ReactElement<TabProps, JSXElementConstructor<TabProps>>;
type Child = ChildElement | boolean | null | undefined;
// TODO: Figure out why we need to omit 'ref' from the props.
type RoutableTabsProps = {
children: Child | Child[];
defaultLocation?: Partial<Path>;
} & Omit<
TabsProps,
"ref" | "activeKey" | "defaultActiveKey" | "component" | "children"
>;
export const RoutableTabs = ({
children,
defaultLocation,
...otherProps
}: RoutableTabsProps) => {
const { pathname } = useLocation();
const params = useParams();
const { componentTypes } = useServerInfo();
const tabs = componentTypes?.[TAB_PROVIDER] || [];
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): child is ChildElement => 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 (
<Tabs
activeKey={
exactMatch ?? nearestMatch ?? defaultLocation?.pathname ?? pathname
}
component={TabsComponent.nav}
inset={{
default: "insetNone",
xl: "insetLg",
"2xl": "inset2xl",
}}
{...otherProps}
>
{children}
{matchedTabs.map((t) => (
<DynamicTab key={t.id} eventKey={t.pathname} title={t.id}>
<PageHandler page={t} providerType={TAB_PROVIDER} />
</DynamicTab>
))}
</Tabs>
);
};
type DynamicTabProps = {
title: string;
eventKey: string;
};
const DynamicTab = ({
children,
...props
}: PropsWithChildren<DynamicTabProps>) => {
const href = useHref(props.eventKey);
return (
<Tab href={href} {...props}>
{children}
</Tab>
);
};
export const useRoutableTab = (to: Partial<Path>) => ({
eventKey: to.pathname ?? "",
href: useHref(to),
});