2016-10-24 23:58:09 +03:00
|
|
|
/*
|
|
|
|
* based on
|
2016-10-26 12:51:06 +03:00
|
|
|
* github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Row.js
|
2016-10-24 23:58:09 +03:00
|
|
|
*/
|
|
|
|
|
2017-02-20 18:15:36 +02:00
|
|
|
const Styled = require('styled-components');
|
|
|
|
const React = require('react');
|
|
|
|
|
|
|
|
const Column = require('../column');
|
2017-02-15 03:19:26 +02:00
|
|
|
const composers = require('../../shared/composers');
|
2016-12-06 13:50:24 +02:00
|
|
|
const constants = require('../../shared/constants');
|
|
|
|
const match = require('../../shared/match');
|
|
|
|
const sizeMatch = require('./size-match');
|
|
|
|
|
|
|
|
const {
|
|
|
|
breakpoints,
|
|
|
|
sizes
|
|
|
|
} = constants;
|
|
|
|
|
2017-02-15 03:19:26 +02:00
|
|
|
const {
|
|
|
|
Baseline
|
|
|
|
} = composers;
|
|
|
|
|
2016-12-06 13:50:24 +02:00
|
|
|
const {
|
|
|
|
default: styled
|
|
|
|
} = Styled;
|
|
|
|
|
|
|
|
const margin = sizes.gutterCompensation || '-0.5rem';
|
|
|
|
|
|
|
|
const direction = (size) => match(sizeMatch(size, {
|
|
|
|
reverse: 'row-reverse'
|
|
|
|
}), 'row');
|
|
|
|
|
|
|
|
const justify = (size) => match(sizeMatch(size, {
|
|
|
|
center: 'center',
|
|
|
|
end: 'flex-end',
|
|
|
|
around: 'space-around',
|
|
|
|
between: 'space-between'
|
|
|
|
}), 'flex-start');
|
|
|
|
|
|
|
|
const textAlign = (size) => match(sizeMatch(size, {
|
|
|
|
center: 'center',
|
|
|
|
end: 'end'
|
|
|
|
}), 'start');
|
|
|
|
|
|
|
|
const alignItems = (size) => match(sizeMatch(size, {
|
|
|
|
top: 'flex-start',
|
|
|
|
middle: 'center',
|
|
|
|
bottom: 'flex-end'
|
|
|
|
}), 'stretch');
|
|
|
|
|
2016-12-08 19:29:04 +02:00
|
|
|
// const order = (size) => match(sizeMatch(size, {
|
|
|
|
// first: -1,
|
|
|
|
// last: 1
|
|
|
|
// }), 0);
|
2016-12-06 13:50:24 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* ```html
|
|
|
|
* <row center top={['xs', 'sm']} first='lg' />
|
|
|
|
* ```
|
|
|
|
**/
|
2017-02-20 18:15:36 +02:00
|
|
|
const StyledRow = styled.div`
|
2016-12-06 13:50:24 +02:00
|
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
|
|
|
flex: 0 1 auto;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
margin-left: ${margin};
|
|
|
|
margin-right: ${margin};
|
2017-02-03 14:35:33 +02:00
|
|
|
min-width: 100%;
|
2016-12-06 13:50:24 +02:00
|
|
|
|
|
|
|
flex-direction: ${direction('xs')};
|
|
|
|
justify-content: ${justify('xs')};
|
|
|
|
text-align: ${textAlign('xs')};
|
|
|
|
align-items: ${alignItems('xs')};
|
|
|
|
|
|
|
|
${breakpoints.small`
|
|
|
|
flex-direction: ${direction('sm')};
|
|
|
|
justify-content: ${justify('sm')};
|
|
|
|
text-align: ${textAlign('sm')};
|
|
|
|
align-items: ${alignItems('sm')};
|
|
|
|
`}
|
|
|
|
|
|
|
|
${breakpoints.medium`
|
|
|
|
flex-direction: ${direction('md')};
|
|
|
|
justify-content: ${justify('md')};
|
|
|
|
text-align: ${textAlign('md')};
|
|
|
|
align-items: ${alignItems('md')};
|
|
|
|
`}
|
|
|
|
|
|
|
|
${breakpoints.large`
|
|
|
|
flex-direction: ${direction('lg')};
|
|
|
|
justify-content: ${justify('lg')};
|
|
|
|
text-align: ${textAlign('lg')};
|
|
|
|
align-items: ${alignItems('lg')};
|
|
|
|
`}
|
|
|
|
`;
|
2017-02-15 03:19:26 +02:00
|
|
|
|
2017-02-20 18:15:36 +02:00
|
|
|
const Row = ({
|
|
|
|
stretch = false,
|
|
|
|
children,
|
|
|
|
...rest
|
|
|
|
}) => {
|
|
|
|
return stretch ? (
|
|
|
|
<StyledRow {...rest}>
|
|
|
|
<Column xs={12}>
|
|
|
|
{children}
|
|
|
|
</Column>
|
|
|
|
</StyledRow>
|
|
|
|
) : (
|
|
|
|
<StyledRow {...rest}>
|
|
|
|
{children}
|
|
|
|
</StyledRow>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Row.propTypes = {
|
|
|
|
children: React.PropTypes.node,
|
|
|
|
stretch: React.PropTypes.bool
|
|
|
|
};
|
|
|
|
|
2017-02-15 03:19:26 +02:00
|
|
|
module.exports = Baseline(
|
|
|
|
Row
|
|
|
|
);
|