optimizely-oui/module/js/components/Layout/Col.js

Optimizely's Component Library.

import _pt from "prop-types";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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 classNames from "classnames";
import React from "react";
var DEVICE_SIZES = ["large", "small"];
/** colSize shorthand */

/**
 * @deprecated This component has been deprecated 2021-06-04. Use Grid or LayoutGrid instead.
 */
var Col = React.forwardRef(function (_ref, ref) {
  var _ref$as = _ref.as,
      Component = _ref$as === void 0 ? "div" : _ref$as,
      border = _ref.border,
      children = _ref.children,
      overflow = _ref.overflow,
      _ref$paddedContent = _ref.paddedContent,
      paddedContent = _ref$paddedContent === void 0 ? "none" : _ref$paddedContent,
      isReadingColumn = _ref.isReadingColumn,
      alignSelf = _ref.alignSelf,
      props = _objectWithoutProperties(_ref, ["as", "border", "children", "overflow", "paddedContent", "isReadingColumn", "alignSelf"]);

  var prefix = "col";
  var spans = [];
  var classes = [];

  if (border) {
    classes.push("border--".concat(border));
  }

  if (overflow) {
    classes.push(overflow);
    classes.push("height--1-1");
  }

  if (paddedContent !== "none") {
    classes.push("padded-content--".concat(paddedContent));
  }

  if (alignSelf) {
    classes.push("align-self-".concat(alignSelf));
  }

  if (isReadingColumn) {
    children = React.createElement("div", {
      className: "reading-column"
    }, children);
  }

  DEVICE_SIZES.forEach(function (brkPoint) {
    var propValue = props[brkPoint];
    delete props[brkPoint];
    var span;
    var offset;
    var order;

    if (propValue !== null && propValue !== undefined && _typeof(propValue) === "object") {
      var _propValue$span = propValue.span;
      span = _propValue$span === void 0 ? "fillSpace" : _propValue$span;
      offset = propValue.offset;
      order = propValue.order;
    } else {
      span = propValue;
    }

    if (offset !== null && offset !== undefined) {
      classes.push("offset-".concat(brkPoint, "-").concat(offset));
    }

    if (order !== null && order !== undefined) {
      classes.push("order-".concat(brkPoint, "-").concat(order));
    }

    if (span !== null && span !== undefined) {
      spans.push(span === "fillSpace" ? "".concat(prefix, "-").concat(brkPoint) : "".concat(prefix, "-").concat(brkPoint, "-").concat(span));
    }
  });

  if (!spans.length) {
    spans.push(prefix); // plain 'col'
  }

  return React.createElement(Component, _extends({}, props, {
    ref: ref,
    className: classNames.apply(void 0, spans.concat(classes))
  }), children);
});
Col.propTypes = {
  as: _pt.any,
  border: _pt.oneOf(["top", "bottom", "left", "right", "sides", "ends", "all"]),
  children: _pt.node.isRequired,
  isReadingColumn: _pt.bool,
  large: _pt.oneOfType([_pt.oneOfType([_pt.bool, _pt.number, _pt.oneOf(["fitContent"]), _pt.oneOf(["fillSpace"])]), _pt.shape({
    border: _pt.oneOf(["top", "bottom", "left", "right", "sides", "ends", "all"]).isRequired,
    offset: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
    order: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
    paddedContent: _pt.oneOf(["none", "around", "sides", "ends", "remove"]).isRequired,
    size: _pt.oneOfType([_pt.bool, _pt.number, _pt.oneOf(["fitContent"]), _pt.oneOf(["fillSpace"])]).isRequired
  })]),
  overflow: _pt.oneOf(["overflow-y--scroll", "overflow-x--auto", "overflow-y--auto"]),
  paddedContent: _pt.oneOf(["around", "sides", "ends", "none", "remove"]),
  ref: _pt.oneOfType([_pt.string, _pt.func, _pt.object]),
  small: _pt.oneOfType([_pt.oneOfType([_pt.bool, _pt.number, _pt.oneOf(["fitContent"]), _pt.oneOf(["fillSpace"])]), _pt.shape({
    border: _pt.oneOf(["top", "bottom", "left", "right", "sides", "ends", "all"]).isRequired,
    offset: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
    order: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
    paddedContent: _pt.oneOf(["none", "around", "sides", "ends", "remove"]).isRequired,
    size: _pt.oneOfType([_pt.bool, _pt.number, _pt.oneOf(["fitContent"]), _pt.oneOf(["fillSpace"])]).isRequired
  })]),
  alignSelf: _pt.oneOf(["start", "center", "end"])
};
Col.displayName = "Col";
Col.defaultProps = {
  isReadingColumn: false
};
export default Col;