extract service item to it's own component

This commit is contained in:
Sérgio Ramos 2017-01-10 14:58:00 +00:00
parent 270842db55
commit c9ea9117f0
3 changed files with 38 additions and 23 deletions

View File

@ -1,12 +1,13 @@
const React = require('react');
// const ReactRouter = require('react-router');
const ReactRouter = require('react-router');
const Anchor = require('@ui/components/anchor');
const List = require('@ui/components/list');
const PropTypes = require('@root/prop-types');
// const {
// Link
// } = ReactRouter;
const {
Link
} = ReactRouter;
const {
ListItem,
@ -21,15 +22,16 @@ const {
ListItemHeader
} = List;
const Service = ({
const ServiceItem = ({
org = '',
project = '',
service = {}
}) => {
// const to = `/${org}/projects/${project}/services/${service.id}`;
const to = `/${org}/projects/${project}/services/${service.id}`;
const childs = service.services.map((service) => (
<ListItem
collapsed={service.collapsed}
flat
key={service.uuid}
stacked={service.instances > 1}
@ -62,10 +64,21 @@ const Service = ({
);
return (
<ListItem headed>
<ListItem
collapsed={service.collapsed}
headed
>
<ListItemHeader>
<ListItemMeta>
<ListItemTitle>{service.name}</ListItemTitle>
<ListItemTitle>
<Link to={to}>
{Anchor.fn(
<Anchor secondary>
{service.name}
</Anchor>
)}
</Link>
</ListItemTitle>
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
</ListItemMeta>
<ListItemOptions></ListItemOptions>
@ -75,10 +88,10 @@ const Service = ({
);
};
Service.propTypes = {
ServiceItem.propTypes = {
org: React.PropTypes.string,
project: React.PropTypes.string,
service: PropTypes.service
};
module.exports = Service;
module.exports = ServiceItem;

View File

@ -3,7 +3,7 @@ const ReactRedux = require('react-redux');
const EmptyServices = require('@components/empty/services');
const PropTypes = require('@root/prop-types');
const Service = require('./service');
const ServiceItem = require('@components/service-item');
const selectors = require('@state/selectors');
const {
@ -26,7 +26,7 @@ const Services = ({
);
const serviceList = services.map((service) => (
<Service
<ServiceItem
key={service.uuid}
org={org.id}
project={project.id}

View File

@ -16,26 +16,28 @@ const paddingTop = (props) => props.headed && !props.fromHeader
? remcalc(47)
: remcalc(0);
const display = (props) => props.headed && !props.fromHeader && props.collapsed
? 'none'
: 'flex';
const StyledView = styled(Row)`
flex: 1;
margin: 0;
height: 100%;
padding-top: ${paddingTop};
display: ${display};
`;
const View = (props) => (
const View = (props) => {
const hide = props.headed && !props.fromHeader && props.collapsed;
return hide ? null : (
<StyledView name='list-item-view' {...props}>
{props.children}
</StyledView>
);
);
};
View.propTypes = {
children: React.PropTypes.node
children: React.PropTypes.node,
collapsed: React.PropTypes.bool,
fromHeader: React.PropTypes.bool,
headed: React.PropTypes.bool
};
module.exports = transferProps([