mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
nav-link as a legacy Link substitute
This commit is contained in:
parent
809729d981
commit
7f1bb79b2b
@ -1,12 +1,13 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const flatten = require('lodash.flatten');
|
||||
|
||||
const Container = require('@ui/components/container');
|
||||
const Row = require('@ui/components/row');
|
||||
const Column = require('@ui/components/column');
|
||||
const BaseElements = require('@ui/components/base-elements');
|
||||
const NavLink = require('@ui/components/nav-link');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const React = require('react');
|
||||
const ReactRouter = require('react-router-dom');
|
||||
const Styled = require('styled-components');
|
||||
const flatten = require('lodash.flatten');
|
||||
const fns = require('@ui/shared/functions');
|
||||
const constants = require('@ui/shared/constants');
|
||||
|
||||
@ -28,12 +29,12 @@ const {
|
||||
|
||||
// Main Contonent Wrapper Styles
|
||||
const StyledDiv = styled.div`
|
||||
border-bottom: solid ${remcalc(1)} ${colors.greyDark};
|
||||
border-bottom: solid ${remcalc(1)} ${colors.base.greyDark};
|
||||
padding: ${remcalc(30)} 0;
|
||||
margin-bottom: ${remcalc(21)};
|
||||
`;
|
||||
|
||||
const BreadcrumbA = styled.a`
|
||||
const BreadcrumbA = styled(NavLink)`
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
@ -41,10 +42,6 @@ const BreadcrumbSpan = styled.span`
|
||||
color: ${colors.base.secondaryDark};
|
||||
`;
|
||||
|
||||
const {
|
||||
Link
|
||||
} = ReactRouter;
|
||||
|
||||
function getNameLink(name) {
|
||||
return flatten(name.map((part, i) => {
|
||||
if (!part.name) {
|
||||
@ -52,17 +49,9 @@ function getNameLink(name) {
|
||||
}
|
||||
|
||||
const link = (
|
||||
<Link key={part.pathname} to={part.pathname}>
|
||||
{
|
||||
({
|
||||
href,
|
||||
onClick,
|
||||
}) =>
|
||||
<BreadcrumbA href={href} onClick={onClick}>
|
||||
{part.name}
|
||||
</BreadcrumbA>
|
||||
}
|
||||
</Link>
|
||||
<BreadcrumbA key={part.pathname} to={part.pathname}>
|
||||
{part.name}
|
||||
</BreadcrumbA>
|
||||
);
|
||||
|
||||
const key = `${part.pathname}${i}`;
|
||||
|
@ -1,10 +1,10 @@
|
||||
const React = require('react');
|
||||
const ReactRouter = require('react-router-dom');
|
||||
const ReactRedux = require('react-redux');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const Avatar = require('@ui/components/avatar');
|
||||
const Container = require('@ui/components/container');
|
||||
const NavLink = require('@ui/components/nav-link');
|
||||
const constants = require('@ui/shared/constants');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const selectors = require('@state/selectors');
|
||||
@ -15,10 +15,6 @@ const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
const {
|
||||
NavLink
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
@ -110,31 +106,24 @@ const OrgNavigation = ({
|
||||
|
||||
return (
|
||||
<NavLi key={to}>
|
||||
<NavLink activeClassName='active' to={to}>
|
||||
{
|
||||
({
|
||||
isActive,
|
||||
href,
|
||||
onClick,
|
||||
}) =>
|
||||
<a href={href} onClick={onClick}>
|
||||
<NavigationLinkContainer className={isActive ? 'active' : ''}>
|
||||
{ !isActive && <Shadow />}
|
||||
<OrgImage>
|
||||
<OrgAvatar
|
||||
height={remcalc(26)}
|
||||
name={name}
|
||||
src={image}
|
||||
width={remcalc(26)}
|
||||
/>
|
||||
</OrgImage>
|
||||
<OrgName>
|
||||
{name}
|
||||
</OrgName>
|
||||
</NavigationLinkContainer>
|
||||
</a>
|
||||
}
|
||||
</NavLink>
|
||||
<NavLink activeClassName='active' to={to}>{({
|
||||
isActive
|
||||
}) =>
|
||||
<NavigationLinkContainer className={isActive ? 'active' : ''}>
|
||||
{ !isActive && <Shadow />}
|
||||
<OrgImage>
|
||||
<OrgAvatar
|
||||
height={remcalc(26)}
|
||||
name={name}
|
||||
src={image}
|
||||
width={remcalc(26)}
|
||||
/>
|
||||
</OrgImage>
|
||||
<OrgName>
|
||||
{name}
|
||||
</OrgName>
|
||||
</NavigationLinkContainer>
|
||||
}</NavLink>
|
||||
</NavLi>
|
||||
);
|
||||
});
|
||||
|
@ -1,9 +1,9 @@
|
||||
const React = require('react');
|
||||
const ReactIntl = require('react-intl');
|
||||
const ReactRouter = require('react-router-dom');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const Li = require('@ui/components/horizontal-list/li');
|
||||
const NavLink = require('@ui/components/nav-link');
|
||||
const constants = require('@ui/shared/constants');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const Ul = require('@ui/components/horizontal-list/ul');
|
||||
@ -17,10 +17,6 @@ const {
|
||||
FormattedMessage
|
||||
} = ReactIntl;
|
||||
|
||||
const {
|
||||
NavLink
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
breakpoints,
|
||||
} = constants;
|
||||
|
@ -1,10 +1,10 @@
|
||||
const React = require('react');
|
||||
const ReactIntl = require('react-intl');
|
||||
const ReactRedux = require('react-redux');
|
||||
const ReactRouter = require('react-router-dom');
|
||||
|
||||
const Button = require('@ui/components/button');
|
||||
const Column = require('@ui/components/column');
|
||||
const NavLink = require('@ui/components/nav-link');
|
||||
const EmptyProjects = require('@components/empty/projects');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const Row = require('@ui/components/row');
|
||||
@ -23,10 +23,6 @@ const {
|
||||
projectsByOrgIdSelector
|
||||
} = selectors;
|
||||
|
||||
const {
|
||||
NavLink
|
||||
} = ReactRouter;
|
||||
|
||||
const Projects = (props) => {
|
||||
const {
|
||||
org = {},
|
||||
|
80
ui/src/components/nav-link/index.js
Normal file
80
ui/src/components/nav-link/index.js
Normal file
@ -0,0 +1,80 @@
|
||||
// from https://github.com/ReactTraining/react-router/blob/91f529db2e4feb7b8581881c83ee96f7ceabfb26/packages/react-router-dom/modules/NavLink.js
|
||||
|
||||
const React = require('react');
|
||||
const ReactRouter = require('react-router-dom');
|
||||
|
||||
const {
|
||||
Link,
|
||||
Route
|
||||
} = ReactRouter;
|
||||
|
||||
const NavLink = ({
|
||||
activeClassName,
|
||||
activeStyle,
|
||||
children,
|
||||
className,
|
||||
exact,
|
||||
isActive: getIsActive,
|
||||
strict,
|
||||
style,
|
||||
to,
|
||||
...rest
|
||||
}) => {
|
||||
const render = (props) => {
|
||||
const {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
location,
|
||||
// eslint-disable-next-line react/prop-types
|
||||
match
|
||||
} = props;
|
||||
|
||||
// eslint-disable-next-line object-curly-newline
|
||||
const isActive = !!(getIsActive ? getIsActive(match, location) : match);
|
||||
const newChildren = typeof children === 'function'
|
||||
? children({ ...props, isActive }) // eslint-disable-line object-curly-newline
|
||||
: children;
|
||||
|
||||
const clssnm = isActive
|
||||
? [ activeClassName, className ].join(' ')
|
||||
: className;
|
||||
|
||||
return (
|
||||
<Link
|
||||
className={clssnm}
|
||||
// eslint-disable-next-line object-curly-newline
|
||||
style={isActive ? { ...style, ...activeStyle } : style}
|
||||
to={to}
|
||||
{...rest}
|
||||
>
|
||||
{newChildren}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Route
|
||||
// eslint-disable-next-line react/no-children-prop
|
||||
children={render}
|
||||
exact={exact}
|
||||
path={typeof to === 'object' ? to.pathname : to}
|
||||
strict={strict}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
NavLink.propTypes = {
|
||||
activeClassName: React.PropTypes.string,
|
||||
activeStyle: React.PropTypes.object,
|
||||
children: React.PropTypes.oneOf([
|
||||
React.PropTypes.node,
|
||||
React.PropTypes.func
|
||||
]),
|
||||
className: React.PropTypes.string,
|
||||
exact: React.PropTypes.bool,
|
||||
isActive: React.PropTypes.func,
|
||||
strict: React.PropTypes.bool,
|
||||
style: React.PropTypes.object,
|
||||
to: Link.propTypes.to
|
||||
};
|
||||
|
||||
module.exports = NavLink;
|
@ -12,6 +12,7 @@ module.exports = {
|
||||
List: require('./components/list'),
|
||||
Modal: require('./components/modal'),
|
||||
MiniMetric: require('./components/mini-metric'),
|
||||
NavLink: require('./components/nav-link'),
|
||||
Notificaton: require('./components/notification'),
|
||||
Pagination: require('./components/pagination'),
|
||||
Radio: require('./components/radio'),
|
||||
|
Loading…
Reference in New Issue
Block a user