react-layouts-builder/packages/esm/layouts-builder/LayoutContainer/LayoutBuilder.js

Lightweight and powerfull react layouts drag and drop

import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { useState, useCallback, useEffect } from 'react';
import { LayoutRecursive } from './LayoutRecursive.js';
import { moveBlock } from '../helpers/moveContainer.js';
import { LayoutProvider } from '../Context/LayoutContext.js';

var LayoutBuilder = function LayoutBuilder(_a) {
  var layouts = _a.layouts,
      renderComponent = _a.renderComponent,
      onLayoutChange = _a.onLayoutChange;

  var _b = useState(layouts),
      internalLayouts = _b[0],
      setInternalLayouts = _b[1];

  var handleDrop = useCallback(function (options) {
    var itemId = options.item['@id'] || options.item.id;
    if (itemId === options.targetItemId) return;
    setInternalLayouts(function (prev) {
      var newLayouts = moveBlock(prev, options);

      if (newLayouts) {
        onLayoutChange(newLayouts);
        return newLayouts;
      }

      return prev;
    });
  }, []);
  useEffect(function () {
    var jsonNEw = JSON.stringify(layouts);
    var local = JSON.stringify(internalLayouts);

    if (jsonNEw !== local) {
      setInternalLayouts(__assign({}, layouts));
    }
  }, [layouts]);
  return /*#__PURE__*/React.createElement(LayoutProvider, null, /*#__PURE__*/React.createElement("div", null, internalLayouts['@id'] || internalLayouts.id ? /*#__PURE__*/React.createElement(LayoutRecursive, {
    layouts: internalLayouts,
    onDrop: handleDrop,
    renderBlock: renderComponent
  }) : null));
};

export { LayoutBuilder };