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 Container = require('@ui/components/container');
const Row = require('@ui/components/row'); const Row = require('@ui/components/row');
const Column = require('@ui/components/column'); const Column = require('@ui/components/column');
const BaseElements = require('@ui/components/base-elements'); const BaseElements = require('@ui/components/base-elements');
const NavLink = require('@ui/components/nav-link');
const PropTypes = require('@root/prop-types'); 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 fns = require('@ui/shared/functions');
const constants = require('@ui/shared/constants'); const constants = require('@ui/shared/constants');
@ -28,12 +29,12 @@ const {
// Main Contonent Wrapper Styles // Main Contonent Wrapper Styles
const StyledDiv = styled.div` const StyledDiv = styled.div`
border-bottom: solid ${remcalc(1)} ${colors.greyDark}; border-bottom: solid ${remcalc(1)} ${colors.base.greyDark};
padding: ${remcalc(30)} 0; padding: ${remcalc(30)} 0;
margin-bottom: ${remcalc(21)}; margin-bottom: ${remcalc(21)};
`; `;
const BreadcrumbA = styled.a` const BreadcrumbA = styled(NavLink)`
text-decoration: none; text-decoration: none;
`; `;
@ -41,10 +42,6 @@ const BreadcrumbSpan = styled.span`
color: ${colors.base.secondaryDark}; color: ${colors.base.secondaryDark};
`; `;
const {
Link
} = ReactRouter;
function getNameLink(name) { function getNameLink(name) {
return flatten(name.map((part, i) => { return flatten(name.map((part, i) => {
if (!part.name) { if (!part.name) {
@ -52,17 +49,9 @@ function getNameLink(name) {
} }
const link = ( const link = (
<Link key={part.pathname} to={part.pathname}> <BreadcrumbA key={part.pathname} to={part.pathname}>
{ {part.name}
({ </BreadcrumbA>
href,
onClick,
}) =>
<BreadcrumbA href={href} onClick={onClick}>
{part.name}
</BreadcrumbA>
}
</Link>
); );
const key = `${part.pathname}${i}`; const key = `${part.pathname}${i}`;

View File

@ -1,10 +1,10 @@
const React = require('react'); const React = require('react');
const ReactRouter = require('react-router-dom');
const ReactRedux = require('react-redux'); const ReactRedux = require('react-redux');
const Styled = require('styled-components'); const Styled = require('styled-components');
const Avatar = require('@ui/components/avatar'); const Avatar = require('@ui/components/avatar');
const Container = require('@ui/components/container'); const Container = require('@ui/components/container');
const NavLink = require('@ui/components/nav-link');
const constants = require('@ui/shared/constants'); const constants = require('@ui/shared/constants');
const PropTypes = require('@root/prop-types'); const PropTypes = require('@root/prop-types');
const selectors = require('@state/selectors'); const selectors = require('@state/selectors');
@ -15,10 +15,6 @@ const {
connect connect
} = ReactRedux; } = ReactRedux;
const {
NavLink
} = ReactRouter;
const { const {
default: styled default: styled
} = Styled; } = Styled;
@ -110,31 +106,24 @@ const OrgNavigation = ({
return ( return (
<NavLi key={to}> <NavLi key={to}>
<NavLink activeClassName='active' to={to}> <NavLink activeClassName='active' to={to}>{({
{ isActive
({ }) =>
isActive, <NavigationLinkContainer className={isActive ? 'active' : ''}>
href, { !isActive && <Shadow />}
onClick, <OrgImage>
}) => <OrgAvatar
<a href={href} onClick={onClick}> height={remcalc(26)}
<NavigationLinkContainer className={isActive ? 'active' : ''}> name={name}
{ !isActive && <Shadow />} src={image}
<OrgImage> width={remcalc(26)}
<OrgAvatar />
height={remcalc(26)} </OrgImage>
name={name} <OrgName>
src={image} {name}
width={remcalc(26)} </OrgName>
/> </NavigationLinkContainer>
</OrgImage> }</NavLink>
<OrgName>
{name}
</OrgName>
</NavigationLinkContainer>
</a>
}
</NavLink>
</NavLi> </NavLi>
); );
}); });

View File

@ -1,9 +1,9 @@
const React = require('react'); const React = require('react');
const ReactIntl = require('react-intl'); const ReactIntl = require('react-intl');
const ReactRouter = require('react-router-dom');
const Styled = require('styled-components'); const Styled = require('styled-components');
const Li = require('@ui/components/horizontal-list/li'); const Li = require('@ui/components/horizontal-list/li');
const NavLink = require('@ui/components/nav-link');
const constants = require('@ui/shared/constants'); const constants = require('@ui/shared/constants');
const PropTypes = require('@root/prop-types'); const PropTypes = require('@root/prop-types');
const Ul = require('@ui/components/horizontal-list/ul'); const Ul = require('@ui/components/horizontal-list/ul');
@ -17,10 +17,6 @@ const {
FormattedMessage FormattedMessage
} = ReactIntl; } = ReactIntl;
const {
NavLink
} = ReactRouter;
const { const {
breakpoints, breakpoints,
} = constants; } = constants;

View File

@ -1,10 +1,10 @@
const React = require('react'); const React = require('react');
const ReactIntl = require('react-intl'); const ReactIntl = require('react-intl');
const ReactRedux = require('react-redux'); const ReactRedux = require('react-redux');
const ReactRouter = require('react-router-dom');
const Button = require('@ui/components/button'); const Button = require('@ui/components/button');
const Column = require('@ui/components/column'); const Column = require('@ui/components/column');
const NavLink = require('@ui/components/nav-link');
const EmptyProjects = require('@components/empty/projects'); const EmptyProjects = require('@components/empty/projects');
const PropTypes = require('@root/prop-types'); const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row'); const Row = require('@ui/components/row');
@ -23,10 +23,6 @@ const {
projectsByOrgIdSelector projectsByOrgIdSelector
} = selectors; } = selectors;
const {
NavLink
} = ReactRouter;
const Projects = (props) => { const Projects = (props) => {
const { const {
org = {}, 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'), List: require('./components/list'),
Modal: require('./components/modal'), Modal: require('./components/modal'),
MiniMetric: require('./components/mini-metric'), MiniMetric: require('./components/mini-metric'),
NavLink: require('./components/nav-link'),
Notificaton: require('./components/notification'), Notificaton: require('./components/notification'),
Pagination: require('./components/pagination'), Pagination: require('./components/pagination'),
Radio: require('./components/radio'), Radio: require('./components/radio'),