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

use react context to toggle collapsable repository menu

Browse Source
This commit is contained in:
Eduard Heimbuch
2020-02-26 10:41:39 +01:00
parent eee6cad1d3
commit 7232815900
6 changed files with 160 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui/ui-components/src/navigation/NavLink.tsx
View File

@@ -10,7 +10,7 @@ type Props = {
label: string;
activeOnlyWhenExact?: boolean;
activeWhenMatch?: (route: any) => boolean;
collapsed: boolean;
collapsed?: boolean;
title?: string;
};

16
scm-ui/ui-components/src/navigation/Section.tsx
View File

@@ -1,17 +1,21 @@
import React, { FC, ReactNode, useEffect, useState } from "react";
import React, {FC, ReactChild, useEffect, useState} from "react";
import { Button } from "../buttons";
import styled from "styled-components";
type Props = {
label: string;
children?: ReactNode;
children?: ReactChild;
collapsed?: boolean;
onCollapse?: (newStatus: boolean) => void;
};
const SectionContainer = styled.div`
// @ts-ignore
position: ${props => (props.scrollPositionY > 210 ? "fixed" : "absolute")};
// @ts-ignore
top: ${props => props.scrollPositionY > 210 && "4.5rem"};
// @ts-ignore
width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
`;
@@ -37,15 +41,17 @@ const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
};
}, []);
const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { collapsed: collapsed }));
// @ts-ignore
const childrenWithProps = React.Children.map(children, (child: ReactChild) => React.cloneElement(child, { collapsed: collapsed }));
const arrowIcon = collapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
return (
<SectionContainer collapsed={collapsed} scrollPositionY={scrollPositionY}>
// @ts-ignore
<SectionContainer collapsed={onCollapse && collapsed} scrollPositionY={onCollapse && scrollPositionY}>
<MenuLabel className="menu-label">
{collapsed ? "" : label}
{onCollapse && (
<SmallButton color="info" className="is-small" action={onCollapse}>
<SmallButton color="info" className="is-small" action={() => onCollapse(!collapsed)}>
{arrowIcon}
</SmallButton>
)}

3
scm-ui/ui-components/src/navigation/SubNavigation.tsx
View File

@@ -10,8 +10,7 @@ type Props = {
activeWhenMatch?: (route: any) => boolean;
children?: ReactNode;
collapsed?: boolean;
onCollapsed?: (newStatus: boolean) => void;
title?: string
title?: string;
};
class SubNavigation extends React.Component<Props> {