@krowdy-ui/views/esm/Filters/FiltersTree/Theme/tree-node-renderer.js

React components that implement Google's Material Design.

import React, { Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import useStyles from './tree-node-renderer-style';

function TreeNodeRenderer(props) {
  var children = props.children,
      listIndex = props.listIndex,
      swapFrom = props.swapFrom,
      swapLength = props.swapLength,
      swapDepth = props.swapDepth,
      scaffoldBlockPxWidth = props.scaffoldBlockPxWidth,
      lowerSiblingCounts = props.lowerSiblingCounts,
      connectDropTarget = props.connectDropTarget,
      isOver = props.isOver,
      draggedNode = props.draggedNode,
      canDrop = props.canDrop;
  var classes = useStyles();
  var scaffold = [];
  var scaffoldBlockCount = lowerSiblingCounts.length;
  lowerSiblingCounts.forEach(function (lowerSiblingCount, i) {
    var lineClass = '';
    if (lowerSiblingCount > 0) {
      if (listIndex === 0) {
        // Top-left corner of the tree
        // +-----+
        // |     |
        // |  +--+
        // |  |  |
        // +--+--+
        lineClass = "".concat(classes.lineHalfHorizontalRight, " ").concat(classes.lineHalfVerticalBottom);
      } else if (i === scaffoldBlockCount - 1) {
        // Last scaffold block in the row, right before the row content
        // +--+--+
        // |  |  |
        // |  +--+
        // |  |  |
        // +--+--+
        lineClass = "".concat(classes.lineHalfHorizontalRight, " ").concat(classes.lineFullVertical);
      } else {
        // Simply connecting the line extending down to the next sibling on this level
        // +--+--+
        // |  |  |
        // |  |  |
        // |  |  |
        // +--+--+
        lineClass = classes.lineFullVertical;
      }
    } else if (listIndex === 0) // Top-left corner of the tree, but has no siblings
      // +-----+
      // |     |
      // |  +--+
      // |     |
      // +-----+
      lineClass = classes.lineHalfHorizontalRight;else if (i === scaffoldBlockCount - 1) // The last or only node in this level of the tree
      // +--+--+
      // |  |  |
      // |  +--+
      // |     |
      // +-----+
      lineClass = "".concat(classes.lineHalfVerticalTop, " ").concat(classes.lineHalfHorizontalRight);
    scaffold.push( /*#__PURE__*/React.createElement("div", {
      className: "".concat(classes.lineBlock, " ").concat(lineClass) // className={('lineBlock', lineClass, rowDirectionClass)}
      ,
      key: "pre_".concat(1 + i),
      style: {
        width: scaffoldBlockPxWidth
      }
    })); // if(treeIndex !== listIndex && i === swapDepth) {
    // let highlightLineClass = ''
    // if(listIndex === swapFrom + swapLength - 1)
    //   // This block is on the bottom (target) line
    //   // This block points at the target block (where the row will go when released)
    //   highlightLineClass = 'rst__highlightBottomLeftCorner'
    // else if(treeIndex === swapFrom)
    //   // This block is on the top (source) line
    //   highlightLineClass = 'rst__highlightTopLeftCorner'
    // else
    //   // This block is between the bottom and top
    //   highlightLineClass = 'rst__highlightLineVertical'
    // scaffold.push(
    //   <div
    //     className={classnames(
    //       'rst__absoluteLineBlock',
    //       highlightLineClass,
    //       rowDirectionClass
    //     )}
    //     key={i}
    //     style={style} />
    // )
    // }
  });
  return connectDropTarget( /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.rootScaffold
  }, scaffold), Children.map(children, function (child) {
    return cloneElement(child, {
      canDrop: canDrop,
      draggedNode: draggedNode,
      isOver: isOver,
      listIndex: listIndex,
      lowerSiblingCounts: lowerSiblingCounts,
      swapDepth: swapDepth,
      swapFrom: swapFrom,
      swapLength: swapLength
    });
  })));
}

TreeNodeRenderer.defaultProps = {
  canDrop: false,
  draggedNode: null,
  swapDepth: null,
  swapFrom: null,
  swapLength: null
};
process.env.NODE_ENV !== "production" ? TreeNodeRenderer.propTypes = {
  canDrop: PropTypes.bool,
  children: PropTypes.node.isRequired,
  connectDropTarget: PropTypes.func.isRequired,
  draggedNode: PropTypes.shape({}),
  getPrevRow: PropTypes.func.isRequired,
  isOver: PropTypes.bool.isRequired,
  listIndex: PropTypes.number.isRequired,
  lowerSiblingCounts: PropTypes.arrayOf(PropTypes.number).isRequired,
  node: PropTypes.shape({}).isRequired,
  // Drop target
  path: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
  rowDirection: PropTypes.string.isRequired,
  scaffoldBlockPxWidth: PropTypes.number.isRequired,
  swapDepth: PropTypes.number,
  // used in dndManager
  swapFrom: PropTypes.number,
  swapLength: PropTypes.number,
  treeId: PropTypes.string.isRequired,
  treeIndex: PropTypes.number.isRequired
} : void 0;
export default TreeNodeRenderer;