Files
karma/ui/src/Components/Grid/AlertGrid/GridSize.js
2019-10-02 19:32:22 +01:00

26 lines
907 B
JavaScript

// grid sizes, defines how many columns are used depending on the screen width
// this is config as expected by https://github.com/callmecavs/bricks.js#sizes
const GridSizesConfig = (canvasWidth, baseWidth) => {
const generatedSizes = [];
for (let i = 2; i < 20; i++) {
generatedSizes.push({
mq: `${i * baseWidth}px`,
columns: i,
gutter: 0
});
}
return [...[{ columns: 1, gutter: 0 }], ...generatedSizes];
};
const GetColumnsCount = (canvasWidth, baseWidth) =>
[{ mq: "0px", columns: 1 }, ...GridSizesConfig(canvasWidth, baseWidth)]
.filter(gs => gs.mq !== undefined)
.filter(gs => canvasWidth >= Number.parseInt(gs.mq))
.map(gs => gs.columns)
.pop();
const GetGridElementWidth = (innerWidth, outerWidth, baseWidth) =>
Math.floor(innerWidth / GetColumnsCount(outerWidth, baseWidth));
export { GridSizesConfig, GetColumnsCount, GetGridElementWidth };