@baransu/react-styled-flexboxgrid/src/components/Row.js

Grid system based on styled-components and flexbox for React

import PropTypes from "prop-types";
import styled from "@emotion/styled";
import { css } from "@emotion/core";

import config, { DIMENSION_NAMES } from "../config";

const ModificatorType = PropTypes.oneOf(DIMENSION_NAMES);

const reverse = p =>
  p.reverse &&
  css`
    flex-direction: row-reverse;
  `;

const start = p =>
  p.start
    ? css`
        @media ${config(p).media[p.start]} {
          justify-content: flex-start;
        }
      `
    : css``;

const center = p =>
  p.center
    ? css`
        @media ${config(p).media[p.center]} {
          justify-content: center;
        }
      `
    : css``;

const end = p =>
  p.end
    ? css`
        @media ${config(p).media[p.end]} {
          justify-content: flex-end;
        }
      `
    : css``;

const top = p =>
  p.top
    ? css`
        @media ${config(p).media[p.top]} {
          align-items: flex-start;
        }
      `
    : css``;

const middle = p =>
  p.middle
    ? css`
        @media ${config(p).media[p.middle]} {
          align-items: center;
        }
      `
    : css``;

const bottom = p =>
  p.bottom
    ? css`
        @media ${config(p).media[p.bottom]} {
          align-items: flex-end;
        }
      `
    : css``;

const around = p =>
  p.around
    ? css`
        @media ${config(p).media[p.around]} {
          justify-content: space-around;
        }
      `
    : css``;

const between = p =>
  p.between
    ? css`
        @media ${config(p).media[p.between]} {
          justify-content: space-between;
        }
      `
    : css``;

const first = p =>
  p.first
    ? css`
        @media ${config(p).media[p.first]} {
          order: -1;
        }
      `
    : css``;

const last = p =>
  p.last
    ? css`
        @media ${config(p).media[p.last]} {
          order: 1;
        }
      `
    : css``;

const margin = p =>
  css`
    ${(config(p).gutterWidth / 2) * -1}rem;
  `;

const Row = styled.div`
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: ${margin}
  margin-left: ${margin}

  ${reverse}
  ${start}
  ${center}
  ${end}
  ${top}
  ${middle}
  ${bottom}
  ${around}
  ${between}
  ${first}
  ${last}
`;

Row.displayName = "Row";

Row.propTypes = {
  reverse: PropTypes.bool,
  start: ModificatorType,
  center: ModificatorType,
  end: ModificatorType,
  top: ModificatorType,
  middle: ModificatorType,
  bottom: ModificatorType,
  around: ModificatorType,
  between: ModificatorType,
  first: ModificatorType,
  last: ModificatorType,
  children: PropTypes.node
};

export default Row;