Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-12 00:15:44 +01:00
Code Issues Packages Projects Releases Activity

handling collapse state in a more simple and consistence way

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-03-31 08:26:01 +02:00
parent ca39a5b453
commit 2821005d8c
11 changed files with 178 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
View File

@@ -30,6 +30,7 @@ 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;
@@ -52,6 +53,7 @@ const withRoute = (route: string) => {
};
storiesOf("Navigation|Secondary", module)
.addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
.addDecorator(story => (
<Columns className="columns">
<div className="column is-3">{story()}</div>
@@ -59,42 +61,26 @@ storiesOf("Navigation|Secondary", module)
))
.add("Default", () =>
withRoute("/")(
<SecondaryNavigation label="Hitchhiker" collapsed={false} onCollapse={() => {}}>
<SecondaryNavigationItem to="/" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
<SecondaryNavigationItem to="/some" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
</SecondaryNavigation>
)
)
.add("Collapsed", () =>
withRoute("/")(
<SecondaryNavigation label="Hitchhiker" collapsed={true} onCollapse={() => {}}>
<SecondaryNavigationItem to="/" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
<SecondaryNavigationItem to="/some" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
<SecondaryNavigation label="Hitchhiker">
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
<SecondaryNavigationItem to="/heart-of-gold" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
</SecondaryNavigation>
)
)
.add("Sub Navigation", () =>
withRoute("/")(
<SecondaryNavigation label="Hitchhiker" collapsed={false} onCollapse={() => {}}>
<SecondaryNavigation label="Hitchhiker">
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
{starships}
</SecondaryNavigation>
)
)
.add("Sub Navigation Collapsed", () =>
withRoute("/hitchhiker/starships/heart-of-gold")(
<SecondaryNavigation label="Hitchhiker" collapsed={true} onCollapse={() => {}}>
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
{starships}
</SecondaryNavigation>
)
)
.add("Collapsed EP Sub", () => {
.add("Extension Point", () => {
const binder = new Binder("menu");
binder.bind("subnav.sample", starships);
return withRoute("/hitchhiker/starships/titanic")(
<BinderContext.Provider value={binder}>
<SecondaryNavigation label="Hitchhiker" collapsed={true} onCollapse={() => {}}>
<SecondaryNavigation label="Hitchhiker">
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
<ExtensionPoint name="subnav.sample" renderAll={true} />
</SecondaryNavigation>