@talend/react-components/lib/GridLayout/Grid.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
require("react-grid-layout/css/styles.css");
var _reactGridLayout = require("react-grid-layout");
var _Tile = _interopRequireDefault(require("./Tile"));
var _SkeletonTile = require("./Tile/Skeleton/SkeletonTile.component");
var _GridModule = _interopRequireDefault(require("./Grid.module.scss"));
var _theme = require("../theme");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const theme = (0, _theme.getTheme)(_GridModule.default);

// eslint-disable-next-line new-cap
const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
const MARGIN = 20;
const DEFAULT_COLUMNS = {
  s: 2,
  m: 4,
  l: 6,
  xl: 12
};
const DEFAULT_BREAKPOINTS = {
  s: 479,
  m: 768,
  l: 1024,
  xl: 1366
};
const noOp = () => {};
function Grid({
  children,
  isResizable = false,
  isDraggable = true,
  onLayoutChange = noOp,
  onBreakpointChange = noOp,
  onDragStop = noOp,
  onResizeStop = noOp,
  isLoading = false,
  skeletonConfiguration,
  compactType = 'vertical',
  verticalCompact = true,
  columns = DEFAULT_COLUMNS,
  breakpoints = DEFAULT_BREAKPOINTS
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
    className: theme('layout', {
      draggable: isDraggable
    }),
    onLayoutChange: onLayoutChange,
    onDragStop: onDragStop,
    onResizeStop: onResizeStop,
    onBreakpointChange: onBreakpointChange,
    breakpoints: breakpoints,
    cols: columns,
    measureBeforeMount: false,
    margin: [MARGIN, MARGIN],
    compactType: compactType,
    isResizable: isResizable,
    useCSSTransforms: false,
    verticalCompact: verticalCompact,
    isDraggable: isDraggable,
    children: isLoading ? (skeletonConfiguration || _SkeletonTile.SKELETON_TILE_CONF).map(tile => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "skeleton-tile",
      "data-grid": tile['data-grid'],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tile.default.Skeleton, {})
    }, tile.key)) : children
  });
}
Grid.propTypes = {
  children: _propTypes.default.node,
  compactType: _propTypes.default.string,
  isResizable: _propTypes.default.bool,
  isDraggable: _propTypes.default.bool,
  onLayoutChange: _propTypes.default.func,
  onBreakpointChange: _propTypes.default.func,
  onDragStop: _propTypes.default.func,
  onResizeStop: _propTypes.default.func,
  isLoading: _propTypes.default.bool,
  columns: _propTypes.default.shape({
    s: _propTypes.default.number,
    m: _propTypes.default.number,
    l: _propTypes.default.number,
    xl: _propTypes.default.number
  }),
  breakpoints: _propTypes.default.shape({
    s: _propTypes.default.number,
    m: _propTypes.default.number,
    l: _propTypes.default.number,
    xl: _propTypes.default.number
  }),
  skeletonConfiguration: _propTypes.default.arrayOf(_propTypes.default.shape({
    key: _propTypes.default.string.isRequired,
    'data-grid': _propTypes.default.shape({
      w: _propTypes.default.number,
      h: _propTypes.default.number,
      x: _propTypes.default.number,
      y: _propTypes.default.number,
      i: _propTypes.default.string
    }).isRequired
  })),
  verticalCompact: _propTypes.default.bool
};
var _default = exports.default = Grid;
//# sourceMappingURL=Grid.component.js.map