pouncejs

Version:
A collection of UI components from Panther labs
39 lines (37 loc) • 1.37 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../Box';
import { useItemSpacingProps } from './utils';

/**
 * Extends <a href="/#/Box">Box</a>
 *
 * Responsive flexbox layout component. You should use this anytime you want a flex container or
 * wrapper around a certain layout
 */
export var Flex = /*#__PURE__*/React.forwardRef(function Flex(props, ref) {
  var direction = props.direction,
      justify = props.justify,
      align = props.align,
      inline = props.inline,
      wrap = props.wrap,
      spacing = props.spacing,
      shrink = props.shrink,
      grow = props.grow,
      basis = props.basis,
      sx = props.sx,
      rest = _objectWithoutPropertiesLoose(props, ["direction", "justify", "align", "inline", "wrap", "spacing", "shrink", "grow", "basis", "sx"]);

  var itemSpacingProps = useItemSpacingProps(spacing, direction || rest.flexDirection, sx);
  return /*#__PURE__*/React.createElement(Box, _extends({
    display: inline ? 'inline-flex' : 'flex',
    ref: ref,
    flexDirection: direction,
    justifyContent: justify,
    alignItems: align,
    flexWrap: wrap,
    flexShrink: shrink,
    flexGrow: grow,
    flexBasis: basis
  }, itemSpacingProps, rest));
});
export default Flex;