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:
parent
73240d9165
commit
83d5350c81
18
ui/src/components/list/collapsed.js
Normal file
18
ui/src/components/list/collapsed.js
Normal 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>
|
||||
);
|
||||
};
|
43
ui/src/components/list/description.js
Normal file
43
ui/src/components/list/description.js
Normal 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;
|
10
ui/src/components/list/index.js
Normal file
10
ui/src/components/list/index.js
Normal 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')
|
||||
};
|
34
ui/src/components/list/item.js
Normal file
34
ui/src/components/list/item.js
Normal 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>
|
||||
));
|
27
ui/src/components/list/meta.js
Normal file
27
ui/src/components/list/meta.js
Normal 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>
|
||||
));
|
63
ui/src/components/list/options.js
Normal file
63
ui/src/components/list/options.js
Normal 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;
|
25
ui/src/components/list/outlet.js
Normal file
25
ui/src/components/list/outlet.js
Normal 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;
|
33
ui/src/components/list/subtitle.js
Normal file
33
ui/src/components/list/subtitle.js
Normal 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;
|
70
ui/src/components/list/title.js
Normal file
70
ui/src/components/list/title.js
Normal 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;
|
20
ui/src/components/list/view.js
Normal file
20
ui/src/components/list/view.js
Normal 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>
|
||||
));
|
@ -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) => {
|
||||
|
@ -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'),
|
||||
|
@ -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>
|
||||
));
|
||||
|
Loading…
Reference in New Issue
Block a user