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

Lightweight and powerfull react layouts drag and drop

import React, { memo } from 'react';
import { DragNDrop } from './DragNDrop.js';

var LayoutRecursive = /*#__PURE__*/memo(function (_a) {
  var _b;

  var layouts = _a.layouts,
      _c = _a.level,
      level = _c === void 0 ? 1 : _c,
      onDrop = _a.onDrop,
      renderBlock = _a.renderBlock;
  var hasChildren = layouts.childrens && layouts.childrens.length > 0;
  var isCol = layouts.display && layouts.display.orientation === 'col';
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(hasChildren && !isCol ? 'lb-spacing' : '', " ").concat(isCol ? 'lb-col' : 'lb-w-full'),
    "data-key": layouts['@id'] || layouts.id
  }, /*#__PURE__*/React.createElement(DragNDrop, {
    layout: layouts,
    handleDrop: onDrop,
    key: layouts['@id'] || layouts.id
  }, /*#__PURE__*/React.createElement(React.Fragment, null, hasChildren ? (_b = layouts === null || layouts === void 0 ? void 0 : layouts.childrens) === null || _b === void 0 ? void 0 : _b.map(function (container) {
    return /*#__PURE__*/React.createElement(LayoutRecursive, {
      layouts: container,
      onDrop: onDrop,
      renderBlock: renderBlock,
      key: container['@id'] || container.id,
      level: level + 1,
      parentId: layouts['@id'] || layouts.id
    });
  }) : /*#__PURE__*/React.createElement("div", {
    className: "lb-block"
  }, layouts.block ? renderBlock(layouts.block) : null))));
});

export { LayoutRecursive };