vcc-ui/_src/components/flex/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import PropTypes from 'prop-types';
import React from 'react';
import { useFela } from 'react-fela';

import { deprecateInnerRef } from '../../deprecate';

const style = {
  display: 'flex',
  flexDirection: 'column',
  flexGrow: 0,
  flexShrink: 1,
  flexBasis: 'auto',
  alignSelf: 'stretch',
};

export const Flex = React.forwardRef(
  (
    { children, className, innerRef, as: As = 'div', extend, ...props },
    ref
  ) => {
    const { css } = useFela(props);
    deprecateInnerRef({ innerRef });

    return (
      <As
        {...props}
        ref={ref || innerRef}
        className={css(style, extend) + (className ? ' ' + className : '')}
      >
        {children}
      </As>
    );
  }
);

Flex.displayName = 'Flex';

Flex.propTypes = {
  /** Any valid React element, function, or a string specifying a name for an HTML element */
  as: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
    PropTypes.func,
  ]),
  /** An object containing valid CSS style declarations */
  extend: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
    PropTypes.array,
  ]),
  /** A JSX node */
  children: PropTypes.node,
  /** Deprecated in favour of `ref`. React DOM ref object or fn to be passed through to the DOM element **/
  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
  /** Add an additional custom className to element. Warning: make sure it doesn't collide with the classNames being generated for the atomic CSS **/
  className: PropTypes.string,
};