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

Salesforce Lightning Design System components built with React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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"];
import React, { createContext, useContext, useMemo } from 'react';
import classnames from 'classnames';

/**
 *
 */

/**
 *
 */
export var 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 = _objectWithoutProperties(_ref, _excluded);
  var gridClassNames = classnames(className, 'slds-grid', vertical ? 'slds-grid_vertical' : null, frame ? 'slds-grid_frame' : null);
  var Tag = tag || 'div';
  return /*#__PURE__*/React.createElement(Tag, _extends({
    className: gridClassNames
  }, props), children);
};

/**
 *
 */
var GridRowContext = /*#__PURE__*/createContext({});

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

/**
 *
 */

/**
 *
 */
export var 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 = _objectWithoutProperties(props, _excluded2);
  var _useContext = useContext(GridRowContext),
    totalCols = _useContext.totalCols,
    totalColsSmall = _useContext.totalColsSmall,
    totalColsMedium = _useContext.totalColsMedium,
    totalColsLarge = _useContext.totalColsLarge;
  var rowClassNames = classnames(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.createElement("div", _extends({
    className: rowClassNames
  }, pprops), children);
};
/**
 *
 */
export var 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 = _objectWithoutProperties(props, _excluded3);
  var rowClassNames = classnames(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.Children.forEach(children, function (child) {
      if (! /*#__PURE__*/React.isValidElement(child)) return;
      cnt += child.props.cols || 1;
    });
    return cnt;
  }();
  var gridRowCtx = useMemo(function () {
    return {
      totalCols: totalCols,
      totalColsSmall: colsSmall || totalCols,
      totalColsMedium: colsMedium || totalCols,
      totalColsLarge: colsLarge || totalCols
    };
  }, [totalCols, colsSmall, colsMedium, colsLarge]);
  return /*#__PURE__*/React.createElement(GridRowContext.Provider, {
    value: gridRowCtx
  }, /*#__PURE__*/React.createElement("div", _extends({
    className: rowClassNames
  }, rprops), React.Children.map(children, function (child) {
    if (! /*#__PURE__*/React.isValidElement(child) || child.type !== Col) {
      return /*#__PURE__*/React.createElement(Col, null, child);
    }
    return child;
  })));
};
//# sourceMappingURL=Grid.js.map