/
Grid.js
46 lines (40 loc) · 1.24 KB
/
Grid.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import Flex from '../Flex/Flex';
import './Grid.css';
export default class Grid extends PureComponent {
static propTypes = {
alignChildren: PropTypes.oneOf(['start', 'middle', 'end']),
autoFitWidthMax: PropTypes.string,
autoFitWidthMin: PropTypes.string,
className: PropTypes.string,
columnCount: PropTypes.string,
columnWidth: PropTypes.string,
gap: PropTypes.oneOf(['x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12']),
};
render() {
const {
alignChildren,
autoFitWidthMax,
autoFitWidthMin,
className,
columnCount,
columnWidth,
gap,
...rest
} = this.props;
const classes = classnames('Grid', {
[`Grid--align-${alignChildren}`]: alignChildren,
[`Grid--gap-${gap}`]: gap,
}, className);
const style = {
gridTemplateColumns:
(columnCount && `repeat(${columnCount}, ${columnWidth || 'max-content'})`) ||
((autoFitWidthMin && `repeat(auto-fit, minmax(${autoFitWidthMin}, ${autoFitWidthMax || '1fr'})`) || null),
};
return (
<Flex { ...rest } className={ classes } style={ style } />
);
}
}