allow collapse on sub navigations too

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<CollapsedProps>`
   cursor: pointer;
 `;
 
-const SecondaryNavigation: FC<Props> = ({ label, children}) => {
-  const location = useLocation();
-  const binder = useBinder();
+const SecondaryNavigation: FC<Props> = ({ 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<Props> = ({ label, children}) => {
   return (
     <SectionContainer className="menu">
       <div>
-        <MenuLabel
-          className="menu-label"
-          collapsed={isCollapsed}
-          onClick={toggleCollapseState}
-        >
-          {!subNavActive && (
-            <Icon color="info" className="is-medium" collapsed={isCollapsed}>
-              {arrowIcon}
-            </Icon>
-          )}
+        <MenuLabel className="menu-label" collapsed={isCollapsed} onClick={toggleCollapseState}>
+          <Icon color="info" className="is-medium" collapsed={isCollapsed}>
+            {arrowIcon}
+          </Icon>
           {isCollapsed ? "" : label}
         </MenuLabel>
-        <ul className="menu-list" onClick={uncollapseMenu}>{children}</ul>
+        <ul className="menu-list" onClick={uncollapseMenu}>
+          {children}
+        </ul>
       </div>
     </SectionContainer>
   );
 };
 
-const createParentPath = (to: string) => {
-  const parents = to.split("/");
-  parents.splice(-1, 1);
-  return parents.join("/");
-};
-
-const expandExtensionPoints = (binder: Binder, child: ReactElement): Array<ReactElement> => {
-  // @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<RoutingProps>) => {
-  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;