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

A React library for building user interfaces at Volvo Cars

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.View = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _reactFela = require("react-fela");
var _applySpaceMultiplier = require("../../utils/apply-space-multiplier");
var _propTypesUtils = require("../../utils/prop-types-utils");
var _spacer = require("../spacer");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck

/**
 * @deprecated Use a `<div className="flex-(col|row)">` element instead
 */
const View = exports.View = /*#__PURE__*/(0, _react.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
  } = (0, _reactFela.useFela)(props);
  const spacing = (0, _applySpaceMultiplier.applySpaceMultiplier)(theme.baselineGrid);
  return /*#__PURE__*/_react.default.createElement(As, (0, _extends2.default)({}, 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 ? _react.Children.toArray(children).map((child, index, arr) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
    key: index
  }, child, index === arr.length - 1 ? null : /*#__PURE__*/_react.default.createElement(_spacer.Spacer, {
    size: space
  }))) : children);
});

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

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