diff --git a/scm-ui/ui-components/src/navigation/ExternalLink.tsx b/scm-ui/ui-components/src/navigation/ExternalLink.tsx
index a87b118ee3..1565f6fa79 100644
--- a/scm-ui/ui-components/src/navigation/ExternalLink.tsx
+++ b/scm-ui/ui-components/src/navigation/ExternalLink.tsx
@@ -30,6 +30,8 @@ type Props = {
label: string;
};
+// TODO is it used in the menu? should it use MenuContext for collapse state?
+
const ExternalLink: FC = ({ to, icon, label }) => {
let showIcon;
if (icon) {
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.tsx b/scm-ui/ui-components/src/navigation/MenuContext.tsx
new file mode 100644
index 0000000000..f02e5ab8d2
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/MenuContext.tsx
@@ -0,0 +1,56 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useContext, useState } from "react";
+
+export type MenuContext = {
+ isCollapsed: () => boolean;
+ setCollapsed: (collapsed: boolean) => void;
+};
+
+export const MenuContext = React.createContext({
+ isCollapsed() {
+ return false;
+ },
+ setCollapsed() {}
+});
+
+export const StateMenuContextProvider: FC = ({ children }) => {
+ const [collapsed, setCollapsed] = useState(false);
+
+ const context = {
+ isCollapsed() {
+ return collapsed;
+ },
+ setCollapsed
+ };
+
+ return {children};
+};
+
+const useMenuContext = () => {
+ return useContext(MenuContext);
+};
+
+export default useMenuContext;
diff --git a/scm-ui/ui-components/src/navigation/NavAction.tsx b/scm-ui/ui-components/src/navigation/NavAction.tsx
index dd350d1c71..394b30d961 100644
--- a/scm-ui/ui-components/src/navigation/NavAction.tsx
+++ b/scm-ui/ui-components/src/navigation/NavAction.tsx
@@ -29,6 +29,8 @@ type Props = {
action: () => void;
};
+// TODO is it used in the menu? should it use MenuContext for collapse state?
+
class NavAction extends React.Component {
render() {
const { label, icon, action } = this.props;
diff --git a/scm-ui/ui-components/src/navigation/NavLink.tsx b/scm-ui/ui-components/src/navigation/NavLink.tsx
index 7a527e5ab5..d9cb3c4e7e 100644
--- a/scm-ui/ui-components/src/navigation/NavLink.tsx
+++ b/scm-ui/ui-components/src/navigation/NavLink.tsx
@@ -23,60 +23,47 @@
*/
import * as React from "react";
import classNames from "classnames";
-import { Link, Route } from "react-router-dom";
+import { Link, useRouteMatch } from "react-router-dom";
+import { RoutingProps } from "./RoutingProps";
+import { FC } from "react";
+import useMenuContext from "./MenuContext";
-// TODO mostly copy of PrimaryNavigationLink
-
-type Props = {
- to: string;
- icon?: string;
+type Props = RoutingProps & {
label: string;
- activeOnlyWhenExact?: boolean;
- activeWhenMatch?: (route: any) => boolean;
- collapsed?: boolean;
title?: string;
+ icon?: string;
};
-class NavLink extends React.Component {
- static defaultProps = {
- activeOnlyWhenExact: true
- };
+const NavLink: FC = ({ to, activeOnlyWhenExact, icon, label, title }) => {
+ const match = useRouteMatch({
+ path: to,
+ exact: activeOnlyWhenExact
+ });
- isActive(route: any) {
- const { activeWhenMatch } = this.props;
- return route.match || (activeWhenMatch && activeWhenMatch(route));
- }
+ const context = useMenuContext();
+ const collapsed = context.isCollapsed();
- renderLink = (route: any) => {
- const { to, icon, label, collapsed, title } = this.props;
-
- let showIcon = null;
- if (icon) {
- showIcon = (
- <>
- {" "}
-
- );
- }
-
- return (
-
+ );
+};
+
+NavLink.defaultProps = {
+ activeOnlyWhenExact: true
+};
export default NavLink;
diff --git a/scm-ui/ui-components/src/navigation/Navigation.tsx b/scm-ui/ui-components/src/navigation/Navigation.tsx
index dc848b4d24..0ccd94e7f7 100644
--- a/scm-ui/ui-components/src/navigation/Navigation.tsx
+++ b/scm-ui/ui-components/src/navigation/Navigation.tsx
@@ -27,6 +27,8 @@ type Props = {
children?: ReactNode;
};
+// TODO it is used?
+
class Navigation extends React.Component {
render() {
return ;
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.ts b/scm-ui/ui-components/src/navigation/RoutingProps.ts
similarity index 73%
rename from scm-ui/ui-components/src/navigation/MenuContext.ts
rename to scm-ui/ui-components/src/navigation/RoutingProps.ts
index e2760da025..20f9d8d900 100644
--- a/scm-ui/ui-components/src/navigation/MenuContext.ts
+++ b/scm-ui/ui-components/src/navigation/RoutingProps.ts
@@ -22,18 +22,8 @@
* SOFTWARE.
*/
-import React from "react";
-
-const MENU_COLLAPSED = "secondary-menu-collapsed";
-
-export const MenuContext = React.createContext({
- menuCollapsed: isMenuCollapsed(),
- setMenuCollapsed: (collapsed: boolean) => {}
-});
-
-export function isMenuCollapsed() {
- return localStorage.getItem(MENU_COLLAPSED) === "true";
-}
-export function storeMenuCollapsed(status: boolean) {
- localStorage.setItem(MENU_COLLAPSED, String(status));
-}
+export type RoutingProps = {
+ to: string;
+ activeOnlyWhenExact?: boolean;
+ activeWhenMatch?: (route: any) => boolean;
+};
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
new file mode 100644
index 0000000000..73531dcb18
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
@@ -0,0 +1,89 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { storiesOf } from "@storybook/react";
+import React, { ReactElement } from "react";
+import SecondaryNavigation from "./SecondaryNavigation";
+import SecondaryNavigationItem from "./SecondaryNavigationItem";
+import styled from "styled-components";
+import SubNavigation from "./SubNavigation";
+import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
+import { MemoryRouter } from "react-router-dom";
+import { StateMenuContextProvider } from "./MenuContext";
+
+const Columns = styled.div`
+ margin: 2rem;
+`;
+
+const starships = (
+
+
+
+
+);
+
+const withRoute = (route: string) => {
+ return (story: ReactElement) => {story};
+};
+
+storiesOf("Navigation|Secondary", module)
+ .addDecorator(story => {story()})
+ .addDecorator(story => (
+
+
{story()}
+
+ ))
+ .add("Default", () =>
+ withRoute("/")(
+
+
+
+
+ )
+ )
+ .add("Sub Navigation", () =>
+ withRoute("/")(
+
+
+ {starships}
+
+ )
+ )
+ .add("Extension Point", () => {
+ const binder = new Binder("menu");
+ binder.bind("subnav.sample", starships);
+ return withRoute("/hitchhiker/starships/titanic")(
+
+
+
+
+
+
+ );
+ });
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index fd8e1dd3eb..59e3593ef2 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -21,17 +21,13 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
-import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
+
+import React, { FC } from "react";
import styled from "styled-components";
-import SubNavigation from "./SubNavigation";
-import { matchPath, useLocation } from "react-router-dom";
-import { isMenuCollapsed, MenuContext } from "./MenuContext";
+import useMenuContext from "./MenuContext";
type Props = {
label: string;
- children: ReactElement[];
- collapsed: boolean;
- onCollapse?: (newStatus: boolean) => void;
};
type CollapsedProps = {
@@ -60,73 +56,37 @@ const MenuLabel = styled.p`
cursor: pointer;
`;
-const SecondaryNavigation: FC = ({ label, children, collapsed, onCollapse }) => {
- const location = useLocation();
- const menuContext = useContext(MenuContext);
+const SecondaryNavigation: FC = ({ label, children }) => {
+ const menuContext = useMenuContext();
+ const isCollapsed = menuContext.isCollapsed();
- const subNavActive = isSubNavigationActive(children, location.pathname);
- const isCollapsed = collapsed && !subNavActive;
+ const toggleCollapseState = () => {
+ menuContext.setCollapsed(!isCollapsed);
+ };
- useEffect(() => {
- if (isMenuCollapsed()) {
- menuContext.setMenuCollapsed(!subNavActive);
+ const uncollapseMenu = () => {
+ if (isCollapsed) {
+ menuContext.setCollapsed(false);
}
- }, [subNavActive]);
+ };
- const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
- React.cloneElement(child, { collapsed: isCollapsed })
- );
const arrowIcon = isCollapsed ? : ;
return (