54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
|
import React, { Children, isValidElement } from "react";
|
||
|
|
import { useHistory, useRouteMatch } from "react-router-dom";
|
||
|
|
import { TabProps, Tabs, TabsProps } from "@patternfly/react-core";
|
||
|
|
|
||
|
|
type KeycloakTabsProps = Omit<TabsProps, "ref" | "activeKey" | "onSelect"> & {
|
||
|
|
paramName?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const createUrl = (
|
||
|
|
path: string,
|
||
|
|
params: { [index: string]: string }
|
||
|
|
): string => {
|
||
|
|
let url = path;
|
||
|
|
for (const key in params) {
|
||
|
|
const value = params[key];
|
||
|
|
if (url.indexOf(key) !== -1) {
|
||
|
|
url = url.replace(new RegExp(`:${key}\\??`), value || "");
|
||
|
|
} else {
|
||
|
|
url += `/${value}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return url;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const KeycloakTabs = ({
|
||
|
|
paramName = "tab",
|
||
|
|
children,
|
||
|
|
...rest
|
||
|
|
}: KeycloakTabsProps) => {
|
||
|
|
const match = useRouteMatch();
|
||
|
|
const params = match.params as { [index: string]: string };
|
||
|
|
const history = useHistory();
|
||
|
|
|
||
|
|
const firstTab = Children.toArray(children)[0];
|
||
|
|
const tab =
|
||
|
|
params[paramName] ||
|
||
|
|
(isValidElement<TabProps>(firstTab) && firstTab.props.eventKey) ||
|
||
|
|
"";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Tabs
|
||
|
|
activeKey={tab}
|
||
|
|
onSelect={(_, key) =>
|
||
|
|
history.push(
|
||
|
|
createUrl(match.path, { ...params, [paramName]: key as string })
|
||
|
|
)
|
||
|
|
}
|
||
|
|
{...rest}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Tabs>
|
||
|
|
);
|
||
|
|
};
|