Commit b46143cb authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza

CSS Grid

-configurable alignment
-Fix: csstype
parent cce2b97c
......@@ -69,6 +69,7 @@
"babel-preset-typescript": "^7.0.0-alpha.19",
"copy-webpack-plugin": "^6.0.2",
"cross-env": "^7.0.0",
"csstype": "^3.0.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.5.0",
......
import * as React from 'react';
import { withStyles, WithStyles, createStyles } from '@material-ui/core';
import { Property } from 'csstype';
const styles = (theme) => createStyles({
container: {
display: 'grid',
gridTemplateColumns: 'repeat(12, 1fr)',
},
spacing5: {
gridGap: '5px',
},
spacing10: {
gridGap: '10px',
},
spacing15: {
gridGap: '15px',
},
spacing20: {
gridGap: '20px',
},
spacing1rem: {
gridGap: '1rem',
},
item: {
display: 'inline-grid',
gridColumn: 'span 12',
},
xs: (props: any) => ({
[theme.breakpoints.up('xs')]: {
gridColumn: `span ${props.xs}`,
},
}),
sm: (props: any) => ({
[theme.breakpoints.up('sm')]: {
gridColumn: `span ${props.sm}`,
},
}),
md: (props: any) => ({
[theme.breakpoints.up('md')]: {
gridColumn: `span ${props.md}`,
},
}),
lg: (props: any) => ({
[theme.breakpoints.up('lg')]: {
gridColumn: `span ${props.lg}`,
},
}),
alignItems: (props: any) => ({
alignItems: props.alignItems,
}),
alignSelf: (props: any) => ({
alignSelf: props.alignSelf,
}),
});
type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
interface IGridContainer extends React.ClassAttributes<any>, Partial<WithStyles> {
children: React.ReactNode;
spacing?: 5 | 10 | 15 | 20 | '1rem';
alignItems?: Property.AlignItems;
}
interface IGridItem extends React.ClassAttributes<any>, Partial<WithStyles> {
children: React.ReactNode;
xs?: GridSize;
sm?: GridSize;
md?: GridSize;
lg?: GridSize;
alignSelf?: Property.AlignSelf;
}
/**
* Container with a fixed space between items based on the 12 column grid layout
* Items have to be wrapped into <GridItem/>
*/
function GridContainer(props: IGridContainer): JSX.Element {
const { classes, children, spacing = '1rem', alignItems } = props;
return (
<div
className={ `
${classes.container}
${classes[`spacing${spacing}`]}
${alignItems ? classes.alignItems : ''}
` }
>
{ children }
</div>
);
}
/**
* By default GridItem takes 12 columns
* <GridItem sm={ 6 } md={ 4 }> equals <GridItem xs={ 12 } sm={ 6 } md={ 4 } lg={ 4 }>
*/
function GridItem(props: IGridItem): JSX.Element {
const { classes, children, xs, sm, md, lg, alignSelf } = props;
return (
<div
className={ `
${classes.item}
${xs ? classes.xs : ''}
${sm ? classes.sm : ''}
${md ? classes.md : ''}
${lg ? classes.lg : ''}
${alignSelf ? classes.alignSelf : ''}
` }
>
{ children }
</div>
);
}
const StyledGridContainer = withStyles(styles)(GridContainer);
const StyledGridItem = withStyles(styles)(GridItem);
export { StyledGridItem as GridItem, StyledGridContainer as GridContainer }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment