react-lightning-design-system/lib/scripts/Grid.js

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Row = exports.Grid = exports.Col = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _excluded = ["className", "frame", "vertical", "children", "tag"],
  _excluded2 = ["className", "padded", "align", "noFlex", "order", "orderSmall", "orderMedium", "orderLarge", "cols", "colsSmall", "colsMedium", "colsLarge", "children"],
  _excluded3 = ["className", "align", "nowrap", "nowrapSmall", "nowrapMedium", "nowrapLarge", "cols", "colsSmall", "colsMedium", "colsLarge", "pullPadded", "children"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
/**
 *
 */

/**
 *
 */
var Grid = exports.Grid = function Grid(_ref) {
  var className = _ref.className,
    frame = _ref.frame,
    _ref$vertical = _ref.vertical,
    vertical = _ref$vertical === void 0 ? true : _ref$vertical,
    children = _ref.children,
    tag = _ref.tag,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var gridClassNames = (0, _classnames["default"])(className, 'slds-grid', vertical ? 'slds-grid_vertical' : null, frame ? 'slds-grid_frame' : null);
  var Tag = tag || 'div';
  return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
    className: gridClassNames
  }, props), children);
};

/**
 *
 */
var GridRowContext = /*#__PURE__*/(0, _react.createContext)({});

/**
 *
 */
function adjustCols(colNum, large) {
  if (colNum > 6) {
    return large ? 12 : 6;
  }
  return colNum;
}

/**
 *
 */

/**
 *
 */
var Col = exports.Col = function Col(props) {
  var className = props.className,
    padded = props.padded,
    align = props.align,
    noFlex = props.noFlex,
    order = props.order,
    orderSmall = props.orderSmall,
    orderMedium = props.orderMedium,
    orderLarge = props.orderLarge,
    cols = props.cols,
    colsSmall = props.colsSmall,
    colsMedium = props.colsMedium,
    colsLarge = props.colsLarge,
    children = props.children,
    pprops = (0, _objectWithoutProperties2["default"])(props, _excluded2);
  var _useContext = (0, _react.useContext)(GridRowContext),
    totalCols = _useContext.totalCols,
    totalColsSmall = _useContext.totalColsSmall,
    totalColsMedium = _useContext.totalColsMedium,
    totalColsLarge = _useContext.totalColsLarge;
  var rowClassNames = (0, _classnames["default"])(className, padded ? "slds-col_padded".concat(typeof padded === 'string' && /^(medium|large)$/.test(padded) ? "-".concat(padded) : '') : 'slds-col', align ? "slds-align-".concat(align) : null, noFlex ? 'slds-no-flex' : null, order ? "slds-order_".concat(order) : null, orderSmall ? "slds-small-order_".concat(orderSmall) : null, orderMedium ? "slds-medium-order_".concat(orderMedium) : null, orderLarge ? "slds-large-order_".concat(orderLarge) : null, cols && totalCols ? "slds-size_".concat(cols, "-of-").concat(adjustCols(totalCols, true)) : null, colsSmall && totalColsSmall ? "slds-small-size_".concat(colsSmall, "-of-").concat(adjustCols(totalColsSmall)) : null, colsMedium && totalColsMedium ? "slds-medium-size_".concat(colsMedium, "-of-").concat(adjustCols(totalColsMedium)) : null, colsLarge && totalColsLarge ? "slds-large-size_".concat(colsLarge, "-of-").concat(adjustCols(totalColsLarge, true)) : null);
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: rowClassNames
  }, pprops), children);
};
/**
 *
 */
var Row = exports.Row = function Row(props) {
  var className = props.className,
    align = props.align,
    nowrap = props.nowrap,
    nowrapSmall = props.nowrapSmall,
    nowrapMedium = props.nowrapMedium,
    nowrapLarge = props.nowrapLarge,
    cols = props.cols,
    colsSmall = props.colsSmall,
    colsMedium = props.colsMedium,
    colsLarge = props.colsLarge,
    pullPadded = props.pullPadded,
    children = props.children,
    rprops = (0, _objectWithoutProperties2["default"])(props, _excluded3);
  var rowClassNames = (0, _classnames["default"])(className, 'slds-grid', align ? "slds-grid_align-".concat(align) : null, nowrap ? 'slds-nowrap' : 'slds-wrap', nowrapSmall ? 'slds-nowrap_small' : null, nowrapMedium ? 'slds-nowrap_medium' : null, nowrapLarge ? 'slds-nowrap_large' : null, pullPadded ? 'slds-grid_pull-padded' : null);
  var totalCols = cols || function () {
    var cnt = 0;
    _react["default"].Children.forEach(children, function (child) {
      if (! /*#__PURE__*/_react["default"].isValidElement(child)) return;
      cnt += child.props.cols || 1;
    });
    return cnt;
  }();
  var gridRowCtx = (0, _react.useMemo)(function () {
    return {
      totalCols: totalCols,
      totalColsSmall: colsSmall || totalCols,
      totalColsMedium: colsMedium || totalCols,
      totalColsLarge: colsLarge || totalCols
    };
  }, [totalCols, colsSmall, colsMedium, colsLarge]);
  return /*#__PURE__*/_react["default"].createElement(GridRowContext.Provider, {
    value: gridRowCtx
  }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: rowClassNames
  }, rprops), _react["default"].Children.map(children, function (child) {
    if (! /*#__PURE__*/_react["default"].isValidElement(child) || child.type !== Col) {
      return /*#__PURE__*/_react["default"].createElement(Col, null, child);
    }
    return child;
  })));
};
//# sourceMappingURL=Grid.js.map