vcc-ui/lib/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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Col = Col;

var _react = _interopRequireWildcard(require("react"));

var _reactFela = require("react-fela");

var _flex = require("../flex");

var _propTypes = _interopRequireDefault(require("prop-types"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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; }

var ColContext = (0, _react.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;
}

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 = (0, _reactFela.useFela)(),
      theme = _useFela.theme;

  var contextSize = (0, _react.useContext)(ColContext);
  var styleProps = {
    sizes: getRealSizes(size, contextSize, theme),
    theme: theme
  };
  return _react.default.createElement(ColContext.Provider, {
    value: size
  }, _react.default.createElement(_flex.Flex, {
    extend: styles.column(styleProps)
  }, children));
}

Col.propTypes = {
  /** Size of column */
  size: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.number]),

  /** A JSX node */
  children: _propTypes.default.node
};