@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
42 lines (39 loc) • 1.75 kB
JavaScript
import * as React from "react";
import { css } from "styled-components";
import getSpacingToken from "../../../common/getSpacingToken";
import getViewportIEGridStyles from "./getViewportIEGridStyles";
import getDisplay from "./getDisplay";
/*
We need to get gap, rowGap and columnGap recursively because someone can change row or columns
in some mediaQuery, so we need to render IE compatible format once again and we need to know to gaps
Also we want to render only own gaps into CSS
*/
var getViewportGridStyles = function getViewportGridStyles(_ref) {
var viewport = _ref.viewport,
index = _ref.index,
devices = _ref.devices,
theme = _ref.theme;
return function (props) {
if (props[viewport]) {
var _props$viewport = props[viewport],
inline = _props$viewport.inline,
maxWidth = _props$viewport.maxWidth,
gap = _props$viewport.gap,
columnGap = _props$viewport.columnGap,
rowGap = _props$viewport.rowGap,
rows = _props$viewport.rows,
columns = _props$viewport.columns,
width = _props$viewport.width;
var compatibleIE = getViewportIEGridStyles(props[viewport], React.Children.count(props.children), {
index: index,
devices: devices
}, props);
return css(["", ";max-width:", ";width:", ";grid-template-columns:", ";grid-template-rows:", ";grid-column-gap:", ";grid-row-gap:", ";grid-gap:", ";margin-bottom:", ";", ";"], getDisplay(inline, viewport === "smallMobile"), maxWidth, width, columns, rows, columnGap, rowGap, gap, getSpacingToken({
spaceAfter: props.spaceAfter,
theme: theme
}), compatibleIE);
}
return css([""]);
};
};
export default getViewportGridStyles;