@kiwicom/orbit-components/es/utils/Grid/helpers/getViewportGridStyles.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import { css } from "styled-components";
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
 */
const getViewportGridStyles = ({
  viewport,
  index,
  devices
}) => props => {
  if (props[viewport]) {
    const {
      inline,
      maxWidth,
      gap,
      columnGap,
      rowGap,
      rows,
      columns
    } = props[viewport];
    const compatibleIE = getViewportIEGridStyles(props[viewport], React.Children.count(props.children), {
      index,
      devices
    }, props);
    return css(["", ";max-width:", ";grid-template-columns:", ";grid-template-rows:", ";grid-column-gap:", ";grid-row-gap:", ";grid-gap:", ";", ";"], getDisplay(inline, viewport === "smallMobile"), maxWidth, columns, rows, columnGap, rowGap, gap, compatibleIE);
  }

  return false;
};

export default getViewportGridStyles;