feat(joyent-cp-frontend): integrate toolkit's Breadcrumb

This commit is contained in:
Sérgio Ramos 2017-06-06 22:24:24 +01:00 committed by Judit Greskovits
parent e6b6f6a761
commit eb37c7de49
4 changed files with 36 additions and 63 deletions

View File

@ -1,66 +1,45 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Grid } from 'react-styled-flexboxgrid';
import { Link } from 'react-router-dom';
import { Grid, Col, Row } from 'react-styled-flexboxgrid';
import forceArray from 'force-array';
import PropTypes from 'prop-types';
import remcalc from 'remcalc';
import unitcalc from 'unitcalc';
import { H2 } from 'joyent-ui-toolkit';
const StyledDiv = styled.div`
border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0;
margin-bottom: ${remcalc(18)};
`;
const StyledH2 = H2.extend`
color: ${props => props.theme.primary};
margin: 0;
`;
import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';
const BreadcrumbLink = styled(Link)`
text-decoration: none;
color: ${props => props.theme.primary};
cursor: pointer;
&:visited {
color: inherit;
}
`;
const BreadcrumbSpan = styled.span`
color: ${props => props.theme.text};
const BreadcrumbContainer = styled.div`
border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
`;
function getBreadcrumbLinks(links) {
if (links.length) {
return links.reduce((breadcrumb, link, index) => {
if (breadcrumb.length) {
breadcrumb.push(
<BreadcrumbSpan key={breadcrumb.length}> / </BreadcrumbSpan>
);
}
breadcrumb.push(
<BreadcrumbLink key={breadcrumb.length} to={link.pathname}>
{link.name}
</BreadcrumbLink>
);
return breadcrumb;
}, []);
}
return null;
}
const getBreadcrumbItems = (...links) =>
forceArray(links).map(({ pathname, name }, i) => {
const item = i + 1 >= links.length
? name
: <BreadcrumbLink to={pathname}>{name}</BreadcrumbLink>;
const Breadcrumb = ({ links = [] }) =>
return <BreadcrumbItem key={name}>{item}</BreadcrumbItem>;
});
const NavBreadcrumb = ({ links = [] }) =>
<BreadcrumbContainer>
<Grid>
<Row>
<Col xs={12}>
<StyledDiv>
<StyledH2>
{getBreadcrumbLinks(links)}
</StyledH2>
</StyledDiv>
</Col>
</Row>
</Grid>;
<Breadcrumb>
{getBreadcrumbItems(...links)}
</Breadcrumb>
</Grid>
</BreadcrumbContainer>;
Breadcrumb.propTypes = {
NavBreadcrumb.propTypes = {
links: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string,
@ -69,4 +48,4 @@ Breadcrumb.propTypes = {
)
};
export default Breadcrumb;
export default NavBreadcrumb;

View File

@ -14,10 +14,6 @@ import { LayoutContainer } from '@components/layout';
import { Name, Manifest, Review } from '@components/deployment-groups/create';
import { H2 } from 'joyent-ui-toolkit';
const Title = H2.extend`
margin-top: 0;
`;
const validateName = async ({ name = '' }) => {
const { data } = await client.query({
fetchPolicy: 'network-only',
@ -210,7 +206,7 @@ class DeploymentGroupCreate extends Component {
return (
<LayoutContainer>
<Title>Creating deployment group</Title>
<H2>Creating deployment group</H2>
{view}
</LayoutContainer>
);

View File

@ -4,10 +4,9 @@ import { Row } from 'react-styled-flexboxgrid';
/**
* @example ./usage.md
*/
export default ({ children, ...rest }) => (
export default ({ children, ...rest }) =>
<Row name="breadcrum" {...rest}>
{children}
</Row>
);
</Row>;
export { default as Item } from './item';

View File

@ -21,11 +21,10 @@ const Arrow = styled.div`
margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
`;
export default ({ children, ...rest }) => (
export default ({ children, ...rest }) =>
<div>
<Name name="breadcrum-item" {...rest}>
{children}
</Name>
<Arrow />
</div>
);
</div>;