better handling of collapsed states for ListItem

This commit is contained in:
Sérgio Ramos 2017-01-11 14:13:58 +00:00
parent 0b7473d9de
commit 3433c24bee
7 changed files with 75 additions and 15 deletions

View File

@ -1,19 +1,41 @@
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
const Title = require('./title');
const {
default: styled
remcalc
} = fns;
const {
default: styled,
css
} = 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 justify = (props) => props.collapsed
? 'flex-end'
: 'flex-start';
const xs = (props) => props.collapsed
? 6
: 12;
const collapsed = (...args) => (props) => !props.collapsed
? css(...args)
: css``;
const StyledTitle = styled(Title)`
${collapsed`
position: absolute;
bottom: 0;
padding-bottom: ${remcalc(12)};
padding-top: 0;
`}
font-weight: normal !important;
flex-grow: 2;
`;

View File

@ -20,6 +20,6 @@ module.exports = styled(View)`
padding-top: ${remcalc(62)};
padding-left: ${remcalc(23)};
padding-right: ${remcalc(23)};
padding-bottom: ${remcalc(15)};
padding-bottom: ${remcalc(5)};
background-color: ${colors.brandInactive};
`;

View File

@ -42,6 +42,10 @@ const shadow = (props) => props.stacked
? boxes.bottomShaddowDarker
: boxes.bottomShaddow;
const marginBottom = (props) => props.stacked
? remcalc(16)
: remcalc(10);
const Item = styled(Row)`
position: relative;
@ -50,7 +54,7 @@ const Item = styled(Row)`
box-shadow: ${shadow};
border: 1px solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary};
margin-bottom: ${remcalc(10)};
margin-bottom: ${marginBottom};
`;
module.exports = transferProps([

View File

@ -9,9 +9,16 @@ const {
default: styled
} = Styled;
const xs = (props) => props.collapsed ? 12 : 6;
const xs = (props) => props.collapsed
? 12
: 6;
const display = (props) => !props.collapsed
? 'block'
: 'flex';
const InnerRow = styled(Row)`
display: ${display};
height: 100%;
`;
@ -26,7 +33,7 @@ module.exports = transferProps([
xs={xs(props)}
{...props}
>
<InnerRow>
<InnerRow collapsed={props.collapsed}>
{props.children}
</InnerRow>
</Column>

View File

@ -24,8 +24,12 @@ const color = (props) => props.fromHeader
? colors.brandPrimaryColor
: '#646464';
const display = (props) => !props.collapsed
? 'inline-block'
: 'flex';
const Span = styled.span`
display: flex;
display: ${display};
flex-direction: column;
font-weight: normal;
@ -38,6 +42,7 @@ const Span = styled.span`
`;
const StyledTitle = styled(Title)`
display: ${display};
padding: ${padding};
`;

View File

@ -24,11 +24,25 @@ const padding = (props) => !props.collapsed
? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}`
: `0 ${remcalc(18)}`;
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 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)};
@ -46,8 +60,12 @@ const Container = styled.div`
padding: ${padding};
`;
const display = (props) => !props.collapsed
? 'inline-block'
: 'flex';
const Span = styled.span`
display: flex;
display: ${display};
flex-direction: column;
justify-content: center;
`;

View File

@ -12,6 +12,10 @@ const {
default: styled
} = Styled;
const height = (props) => props.collapsed
? remcalc(48)
: 'auto';
const paddingTop = (props) => props.headed && !props.fromHeader
? remcalc(47)
: remcalc(0);
@ -19,7 +23,7 @@ const paddingTop = (props) => props.headed && !props.fromHeader
const StyledView = styled(Row)`
flex: 1;
margin: 0;
height: 100%;
height: ${height};
padding-top: ${paddingTop};
`;