1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

list item ui component

This commit is contained in:
Sérgio Ramos 2017-01-09 12:13:12 +00:00
parent 73240d9165
commit 83d5350c81
13 changed files with 398 additions and 3 deletions

View File

@ -0,0 +1,18 @@
const React = require('react');
module.exports = (Component) => (props) => {
// eslint-disable-next-line react/prop-types
const _children = React.Children.map(props.children, (c) => {
return React.cloneElement(c, {
...c.props,
// eslint-disable-next-line react/prop-types
collapsed: props.collapsed
});
});
return (
<Component {...props}>
{_children}
</Component>
);
};

View File

@ -0,0 +1,43 @@
const Title = require('./title');
const Styled = require('styled-components');
const React = require('react');
const {
default: styled
} = Styled;
const margin = (props) => props.collapsed ? `
margin-left: auto;
` : '';
const justify = (props) => props.collapsed ? 'flex-end' : 'flex-start';
const xs = (props) => props.collapsed ? 6 : 12;
const StyledTitle = styled(Title)`
font-weight: normal !important;
flex-grow: 2;
`;
const InnerDescription = styled.div`
${margin}
justify-content: ${justify};
`;
const Description = (props) => (
<StyledTitle
collapsed={props.collapsed}
name='list-item-description'
xs={xs(props)}
>
<InnerDescription collapsed={props.collapsed}>
{props.children}
</InnerDescription>
</StyledTitle>
);
Description.propTypes = {
children: React.PropTypes.node,
collapsed: React.PropTypes.bool
};
module.exports = Description;

View File

@ -0,0 +1,10 @@
module.exports = {
ListItem: require('./item'),
ListItemView: require('./view'),
ListItemTitle: require('./title'),
ListItemSubTitle: require('./subtitle'),
ListItemDescription: require('./description'),
ListItemMeta: require('./meta'),
ListItemOutlet: require('./outlet'),
ListItemOptions: require('./options')
};

View File

