vcc-ui/dist/esm/components/view/view.js

A React library for building user interfaces at Volvo Cars

import _extends from "@babel/runtime/helpers/extends";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck

import PropTypes from 'prop-types';
import React, { Children, forwardRef } from 'react';
import { useFela } from 'react-fela';
import { applySpaceMultiplier } from '../../utils/apply-space-multiplier';
import { createResponsivePropType, responsiveNumberOrStringProp, responsiveNumberProp, responsiveStringProp } from '../../utils/prop-types-utils';
import { Spacer } from '../spacer';
/**
 * @deprecated Use a `<div className="flex-(col|row)">` element instead
 */
export const View = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    children,
    as: As = 'div',
    extend,
    style: inlineStyle,
    spacing: space,
    className,
    bg,
    backgroundColor = bg,
    alignContent,
    alignItems = 'stretch',
    alignSelf,
    basis = 'auto',
    direction = 'column',
    display = 'flex',
    flex,
    grow = 0,
    height,
    justifyContent,
    margin,
    marginBottom,
    marginLeft,
    marginRight,
    marginTop,
    maxHeight,
    maxWidth,
    minHeight,
    minWidth,
    order,
    padding,
    paddingBottom,
    paddingLeft,
    paddingRight,
    paddingTop,
    shrink = 0,
    width,
    wrap = 'nowrap',
    ...props
  } = _ref;
  const {
    css,
    theme
  } = useFela(props);
  const spacing = applySpaceMultiplier(theme.baselineGrid);
  return /*#__PURE__*/React.createElement(As, _extends({}, props, {
    style: inlineStyle,
    ref: ref,
    className: css({
      boxSizing: 'border-box',
      backgroundColor: backgroundColor,
      flexDirection: direction,
      flexWrap: wrap,
      flexGrow: grow,
      flexShrink: shrink,
      flexBasis: basis,
      flex,
      justifyContent,
      alignContent,
      alignItems,
      alignSelf,
      order,
      display,
      maxWidth,
      minWidth,
      width,
      maxHeight,
      minHeight,
      height,
      padding: spacing(padding),
      paddingLeft: spacing(paddingLeft),
      paddingRight: spacing(paddingRight),
      paddingBottom: spacing(paddingBottom),
      paddingTop: spacing(paddingTop),
      margin: spacing(margin),
      marginLeft: spacing(marginLeft),
      marginRight: spacing(marginRight),
      marginBottom: spacing(marginBottom),
      marginTop: spacing(marginTop)
    }, extend) + (className ? ' ' + className : '')
  }), space ? Children.toArray(children).map((child, index, arr) => /*#__PURE__*/React.createElement(React.Fragment, {
    key: index
  }, child, index === arr.length - 1 ? null : /*#__PURE__*/React.createElement(Spacer, {
    size: space
  }))) : children);
});

//@ts-ignore
View.displayName = 'View';

//@ts-ignore
View.propTypes = {
  /** A JSX node */
  children: PropTypes.node,
  /** The HTML node that is rendered. */
  as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.elementType, PropTypes.func]),
  /** Adds a custom CSS class. */
  className: PropTypes.string,
  /** Extends the Fela style object. */
  extend: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.array]),
  /** Adds inline styles. */
  style: PropTypes.object,
  /** A custom background color */
  bg: responsiveStringProp,
  /** A custom background color */
  backgroundColor: responsiveStringProp,
  /** Adds spacing between children based on the baselineGrid. */
  spacing: responsiveNumberOrStringProp,
  /** Adds left padding based on the baselineGrid. */
  paddingLeft: responsiveNumberProp,
  /** Adds right padding based on the baselineGrid. */
  paddingRight: responsiveNumberOrStringProp,
  /** Adds bottom padding based on the baselineGrid. */
  paddingBottom: responsiveNumberProp,
  /** Adds top padding based on the baselineGrid. */
  paddingTop: responsiveNumberProp,
  /** Adds padding based on the baselineGrid. Overwritten by specific directional paddings. */
  padding: responsiveNumberProp,
  /** Adds left margin based on the baselineGrid. */
  marginLeft: responsiveNumberProp,
  /** Adds right margin based on the baselineGrid. */
  marginRight: responsiveNumberProp,
  /** Adds bottom margin based on the baselineGrid. */
  marginBottom: responsiveNumberProp,
  /** Adds top margin based on the baselineGrid. */
  marginTop: responsiveNumberProp,
  /** Adds margin based on the baselineGrid. Overwritten by specific directional margins. */
  margin: responsiveNumberProp,
  /** Sets display. */
  display: responsiveStringProp,
  /** Sets flex-wrap. */
  wrap: responsiveStringProp,
  /** Sets the flex-direction. */
  direction: createResponsivePropType(PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse'])),
  /** Sets flex-grow. */
  grow: responsiveNumberProp,
  /** Sets flex-shrink. */
  shrink: responsiveNumberProp,
  /** Sets flex-basis. */
  basis: responsiveNumberOrStringProp,
  /** Sets order. */
  order: responsiveNumberProp,
  /** Sets flex. */
  flex: responsiveNumberOrStringProp,
  /** Sets justify-content. */
  justifyContent: responsiveStringProp,
  /** Sets align-content. */
  alignContent: responsiveStringProp,
  /** Sets align-items. */
  alignItems: responsiveStringProp,
  /** Sets align-self. */
  alignSelf: responsiveStringProp,
  /** Sets max-width. */
  maxWidth: responsiveNumberOrStringProp,
  /** Sets min-width. */
  minWidth: responsiveNumberOrStringProp,
  /** Sets width. */
  width: responsiveNumberOrStringProp,
  /** Sets max-height. */
  maxHeight: responsiveNumberOrStringProp,
  /** Sets min-height. */
  minHeight: responsiveNumberOrStringProp,
  /** Sets height. */
  height: responsiveNumberOrStringProp
};