extract service item to it's own component
This commit is contained in:
parent
270842db55
commit
c9ea9117f0
@ -1,12 +1,13 @@
|
|||||||
const React = require('react');
|
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 List = require('@ui/components/list');
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
|
|
||||||
// const {
|
const {
|
||||||
// Link
|
Link
|
||||||
// } = ReactRouter;
|
} = ReactRouter;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
ListItem,
|
ListItem,
|
||||||
@ -21,15 +22,16 @@ const {
|
|||||||
ListItemHeader
|
ListItemHeader
|
||||||
} = List;
|
} = List;
|
||||||
|
|
||||||
const Service = ({
|
const ServiceItem = ({
|
||||||
org = '',
|
org = '',
|
||||||
project = '',
|
project = '',
|
||||||
service = {}
|
service = {}
|
||||||
}) => {
|
}) => {
|
||||||
// const to = `/${org}/projects/${project}/services/${service.id}`;
|
const to = `/${org}/projects/${project}/services/${service.id}`;
|
||||||
|
|
||||||
const childs = service.services.map((service) => (
|
const childs = service.services.map((service) => (
|
||||||
<ListItem
|
<ListItem
|
||||||
|
collapsed={service.collapsed}
|
||||||
flat
|
flat
|
||||||
key={service.uuid}
|
key={service.uuid}
|
||||||
stacked={service.instances > 1}
|
stacked={service.instances > 1}
|
||||||
@ -62,10 +64,21 @@ const Service = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ListItem headed>
|
<ListItem
|
||||||
|
collapsed={service.collapsed}
|
||||||
|
headed
|
||||||
|
>
|
||||||
<ListItemHeader>
|
<ListItemHeader>
|
||||||
<ListItemMeta>
|
<ListItemMeta>
|
||||||
<ListItemTitle>{service.name}</ListItemTitle>
|
<ListItemTitle>
|
||||||
|
<Link to={to}>
|
||||||
|
{Anchor.fn(
|
||||||
|
<Anchor secondary>
|
||||||
|
{service.name}
|
||||||
|
</Anchor>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</ListItemTitle>
|
||||||
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
|
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
|
||||||
</ListItemMeta>
|
</ListItemMeta>
|
||||||
<ListItemOptions>…</ListItemOptions>
|
<ListItemOptions>…</ListItemOptions>
|
||||||
@ -75,10 +88,10 @@ const Service = ({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Service.propTypes = {
|
ServiceItem.propTypes = {
|
||||||
org: React.PropTypes.string,
|
org: React.PropTypes.string,
|
||||||
project: React.PropTypes.string,
|
project: React.PropTypes.string,
|
||||||
service: PropTypes.service
|
service: PropTypes.service
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = Service;
|
module.exports = ServiceItem;
|
@ -3,7 +3,7 @@ const ReactRedux = require('react-redux');
|
|||||||
|
|
||||||
const EmptyServices = require('@components/empty/services');
|
const EmptyServices = require('@components/empty/services');
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
const Service = require('./service');
|
const ServiceItem = require('@components/service-item');
|
||||||
const selectors = require('@state/selectors');
|
const selectors = require('@state/selectors');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -26,7 +26,7 @@ const Services = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
const serviceList = services.map((service) => (
|
const serviceList = services.map((service) => (
|
||||||
<Service
|
<ServiceItem
|
||||||
key={service.uuid}
|
key={service.uuid}
|
||||||
org={org.id}
|
org={org.id}
|
||||||
project={project.id}
|
project={project.id}
|
||||||
|
@ -16,26 +16,28 @@ const paddingTop = (props) => props.headed && !props.fromHeader
|
|||||||
? remcalc(47)
|
? remcalc(47)
|
||||||
: remcalc(0);
|
: remcalc(0);
|
||||||
|
|
||||||
const display = (props) => props.headed && !props.fromHeader && props.collapsed
|
|
||||||
? 'none'
|
|
||||||
: 'flex';
|
|
||||||
|
|
||||||
const StyledView = styled(Row)`
|
const StyledView = styled(Row)`
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: ${paddingTop};
|
padding-top: ${paddingTop};
|
||||||
display: ${display};
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const View = (props) => (
|
const View = (props) => {
|
||||||
<StyledView name='list-item-view' {...props}>
|
const hide = props.headed && !props.fromHeader && props.collapsed;
|
||||||
{props.children}
|
|
||||||
</StyledView>
|
return hide ? null : (
|
||||||
);
|
<StyledView name='list-item-view' {...props}>
|
||||||
|
{props.children}
|
||||||
|
</StyledView>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
View.propTypes = {
|
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([
|
module.exports = transferProps([
|
||||||
|
Loading…
Reference in New Issue
Block a user