@ -0,0 +1,34 @@
const Collapsed = require('./collapsed');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const Row = require('../row');
const Styled = require('styled-components');
const {
boxes,
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const height = (props) => props.collapsed ? remcalc(48) : remcalc(126);
const Item = styled(Row)`
height: ${height}
box-shadow: ${boxes.bottomShaddow};
border: 1px solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary};
`;
module.exports = Collapsed((props) => (
<Item name='list-item' {...props}>
{props.children}
</Item>
));

View File

@ -0,0 +1,27 @@
const Collapsed = require('./collapsed');
const Column = require('../column');
const Styled = require('styled-components');
const React = require('react');
const Row = require('../row');
const {
default: styled
} = Styled;
const xs = (props) => props.collapsed ? 12 : 6;
const InnerRow = styled(Row)`
height: 100%;
`;
module.exports = Collapsed((props) => (
<Column
name='list-item-meta'
xs={xs(props)}
{...props}
>
<InnerRow>
{props.children}
</InnerRow>
</Column>
));

View File

@ -0,0 +1,63 @@
const Button = require('../button');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const height = (props) => props.collapsed ? remcalc(46) : remcalc(124);
const Nav = styled.nav`
flex: 0 0 ${remcalc(47)};
border-left: 1px solid ${colors.borderSecondary};
`;
const StyledButton = styled(Button)`
border-width: 0;
box-shadow: none;
width: 100%;
height: ${height}; /* 100% doest work on safari */
&:focus {
border-width: 0;
}
&:hover {
border-width: 0;
}
&:active,
&:active:hover,
&:active:focus {
border-width: 0;
}
`;
const Options = (props) => (
<Nav name='list-item-options'>
<StyledButton
rect
secondary
{...props}
>
{props.children}
</StyledButton>
</Nav>
);
Options.propTypes = {
children: React.PropTypes.node
};
module.exports = Options;

View File

@ -0,0 +1,25 @@
const Column = require('../column');
const React = require('react');
const Outlet = (props) => {
if (props.collapsed) {
return null;
}
return (
<Column
name='list-item-outlet'
xs={6}
{...props}
>
{props.children}
</Column>
);
};
Outlet.propTypes = {
children: React.PropTypes.node,
collapsed: React.PropTypes.bool
};
module.exports = Outlet;

View File

@ -0,0 +1,33 @@
const Title = require('./title');
const React = require('react');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const Span = styled.span`
display: flex;
flex-direction: column;
justify-content: flex-start;
font-weight: normal;
font-style: normal;
font-stretch: normal;
font-size: 14px;
color: #646464;
`;
const Subtitle = (props) => (
<Title name='list-item-subtitle' {...props}>
<Span>
{props.children}
</Span>
</Title>
);
Subtitle.propTypes = {
children: React.PropTypes.node
};
module.exports = Subtitle;

View File

@ -0,0 +1,70 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const isString = require('lodash.isstring');
const Styled = require('styled-components');
const React = require('react');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const justify = (props) => props.collapsed ? 'center' : 'flex-start';
const width = (props) => props.collapsed ? 'auto' : '100%';
const direction = (props) => props.collapsed ? 'column' : 'row';
const grow = (props) => props.collapsed ? 0 : 2;
const xs = (props) => props.collapsed ? 6 : 12;
const Container = styled.div`
font-size: ${remcalc(16)};
font-weight: 600;
line-height: 1.5;
color: ${colors.brandSecondaryColor};
display: flex;
flex-direction: ${direction};
justify-content: ${justify};
flex-grow: ${grow};
width: ${width};
padding-left: 0.5rem;
padding-right: 0.5rem;
`;
const Span = styled.span`
display: flex;
flex-direction: column;
justify-content: center;
`;
const Title = (props) => {
const _children = !isString(props.children) ? props.children : (
<Span>{props.children}</Span>
);
return (
<Container
collapsed={props.collapsed}
name='list-item-title'
xs={xs(props)}
{...props}
>
{_children}
</Container>
);
};
Title.propTypes = {
children: React.PropTypes.node,
collapsed: React.PropTypes.bool
};
module.exports = Title;

View File

@ -0,0 +1,20 @@
const Collapsed = require('./collapsed');
const React = require('react');
const Row = require('../row');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const View = styled(Row)`
flex: 1;
margin: 0;
height: 100%;
`;
module.exports = Collapsed((props) => (
<View name='list-item-view' {...props}>
{props.children}
</View>
));

View File

@ -12,7 +12,7 @@ const Item = require('./item');
const find = require('lodash.find');
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
// const styles = require('./style.css');
const RadioGroup = React.createClass({
propTypes: {
@ -93,8 +93,7 @@ const RadioGroup = React.createClass({
} = this;
const cn = classNames(
className,
styles.group
className
);
const _children = React.Children.map(children, (child, i) => {

View File

@ -6,6 +6,7 @@ module.exports = {
Column: require('./components/column'),
Container: require('./components/container'),
Input: require('./components/input'),
List: require('./components/list'),
Modal: require('./components/modal'),
MiniMetric: require('./components/mini-metric'),
Notificaton: require('./components/notification'),

View File

@ -14,6 +14,16 @@ const {
Column,
Avatar,
Input,
List: {
ListItem,
ListItemView,
ListItemTitle,
ListItemSubTitle,
ListItemDescription,
ListItemMeta,
ListItemOutlet,
ListItemOptions,
},
MiniMetric,
Modal,
Notificaton,
@ -30,6 +40,8 @@ const {
RadioGroup
} = require('../src/');
const seed = require('./seed');
const {
selectData
@ -471,3 +483,43 @@ storiesOf('Metrics', module)
name='Memory'
/>
));
storiesOf('ListItem', module)
.add('default', () => (
<Base>
<ListItem>
<ListItemView>
<ListItemMeta>
<ListItemTitle>Nginx 01</ListItemTitle>
<ListItemSubTitle>4 instances</ListItemSubTitle>
<ListItemDescription>Flags</ListItemDescription>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
<ListItemOptions>
</ListItemOptions>
</ListItem>
</Base>
))
.add('collapsed', () => (
<Base>
<ListItem collapsed>
<ListItemView>
<ListItemMeta>
<ListItemTitle>Nginx 01</ListItemTitle>
<ListItemSubTitle>4 instances</ListItemSubTitle>
<ListItemDescription>Flags</ListItemDescription>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
<ListItemOptions>
</ListItemOptions>
</ListItem>
</Base>
));