mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-10 07:25:44 +01:00
use reflow to migrate from flow to typescript
This commit is contained in:
@@ -1,27 +0,0 @@
|
||||
//@flow
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
icon?: string,
|
||||
label: string,
|
||||
action: () => void
|
||||
};
|
||||
|
||||
class NavAction extends React.Component<Props> {
|
||||
render() {
|
||||
const { label, icon, action } = this.props;
|
||||
|
||||
let showIcon = null;
|
||||
if (icon) {
|
||||
showIcon = (<><i className={icon}></i>{" "}</>);
|
||||
}
|
||||
|
||||
return (
|
||||
<li>
|
||||
<a onClick={action} href="javascript:void(0);">{showIcon}{label}</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NavAction;
|
||||
33
scm-ui/ui-components/src/navigation/NavAction.tsx
Normal file
33
scm-ui/ui-components/src/navigation/NavAction.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
|
||||
type Props = {
|
||||
icon?: string;
|
||||
label: string;
|
||||
action: () => void;
|
||||
};
|
||||
|
||||
class NavAction extends React.Component<Props> {
|
||||
render() {
|
||||
const { label, icon, action } = this.props;
|
||||
|
||||
let showIcon = null;
|
||||
if (icon) {
|
||||
showIcon = (
|
||||
<>
|
||||
<i className={icon}></i>{' '}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li>
|
||||
<a onClick={action} href="javascript:void(0);">
|
||||
{showIcon}
|
||||
{label}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NavAction;
|
||||
@@ -1,24 +1,22 @@
|
||||
//@flow
|
||||
import * as React from "react";
|
||||
import classNames from "classnames";
|
||||
import {Link, Route} from "react-router-dom";
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Link, Route } from 'react-router-dom';
|
||||
|
||||
// TODO mostly copy of PrimaryNavigationLink
|
||||
|
||||
type Props = {
|
||||
to: string,
|
||||
icon?: string,
|
||||
label: string,
|
||||
activeOnlyWhenExact?: boolean,
|
||||
activeWhenMatch?: (route: any) => boolean
|
||||
to: string;
|
||||
icon?: string;
|
||||
label: string;
|
||||
activeOnlyWhenExact?: boolean;
|
||||
activeWhenMatch?: (route: any) => boolean;
|
||||
};
|
||||
|
||||
class NavLink extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
activeOnlyWhenExact: true
|
||||
activeOnlyWhenExact: true,
|
||||
};
|
||||
|
||||
|
||||
isActive(route: any) {
|
||||
const { activeWhenMatch } = this.props;
|
||||
return route.match || (activeWhenMatch && activeWhenMatch(route));
|
||||
@@ -29,12 +27,16 @@ class NavLink extends React.Component<Props> {
|
||||
|
||||
let showIcon = null;
|
||||
if (icon) {
|
||||
showIcon = (<><i className={classNames(icon, "fa-fw")} />{" "}</>);
|
||||
showIcon = (
|
||||
<>
|
||||
<i className={classNames(icon, 'fa-fw')} />{' '}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li>
|
||||
<Link className={this.isActive(route) ? "is-active" : ""} to={to}>
|
||||
<Link className={this.isActive(route) ? 'is-active' : ''} to={to}>
|
||||
{showIcon}
|
||||
{label}
|
||||
</Link>
|
||||
@@ -1,8 +1,7 @@
|
||||
//@flow
|
||||
import * as React from "react";
|
||||
import * as React from 'react';
|
||||
|
||||
type Props = {
|
||||
children?: React.Node
|
||||
children?: React.Node;
|
||||
};
|
||||
|
||||
class Navigation extends React.Component<Props> {
|
||||
@@ -1,13 +1,12 @@
|
||||
//@flow
|
||||
import React from "react";
|
||||
import { translate } from "react-i18next";
|
||||
import PrimaryNavigationLink from "./PrimaryNavigationLink";
|
||||
import type { Links } from "@scm-manager/ui-types";
|
||||
import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
|
||||
import React from 'react';
|
||||
import { translate } from 'react-i18next';
|
||||
import PrimaryNavigationLink from './PrimaryNavigationLink';
|
||||
import { Links } from '@scm-manager/ui-types';
|
||||
import { binder, ExtensionPoint } from '@scm-manager/ui-extensions';
|
||||
|
||||
type Props = {
|
||||
t: string => string,
|
||||
links: Links
|
||||
t: (p: string) => string;
|
||||
links: Links;
|
||||
};
|
||||
|
||||
class PrimaryNavigation extends React.Component<Props> {
|
||||
@@ -35,15 +34,19 @@ class PrimaryNavigation extends React.Component<Props> {
|
||||
|
||||
const props = {
|
||||
links,
|
||||
label: t("primary-navigation.logout")
|
||||
label: t('primary-navigation.logout'),
|
||||
};
|
||||
|
||||
if (binder.hasExtension("primary-navigation.logout", props)) {
|
||||
if (binder.hasExtension('primary-navigation.logout', props)) {
|
||||
navigationItems.push(
|
||||
<ExtensionPoint key="primary-navigation.logout" name="primary-navigation.logout" props={props} />
|
||||
<ExtensionPoint
|
||||
key="primary-navigation.logout"
|
||||
name="primary-navigation.logout"
|
||||
props={props}
|
||||
/>,
|
||||
);
|
||||
} else {
|
||||
append("/logout", "/logout", "primary-navigation.logout", "logout");
|
||||
append('/logout', '/logout', 'primary-navigation.logout', 'logout');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -53,37 +56,43 @@ class PrimaryNavigation extends React.Component<Props> {
|
||||
|
||||
const props = {
|
||||
links,
|
||||
label: t("primary-navigation.first-menu")
|
||||
label: t('primary-navigation.first-menu'),
|
||||
};
|
||||
|
||||
const append = this.createNavigationAppender(navigationItems);
|
||||
if (binder.hasExtension("primary-navigation.first-menu", props)) {
|
||||
if (binder.hasExtension('primary-navigation.first-menu', props)) {
|
||||
navigationItems.push(
|
||||
<ExtensionPoint key="primary-navigation.first-menu" name="primary-navigation.first-menu" props={props} />
|
||||
<ExtensionPoint
|
||||
key="primary-navigation.first-menu"
|
||||
name="primary-navigation.first-menu"
|
||||
props={props}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
append(
|
||||
"/repos/",
|
||||
"/(repo|repos)",
|
||||
"primary-navigation.repositories",
|
||||
"repositories"
|
||||
'/repos/',
|
||||
'/(repo|repos)',
|
||||
'primary-navigation.repositories',
|
||||
'repositories',
|
||||
);
|
||||
append("/users/", "/(user|users)", "primary-navigation.users", "users");
|
||||
append('/users/', '/(user|users)', 'primary-navigation.users', 'users');
|
||||
append(
|
||||
"/groups/",
|
||||
"/(group|groups)",
|
||||
"primary-navigation.groups",
|
||||
"groups"
|
||||
'/groups/',
|
||||
'/(group|groups)',
|
||||
'primary-navigation.groups',
|
||||
'groups',
|
||||
);
|
||||
append("/admin", "/admin", "primary-navigation.admin", "config");
|
||||
append('/admin', '/admin', 'primary-navigation.admin', 'config');
|
||||
|
||||
navigationItems.push(
|
||||
<ExtensionPoint
|
||||
key="primary-navigation"
|
||||
name="primary-navigation"
|
||||
renderAll={true}
|
||||
props={{ links: this.props.links }}
|
||||
/>
|
||||
props={{
|
||||
links: this.props.links,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
this.appendLogout(navigationItems, append);
|
||||
@@ -102,4 +111,4 @@ class PrimaryNavigation extends React.Component<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
export default translate("commons")(PrimaryNavigation);
|
||||
export default translate('commons')(PrimaryNavigation);
|
||||
@@ -1,19 +1,18 @@
|
||||
//@flow
|
||||
import * as React from "react";
|
||||
import { Route, Link } from "react-router-dom";
|
||||
import * as React from 'react';
|
||||
import { Route, Link } from 'react-router-dom';
|
||||
|
||||
type Props = {
|
||||
to: string,
|
||||
label: string,
|
||||
match?: string,
|
||||
activeOnlyWhenExact?: boolean
|
||||
to: string;
|
||||
label: string;
|
||||
match?: string;
|
||||
activeOnlyWhenExact?: boolean;
|
||||
};
|
||||
|
||||
class PrimaryNavigationLink extends React.Component<Props> {
|
||||
renderLink = (route: any) => {
|
||||
const { to, label } = this.props;
|
||||
return (
|
||||
<li className={route.match ? "is-active" : ""}>
|
||||
<li className={route.match ? 'is-active' : ''}>
|
||||
<Link to={to}>{label}</Link>
|
||||
</li>
|
||||
);
|
||||
@@ -1,9 +1,8 @@
|
||||
//@flow
|
||||
import * as React from "react";
|
||||
import * as React from 'react';
|
||||
|
||||
type Props = {
|
||||
label: string,
|
||||
children?: React.Node
|
||||
label: string;
|
||||
children?: React.Node;
|
||||
};
|
||||
|
||||
class Section extends React.Component<Props> {
|
||||
@@ -1,20 +1,19 @@
|
||||
//@flow
|
||||
import * as React from "react";
|
||||
import { Link, Route } from "react-router-dom";
|
||||
import classNames from "classnames";
|
||||
import * as React from 'react';
|
||||
import { Link, Route } from 'react-router-dom';
|
||||
import classNames from 'classnames';
|
||||
|
||||
type Props = {
|
||||
to: string,
|
||||
icon?: string,
|
||||
label: string,
|
||||
activeOnlyWhenExact?: boolean,
|
||||
activeWhenMatch?: (route: any) => boolean,
|
||||
children?: React.Node
|
||||
to: string;
|
||||
icon?: string;
|
||||
label: string;
|
||||
activeOnlyWhenExact?: boolean;
|
||||
activeWhenMatch?: (route: any) => boolean;
|
||||
children?: React.Node;
|
||||
};
|
||||
|
||||
class SubNavigation extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
activeOnlyWhenExact: false
|
||||
activeOnlyWhenExact: false,
|
||||
};
|
||||
|
||||
isActive(route: any) {
|
||||
@@ -25,7 +24,7 @@ class SubNavigation extends React.Component<Props> {
|
||||
renderLink = (route: any) => {
|
||||
const { to, icon, label } = this.props;
|
||||
|
||||
let defaultIcon = "fas fa-cog";
|
||||
let defaultIcon = 'fas fa-cog';
|
||||
if (icon) {
|
||||
defaultIcon = icon;
|
||||
}
|
||||
@@ -37,8 +36,8 @@ class SubNavigation extends React.Component<Props> {
|
||||
|
||||
return (
|
||||
<li>
|
||||
<Link className={this.isActive(route) ? "is-active" : ""} to={to}>
|
||||
<i className={classNames(defaultIcon, "fa-fw")} /> {label}
|
||||
<Link className={this.isActive(route) ? 'is-active' : ''} to={to}>
|
||||
<i className={classNames(defaultIcon, 'fa-fw')} /> {label}
|
||||
</Link>
|
||||
{children}
|
||||
</li>
|
||||
@@ -49,9 +48,9 @@ class SubNavigation extends React.Component<Props> {
|
||||
const { to, activeOnlyWhenExact } = this.props;
|
||||
|
||||
// removes last part of url
|
||||
let parents = to.split("/");
|
||||
let parents = to.split('/');
|
||||
parents.splice(-1, 1);
|
||||
let parent = parents.join("/");
|
||||
let parent = parents.join('/');
|
||||
|
||||
return (
|
||||
<Route
|
||||
@@ -1,10 +0,0 @@
|
||||
// @create-index
|
||||
|
||||
export { default as NavAction } from "./NavAction.js";
|
||||
export { default as NavLink } from "./NavLink.js";
|
||||
export { default as Navigation } from "./Navigation.js";
|
||||
export { default as SubNavigation } from "./SubNavigation.js";
|
||||
export { default as PrimaryNavigation } from "./PrimaryNavigation.js";
|
||||
export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink.js";
|
||||
export { default as Section } from "./Section.js";
|
||||
|
||||
9
scm-ui/ui-components/src/navigation/index.ts
Normal file
9
scm-ui/ui-components/src/navigation/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
// @create-index
|
||||
|
||||
export { default as NavAction } from './NavAction';
|
||||
export { default as NavLink } from './NavLink';
|
||||
export { default as Navigation } from './Navigation';
|
||||
export { default as SubNavigation } from './SubNavigation';
|
||||
export { default as PrimaryNavigation } from './PrimaryNavigation';
|
||||
export { default as PrimaryNavigationLink } from './PrimaryNavigationLink';
|
||||
export { default as Section } from './Section';
|
||||
Reference in New Issue
Block a user