nav-link as a legacy Link substitute

This commit is contained in:
Sérgio Ramos 2017-02-06 22:44:50 +00:00
parent 809729d981
commit 7f1bb79b2b
6 changed files with 112 additions and 61 deletions

View File

@ -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}>
<BreadcrumbA key={part.pathname} to={part.pathname}>
{part.name}
</BreadcrumbA>
}
</Link>
);
const key = `${part.pathname}${i}`;

View File

@ -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,14 +106,9 @@ const OrgNavigation = ({
return (
<NavLi key={to}>
<NavLink activeClassName='active' to={to}>
{
({
isActive,
href,
onClick,
<NavLink activeClassName='active' to={to}>{({
isActive
}) =>
<a href={href} onClick={onClick}>
<NavigationLinkContainer className={isActive ? 'active' : ''}>
{ !isActive && <Shadow />}
<OrgImage>
@ -132,9 +123,7 @@ const OrgNavigation = ({
{name}
</OrgName>
</NavigationLinkContainer>
</a>
}
</NavLink>
}</NavLink>
</NavLi>
);
});

View File

@ -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;

View File

@ -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 = {},

View 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;

View File

@ -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'),