diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index f76f64d754..0417014428 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -34265,6 +34265,14 @@ exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
onClick={[Function]}
>
+
+
+
Hitchhiker
boolean;
setCollapsed: (collapsed: boolean) => void;
};
-export const LocalStorageMenuContextProvider: FC = ({children}) => {
- const [state, setState] = useState(localStorage.getItem(MENU_COLLAPSED) === "true");
- const context = {
- isCollapsed() {
- return state;
- },
- setCollapsed(collapsed: boolean) {
- localStorage.setItem(MENU_COLLAPSED, String(collapsed));
- setState(collapsed);
- }
- };
-
- return {children};
-};
-
export const MenuContext = React.createContext({
isCollapsed() {
return false;
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index 61e0860a18..59e3593ef2 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -22,13 +22,9 @@
* SOFTWARE.
*/
-import React, {FC, ReactElement, ReactNode, useEffect, useMemo} from "react";
+import React, { FC } from "react";
import styled from "styled-components";
-import SubNavigation from "./SubNavigation";
-import { matchPath, useLocation } from "react-router-dom";
import useMenuContext from "./MenuContext";
-import { ExtensionPoint, Binder, useBinder } from "@scm-manager/ui-extensions";
-import { RoutingProps } from "./RoutingProps";
type Props = {
label: string;
@@ -60,23 +56,12 @@ const MenuLabel = styled.p`
cursor: pointer;
`;
-const SecondaryNavigation: FC = ({ label, children}) => {
- const location = useLocation();
- const binder = useBinder();
+const SecondaryNavigation: FC = ({ label, children }) => {
const menuContext = useMenuContext();
- const subNavActive = isSubNavigationActive(binder, children, location.pathname);
const isCollapsed = menuContext.isCollapsed();
- useEffect(() => {
- if (isCollapsed && subNavActive) {
- menuContext.setCollapsed(false);
- }
- }, [subNavActive, isCollapsed]);
-
const toggleCollapseState = () => {
- if (!subNavActive) {
- menuContext.setCollapsed(!isCollapsed);
- }
+ menuContext.setCollapsed(!isCollapsed);
};
const uncollapseMenu = () => {
@@ -90,68 +75,18 @@ const SecondaryNavigation: FC = ({ label, children}) => {
return (
-
- {!subNavActive && (
-
- {arrowIcon}
-
- )}
+
+
+ {arrowIcon}
+
{isCollapsed ? "" : label}
-
+
);
};
-const createParentPath = (to: string) => {
- const parents = to.split("/");
- parents.splice(-1, 1);
- return parents.join("/");
-};
-
-const expandExtensionPoints = (binder: Binder, child: ReactElement): Array => {
- // @ts-ignore
- if (child.type.name === ExtensionPoint.name) {
- // @ts-ignore
- return binder.getExtensions(child.props.name, child.props.props);
- }
- return [child];
-};
-
-const mapToProps = (child: ReactElement) => {
- return child.props;
-};
-
-const isSubNavigation = (child: ReactElement) => {
- // @ts-ignore
- return child.type.name === SubNavigation.name;
-};
-
-const isActive = (url: string, props: RoutingProps) => {
- const path = createParentPath(props.to);
- const matches = matchPath(url, {
- path,
- exact: props.activeOnlyWhenExact
- });
- return matches != null;
-};
-
-const isSubNavigationActive = (binder: Binder, children: ReactNode, url: string): boolean => {
- const childArray = React.Children.toArray(children);
-
- const match = childArray
- .filter(React.isValidElement)
- .flatMap(child => expandExtensionPoints(binder, child))
- .filter(isSubNavigation)
- .map(mapToProps)
- .find(props => isActive(url, props));
-
- return match != null;
-};
-
export default SecondaryNavigation;