Flex.js

// @flow
import React from 'react';
import styled from 'styled-components';
import { Segment } from 'semantic-ui-react';

import { parsePadding } from '../utils/styledHelpers';
import type { Component as ComponentType } from 'styled-components';

type FlexItemProps = {
  flex?: string|number,
  padding?: string|number,
  verticalPadding?: string|number,
  horizontalPadding?: string|number,
  fullHeight?: boolean,
}

type FlexContainerProps = {
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around',
  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse',
  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse',
  padding?: string|number,
  verticalPadding?: string|number,
  horizontalPadding?: string|number,
  fullHeight?: boolean,
};

const flexItem = (Component: ComponentType) => styled(
  Component
)`
  flex: ${({ flex }: FlexItemProps) => flex || 0 };
  padding: ${parsePadding};
  height: ${({ fullHeight = false }: FlexContainerProps) => fullHeight ? '100%' : 'auto' };
`;

const flexContainer = (Component: ComponentType) => styled(
  Component
)`
  display: flex;
  align-items: ${({ alignItems = 'stretch' }: FlexContainerProps) => alignItems };
  flex-wrap: ${({ wrap = 'nowrap' }: FlexContainerProps) => wrap };
  justify-content: ${({ justifyContent = 'flex-start' }: FlexContainerProps) => justifyContent };
  flex-direction: ${({ direction = 'row' }: FlexContainerProps) => direction };
  padding: ${parsePadding};
  height: ${({ fullHeight = false }: FlexContainerProps) => fullHeight ? '100%' : 'auto' };
`

const FlexItem = flexItem((p) => <div {...p} />);
const FlexContainer = flexContainer((p) => <div {...p} />);
const FlexContainerSegment = flexContainer(Segment);

export {
  FlexContainer,
  flexContainer,
  flexItem,
  FlexItem,
  FlexContainerSegment
};