@zenkit/layout/esm/flex-item.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';
export const styles = {
  flex: {
    flex: props => {
      let flex = `${props.grow}`;

      if (props.shrink !== 1) {
        flex += ` ${props.shrink}`;
      }

      if (props.basis !== 'auto') {
        flex += ` ${props.basis}`;
      }

      return flex;
    }
  },
  align: {
    alignSelf: props => props.align
  },
  order: {
    order: props => props.order
  }
};

function FlexItem(props) {
  const {
    align,
    order,
    grow,
    shrink,
    basis,
    classes,
    className: classNameProps,
    children
  } = props,
        otherProps = _objectWithoutPropertiesLoose(props, ["align", "order", "grow", "shrink", "basis", "classes", "className", "children"]);

  return React.createElement(Box, _extends({
    className: cn({
      [classes.flex]: grow !== 0 || shrink !== 1 || basis !== 'auto',
      [classes.align]: align,
      [classes.order]: order
    }, classNameProps)
  }, otherProps), children);
}

export default withStyles(styles)(FlexItem);