wix-style-react/dist/src/Layout/LayoutComponent/index.js

wix-style-react

"use strict";

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

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

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

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

var _stylesSt = require("./styles.st.css");

var _context = require("../../WixStyleReactProvider/context");

var DEFAULT_GAP = '30px';
var REDUCED_SPACING_GAP = '24px';

var Layout = function Layout(_ref) {
  var children = _ref.children,
      gap = _ref.gap,
      cols = _ref.cols,
      justifyItems = _ref.justifyItems,
      alignItems = _ref.alignItems,
      rowHeight = _ref.rowHeight,
      dataHook = _ref.dataHook,
      className = _ref.className;
  return /*#__PURE__*/_react["default"].createElement(_context.WixStyleReactContext.Consumer, null, function (_ref2) {
    var reducedSpacingAndImprovedLayout = _ref2.reducedSpacingAndImprovedLayout;
    return /*#__PURE__*/_react["default"].createElement("div", {
      "data-hook": dataHook,
      style: {
        gap: gap === DEFAULT_GAP && reducedSpacingAndImprovedLayout ? REDUCED_SPACING_GAP : gap,
        justifyItems: justifyItems,
        alignItems: alignItems,
        gridAutoRows: rowHeight,
        gridTemplateColumns: cols ? "repeat(".concat(cols, ", minmax(0, 1fr))") : undefined
      },
      className: (0, _stylesSt.st)(_stylesSt.classes.root, className),
      children: children
    });
  });
};

Layout.displayName = 'Layout';
Layout.propTypes = {
  /** hook for testing purposes */
  dataHook: _propTypes["default"].string,

  /** one or more Cell components. Other nodes are accepted although not recommended */
  children: _propTypes["default"].node,

  /** distance between cells both vertically and horizontally */
  gap: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

  /** set custom amount of columns to be rendered. Default is 12 which means at `<Cell span={12}/>` occupies all columns, in other words, full width */
  cols: _propTypes["default"].number,

  /** is used to justify the grid items along the row axis */
  justifyItems: _propTypes["default"].string,

  /** is used to aligns the grid items along the column axis */
  alignItems: _propTypes["default"].string,

  /** Sets all rows to a given height. */
  rowHeight: _propTypes["default"].string
};
Layout.defaultProps = {
  gap: DEFAULT_GAP,
  rowHeight: 'auto'
};
var _default = Layout;
exports["default"] = _default;