react-grid-layout/dist/legacy.js

A draggable and resizable grid layout with responsive breakpoints, for React.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var chunkKEM2G3LX_js = require('./chunk-KEM2G3LX.js');
var chunk2DDROKB2_js = require('./chunk-2DDROKB2.js');
require('./chunk-BJFPTW5Q.js');
var react = require('react');
var jsxRuntime = require('react/jsx-runtime');
var clsx = require('clsx');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var clsx__default = /*#__PURE__*/_interopDefault(clsx);

function ReactGridLayout(props) {
  const {
    // Required
    children,
    width,
    // Grid measurement
    cols = 12,
    rowHeight = 150,
    maxRows = Infinity,
    margin = [10, 10],
    containerPadding = null,
    // Layout data
    layout,
    droppingItem,
    // Compaction
    compactType: compactTypeProp,
    preventCollision = false,
    allowOverlap = false,
    verticalCompact,
    // Drag behavior
    isDraggable = true,
    isBounded = false,
    draggableHandle,
    draggableCancel,
    // Resize behavior
    isResizable = true,
    resizeHandles = ["se"],
    resizeHandle,
    // Drop behavior
    isDroppable = false,
    // Position
    useCSSTransforms = true,
    transformScale = 1,
    // Container props
    autoSize,
    className,
    style,
    innerRef,
    // Callbacks
    onLayoutChange,
    onDragStart,
    onDrag,
    onDragStop,
    onResizeStart,
    onResize,
    onResizeStop,
    onDrop,
    onDropDragOver
  } = props;
  let compactType = compactTypeProp === void 0 ? "vertical" : compactTypeProp;
  if (verticalCompact === false) {
    if (process.env["NODE_ENV"] !== "production") {
      console.warn(
        '`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. Use `compactType`: "horizontal" | "vertical" | null.'
      );
    }
    compactType = null;
  }
  const gridConfig = {
    cols,
    rowHeight,
    maxRows,
    margin,
    containerPadding
  };
  const dragConfig = {
    enabled: isDraggable,
    bounded: isBounded,
    handle: draggableHandle,
    cancel: draggableCancel,
    // Set threshold to 0 for backwards compatibility with v1 API
    // v2 API defaults to 3px threshold (fixes #1341, #1401)
    threshold: 0
  };
  const resizeConfig = {
    enabled: isResizable,
    handles: resizeHandles,
    handleComponent: resizeHandle
  };
  const dropConfig = {
    enabled: isDroppable
  };
  let positionStrategy;
  if (!useCSSTransforms) {
    positionStrategy = chunk2DDROKB2_js.absoluteStrategy;
  } else if (transformScale !== 1) {
    positionStrategy = chunk2DDROKB2_js.createScaledStrategy(transformScale);
  } else {
    positionStrategy = chunk2DDROKB2_js.transformStrategy;
  }
  const compactor = chunk2DDROKB2_js.getCompactor(compactType, allowOverlap, preventCollision);
  const constraints = isBounded ? [...chunk2DDROKB2_js.defaultConstraints, chunk2DDROKB2_js.containerBounds] : chunk2DDROKB2_js.defaultConstraints;
  return /* @__PURE__ */ jsxRuntime.jsx(
    chunkKEM2G3LX_js.GridLayout,
    {
      width,
      gridConfig,
      dragConfig,
      resizeConfig,
      dropConfig,
      positionStrategy,
      compactor,
      constraints,
      layout,
      droppingItem,
      autoSize,
      className,
      style,
      innerRef,
      onLayoutChange,
      onDragStart,
      onDrag,
      onDragStop,
      onResizeStart,
      onResize,
      onResizeStop,
      onDrop,
      onDropDragOver,
      children
    }
  );
}
ReactGridLayout.displayName = "ReactGridLayout";
var ReactGridLayout_default = ReactGridLayout;
function ResponsiveReactGridLayout(props) {
  const {
    // Required
    children,
    width,
    // Responsive-specific
    breakpoint,
    breakpoints,
    cols,
    layouts,
    onBreakpointChange,
    onLayoutChange,
    onWidthChange,
    // Grid measurement
    rowHeight,
    maxRows,
    margin,
    containerPadding,
    // Layout data
    droppingItem,
    // Compaction
    compactType: compactTypeProp,
    preventCollision = false,
    allowOverlap = false,
    verticalCompact,
    // Drag behavior
    isDraggable = true,
    isBounded = false,
    draggableHandle,
    draggableCancel,
    // Resize behavior
    isResizable = true,
    resizeHandles = ["se"],
    resizeHandle,
    // Drop behavior
    isDroppable = false,
    // Position
    useCSSTransforms = true,
    transformScale = 1,
    // Container props
    autoSize,
    className,
    style,
    innerRef,
    // Callbacks
    onDragStart,
    onDrag,
    onDragStop,
    onResizeStart,
    onResize,
    onResizeStop,
    onDrop,
    onDropDragOver
  } = props;
  let compactType = compactTypeProp === void 0 ? "vertical" : compactTypeProp;
  if (verticalCompact === false) {
    if (process.env["NODE_ENV"] !== "production") {
      console.warn(
        '`verticalCompact` on <ResponsiveReactGridLayout> is deprecated and will be removed soon. Use `compactType`: "horizontal" | "vertical" | null.'
      );
    }
    compactType = null;
  }
  const dragConfig = {
    enabled: isDraggable,
    bounded: isBounded,
    handle: draggableHandle,
    cancel: draggableCancel
  };
  const resizeConfig = {
    enabled: isResizable,
    handles: resizeHandles,
    handleComponent: resizeHandle
  };
  const dropConfig = {
    enabled: isDroppable
  };
  let positionStrategy;
  if (!useCSSTransforms) {
    positionStrategy = chunk2DDROKB2_js.absoluteStrategy;
  } else if (transformScale !== 1) {
    positionStrategy = chunk2DDROKB2_js.createScaledStrategy(transformScale);
  } else {
    positionStrategy = chunk2DDROKB2_js.transformStrategy;
  }
  const compactor = chunk2DDROKB2_js.getCompactor(compactType, allowOverlap, preventCollision);
  return /* @__PURE__ */ jsxRuntime.jsx(
    chunkKEM2G3LX_js.ResponsiveGridLayout,
    {
      width,
      breakpoint,
      breakpoints,
      cols,
      layouts,
      rowHeight,
      maxRows,
      margin,
      containerPadding,
      compactor,
      dragConfig,
      resizeConfig,
      dropConfig,
      positionStrategy,
      droppingItem,
      autoSize,
      className,
      style,
      innerRef,
      onBreakpointChange,
      onLayoutChange,
      onWidthChange,
      onDragStart,
      onDrag,
      onDragStop,
      onResizeStart,
      onResize,
      onResizeStop,
      onDrop,
      onDropDragOver,
      children
    }
  );
}
ResponsiveReactGridLayout.displayName = "ResponsiveReactGridLayout";
var ResponsiveReactGridLayout_default = ResponsiveReactGridLayout;
var layoutClassName = "react-grid-layout";
function WidthProvider(ComposedComponent) {
  function WidthProviderWrapper(props) {
    const { measureBeforeMount = false, className, style, ...rest } = props;
    const [width, setWidth] = react.useState(1280);
    const [mounted, setMounted] = react.useState(false);
    const elementRef = react.useRef(null);
    const resizeObserverRef = react.useRef(null);
    react.useEffect(() => {
      setMounted(true);
    }, []);
    react.useEffect(() => {
      const node = elementRef.current;
      if (!(node instanceof HTMLElement)) return;
      const observer = new ResizeObserver((entries) => {
        if (entries[0]) {
          const newWidth = entries[0].contentRect.width;
          setWidth(newWidth);
        }
      });
      observer.observe(node);
      resizeObserverRef.current = observer;
      return () => {
        observer.unobserve(node);
        observer.disconnect();
      };
    }, [mounted]);
    if (measureBeforeMount && !mounted) {
      return /* @__PURE__ */ jsxRuntime.jsx(
        "div",
        {
          className: clsx__default.default(className, layoutClassName),
          style,
          ref: elementRef
        }
      );
    }
    return /* @__PURE__ */ jsxRuntime.jsx(
      ComposedComponent,
      {
        innerRef: elementRef,
        className,
        style,
        ...rest,
        width
      }
    );
  }
  WidthProviderWrapper.displayName = `WidthProvider(${ComposedComponent.displayName || ComposedComponent.name || "Component"})`;
  return WidthProviderWrapper;
}

exports.ReactGridLayout = ReactGridLayout;
exports.Responsive = ResponsiveReactGridLayout_default;
exports.ResponsiveReactGridLayout = ResponsiveReactGridLayout;
exports.WidthProvider = WidthProvider;
exports.default = ReactGridLayout_default;
//# sourceMappingURL=legacy.js.map
//# sourceMappingURL=legacy.js.map