vcc-ui/es/components/col/index.js

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { createContext, useContext } from 'react';
import { useFela } from 'react-fela';
import { Flex } from '../flex';
import PropTypes from 'prop-types';
var ColContext = createContext();
var styles = {
  column: function column(_ref) {
    var _ref2;

    var theme = _ref.theme,
        _ref$sizes = _ref.sizes,
        defaultSize = _ref$sizes.default,
        otherSizes = _objectWithoutProperties(_ref$sizes, ["default"]);

    return _ref2 = {
      boxSizing: 'border-box',
      flexBasis: "".concat(defaultSize / 4 * 100, "%"),
      maxWidth: "".concat(defaultSize / 4 * 100, "%"),
      paddingLeft: theme.baselineGrid,
      paddingRight: theme.baselineGrid
    }, _defineProperty(_ref2, theme.breakpoints.fromL, {
      flexBasis: "".concat(defaultSize / 12 * 100, "%"),
      maxWidth: "".concat(defaultSize / 12 * 100, "%"),
      paddingLeft: theme.baselineGrid * 1.5,
      paddingRight: theme.baselineGrid * 1.5
    }), _defineProperty(_ref2, "extend", [{
      condition: otherSizes[theme.breakpoints.fromM],
      style: _defineProperty({}, theme.breakpoints.onlyM, {
        flexBasis: "".concat(otherSizes[theme.breakpoints.fromM] / 4 * 100, "%"),
        maxWidth: "".concat(otherSizes[theme.breakpoints.fromM] / 4 * 100, "%")
      })
    }, {
      condition: otherSizes[theme.breakpoints.fromL],
      style: _defineProperty({}, theme.breakpoints.fromL, {
        flexBasis: "".concat(otherSizes[theme.breakpoints.fromL] / 12 * 100, "%"),
        maxWidth: "".concat(otherSizes[theme.breakpoints.fromL] / 12 * 100, "%")
      })
    }]), _ref2;
  }
};

function getSizes(size, theme) {
  if (typeof size === 'number') {
    return _defineProperty({
      default: 4
    }, theme.breakpoints.fromL, size);
  }

  return _objectSpread({
    default: 4
  }, size);
}

function getRealSizes(size, contextSize, theme) {
  var sizes = getSizes(size, theme);

  if (!contextSize) {
    return sizes;
  }

  var availableSizes = getSizes(contextSize, theme);
  var realSizes = {};

  for (var key in sizes) {
    if (availableSizes[key]) {
      if (key === theme.breakpoints.fromL) {
        realSizes[key] = 12 / availableSizes[key] * sizes[key];
      } else {
        realSizes[key] = 4 / availableSizes[key] * sizes[key];
      }
    } else {
      realSizes[key] = sizes[key];
    }
  }

  return realSizes;
}

export function Col(_ref4) {
  var _ref4$size = _ref4.size,
      size = _ref4$size === void 0 ? {
    default: 4,
    '@media (min-width: 1024px)': 12
  } : _ref4$size,
      children = _ref4.children;

  var _useFela = useFela(),
      theme = _useFela.theme;

  var contextSize = useContext(ColContext);
  var styleProps = {
    sizes: getRealSizes(size, contextSize, theme),
    theme: theme
  };
  return React.createElement(ColContext.Provider, {
    value: size
  }, React.createElement(Flex, {
    extend: styles.column(styleProps)
  }, children));
}
Col.propTypes = {
  /** Size of column */
  size: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),

  /** A JSX node */
  children: PropTypes.node
};