pouncejs/dist/cjs/components/SimpleGrid/SimpleGrid.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.SimpleGrid = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

var _Grid = _interopRequireDefault(require("../Grid"));

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

/**
 * Extends <a href="/#/Grid">Grid</a>
 *
 * An alternative to the simple Grid component that aims to conventiently help with the average
 * use cases of a grid.
 *
 * Inspired from <a href="https://chakra-ui.com/" target="_blank">Chakra UI</a>
 */
var SimpleGrid = /*#__PURE__*/_react.default.forwardRef(function SimpleGrid(props, ref) {
  var columns = props.columns,
      spacingX = props.spacingX,
      spacingY = props.spacingY,
      spacing = props.spacing,
      minChildWidth = props.minChildWidth,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["columns", "spacingX", "spacingY", "spacing", "minChildWidth"]);
  var templateColumns;

  if (minChildWidth && minChildWidth > 0) {
    templateColumns = (0, _utils.widthToColumns)(minChildWidth);
  } else if (columns && columns > 0) {
    templateColumns = (0, _utils.countToColumns)(columns);
  }

  return /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({
    ref: ref,
    gap: spacing,
    columnGap: spacingX,
    rowGap: spacingY,
    templateColumns: templateColumns
  }, rest));
});

exports.SimpleGrid = SimpleGrid;
var _default = SimpleGrid;
exports.default = _default;