react-bootify/components/col/index.js

react-bootify

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _utils = require("../utils");

var _tag = _interopRequireDefault(require("../tag"));

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

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

/**
 * The __Col__ component is used for creating columns in a __Row__.
 * 
 * See [Bootstrap documentation](https://getbootstrap.com/docs/4.4/layout/overview) for more information on layout.
 * 
 */
var Col = _react["default"].forwardRef(function (props, ref) {
  var _props = props,
      className = _props.className,
      ref = _props.ref,
      col = _props.col,
      width = _props.width,
      span = _props.span,
      offset = _props.offset,
      props = _objectWithoutProperties(_props, ["className", "ref", "col", "width", "span", "offset"]); // Backward compatability


  var _props2 = props,
      xs = _props2.xs,
      sm = _props2.sm,
      md = _props2.md,
      lg = _props2.lg,
      xl = _props2.xl,
      props = _objectWithoutProperties(_props2, ["xs", "sm", "md", "lg", "xl"]);

  function fix(name, prop) {
    if ((0, _utils.isObject)(prop)) {
      console.warn("Property ".concat(name, " is invalid in <Col/>. Use width and/or offset instead."));
      className = (0, _classnames["default"])(className, prop.offset ? "offset-".concat(name, "-").concat(prop.offset) : undefined);
      className = (0, _classnames["default"])(className, prop.width ? "col-".concat(name, "-").concat(prop.width) : undefined);
    } else if (prop != undefined) {
      console.warn("Property ".concat(name, " is invalid in <Col/>. Use width and/or offset instead."));
      className = (0, _classnames["default"])(className, "col-".concat(name, "-").concat(prop));
    }
  }

  fix('xs', xs);
  fix('sm', sm);
  fix('md', md);
  fix('lg', lg);
  fix('xl', xl);
  if (!col && span) col = span;
  if (!col && width) col = width;
  className = (0, _classnames["default"])(className, 'col');

  if ((0, _utils.isObject)(col)) {
    className = (0, _classnames["default"])(className, col.xs ? "col-".concat(col.xs) : undefined);
    className = (0, _classnames["default"])(className, col.sm ? "col-sm-".concat(col.sm) : undefined);
    className = (0, _classnames["default"])(className, col.md ? "col-md-".concat(col.md) : undefined);
    className = (0, _classnames["default"])(className, col.lg ? "col-lg-".concat(col.lg) : undefined);
    className = (0, _classnames["default"])(className, col.xl ? "col-xl-".concat(col.xl) : undefined);
  } else {
    className = (0, _classnames["default"])(className, col ? "col-".concat(col) : undefined);
  }

  if ((0, _utils.isObject)(offset)) {
    className = (0, _classnames["default"])(className, offset.xs ? "offset-".concat(offset.xs) : undefined);
    className = (0, _classnames["default"])(className, offset.sm ? "offset-sm-".concat(offset.sm) : undefined);
    className = (0, _classnames["default"])(className, offset.md ? "offset-md-".concat(offset.md) : undefined);
    className = (0, _classnames["default"])(className, offset.lg ? "offset-lg-".concat(offset.lg) : undefined);
    className = (0, _classnames["default"])(className, offset.xl ? "offset-xl-".concat(offset.xl) : undefined);
  } else {
    className = (0, _classnames["default"])(className, offset ? "offset-".concat(offset) : undefined);
  }

  return _react["default"].createElement(_tag["default"], _extends({
    ref: ref,
    className: className
  }, props));
});

Col.defaultProps = {};
Col.propTypes = {
  /**
   * Specifies column offset. May be an integer or an object specifying offsets for different displays.
   * 
   * Specify offset for all devices with the following.
   * 
   * ``` 
   * <Col offset={6}>
   * ...
   * </Col>
   * ```
   * 
   * Specify offset for specific devices.
   * 
   * ``` 
   * <Col offset={{xs:12, sm:8, md:6, lg:5, xl:3}}>
   * ...
   * </Col>
   * ```
   * 
   */
  offset: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].number]),

  /**
   * 
   * Specifies column span (or width) of a column. May be an integer or an object specifying offsets for different displays.
   * 
   * Specify span for all devices with the following.
   * 
   * ``` 
   * <Col span={6}>
   * ...
   * </Col>
   * ```
   * 
   * Specify span for specific devices.
   * 
   * ``` 
   * <Col span={{xs:12, sm:8, md:6, lg:5, xl:3}}>
   * ...
   * </Col>
   * ```
   * 
   */
  span: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].number])
};
var _default = Col;
exports["default"] = _default;