vcc-ui/dist/components/col/col.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.Col = Col;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _reactFela = require("react-fela");
var _flex = require("../flex");
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; }
// Not worth converting to TypeScript until Grid implementation is revisited /Jacob Rask

const ColContext = /*#__PURE__*/(0, _react.createContext)();
const styles = {
  column: _ref => {
    let {
      theme,
      sizes: {
        default: defaultSize,
        ...otherSizes
      }
    } = _ref;
    return {
      boxSizing: 'border-box',
      flexBasis: `${defaultSize / 4 * 100}%`,
      maxWidth: `${defaultSize / 4 * 100}%`,
      paddingLeft: theme.baselineGrid,
      paddingRight: theme.baselineGrid,
      [theme.breakpoints.fromL]: {
        flexBasis: `${defaultSize / 12 * 100}%`,
        maxWidth: `${defaultSize / 12 * 100}%`,
        paddingLeft: theme.baselineGrid * 1.5,
        paddingRight: theme.baselineGrid * 1.5
      },
      extend: [{
        condition: otherSizes[theme.breakpoints.fromM],
        style: {
          // We use onlyM here so that breakpoint orders don't need to be defined by the user
          [theme.breakpoints.onlyM]: {
            flexBasis: `${otherSizes[theme.breakpoints.fromM] / 4 * 100}%`,
            maxWidth: `${otherSizes[theme.breakpoints.fromM] / 4 * 100}%`
          }
        }
      }, {
        condition: otherSizes[theme.breakpoints.fromL],
        style: {
          [theme.breakpoints.fromL]: {
            flexBasis: `${otherSizes[theme.breakpoints.fromL] / 12 * 100}%`,
            maxWidth: `${otherSizes[theme.breakpoints.fromL] / 12 * 100}%`
          }
        }
      }]
    };
  }
};
function getSizes(size, theme) {
  if (typeof size === 'number') {
    return {
      default: 4,
      [theme.breakpoints.fromL]: size
    };
  }
  return {
    default: 4,
    ...size
  };
}
function getRealSizes(size, contextSize, theme) {
  const sizes = getSizes(size, theme);
  if (!contextSize) {
    return sizes;
  }
  const availableSizes = getSizes(contextSize, theme);
  const realSizes = {};
  for (let 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 resolveNamedBreakpoints(size, breakpoints) {
  if (typeof size === 'number') {
    return size;
  }
  return Object.keys(size).reduce((resolvedSize, key) => {
    const breakpoint = breakpoints[key] || key;
    resolvedSize[breakpoint] = size[key];
    return resolvedSize;
  }, {});
}

/**
 * @deprecated This component is deprecated and can be recreated using CSS only. See [Grid](https://developer.volvocars.com/design-system/web/?path=/docs/layout-grid--docs)
 */

function Col(_ref2) {
  let {
    size = {
      default: 4,
      '@media (min-width: 1024px)': 12
    },
    children
  } = _ref2;
  const {
    theme
  } = (0, _reactFela.useFela)();
  const contextSize = (0, _react.useContext)(ColContext);
  const resolvedSize = resolveNamedBreakpoints(size, theme.breakpoints);
  const styleProps = {
    sizes: getRealSizes(resolvedSize, contextSize, theme),
    theme
  };
  return /*#__PURE__*/_react.default.createElement(ColContext.Provider, {
    value: resolvedSize
  }, /*#__PURE__*/_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
};