In this scenario, I am attempting to iterate through props to generate css rules for multiple media queries.
How to Use
<FlexContainerExperimental
direction="column"
mediaQueries={[
{mediaQueryMinWidth: props.theme.minWidthLargeDevice, direction: 'row'},
{mediaQueryMinWidth: props.theme.minWidthMediumDevice, direction: 'row', itemsPerLane: 2},
]}
>
...
</FlexContainerExperimental>
Custom Styled Component
interface FlexContainerSettings {
direction?: string;
itemsPerLane?: number;
}
interface FlexContainerExperimentalProps extends FlexContainerSettings {
// tslint:disable-next-line:no-any
children: any;
className?: string;
mediaQueries?: MediaQuery[];
}
interface MediaQuery extends FlexContainerSettings {
mediaQueryMinWidth: string;
}
// tslint:disable:no-any
const Container = styled.div<FlexContainerExperimentalProps>`
display: flex;
margin-left: -${props => props.theme.itemHorizontalMargin};
margin-top: -${props => props.theme.itemVerticalMargin};
flex-direction: ${props => props.direction};
${props => props.mediaQueries && props.mediaQueries.map((mediaQuery: MediaQuery) => `
@media all and (min-width: ${mediaQuery.mediaQueryMinWidth}) {
flex-direction: ${mediaQuery.direction};
${mediaQuery.itemsPerLane && `
flex-wrap: wrap;
& > * {
flex: 1 1 calc(${100 / mediaQuery.itemsPerLane}% - ${
mediaQuery.direction === 'column' ||
(!mediaQuery.direction && props.direction === 'column')
? props.theme.itemVerticalMargin
: props.theme.itemHorizontalMargin}
);
}
`};
};
`).join()};
`;
function FlexContainerExperimental(props: FlexContainerExperimentalProps) {
const { children, ...rest } = props;
return (
<Container {...rest}>
{children}
</Container>
);
}
export { FlexContainerExperimental };
export * from './FlexItem';
Issue Encountered
It seems that only the first media query in the array is being applied. To put it differently, the behavior changes based on the order of objects within the mediaQueries array.
mediaQueries={[
{mediaQueryMinWidth: props.theme.minWidthMediumDevice, direction: 'row', itemsPerLane: 2},
{mediaQueryMinWidth: props.theme.minWidthLargeDevice, direction: 'row'},
]}