wix-style-react/dist/es/src/Grid/Grid.js

wix-style-react

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import deprecationLog from '../utils/deprecationLog';
import { Layout, Cell } from '../Layout';
import Box from '../Box';
import { st, classes } from './Grid.st.css';
import { mainContainerMaxWidthPx, mainContainerMinWidthPx } from './constants';
var containerProps = {
  /** hook for testing purposes */
  dataHook: PropTypes.string,
  children: PropTypes.node,
  fluid: PropTypes.bool,
  className: PropTypes.string,

  /** Applies min-height in order to fit to `<Page.Content/>`  */
  stretchVertically: PropTypes.bool
};
var DEPRECATION_MESSAGE = 'Grid is deprecated and will be removed in next major release, please use <Layout /> instead.';

var Container = function Container(_ref) {
  var children = _ref.children,
      fluid = _ref.fluid,
      dataHook = _ref.dataHook,
      className = _ref.className;
  useEffect(function () {
    deprecationLog(DEPRECATION_MESSAGE);
  }, []);

  if (fluid) {
    return /*#__PURE__*/React.createElement(Layout, {
      gap: 0,
      dataHook: dataHook,
      cols: 1,
      className: className
    }, children);
  }

  return /*#__PURE__*/React.createElement(Box, {
    dataHook: dataHook,
    minWidth: mainContainerMinWidthPx,
    maxWidth: mainContainerMaxWidthPx,
    display: "block",
    className: className
  }, /*#__PURE__*/React.createElement(Layout, {
    gap: 0,
    cols: 1
  }, children));
};

Container.propTypes = containerProps;

var Columns = function Columns(_ref2) {
  var children = _ref2.children,
      stretchViewsVertically = _ref2.stretchViewsVertically,
      dataHook = _ref2.dataHook,
      className = _ref2.className;
  useEffect(function () {
    deprecationLog(DEPRECATION_MESSAGE);
  }, []);
  return /*#__PURE__*/React.createElement(Cell, {
    dataHook: dataHook,
    className: st(classes.rowRoot, {}, className)
  }, /*#__PURE__*/React.createElement(Layout, {
    gap: 0,
    className: st(classes.rowLayout, {
      stretchViewsVertically: stretchViewsVertically
    })
  }, children));
};

var AutoAdjustedColumns = function AutoAdjustedColumns(_ref3) {
  var children = _ref3.children,
      dataHook = _ref3.dataHook;
  useEffect(function () {
    deprecationLog(DEPRECATION_MESSAGE);
  }, []);
  var DEFAULT_MAX_SPAN = 12;
  var cols = Array.isArray(children) ? children.filter(function (child) {
    return Boolean(child);
  }) : [children];
  var spanSize = Math.floor(DEFAULT_MAX_SPAN / cols.length);
  return /*#__PURE__*/React.createElement(Cell, {
    dataHook: dataHook,
    className: classes.rowRoot
  }, /*#__PURE__*/React.createElement(Layout, {
    gap: 0,
    className: classes.rowLayout
  }, cols.map(function (col, index) {
    return /*#__PURE__*/React.createElement(Cell, {
      span: spanSize,
      key: index,
      className: classes.columnRoot
    }, col);
  })));
};

var Col = function Col(_ref4) {
  var _ref4$span = _ref4.span,
      span = _ref4$span === void 0 ? 12 : _ref4$span,
      children = _ref4.children,
      dataHook = _ref4.dataHook,
      className = _ref4.className;
  useEffect(function () {
    deprecationLog(DEPRECATION_MESSAGE);
  }, []);
  return /*#__PURE__*/React.createElement(Cell, {
    dataHook: dataHook,
    span: parseInt(span),
    className: st(classes.columnRoot, {}, className)
  }, children);
};

export { Container, Container as RawContainer, Columns as Row, Columns, AutoAdjustedColumns, AutoAdjustedColumns as AutoAdjustedRow, Col };