@zenkit/layout/esm/flex.js

ZenKit components for impliments layout

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import * as React from 'react';
import cn from 'classnames';
import { withStyles } from '@zenkit/styles';
import Box from './box';
import FlexItem from './flex-item';
export const styles = {
  flow: {
    flexFlow: props => {
      let direction = 'row';

      if (props.column) {
        direction = 'column';
      }

      if (props.reverse) {
        direction += '-reverse';
      }

      return `${direction} ${props.wrap ? 'wrap' : 'nowrap'}`;
    }
  },
  justify: {
    justifyContent: props => props.justify
  },
  items: {
    alignItems: props => props.items
  },
  content: {
    alignContent: props => props.content
  }
};

function Flex(props) {
  const {
    justify,
    items,
    content,
    classes,
    className: classNameProps,
    children
  } = props,
        otherProps = _objectWithoutPropertiesLoose(props, ["column", "reverse", "wrap", "justify", "items", "content", "classes", "className", "children"]);

  return React.createElement(Box, _extends({
    display: "flex",
    className: cn(classes.flow, {
      [classes.justify]: justify,
      [classes.items]: items,
      [classes.content]: content
    }, classNameProps)
  }, otherProps), children);
}

Flex.Item = FlexItem;
export default withStyles(styles)(Flex);