Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

extract service item to it's own component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/containers/services/service.js → frontend/src/components/service-item/index.js
View File

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

4
frontend/src/containers/services/index.js
View File

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

24
ui/src/components/list/view.js
View File

@ -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([