mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-01 19:15:52 +01:00
fix review findings
This commit is contained in:
@@ -1,3 +0,0 @@
|
||||
// @create-index
|
||||
|
||||
export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";
|
||||
@@ -67,7 +67,6 @@ export * from "./navigation";
|
||||
export * from "./repos";
|
||||
export * from "./table";
|
||||
export * from "./toast";
|
||||
export * from "./contexts";
|
||||
|
||||
export {
|
||||
File,
|
||||
|
||||
@@ -7,32 +7,39 @@ type Props = {
|
||||
children: ReactElement[];
|
||||
collapsed?: boolean;
|
||||
onCollapse?: (newStatus: boolean) => void;
|
||||
scrollTransitionAt?: number;
|
||||
};
|
||||
|
||||
type StylingProps = {
|
||||
scrollPositionY: number;
|
||||
type CollapsedProps = {
|
||||
collapsed: boolean;
|
||||
};
|
||||
|
||||
const SectionContainer = styled.div`
|
||||
position: ${(props: StylingProps) => (props.scrollPositionY > 210 && window.innerWidth > 770 ? "fixed" : "inherit")};
|
||||
top: ${(props: StylingProps) => props.scrollPositionY > 210 && window.innerWidth > 770 && "4.5rem"};
|
||||
width: ${(props: StylingProps) => (props.collapsed ? "5.5rem" : "20.5rem")};
|
||||
type PositionProps = CollapsedProps & {
|
||||
scrollPositionY: number;
|
||||
scrollTransitionAt: number;
|
||||
};
|
||||
|
||||
const SectionContainer = styled.div<PositionProps>`
|
||||
position: ${props =>
|
||||
props.scrollPositionY > props.scrollTransitionAt && window.innerWidth > 770 ? "fixed" : "inherit"};
|
||||
top: ${props => props.scrollPositionY > props.scrollTransitionAt && window.innerWidth > 770 && "2rem"};
|
||||
width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
|
||||
`;
|
||||
|
||||
const SmallButton = styled(Button)`
|
||||
const SmallButton = styled(Button)<CollapsedProps>`
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")};
|
||||
height: 1.5rem;
|
||||
`;
|
||||
|
||||
const MenuLabel = styled.p`
|
||||
const MenuLabel = styled.p<CollapsedProps>`
|
||||
min-height: 2.5rem;
|
||||
display: flex;
|
||||
justify-content: ${(props: { collapsed: boolean }) => (props.collapsed ? "center" : "space-between")};
|
||||
justify-content: ${props => (props.collapsed ? "center" : "left")};
|
||||
`;
|
||||
|
||||
const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
|
||||
const Section: FC<Props> = ({ label, children, collapsed, onCollapse, scrollTransitionAt }) => {
|
||||
const [scrollPositionY, setScrollPositionY] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -49,14 +56,23 @@ const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
|
||||
const arrowIcon = collapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
|
||||
|
||||
return (
|
||||
<SectionContainer collapsed={collapsed ? collapsed : false} scrollPositionY={onCollapse ? scrollPositionY : 0}>
|
||||
<SectionContainer
|
||||
collapsed={collapsed ? collapsed : false}
|
||||
scrollPositionY={onCollapse ? scrollPositionY : 0}
|
||||
scrollTransitionAt={scrollTransitionAt ? scrollTransitionAt : 250}
|
||||
>
|
||||
<MenuLabel className="menu-label" collapsed={collapsed ? collapsed : false}>
|
||||
{collapsed ? "" : label}
|
||||
{onCollapse && (
|
||||
<SmallButton color="info" className="is-medium" action={() => onCollapse(!collapsed)}>
|
||||
<SmallButton
|
||||
color="info"
|
||||
className="is-medium"
|
||||
action={() => onCollapse(!collapsed)}
|
||||
collapsed={collapsed ? collapsed : false}
|
||||
>
|
||||
{arrowIcon}
|
||||
</SmallButton>
|
||||
)}
|
||||
{collapsed ? "" : label}
|
||||
</MenuLabel>
|
||||
<ul className="menu-list">{childrenWithProps}</ul>
|
||||
</SectionContainer>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import React, { FC, ReactElement, useContext } from "react";
|
||||
import { Link, Route } from "react-router-dom";
|
||||
import classNames from "classnames";
|
||||
import { MenuContext } from "./MenuContext";
|
||||
|
||||
type Props = {
|
||||
to: string;
|
||||
@@ -8,57 +9,57 @@ type Props = {
|
||||
label: string;
|
||||
activeOnlyWhenExact?: boolean;
|
||||
activeWhenMatch?: (route: any) => boolean;
|
||||
children?: ReactNode;
|
||||
children?: ReactElement[];
|
||||
collapsed?: boolean;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
class SubNavigation extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
activeOnlyWhenExact: false
|
||||
const SubNavigation: FC<Props> = ({
|
||||
to,
|
||||
icon,
|
||||
label,
|
||||
activeOnlyWhenExact,
|
||||
activeWhenMatch,
|
||||
children,
|
||||
collapsed,
|
||||
title
|
||||
}) => {
|
||||
const menuContext = useContext(MenuContext);
|
||||
|
||||
const isActive = (route: any) => {
|
||||
return route.match || activeWhenMatch && activeWhenMatch(route);
|
||||
};
|
||||
|
||||
isActive(route: any) {
|
||||
const { activeWhenMatch } = this.props;
|
||||
return route.match || (activeWhenMatch && activeWhenMatch(route));
|
||||
}
|
||||
|
||||
renderLink = (route: any) => {
|
||||
const { to, icon, label, collapsed, title } = this.props;
|
||||
|
||||
const renderLink = (route: any) => {
|
||||
let defaultIcon = "fas fa-cog";
|
||||
if (icon) {
|
||||
defaultIcon = icon;
|
||||
}
|
||||
|
||||
let children = null;
|
||||
if (this.isActive(route)) {
|
||||
children = <ul className="sub-menu">{this.props.children}</ul>;
|
||||
let childrenList = null;
|
||||
if (isActive(route)) {
|
||||
if (menuContext.menuCollapsed) {
|
||||
menuContext.setMenuCollapsed(false);
|
||||
}
|
||||
childrenList = <ul className="sub-menu">{children}</ul>;
|
||||
}
|
||||
|
||||
return (
|
||||
<li title={collapsed ? title : undefined}>
|
||||
<Link
|
||||
className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
|
||||
to={to}
|
||||
>
|
||||
<Link className={classNames(isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
|
||||
<i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
|
||||
</Link>
|
||||
{children}
|
||||
{childrenList}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { to, activeOnlyWhenExact } = this.props;
|
||||
|
||||
// removes last part of url
|
||||
const parents = to.split("/");
|
||||
parents.splice(-1, 1);
|
||||
const parent = parents.join("/");
|
||||
|
||||
return <Route path={parent} exact={activeOnlyWhenExact} children={this.renderLink} />;
|
||||
}
|
||||
}
|
||||
return <Route path={parent} exact={activeOnlyWhenExact} children={renderLink} />;
|
||||
};
|
||||
|
||||
export default SubNavigation;
|
||||
|
||||
@@ -7,3 +7,4 @@ export { default as SubNavigation } from "./SubNavigation";
|
||||
export { default as PrimaryNavigation } from "./PrimaryNavigation";
|
||||
export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
|
||||
export { default as Section } from "./Section";
|
||||
export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";
|
||||
|
||||
@@ -101,12 +101,12 @@ class DiffFile extends React.Component<Props, State> {
|
||||
}
|
||||
};
|
||||
|
||||
toggleSideBySide = (callback: (collapsed: boolean) => void) => {
|
||||
toggleSideBySide = (callback: () => void) => {
|
||||
this.setState(
|
||||
state => ({
|
||||
sideBySide: !state.sideBySide
|
||||
}),
|
||||
() => callback(true)
|
||||
() => callback()
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"admin": {
|
||||
"menu": {
|
||||
"navigationLabel": "Administrations Navigation",
|
||||
"navigationLabel": "Administration",
|
||||
"informationNavLink": "Informationen",
|
||||
"settingsNavLink": "Einstellungen",
|
||||
"generalNavLink": "Generell"
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
"previous": "Zurück"
|
||||
},
|
||||
"profile": {
|
||||
"navigationLabel": "Profil Navigation",
|
||||
"navigationLabel": "Profil",
|
||||
"informationNavLink": "Information",
|
||||
"changePasswordNavLink": "Passwort ändern",
|
||||
"settingsNavLink": "Einstellungen",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"config": {
|
||||
"navigationLabel": "Administrations Navigation",
|
||||
"navigationLabel": "Administration",
|
||||
"title": "Globale Einstellungen",
|
||||
"errorTitle": "Fehler",
|
||||
"errorSubtitle": "Unbekannter Einstellungen Fehler",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"errorTitle": "Fehler",
|
||||
"errorSubtitle": "Unbekannter Gruppen Fehler",
|
||||
"menu": {
|
||||
"navigationLabel": "Gruppen Navigation",
|
||||
"navigationLabel": "Gruppen",
|
||||
"informationNavLink": "Informationen",
|
||||
"settingsNavLink": "Einstellungen",
|
||||
"generalNavLink": "Generell",
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
"errorTitle": "Fehler",
|
||||
"errorSubtitle": "Unbekannter Repository Fehler",
|
||||
"menu": {
|
||||
"navigationLabel": "Repository Navigation",
|
||||
"navigationLabel": "Repository",
|
||||
"informationNavLink": "Informationen",
|
||||
"branchesNavLink": "Branches",
|
||||
"sourcesNavLink": "Code",
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
"errorTitle": "Fehler",
|
||||
"errorSubtitle": "Unbekannter Benutzer Fehler",
|
||||
"menu": {
|
||||
"navigationLabel": "Benutzer Navigation",
|
||||
"navigationLabel": "Benutzer",
|
||||
"informationNavLink": "Informationen",
|
||||
"settingsNavLink": "Einstellungen",
|
||||
"generalNavLink": "Generell",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"admin": {
|
||||
"menu": {
|
||||
"navigationLabel": "Administration Navigation",
|
||||
"navigationLabel": "Administration",
|
||||
"informationNavLink": "Information",
|
||||
"settingsNavLink": "Settings",
|
||||
"generalNavLink": "General"
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
"previous": "Previous"
|
||||
},
|
||||
"profile": {
|
||||
"navigationLabel": "Profile Navigation",
|
||||
"navigationLabel": "Profile",
|
||||
"informationNavLink": "Information",
|
||||
"changePasswordNavLink": "Change password",
|
||||
"settingsNavLink": "Settings",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"config": {
|
||||
"navigationLabel": "Administration Navigation",
|
||||
"navigationLabel": "Administration",
|
||||
"title": "Global Configuration",
|
||||
"errorTitle": "Error",
|
||||
"errorSubtitle": "Unknown Config Error",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"errorTitle": "Error",
|
||||
"errorSubtitle": "Unknown group error",
|
||||
"menu": {
|
||||
"navigationLabel": "Group Navigation",
|
||||
"navigationLabel": "Group",
|
||||
"informationNavLink": "Information",
|
||||
"settingsNavLink": "Settings",
|
||||
"generalNavLink": "General",
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
"errorTitle": "Error",
|
||||
"errorSubtitle": "Unknown repository error",
|
||||
"menu": {
|
||||
"navigationLabel": "Repository Navigation",
|
||||
"navigationLabel": "Repository",
|
||||
"informationNavLink": "Information",
|
||||
"branchesNavLink": "Branches",
|
||||
"sourcesNavLink": "Code",
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
"errorTitle": "Error",
|
||||
"errorSubtitle": "Unknown user error",
|
||||
"menu": {
|
||||
"navigationLabel": "User Navigation",
|
||||
"navigationLabel": "User",
|
||||
"informationNavLink": "Information",
|
||||
"settingsNavLink": "Settings",
|
||||
"generalNavLink": "General",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"admin": {
|
||||
"menu": {
|
||||
"navigationLabel": "Menú de administración",
|
||||
"navigationLabel": "Administración",
|
||||
"informationNavLink": "Información",
|
||||
"settingsNavLink": "Ajustes",
|
||||
"generalNavLink": "General"
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
"previous": "Anterior"
|
||||
},
|
||||
"profile": {
|
||||
"navigationLabel": "Menú de sección",
|
||||
"navigationLabel": "Sección",
|
||||
"informationNavLink": "Información",
|
||||
"changePasswordNavLink": "Cambiar contraseña",
|
||||
"settingsNavLink": "Ajustes",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"config": {
|
||||
"navigationLabel": "Menú de administración",
|
||||
"navigationLabel": "Administración",
|
||||
"title": "Configuración global",
|
||||
"errorTitle": "Error",
|
||||
"errorSubtitle": "Error de configuración desconocido",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"errorTitle": "Error",
|
||||
"errorSubtitle": "Error de grupo desconocido",
|
||||
"menu": {
|
||||
"navigationLabel": "Menú de grupo",
|
||||
"navigationLabel": "Grupo",
|
||||
"informationNavLink": "Información",
|
||||
"settingsNavLink": "Ajustes",
|
||||
"generalNavLink": "General",
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
"errorTitle": "Error",
|
||||
"errorSubtitle": "Error de repositorio desconocido",
|
||||
"menu": {
|
||||
"navigationLabel": "Menú de repositorio",
|
||||
"navigationLabel": "Repositorio",
|
||||
"informationNavLink": "Información",
|
||||
"branchesNavLink": "Ramas",
|
||||
"sourcesNavLink": "Código",
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
"errorTitle": "Error",
|
||||
"errorSubtitle": "Error de usuario desconocido",
|
||||
"menu": {
|
||||
"navigationLabel": "Menú de usuario",
|
||||
"navigationLabel": "Usuario",
|
||||
"informationNavLink": "Información",
|
||||
"settingsNavLink": "Ajustes",
|
||||
"generalNavLink": "General",
|
||||
|
||||
@@ -12,7 +12,8 @@ import {
|
||||
Section,
|
||||
SubNavigation,
|
||||
isMenuCollapsed,
|
||||
MenuContext
|
||||
MenuContext,
|
||||
storeMenuCollapsed
|
||||
} from "@scm-manager/ui-components";
|
||||
import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
|
||||
import AdminDetails from "./AdminDetails";
|
||||
@@ -21,7 +22,6 @@ import GlobalConfig from "./GlobalConfig";
|
||||
import RepositoryRoles from "../roles/containers/RepositoryRoles";
|
||||
import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
|
||||
import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
|
||||
import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
|
||||
|
||||
type Props = RouteComponentProps &
|
||||
WithTranslation & {
|
||||
@@ -32,7 +32,6 @@ type Props = RouteComponentProps &
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
setMenuCollapsed: (collapsed: boolean) => void;
|
||||
};
|
||||
|
||||
class Admin extends React.Component<Props, State> {
|
||||
@@ -40,21 +39,10 @@ class Admin extends React.Component<Props, State> {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed(),
|
||||
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
|
||||
this.setState({ menuCollapsed: false });
|
||||
}
|
||||
}
|
||||
|
||||
isCollapseForbidden = () => {
|
||||
return this.props.location.pathname.includes("/settings/") || this.props.location.pathname.includes("/plugins/");
|
||||
};
|
||||
|
||||
onCollapseAdminMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
@@ -90,7 +78,9 @@ class Admin extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuContext.Provider value={this.state}>
|
||||
<MenuContext.Provider
|
||||
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
|
||||
>
|
||||
<Page>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
@@ -136,8 +126,9 @@ class Admin extends React.Component<Props, State> {
|
||||
<Navigation>
|
||||
<Section
|
||||
label={t("admin.menu.navigationLabel")}
|
||||
onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseAdminMenu(!menuCollapsed)}
|
||||
onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
scrollTransitionAt={220}
|
||||
>
|
||||
<NavLink
|
||||
to={`${url}/info`}
|
||||
|
||||
@@ -30,7 +30,6 @@ type Props = RouteComponentProps &
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
setMenuCollapsed: (collapsed: boolean) => void;
|
||||
};
|
||||
|
||||
class Profile extends React.Component<Props, State> {
|
||||
@@ -38,21 +37,10 @@ class Profile extends React.Component<Props, State> {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed(),
|
||||
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
|
||||
this.setState({ menuCollapsed: false });
|
||||
}
|
||||
}
|
||||
|
||||
isCollapseForbidden = () => {
|
||||
return this.props.location.pathname.includes("/settings/");
|
||||
};
|
||||
|
||||
onCollapseProfileMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
@@ -93,7 +81,9 @@ class Profile extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuContext.Provider value={this.state}>
|
||||
<MenuContext.Provider
|
||||
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
|
||||
>
|
||||
<Page title={me.displayName}>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
@@ -105,7 +95,7 @@ class Profile extends React.Component<Props, State> {
|
||||
<Navigation>
|
||||
<Section
|
||||
label={t("profile.navigationLabel")}
|
||||
onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseProfileMenu(!menuCollapsed)}
|
||||
onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
>
|
||||
<NavLink
|
||||
|
||||
@@ -37,7 +37,6 @@ type Props = RouteComponentProps &
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
setMenuCollapsed: (collapsed: boolean) => void;
|
||||
};
|
||||
|
||||
class SingleGroup extends React.Component<Props, State> {
|
||||
@@ -45,8 +44,7 @@ class SingleGroup extends React.Component<Props, State> {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed(),
|
||||
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -54,16 +52,6 @@ class SingleGroup extends React.Component<Props, State> {
|
||||
this.props.fetchGroupByName(this.props.groupLink, this.props.name);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
|
||||
this.setState({ menuCollapsed: false });
|
||||
}
|
||||
}
|
||||
|
||||
isCollapseForbidden = () => {
|
||||
return this.props.location.pathname.includes("/settings/");
|
||||
};
|
||||
|
||||
onCollapseGroupMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
@@ -99,7 +87,9 @@ class SingleGroup extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuContext.Provider value={this.state}>
|
||||
<MenuContext.Provider
|
||||
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
|
||||
>
|
||||
<Page title={group.name}>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
@@ -116,7 +106,7 @@ class SingleGroup extends React.Component<Props, State> {
|
||||
<Navigation>
|
||||
<Section
|
||||
label={t("singleGroup.menu.navigationLabel")}
|
||||
onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseGroupMenu(!menuCollapsed)}
|
||||
onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
>
|
||||
<NavLink
|
||||
|
||||
@@ -42,7 +42,7 @@ class Changesets extends React.Component<Props> {
|
||||
fetchChangesets(repository, branch, page);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<{}>, nextContext: any): boolean {
|
||||
shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
|
||||
return this.props.changesets !== nextProps.changesets;
|
||||
}
|
||||
|
||||
|
||||
@@ -47,7 +47,6 @@ type Props = RouteComponentProps &
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
setMenuCollapsed: (collapsed: boolean) => void;
|
||||
};
|
||||
|
||||
class RepositoryRoot extends React.Component<Props, State> {
|
||||
@@ -55,8 +54,7 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed(),
|
||||
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -65,16 +63,6 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
fetchRepoByName(repoLink, namespace, name);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
|
||||
this.setState({ menuCollapsed: false });
|
||||
}
|
||||
}
|
||||
|
||||
isCollapseForbidden = () => {
|
||||
return this.props.location.pathname.includes("/settings/");
|
||||
};
|
||||
|
||||
stripEndingSlash = (url: string) => {
|
||||
if (url.endsWith("/")) {
|
||||
return url.substring(0, url.length - 1);
|
||||
@@ -138,7 +126,7 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
|
||||
const url = this.matchedUrl();
|
||||
|
||||
const extensionProps: any = {
|
||||
const extensionProps = {
|
||||
repository,
|
||||
url,
|
||||
indexLinks,
|
||||
@@ -154,10 +142,15 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{
|
||||
menuCollapsed,
|
||||
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
|
||||
}}
|
||||
>
|
||||
<Page title={repository.namespace + "/" + repository.name}>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<MenuContext.Provider value={this.state}>
|
||||
<Switch>
|
||||
<Redirect exact from={this.props.match.url} to={redirectedUrl} />
|
||||
|
||||
@@ -206,16 +199,14 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
<Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
|
||||
<ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
|
||||
</Switch>
|
||||
</MenuContext.Provider>
|
||||
</div>
|
||||
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
|
||||
<Navigation>
|
||||
<Section
|
||||
label={t("repositoryRoot.menu.navigationLabel")}
|
||||
onCollapse={
|
||||
this.isCollapseForbidden() ? undefined : () => this.onCollapseRepositoryMenu(!menuCollapsed)
|
||||
}
|
||||
onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
scrollTransitionAt={250}
|
||||
>
|
||||
<ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
|
||||
<NavLink
|
||||
@@ -259,6 +250,7 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
</MenuContext.Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,6 @@ type Props = RouteComponentProps &
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
setMenuCollapsed: (collapsed: boolean) => void;
|
||||
};
|
||||
|
||||
class SingleUser extends React.Component<Props, State> {
|
||||
@@ -46,8 +45,7 @@ class SingleUser extends React.Component<Props, State> {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed(),
|
||||
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -55,12 +53,6 @@ class SingleUser extends React.Component<Props, State> {
|
||||
this.props.fetchUserByName(this.props.usersLink, this.props.name);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
|
||||
this.setState({ menuCollapsed: false });
|
||||
}
|
||||
}
|
||||
|
||||
stripEndingSlash = (url: string) => {
|
||||
if (url.endsWith("/")) {
|
||||
return url.substring(0, url.length - 2);
|
||||
@@ -68,10 +60,6 @@ class SingleUser extends React.Component<Props, State> {
|
||||
return url;
|
||||
};
|
||||
|
||||
isCollapseForbidden = () => {
|
||||
return this.props.location.pathname.includes("/settings/");
|
||||
};
|
||||
|
||||
onCollapseUserMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
@@ -100,7 +88,9 @@ class SingleUser extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuContext.Provider value={this.state}>
|
||||
<MenuContext.Provider
|
||||
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
|
||||
>
|
||||
<Page title={user.displayName}>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
@@ -117,7 +107,7 @@ class SingleUser extends React.Component<Props, State> {
|
||||
<Navigation>
|
||||
<Section
|
||||
label={t("singleUser.menu.navigationLabel")}
|
||||
onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseUserMenu(!menuCollapsed)}
|
||||
onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
>
|
||||
<NavLink
|
||||
|
||||
Reference in New Issue
Block a user